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?

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;
}

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.

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/

Have only really got into using CSS so have never used this before. Will go read up on it though as it seems like a much more sensible way of doing it.
Cheers

Can't seem to get it to do what I want.
Any help.

Say I had two images (link1.gif and link2.gif)
what would be the css and html code used so that when the user hovers the mouse over link1.gif it changes to link2.gif.

Thanks

Why not use CSS for image rollovers?

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?

AliBoy wrote:
> None of it is online at the moment...
>
> Changing the margin seemed to make it better so hopefully thats all
> thats causing the problem.

If your having to fiddle with margins between the two browsers, it's definatley the Box Model IE issue. FF is always right (well 99.9% of the time) so if it's wrong in IE, it's an IE bug that needs fixing not a css bug.

None of it is online at the moment...

Changing the margin seemed to make it better so hopefully thats all thats causing the problem.

AliBoy wrote:
> Something to do with one of the margins. Seems I can't have it at 84%
> for some reason.
> :-(
>
> Which now means I need to redo my images to make them fit the new
> size.
>
> Oh well.

It's probabl something rally simple like the IE BMH, but like the others have said, without code/URL, it's hard to fix.

Something to do with one of the margins. Seems I can't have it at 84% for some reason.
:-(

Which now means I need to redo my images to make them fit the new size.

Oh well.