table to big!

Lemur posted this at 15:55 — 20th August 2007.

He has: 13 posts

Joined: May 2007

Hi,

Im trying to get my site to look all pritty in firefox, but its not working!

http://score-media.com/test/

can any one show me the way forward on making the left nav and the image the same hight?

Regards,
Lee

webwiz posted this at 19:13 — 20th August 2007.

He has: 629 posts

Joined: May 2007

Hi Lemur,
In brief, you can't. Text can be resized, and there are browser differences in verical spacing of text, as you have discovered. There is categorically no relationship between text size on your visitor's computer and the pixel size of an image, despite assertions to the contrary.

Having said that, there are a couple of solutions that come to mind:

1) You could give the cell containing the image a background colour that matches the image's, and vertically center the image;

2) You can size the image using EMs (via the style sheet) to match the size of the navigation (also sized vertically in EMs). You would need a larger image if you want to keep the quality, though. Enlarged images usually look ugly.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Lemur posted this at 10:58 — 21st August 2007.

He has: 13 posts

Joined: May 2007

Thanks David!

This will not be any use to me because this image is not the final image, i plan to have a random image script in its place.

So back to the drawing board it was and i have decided to do the site using div boxes. I have never done this before so its something new and i have run into 1 probem so far.

Margin-top:0px; is not working in firework, is there anyway round it?

this is what i have so far;

Regards,
Lee

webwiz posted this at 21:25 — 21st August 2007.

He has: 629 posts

Joined: May 2007

Hi Lemur,
I don't see a problem in Firefox, if that's what you meant. Where is the margin-top not being applied?

I see you have abandoned tables for a CSS layout. Good for you. You may not need as many CSS rules as you think. Take a look at my effort to do the same thing:

Also, I don't see why you can't use ems to resize just about any image. Just make the width and height in ems proportional to the pixel sizes. Anyway, you are going for a fixed pixel layout, so my suggestion may not work for you.

One more idea, though: Make the image a background image, then you can make the box a fixed size, hiding any excess width or height and matching it up perfectly.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Lemur posted this at 14:23 — 23rd August 2007.

He has: 13 posts

Joined: May 2007

Think i have got it!?

Thanks for your help, much appreciated!

Regards,
Lee