Click to See Complete Forum and Search --> : need to adjust FF2 and IE to look like FF3


namooth
06-11-2008, 05:10 AM
Hey all, i have some CSS issues with my website.

here is a print screen from FF 3 RC2:

http://img505.imageshack.us/img505/188/capturekh6.png

and that's what i want to accomplish in all the other browsers.

but, in FF 2 it looks like this:

http://img341.imageshack.us/img341/6711/66tm1.jpg

and in IE it looks like this:

http://img516.imageshack.us/img516/7000/77li5.jpg

I don't get where those black dots are coming from..

<div class="centry">
// code that calls the thumnbnails
</div>

CSS related:

.centry a:link img, .centry a:visited img, .centry a:hover img,
.centry a:active img {
background: none;
padding: none;
border: none;
margin-right:5px;
margin-bottom:5px;
width: 60px;
height:60px;
float:left;

Thanks

WebJoel
06-11-2008, 06:31 AM
Without seeing the whole code or URL, -I assume that the 'image' is the clickable link? Adding "outline:none;" sometimes fixes this, that 'little outline' you get on image-anchors on-hover/on-active...

The little black dots are 'list-style'. To "li" add "list-style-type:none;"

While seeing the images posted is nice, to be really helpful, seeing the code is required (all of it).

namooth
06-11-2008, 06:39 AM
I tried adding outline:none; to my css but its still the same.
I didn't gave a URL because i removed the code from there (it messes up my site in browsers other than FF3) But i can write here any peace of my code that can help.

WebJoel
06-11-2008, 09:27 PM
I tried adding outline:none; to my css but its still the same.
I didn't gave a URL because i removed the code from there (it messes up my site in browsers other than FF3) But i can write here any peace of my code that can help. Then, do it. :) It's probably a typo somewhere (like "peace" instead of "piece"...:D )

Also, while "padding:none;" works, it really should be either omitted, or "padding:0;"

Centauri
06-11-2008, 10:54 PM
Looks like classic results from a mixture of display modes for <li>s and <a>s within a list. For best cross-browser capatability, float both the <a>s and <li>s and set the list style on the <li>s to "none".

Full code and css of the list will help diagnose the problem (or better still, a small example uploaded to a tempory location online, so we have the images to work with).