Image "padding" driving me nuts!

[ultranerds]

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]

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>

[noonnope]

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]

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

[noonnope]

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]

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

[noonnope]

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]

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

[noonnope]

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]

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

[noonnope]

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

My final point is: try a CSS reset.

[ultranerds]

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)

Cheers

Andy

[noonnope]

Again, add a CSS reset to your css files.

[ultranerds]

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

[noonnope]

Really???

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

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]

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.

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]

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]

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?

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]

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]

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

[Ed Seedhouse]

I'm not trying to validate it I'm not being paid enough for that

The Firefox "HTML Validator" add on will do it for you in a few seconds and a cut and paste operation. Sure the code will still be lousy, but at least it will be valid lousy code.

[ultranerds]

True, but I'm using a "template system", so the overall design is held in many many templates, all which are included to make the specific design. So not really as simple as doing that For example, we have a sidebar, copyright, header, footer, featured videos, etc)

Thanks for the suggestion though

[Ed Seedhouse]

True, but I'm using a "template system", so the overall design is held in many many templates, all which are included to make the specific design.

If you are using php for the backend, all you have to do is write a straightforward little program to run through all the files and clean them up with "tidy", which I believe is a built in function in the default package.

[ultranerds]

Hi,

Not using PHP I'm afraid

Its ok - I'm hoping we are gonna do a CSS re-work of the site at some point in the future, as it will most definatly help make the site faster (especially once it starts getting traffic)

Cheers

Andy