I am not a webdesigner by any means, i only know enough to get my self into trouble.

Im trying to help a non-profit fix their webpage, and Im having a rotten time getting IE and Firefox to agree. the front page is a 3x3 grid of pictures that link to other pages. (some of the pictures are 2x wide).. it works just fine in FF -- all pictures are flush against each other. But IE keeps adding whitespace between the pictures within each row.

ive been hacking and poking at this a while, but nothing i do seems to make it better.

any help?

<!-- // FROM HTML FILE // -->

<div id="main_imagemap">
<div class="img">
<a href="involved.htm"><img src = "images/nw.jpg" align="left"></a>
<a href="video.htm"><img src = "images/nn.jpg"></a><br>
<a href="outlook.htm"><img src = "images/ww.jpg" align="left"></a>
<a href="about.htm"><img src = "images/ce.jpg"></a><br>
<a href="projects.htm"><img src = "images/sw.jpg" align="left"></a>
<a href="aboutus.htm"><img src = "images/ss.jpg" align="left"></a>
<a href="news.htm"><img src = "images/se.jpg"></a><br>
</div>
</div>


<!-- // FROM CSS FILE // -->

#main_imagemap 
{
   position:absolute;
   top:130pt;left:50pt;width:790;
   z-index:6;
}


div.img img
{
   display: inline;
   margin: 0px;
   padding: 0px;
   border: 2px solid #000000;
}
div.img a:hover img 
{
   border: 2px solid #F7EF6A;
}

6/15/2008 2:48:10 PM

try removing the boarder and just padding it, i am sure you have tried this but i had to suggest it just in case you had not.

6/15/2008 3:33:53 PM

try adding:

div#main_imagemap a img
{
   margin: 0;
   padding: 0;
   border: 0;
}

6/15/2008 3:47:22 PM

http://youtube.com/watch?v=9lzri8dn7p0

6/15/2008 4:05:09 PM

^ i need one of those right now.

^^ no, i dont get the idea

6/15/2008 4:15:43 PM

First, and this is very important. Are you declaring a doc type at the very top of the page?


also use...

Quote :

"#main_imagemap { position:absolute; top:130pt;left:50pt;width:790; z-index:6; } div.img img { display: inline; margin: 0px; padding: 0px; border: 2px solid #000000; } div.img a:hover img { border: 2px solid #F7EF6A; }"

use

#main_imagemap img

instead of

div.img img

[Edited on June 15, 2008 at 4:36 PM. Reason : .]

6/15/2008 4:33:32 PM

no im not using a doc type... for my css, i have

<link rel="stylesheet" type="text/css" href="style.css">

6/15/2008 4:57:30 PM

I found a solution on the interwebs.

#main_imagemap img
{
  display: inline;
  margin: 0px;
 *margin: 0 0 0 -2;
  padding: 0px;
  spacing: 1px;
  border: 2px solid #000000;
}
#main_imagemap a:hover img {border: 2px solid #F7EF6A;}

6/15/2008 5:28:31 PM

This is why you should stop developing for the internet.

6/15/2008 6:12:10 PM

i'm not sure if it's affecting anything, but I would consider it extremely poor style naming a class the same as a fundamental element - in your case "img"
even if it doesn't mess up the HTML paring, it's damned confusing

6/15/2008 6:16:45 PM

^^ hey fuck you and your internets. i do what i want.

^ good point. to be honest, i took this existing code over to "fix" it and add some features. i dont know who did it to begin with (somebody's brother's friend) but its all over the place. i dont want to rip it up and write it all over from scratch, but that's what it needs.

since i dont have time or motivation to do that (i aint getting paid here) ... i'll just do what it takes to get it working.

but i will change the "img" name.... i did think of that earlier, how it was a shitty convention.

6/15/2008 6:23:31 PM

good ol' css hacks

6/15/2008 7:51:51 PM

Quote :

"any help?"

Yes, get rid of the align="left" and the newlines between the links you want on the same line.

Code should look like this:

<a href="involved.htm"><img src = "images/nw.jpg" ></a><a href="video.htm"><img src = "images/nn.jpg"></a><br>
<a href="outlook.htm"><img src = "images/ww.jpg"></a><a href="about.htm"><img src = "images/ce.jpg"></a><br>
<a href="projects.htm"><img src = "images/sw.jpg"></a><a href="aboutus.htm"><img src = "images/ss.jpg"></a><a href="news.htm"><img src = 

"images/se.jpg"></a><br>

6/15/2008 8:53:36 PM

Quote :

"no im not using a doc type... for my css, i have"

that is also part of your problem. when you add a doc type you will see IE behave very very similar to any other browser. It will save you a massive headache.

6/15/2008 8:57:28 PM

Use a doctype and Google "IE box model bug".

[Edited on June 15, 2008 at 9:19 PM. Reason : durrrr]

6/15/2008 9:15:09 PM

^^^ I was going to say the same thing - what's the point of telling it to left align if your code is layed out properly?

[Edited on June 15, 2008 at 9:18 PM. Reason : i'm slow at this tww thing]

6/15/2008 9:17:10 PM

thanks for the help

ill try those suggestions tonight. what i have right now "works" in a loose sense, but it's not preferable.

everytime i try to "help" with webpages i wind up regretting it, because i basically get reminded that i dont know WTF i'm doing, and thus it takes me like 5 hours to do something it would take someone else 1.

6/16/2008 10:34:58 AM