Viewing Thread:
"CSS problem?"

Been designing a small site, quite basic. Using CSS to have a navigation bar at the left side with a picture at the top and then some links and information.
On the rest of the page is just some text and images.

Have been using firefox and everything is fine, just checked to see how it looks in IE and the bar doesn't appear as expected. Everything on the navigation bar has been pushed down and now appears below the text and imaes that are on the rest of the page but the picture is still at the top.

Can't work out why its like that, maybe have something to do with the image using as the background?

Any ideas?

Well, depends how you've got it setup, but say for arguments sake you've got a menu with id "menu" and it's an unordered list:

ul#menu li {
background-image: url('images/list_default.gif');
}
ul#menu li:hover {
background-image: url('images/list_hover.gif');
}

It'll need tweaking, because presumable you'd have tags within your

tags, but that's the jist/

Unfortunately that example will not work for Internet Explorer (bar the upcoming IE 7), as current IE's only support :hover on hyperlinks.

Another problem with CSS rollovers is in Internet Explorer, there is a flickering effect when the mouseover takes place.

AliBoy wrote:
> Noticed another thing. I'm using some JS to change images when you go
> over them with the mouse (for links). Again all is ok in firefox but
> in IE each of the images has a white line underneath it. Only the
> ones using the JS have this, none of the other images.

> Take it this is to do with the css and ie again?

Yes. It has a simple solution though.

img {
display:block;
}

or

#whatever img {
display:block;
}