Image "padding" driving me nuts!


I’ve been going round and round and round with this one, and still not got anywhere :frowning:

You will notice the “spacing” between the menu, and the image that shows up below it. Same goes with the images at the bottom left + bottom right, with the rounder corners.

The bizarre thing - is that this works just fine:

I’ve tried removing the calls to the CSS, in case that was the issue, but it didn’t make the slightest difference

Anyone got any ideas?

…oh and I appologize for it being in tables - the guy I’m doing the job for made the design like that, and I’m just having to work with it :frowning:



BTW, you can see a much more basic version here :

Not sure it it will help though

Driving me nuts :frowning:

Even changing the <tr></tr> stuff with something simpler seems to have the same problem:

					<div id="menu_top"><a href="/"><img src="/images/home.jpg" alt="" width="135" height="48" border="0" onmouseover= src="/images/home_roll.jpg" onmouseout= src="/images/home.jpg" /></a><a href="<%config.build_root_url%>"><img src="/images/category.jpg" alt="" width="193" height="48" border="0" onmouseover= src="/images/category_roll.jpg" onmouseout= src="/images/category.jpg" /></a><a href="<%config.db_cgi_url%>/add.cgi"><img src="/images/upload.jpg" alt="" width="161" height="48" border="0" onmouseover= src="/images/upload_roll.jpg" onmouseout= src="/images/upload.jpg" /></a><a href="<%config.db_cgi_url%>/user.cgi?signup_form=1"><img src="/images/account.jpg" alt="" width="163" height="48" border="0" onmouseover= src="/images/account_roll.jpg" onmouseout= src="/images/account.jpg" /></a><a href="<%config.db_cgi_url%>/myfaves.cgi"><img src="/images/help.jpg" alt="" width="121" height="48" border="0" onmouseover= src="/images/help_roll.jpg" onmouseout= src="/images/help.jpg" /></a><a href="<%config.db_cgi_url%>/user.cgi"><img src="/images/login.jpg" alt="" width="137" height="48" border="0" onmouseover= src="/images/login_roll.jpg" onmouseout= src="/images/login.jpg" /></a></div>
					<div style="background: url(/images/bg_12.jpg); height: 30px; "></div>


Actually, it’s pretty straight forward:

  • in the “good” one you have an empty <td>:
    <td height="37" style="background: url(/images/bg_12.jpg)"></td>
  • while in the “bad” one you have an image element in the same <td>:
    <td height="37"><img src="/images/bg_12.jpg"></td>

That makes the <td> height in the “good” one to be 37px (because background images are not affecting an element height) and the height in the “bad” one to be 42px (because an image element inside it makes it readjust its height).


Thanks for the reply - that didn’t fix it though :frowning: (Also, see the above post - as I’ve changed how that code is done, in case it was a cell padding issue or something)

I’ve tallied up the number of tr, /tr , td /td , table /table div /div tags, and they all seem to match up - so I’m pretty sure its not a missing tag somewhere

Driving me up the wall (:



I didn’t provide you with a fix, rather with an understanding, hopping you’d know what to do with it :slight_smile: Did you look at it now? It seems OK to me :slight_smile:


Did you look at it now? It seems OK to me

Which URL? All of them still look broken to me :frowning:

I’m just having a go with designing it in a CSS template instead, cos I REALLY despise table - real PITA almost every time I work with them.



I’m looking at this one
and it looks fine… if I look where I’m suppose to :slight_smile:

The green “your marketing plan” top edge is aligned with the red top edge.


The issue is with the “red” space thats showing up between the menu and the “grey” bar that shows up with it :slight_smile:

Same with the bottom left + bottom right images (the “rounded” corner ones) … seems to just be some padding coming from somewhere :confused:



I must be seeing things. The red band under the

<div id="menu_top"

and above the

<div style="background: url(/images/bg_12.jpg); height: 30px; "></div>

is present in both your initial links ???

Why did you said it’s fine in the second link? Am I looking at what I should?

Have you tried a CSS reset yet?

I think your looking at the wrong bit :slight_smile:

See this image:

The first one is “bad” (which is what we see on all the URL’s, appart from recommend.cgi one)

The second one is how it should look, but doesn’t :frowning:



You should check again your links. Those are not the ones in your latest screenshots.

My final point is: try a CSS reset.

You sure? I just double checked all of them, and they are all showing up how I expected (with the recommend.cgi one being the only one thats ok)



Again, add a CSS reset to your css files.

Man, finally found it!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “”>

…needed to be:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>

Wish I’d found that out earlier :S

Thanks anyway - just gotta work out why the “bottom corner” images are not working right now :confused:



Really??? :shifty:

That means you do have errors in your markup. Validation errors. That didn’t go away when changing the DTD, trust me!

But since it appears you work on a different set of pages than those you’ve posted, I can only guess.

Yeah, tell me about it. Thats why I wanted to go from a CSS design from stage 1, but it was giving to me in Table format, and not being paid enough to re-do the whole design into CSS :frowning:

Ah well - will have to have validate the pages once the rest of the site is done.



Is validation even worthwhile with a Tranny doctype? That allows pretty much anything in… font and center tags, align attributes, whatever.

Anyway, I didn’t look at the code closely but is this the mysterious gap under images?


I’m not trying to validate it :slight_smile: I’m not being paid enough for that :stuck_out_tongue: When (if) he decides to convert the site into using pure CSS /XHTML, instead of crappy tables - then I will validate it

…and yes, thats the padding issue I had (the menu above, had a “space” between it and the cell below) … same with the other images.

Either way, changing the strict type seems to have done the trick :rolleyes:



Well in that link, the mysterious gap goes away if you either put the image in block context OR set the vertical-align to something other than the default (I use bottom) so possibly that would work. If those don’t work, it’s not the same gap : )

Ah ok - well its gone now … don’t wanna spend any more time testing it :smiley: I’ve just about had enough with this job :wink: