[ramezk]

Hi Guys,

I'm placing images in an unordered list to form my navigation bar. In FF3 it looks fine, but in IE7, theres about a 3 pixel gap under the images (but not on top, as the list sits ply with the previous element). Any idea whats going on? Here's my CSS for the navigation:

ul#navbuttons, navbuttons ul {
	display: block;
	list-style-type:none;
	background-repeat:no-repeat;
	margin:0;
	padding:0;
	cursor:default;
	width:120px;
	float:left;
	margin-left:53px;
	margin-bottom:0;

}
		
#navbuttons li, li#navbuttons {
	list-style-type: none;
	display: block;
	background-repeat:no-repeat;
	float:left;
	margin-top:0;
	width:120px;
	margin-bottom:0;

}

#navbuttons a, a#navbuttons{
	overflow:hidden;
	background-repeat:no-repeat;
	margin-top:0;
	margin-bottom:0;
	
}

#navbuttons li a, li a#navbuttons { 
	margin:0;
	margin-top:0;
	margin-bottom:0;
}

#navbuttons img, img#navbuttons {
margin-top:0;
margin-bottom:0;



}

I really appreciate the help here.

[ramezk]

Ok guys sorted it with the inspiration of a fellow WDF'er.

Instead of writing my html code like this:

<ul>
<li>Top</li>
<li>Gear</li>
</ul

I did it like this:

<ul><li>Top</li><li>Gear</li></ul>

[Drewster]

Uhm, I've been looking at those two notations and I can't see any difference except for the line breaks in your code, you know that a browser does not see any difference, right... Line breaks in you code are ignored, you could write you entire html on a single line and it will render in exactly the same way... Same goes for css and js.

So I don't know what it is that made you problem go away but it wasn't removing the line breaks.

Edit:
Looking at your css, and especially your selectors. It would seem that you reuse a single id at least 3 times. Looking at your css I would say that you have an unsorted list, a list item and an anchor with an id of "navbuttons". So either there is an error in you css or you are reusing an id, which is not allowed in css.
But I find it hard to believe that you would want to select an anchor inside a list item inside a element with the id navbuttons, as well as selecting an anchor with the id navbuttons inside a list item. So I'm guesstimating that there is an error in you css.

[dangreaves92]

I would guess that his editor is adding a space after each line break.

[Drewster]

I checked, and your right, all versions of internet explorer, except IE8, put a space after the list item if there is a line break after the list item, and if there is no line break they put a space after a list item if there is a space between the list items in your markup (so outside the element) and all IE versions put a space after a list item if there is a space after the text inside the list item (still following?). IE6 just always puts a space there, no matter if there is one there or not. Other browsers do none of these things, which is as it should be. Good to know...

If this has anything to do with the problem is an other matter.