...

View Full Version : Really confused by 'background-image' behavior



GreenwoJ
02-24-2009, 03:06 PM
Ok,

Well I've spent almost 2 hours trying to work this one out, and have given up - therefore I bet it's really easy and I've just missed it! :rolleyes:

Basically I've created a table with the first row being 110 high, the same height as the associated logo GIF. I'm then adding a background image (again 110 high) to fill any remaining space in the cell.

The problem is I'm getting 2 or 3 white pixels below the logo, as if there's a <BR> following the <IMG> tag???? The really fun part is that if I increase the size of the background image to 113, it fills the white space, which seems to suggest there is something around the logo increasing the row height? But, if I remove the background-image from the CSS, the excess pixels disappear from below the logo!!!! :eek:

I can't get my head around this one, so any advice would be much appreciated.

Regards,
John Greenwood.

The HTML is;

<table border="0" cellpadding="0" cellspacing="0" width="1000" class="page">
<!-- Logo -->
<tr height="110">
<td colspan="5" class="logo"><img src="/images/logo.gif" alt="" height="110" width="362" /></td>
</tr>
<!-- Photos -->
<tr height="158">
etc etc.....

The CSS is;

body {
background: #ff9900;
font-family: arial, verdana, sans-serif;
font-size: 12px;
text-align: left;
margin: 10px;
}

.page {
margin-left: auto;
margin-right: auto;
border: 1px solid #ffffff;
}

.title {
background-image: url('/images/logo-background.gif');
border-bottom: 2px solid #000000;
}

jerry62704
02-24-2009, 03:11 PM
Try adding this:

img {display:block;}

abduraooft
02-24-2009, 03:12 PM
Have a try by adding

td.logo img{
float:left;
} into your CSS.

PS: Do you know why tables are very bad for layout (http://www.hotdesign.com/seybold/)?

Add
][/COLOR] tags around your code while posting here.

VIPStephan
02-24-2009, 03:15 PM
Try adding this:

img {display:block;}

And hereís the reason why: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

I agree that tables should never be used for a page layout. They are only meant for tabular data such as a phone directory or stock market listings or similar stuff.

GreenwoJ
02-24-2009, 03:15 PM
Hiya,


Try adding this:

img {display:block;}

Thanks for that, now I need to go and try and understand 'why' it has fixed things :thumbsup:

I've not posted on here before, but you came well recommended by a web developer contact of mine. This is the way forums are supposed to work, sensible answers really quickly - very impressive!

Chat soon.

redspyder
02-24-2009, 03:17 PM
hi John,

Add this to your css:



img
{
border:0;
margin:0;
padding:0
}


All the best - redspyder

VIPStephan
02-24-2009, 03:19 PM
hi John,

Add this to your css:



img
{
border:0;
margin:0;
padding:0
}


Which should take care of any browser defaults affecting the image [Ö]

Images have no default margin or padding so thereís no need to add this. Iíve posted the reason for the gaps above.

redspyder
02-24-2009, 03:47 PM
Images have no default margin or padding so thereís no need to add this. Iíve posted the reason for the gaps above.

Sorry about that, post corrected.

All the best - redspyder

jerry62704
02-24-2009, 03:54 PM
Images are inline items like text. And like text they have a space at the bottom for descender on letters (like "y"). By changing it to block, you eliminate the need for them so the whole thing sits on the bottom of the line instead of above it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum