Anyone seen this CSS bug before?

Mister_Pister · 2 Aug 2007 at 11:25

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

Mister_Pister · 2 Aug 2007 at 12:08

yep all set to 0

Mister_Pister · 2 Aug 2007 at 12:19

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;

}

Mister_Pister · 2 Aug 2007 at 13:33

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

Mister_Pister · 2 Aug 2007 at 13:49

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!

Mister_Pister · 2 Aug 2007 at 17:05

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