CSS: IE & FireFox (Hidden Items) -[RESOLVED]-

On my navigation bar on my site I have a rollover of the images, to preload the images "before" the user rolls over them I include them after the image. But I use a CSS file with this linein to stop them actually being displayed (kinda like forcing it to cache the image so its ready).

Code:

---

#HiddenItems          { VISIBILITY: Hidden; DISPLAY: none;      }

---

The only thing is I have came to install FireFox (eventually) and when I viewed my site I noticed that this does remove the images anymore and results in 3 navigation bars one after another.

Does anyone know a way to set something invisible that works accross browsers?

Thanx.

I've always used visibility: hidden;

it might be case sensitive. try all lower case.

also, you onMouseLeave should be onMouseOut.

one thing about hiding them is that the page still makes room for them. which could cause scrollbars to appear even though when the user scrolls down there is nothing there.

Did you try using IE to view it? cause its the display one that stops it reserving space I think. Also the "onmouseleave" seems to work on IE, will "onMouseOut" work on both? Well I'm about to try it anyway....

Nope, changing the case didn't change anything. The onMouseOut works on both though :D. Even though the animation goes straignt to the last frame in FireFox :confused:.

onmouseleave is IE-proprietary.

CSS is case-insensitive, as far as the host language (HTML or XHTML, usually) permits it: element names are case-insensitive when linking to HTML because they are insensitive there, but case-sensitive when linking to XHTML because they're sensitive there.

Is HiddenItems the id? If it's only the name then that would be a reason why it would work in IE and not in Mozilla (maybe, I see this behaviour with document.getElementById).

Quote:

---

Posted by CornedBee
Is HiddenItems the id? If it's only the name then that would be a reason why it would work in IE and not in Mozilla.

---

yes the code for the hidden items is:

Code:

---

      <SPAN id='HiddenItems'>
      <IMG SRC='Images/Logo1.gif'><br>
      <IMG SRC='Images/Examples1.gif'><br>
      <IMG SRC='Images/Articles1.gif'><br>
      <IMG SRC='Images/Electro2DE1.gif'><br>
      <IMG SRC='Images/Projects1.gif'><br>
      <IMG SRC='Images/PCCase1.gif'><br>
      <IMG SRC='Images/Logo2.gif'><br>
      <IMG SRC='Images/Examples2.gif'><br>
      <IMG SRC='Images/Articles2.gif'><br>
      <IMG SRC='Images/Electro2DE2.gif'><br>
      <IMG SRC='Images/Projects2.gif'><br>
      <IMG SRC='Images/PCCase2.gif'><br>
      </SPAN>

---

Quote:

---

Posted by CornedBee
maybe, I see this behaviour with document.getElementById

---

Sorry you lost me there, I've seen this used somewhere before but dont remember where or know what its for :).

I'm not sure why the onMouseOver and onMouseOut are both skipping to the last frame. I tried validating your .css file. It said you're not allowed to change the colours of the scrolbars. But more importantly, is said parse error on this line, and many more:

Code:

---

#PageLink:Hover      { COLOR: Red;  }      BACKGROUND: Orange;  }

---

You've closed those curly brackets twice, but only opened them once. This makes the parser not understand what's going on.

Quote:

---

Originally posted by Acidic
I'm not sure why the onMouseOver and onMouseOut are both skipping to the last frame. I tried validating your .css file. It said you're not allowed to change the colours of the scrolbars. But more importantly, is said parse error on this line, and many more:

Code:

---

#PageLink:Hover      { COLOR: Red;  }      BACKGROUND: Orange;  }

---

You've closed those curly brackets twice, but only opened them once. This makes the parser not understand what's going on.

---

Ow I meant to delete that, opps. I used to have a style that used the background bit then I changed it when i redesigned my site. I just closed the bracket as a temp. thing (turned out not so temp :blush:). I relied on the fact it was ignoring the stuff after the closing bracket., Will fix that now. Thanx

also, in listing your updates. you have several spans with the same id. This is not allowed. Since you're using CSS to change the look of these it get's tricker to fix. CSS3 would do it, but IE doesn't support it.

I'm not sure how to easily fix this problem.

I'm off to go and cry :cry:. That fixed it :confused:. Must have been messing it up having those bracket things :(. That'll teach me :D.

Quote:

---

Originally posted by Acidic
also, in listing your updates. you have several spans with the same id. This is not allowed. Since you're using CSS to change the look of these it get's tricker to fix. CSS3 would do it, but IE doesn't support it.

I'm not sure how to easily fix this problem.

---

Using Classes, Thats one thing I've been meaning to do as well but haven't had time yet, will get round to it thiss week. The template would be easy to change the id's to classes but all the other files will use the id as well and its gonna take a while to search though all my pages to change it.

oh yeah, classes. I forgot about them. hehe, they are the most basic CSS thing there is.

edit: As to the images skipping to the last frame. try change the onMouseOver and onMouseOut to:

Code:

---

onMouseOver="this.src='myImg.jpg'"
or:
onMouseOut="this.src='myImg.jpg'"

---

Quote:

---

Originally posted by Acidic
oh yeah, classes. I forgot about them. hehe, they are the most basic CSS thing there is.

edit: As to the images skipping to the last frame. try change the onMouseOver and onMouseOut to:

Code:

---

onMouseOver="this.src='myImg.jpg'"
or:
onMouseOut="this.src='myImg.jpg'"

---

---

No luck unfortunetly, as you can see I changed it for the projects button.

Thinking of it normally when there is more than one image of the same animation they all run in sync, well if its still animated the Hidden ones they will be on the last frame always cos the animation isn't a looping one. Haven't got a clue how to solve that apart from removing the hiddenitems in the first place.

Quote:

---

Originally posted by Electroman
Haven't got a clue how to solve that apart from removing the hiddenitems in the first place.

---

I don't suppose you want a flash thingy on the site?

I don't know any flash :(.
I dunno I think when I have time to learn to use flash I might do. Probably be in the summer now before I have a chance to make any major chnages to my site.

Action script (the code in flash files) is very similair to JavaScript. Designing flash requires artistic skill though, I don't have this. Luckily I know people who do.

Anways, there should be a way of solving this without flash. I just can't think of it.

Well. At least we got the hidden thing working.

Yeah I nearly forgot about the resolved thing there.
BTW I dont really know any javascript, just little snipits. I know C++, VB & PHP, thats about it :D.
yeah I can't really draw too well either.