Anyone seen this CSS bug before?

Mister_Pister

Mister_Pister

Mister_Pister

Associate
Joined
6 Feb 2003
Posts
1,105
Location
London
Basically this only happens in IE5.5 - its cool in all other browsers. These images are floated left to each other so they should in theory go side by side but IE puts a weird little gap inbetween them. Any idea how to get around this?


Shot at 2007-08-02
 
Correct widths, if any?

Post your menu HTML, it could be carriage returns forcing a physical gap if the CSS is fine.
 
Code: 
                <div class="active">
                    <img src="../Images/Menu/Nav_01.gif" name="image1" border="0" onmouseover="SwapImage1()"
                        onmouseout="SwapImage1Back()" alt="Home"></div>
                <div class="active">
                    <img src="../Images/Menu/Nav_02.gif" name="image2" border="0" onmouseover="SwapImage2()"
                        onmouseout="SwapImage2Back()" alt="Books"></div>
.....

the css applied to it:

* (line 18)

{

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

}

#Nav img (line 101)

{

float: left;

display: block;

width: auto;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}
 
If you set something to 0 then you don't need to set the unit, it's pointless. Zero is zero whatever unit it is. And instead of setting each side of padding and margin to 0 separately just use padding: 0; and margin: 0;
 
Warning: Untested code lies herein :p

I should expect it's the white space... the gaps between each image look suspiciously similar to two "spaces" (you know, space bar spaces).

I think it could be interpreting these two underlined sections:

Code: 
1___________<div class="active">
2___________<img src="../Images/Menu/Nav_01.gif" name="image1" border="0" onmouseover="SwapImage1()"
                        onmouseout="SwapImage1Back()" alt="Home"></div>
1___________<div class="active">
2___________<img src="../Images/Menu/Nav_02.gif" name="image2" border="0" onmouseover="SwapImage2()"
                        onmouseout="SwapImage2Back()" alt="Books"></div>

I reckon it thinks those are spaces. See you have a "space" before the div (1), and a "space" inside the div (2) for each image? I bet IE thinks those gaps are text spaces.

Maybe you can't see it, so I'm going to take the opportunity to tell you off for having messy code... Don't have messy code! Look how much nicer this is:

Code: 
<div class="active">
    <img src="../Images/Menu/Nav_01.gif" name="image1" border="0" onmouseover="SwapImage1()" onmouseout="SwapImage1Back()" alt="Home">
</div>
<div class="active">
    <img src="../Images/Menu/Nav_02.gif" name="image2" border="0" onmouseover="SwapImage2()" onmouseout="SwapImage2Back()" alt="Books">
</div>

Now you can see exactly what's inside what as it's all indented nicely :) But here you still have gaps, so muddling it around a bit like this might solve the problem:

Code: 
<div class="active"><img
     src="../Images/Menu/Nav_01.gif" name="image1" border="0" onmouseover="SwapImage1()" onmouseout="SwapImage1Back()" alt="Home"></div><div
 class="active"><img
     src="../Images/Menu/Nav_02.gif" name="image2" border="0" onmouseover="SwapImage2()" onmouseout="SwapImage2Back()" alt="Books"></div><div
 class="active"><img
     src="../Images/Menu/Nav_03.gif" name="image2" border="0" onmouseover="SwapImage2()" onmouseout="SwapImage2Back()" alt="Authors"></div><div
 class="active"><img
     src="../Images/Menu/Nav_04.gif" name="image2" border="0" onmouseover="SwapImage2()" onmouseout="SwapImage2Back()" alt="People"></div>

See what I've done? Between each </tag1><tag2> I've made sure there's no gap, by opening the next tag straight after closing the previous one. </tag1>_<tag2> will probably get interpreted as a space between the two tags.

It's ugly, but you can thank IE for that ;)

Also - I can't guarantee that's what the problem is, but it just so happens that I had this problem yesterday and this was the best fix for it.
 
Last edited:
Hmm, can you link us to it? IE developer toolbar will soon show me where the gap is coming from. I think it might be to due to spacing within your HTML.
 
i cant unforunatly its not online...plus the gap is only in IE5.5, its fine in 6/7...ill try removing the whitespace and the other code and post back :)

PS its not my code, im fixing up someone elses bodge job :P
 
ok removing the whitespace doesnt work, so ive put it back to a normal indent:

Code: 
            <div id="Nav">
                <div class="active"><img src="../Images/Menu/Nav_01.gif" name="image1" border="0" onmouseover="SwapImage1()" onmouseout="SwapImage1Back()" alt="Home"></div>
		<div class="active"><img src="../Images/Menu/Nav_02.gif" name="image2" border="0" onmouseover="SwapImage2()" onmouseout="SwapImage2Back()" alt="Books"></div>
		<div class="active"><img src="../Images/Menu/Nav_03.gif" name="image3" border="0" onmouseover="SwapImage3()" onmouseout="SwapImage3Back()" alt="Authors"></div>
                <div class="active"><img src="../Images/Menu/Nav_04.gif" name="image4" border="0" onmouseover="SwapImage4()" onmouseout="SwapImage4Back()" alt="People"></div>
                <div class="active"><img src="../Images/Menu/Nav_05.gif" name="image5" border="0" onmouseover="SwapImage5()" onmouseout="SwapImage5Back()" alt="Groups"></div>
                <div class="active"><img src="../Images/Menu/Nav_06.gif" name="image6" border="0" onmouseover="SwapImage6()" onmouseout="SwapImage6Back()" alt="Chat"></div>
                <div class="active"><img src="../Images/Menu/Nav_07.gif" name="image7" border="0" onmouseover="SwapImage7()" onmouseout="SwapImage7Back()" alt="Events"></div>
            </div>

only styles being used are:

Code: 
	  #Nav{float:left; margin:10px 0 4px 10px; width:816px; display:block;}
	  #Nav .active{float:left; }
	  #Nav img{float:left; display:block; width: auto; padding: 0; }

really am clueless as to why IE5.5 insists on this stupid gap!
 
try:
Code: 
#Nav img{float:left; display:block; width: auto; padding: 0; [b]margin: 0; border: none;[/b] }
incase it's adding a margin (or maybe an invisible border?) to any images...

Also try changing the html to this as there's alotta unecesarry <div>'s in there
Code: 
<div id="Nav">
    <div class="active">
        <img src="../Images/Menu/Nav_01.gif" name="image1" border="0" onmouseover="SwapImage1()" onmouseout="SwapImage1Back()" alt="Home">
        <img src="../Images/Menu/Nav_02.gif" name="image2" border="0" onmouseover="SwapImage2()" onmouseout="SwapImage2Back()" alt="Books">
        <img src="../Images/Menu/Nav_03.gif" name="image3" border="0" onmouseover="SwapImage3()" onmouseout="SwapImage3Back()" alt="Authors">
        <img src="../Images/Menu/Nav_04.gif" name="image4" border="0" onmouseover="SwapImage4()" onmouseout="SwapImage4Back()" alt="People">
        <img src="../Images/Menu/Nav_05.gif" name="image5" border="0" onmouseover="SwapImage5()" onmouseout="SwapImage5Back()" alt="Groups">
        <img src="../Images/Menu/Nav_06.gif" name="image6" border="0" onmouseover="SwapImage6()" onmouseout="SwapImage6Back()" alt="Chat">
        <img src="../Images/Menu/Nav_07.gif" name="image7" border="0" onmouseover="SwapImage7()" onmouseout="SwapImage7Back()" alt="Events">
    </div>
</div>

edit: Also, what's in that "active" class?
 
Removed the div's and killed the whitespace - both made no diff. i've got it to work by killing the floats and just having the images next to each other and using a negative left margin
 
You must log in or register to reply here.
Back
Top Bottom