td heights in css between browsers

[A.N.Other]

I'll firstly say that I don't have an amazing understanding of all things html, css and php, though with a lot of Googling, I can generally muddle through. My photography portfolio site is the first real thing I've done and is a mish-mash of html tables and a little css that's been adapted and changed heavily along the way. I've recently changed it to have some php in it for e-mails and a guestbook and some javascript for displaying images but would like to get one extra thing sorted.

Here it is: www.gyphotography.co.uk

At the moment on the individual genre pages, where the thumbnails are displayed, I'm trying to get the images displaying in square boxes through css with:

.tables td {height: 100px; height: 85px !ie; width: 85px}

The way firefox does the heights, it needs the extra 15px to make it square whereas IE and Safari don't. With !ie I can make IE use the right values, but obviously safari doesn't pick this up and ends up with rectangular boxes.

Is there a way around this? Can anyone point me in the right direction? It's been like it ever since I did the site early last year, but I'd just like to get it sorted. Thanks

 

[Augmented]

This is due to the different defaults each browser has for rendering HTML elements. If you add a rule of padding: 0; to your .tables td {} selector, you should get the expected result:

.tables td {
padding: 0;
height: 85px;
width:85px;}

It would be a good idea to make use of one of the reset stylesheets knocking about; these are a set of rules that try and ensure all elements render equally across different browsers e.g. Y!UI's Reset CSS. Using this means you've got an equal starting point across the browsers when you're designing, and not have to worry about these default values getting in the way.

 

[A.N.Other]

Thanks mate. I did think it was probably something I just didn't know about, as it's a stupid little thing. Adding the padding: 0; worked fine and it now displays square in Firefox, Safari and IE.

However - and I don't think it was doing this before - the first row of images aren't in the middle of their boxes any more in Firefox and Safari (they're fine in IE) but they're centralised in the boxes in all of the other rows. Weird. I put that reset stylesheet link in for good measure on the landscapes page but it hasn't made any difference. Any ideas about that one?

Thanks again!

 

[Augmented]

Remove the <br /> element from each table cell, it's not needed and causing that problem. Alternatively, you can do it with css:

.tables td br {
display: none;}

 

[A.N.Other]

Genius. Thanks once again, that's sorted everything now

As I said, I generally learn by muddling through and then looking for solutions when I get stuck. Though it does work (sort of), when things do go wrong, I often don't really know where to start looking and it does leave some large holes in my knowledge ...