5 replies [Last post]
d4v3m0nk
Offline
newbie
USA
Last seen: 14 years 49 weeks ago
USA
Timezone: GMT-8
Joined: 2008-02-18
Posts: 5
Points: 0

Forgive me for what I can only imagine is a really basic question, but trying to search for what I'm after on this site has - so far - come up with no hits, so here goes.

I've created a small site that at the very top has a large graphic. I've split that graphic up into 4 rows of 2 columns. Page is set to






... {more_html_code}

Here's the CSS for both mainpage and topbanner:

#mainpage{
position:relative;
width:600px;
background-color: #ffeeff;
vertical-align: top;}

#topbanner{
position: relative;
width: 600px;
}

When I look at this in FF, all is fine - whereas when I look at it in IE, there's gaps underneath each row.

I had had a height style applied to the mainpage which I thought might be messing it up, but having removed this, it makes no difference. I've even removed all the other content below the images so that I've just got the images themselves : again, makes no difference. Nor does making the mainpage width wider than needed...

I'm now wondering if there's some wierd or wacky image thing that I'm missing between IE and FF? I've attached two small screenshots so that you can see what I'm talking about...

Any help would be extremely grateful - I've been working on this all day and got nowhere...

Regards,

Dave

AttachmentSize
FF_OK.jpg9.37 KB
IE_GAPS.jpg10.04 KB
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Make the images display:

Make the images display: block.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

d4v3m0nk
Offline
newbie
USA
Last seen: 14 years 49 weeks ago
USA
Timezone: GMT-8
Joined: 2008-02-18
Posts: 5
Points: 0

If only it were that simple?!

Tyssen,
Thanks for following up, but it hasn't made any difference. I've put the site up on a test server - please feel free to have a look over it:

http://www.britsolutions.net/test/

As you can see, I've coloured the 'mainpage' a most butch pink / purple / mauve colour just so that I can see what's going on.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 38 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try img{vertical-align:bottom

Try
img{vertical-align:bottom;}

d4v3m0nk
Offline
newbie
USA
Last seen: 14 years 49 weeks ago
USA
Timezone: GMT-8
Joined: 2008-02-18
Posts: 5
Points: 0

Ah ha! Result!

DanA,
I've always been a < table > kinda guy but realise the power and ease with which CSS can be used and so am converting my HTML over and it's "little" (but frustrating) things like this that sap up so much time.

That definitely cured it - make I ask as to why it was an issue? Is this something that I need to be wary of in the future? Was it something that I did incorrectly?

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 38 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Your issue is a common one

Your issue is a common one with 3 fixes (without the code Tyssen suggested the most frequent fix).
There was a very good article about that by Gary Turner but it isn't online.
Here is another article :
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps
You should use valid code before applying any fix.