Image "padding" driving me nuts!

ultranerds · November 23, 2010, 5:59pm

Hi,

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

http://ivideolounge.com/cgi-bin/page.cgi?p=test

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:

http://ivideolounge.com/cgi-bin/recommend.cgi?ID=51

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

TIA

Andy

ultranerds · November 23, 2010, 6:19pm

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

http://ivideolounge.com/bla.htm

Not sure it it will help though

Driving me nuts

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

	          <tr>
	            <td>
					<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>
				</td>
	          </tr>

system · November 23, 2010, 6:26pm

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).

ultranerds · November 23, 2010, 6:29pm

Hi,

Thanks for the reply - that didn’t fix it though (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 (:

TIA

Andy

system · November 23, 2010, 6:42pm

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

ultranerds · November 23, 2010, 6:59pm

Hi,

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

Which URL? All of them still look broken to me

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.

Cheers

Andy

system · November 23, 2010, 7:03pm

I’m looking at this one
http://ivideolounge.com/cgi-bin/page.cgi?p=test
and it looks fine… if I look where I’m suppose to

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

ultranerds · November 23, 2010, 7:04pm

Hi,

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

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

Cheers

Andy

system · November 23, 2010, 7:23pm

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?

ultranerds · November 23, 2010, 7:37pm

I think your looking at the wrong bit

See this image: http://ivideolounge.com/example.png

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

Cheers

Andy

system · November 23, 2010, 7:43pm

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

My final point is: try a CSS reset.

ultranerds · November 23, 2010, 7:45pm

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)

Cheers

Andy

system · November 23, 2010, 7:52pm

Again, add a CSS reset to your css files.

ultranerds · November 23, 2010, 8:02pm

Man, finally found it!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

…needed to be:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Wish I’d found that out earlier :S

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

Cheers

Andy

system · November 23, 2010, 8:10pm

Really???

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.

ultranerds · November 24, 2010, 7:26am

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

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

Cheers

Andy

Stomme_poes · November 25, 2010, 10:53am

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?

ultranerds · November 25, 2010, 12:33pm

Hi,

I’m not trying to validate it I’m not being paid enough for that 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

Cheers

Andy

Stomme_poes · November 25, 2010, 3:58pm

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 : )

ultranerds · November 25, 2010, 4:13pm

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