CSS in IE grrrr

[edbarton]

As a preface, yes, I know you could make a whole forum dedicated to my css problems, but hopefully the persistence might pay off.

As much as I love CSS, IE is being a bit of a prat with it.

I've got a div, and a load of images (linked) in it. In mozilla, firefox etc. there is no line break in between the images, but for some reason IE decides to do one.

The code is the following.

<div id="nav">
 	  <a href="http://www.bluewebdesign.co.uk" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/roll_06.gif',1)"><img src="images/index_06.gif" alt="Home" name="Home" width="179" height="24" border="0" id="Home" /></a>
 	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('whatwedo','','images/roll_07.gif',1)"><img src="images/index_07.gif" alt="What we do" name="whatwedo" width="179" height="26" border="0" id="whatwedo" /></a>
 	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ourwork','','images/roll_08.gif',1)"><img src="images/index_08.gif" alt="Our work" name="ourwork" width="179" height="25" border="0" id="ourwork" /></a>
 	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/roll_09.gif',1)"><img src="images/index_09.gif" alt="Contact Us" name="contact" width="179" height="25" border="0" id="contact" /></a>
 	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Extras','','images/roll_10.gif',1)"><img src="images/index_10.gif" alt="Extras" name="Extras" width="179" height="24" border="0" id="Extras" /></a>  
   </div>

and the css

#nav {
 	height: 124px;
 	position: absolute;
 	width: 179px;
 	top: 81px;
 	right: 0px;
 }
 #nav a {
 	margin: 0;
 	padding: 0;
 }
 #nav img {
 	margin: 0;
 	padding: 0;
 }

Code highlighted in red is stuff I tried, but it didn't do much to help.

I can post the bit up if you need help or a screener to it, but I think what I've said is pretty much self-explanatory.

Cheers,

Ed

[Spiral]

You could try adding vspace="0" and hspace="0" to the images.

Not really sure what would cause that.

[edbarton]

Yeah, neither am I. Tried that, didn't work though. :S

[imaginemn]

Remove the VbCrLf (line breaks in your code).

<div id="nav">
<a href="http://www.bluewebdesign.co.uk" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/roll_06.gif',1)"><img src="images/index_06.gif" alt="Home" name="Home" width="179" height="24" border="0" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('whatwedo','','images/roll_07.gif',1)"><img src="images/index_07.gif" alt="What we do" name="whatwedo" width="179" height="26" border="0" id="whatwedo" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ourwork','','images/roll_08.gif',1)"><img src="images/index_08.gif" alt="Our work" name="ourwork" width="179" height="25" border="0" id="ourwork" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/roll_09.gif',1)"><img src="images/index_09.gif" alt="Contact Us" name="contact" width="179" height="25" border="0" id="contact" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Extras','','images/roll_10.gif',1)"><img src="images/index_10.gif" alt="Extras" name="Extras" width="179" height="24" border="0" id="Extras" /></a>  
</div>

imaginemn

[edbarton]

Thanks for that, surely its pretty stupid that IE treats them as actual line breaks?

[Jazzee]

Originally Posted by edbarton

Thanks for that, surely its pretty stupid that IE treats them as actual line breaks?

There are a lot of stupid things that IE does.

[Brian]

This is what happens when you have a browser that hasn't been updated for quite a while, and won't be updated for a few more years.

It sucks the monkeys nut.

[Sketch]

I think when I was trying to do a website with CSS in IE I had problems using the

 #ID a

Instead of

 a.ID

If that makes sence.

So maybe try

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('whatwedo','','images/roll_07.gif',1)" class="ID"><img src="images/index_07.gif" alt="What we do" name="whatwedo" width="179" height="26" border="0" id="whatwedo" /></a>

.nav {
 	height: 124px;
 	position: absolute;
 	width: 179px;
 	top: 81px;
 	right: 0px;
 }
 a.nav {
 	margin: 0;
 	padding: 0;
 }

I don't know if that will help at all, but I had the same sort of problem and it fixed it (leave the #ID there because it will work for Mozila ect, yet IE doesn't like it)