Table Height Wrong in FireFox

Table cell height wrong in FireFox

[Ray_Dar]

Hi,

On a webpage I've built the top table cell appears too large in FireFox but okay in Internet Explorer. I've read a few threads on this forum to try and solve the issue but it's confusing me more.

Are there any simple solutions to this issue? The top table cell is too large and the rollover image inside the cell sits in the middle of the cell instead of being up against the top and bottom.

I can post the code if needed.

Thanks in advance.

Ray

[tedster]

Welcome to the forum's Ray.

What is your DTD? This sounds like one of the common issues that gets tripped by being in standards mode mode where IE does not display an image according to the standards. Reference this thread: Quirks Mode vs. Standards Mode - overview [webmasterworld.com].

The W3C standards recommendation is for browsers to render <img> elements as inline by default - the same as text. This means that the bottom of the image should be aligned to the text baseline, which allows a number of pixels below so that text characters with descenders, such as "g", "j" and so on have room for the character to be displayed. As I said above, IE gets this wrong.

The link I gave above discusses ways to fix the issue. And as with all cross-browser disply problems, the first step, always, should be to make sure the mark-up validates:

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

[Ray_Dar]

Hi Ted,

Thanks for the reply. Here is the URL to the site with the issue.

< edited >

I'm reading that page you mentioned at the moment.

Thanks for the help so far.

Ray

[edited by: tedster at 7:12 pm (utc) on Nov. 17, 2007]

[Ray_Dar]

Hi Ted,

I can't seem to fix it. I'm not really up to date with html and all the protocols used for this type of thing. I tried to set the table cell's properties to baseline and then others but that hasn't worked.

Any ideas other ideas welcome.

Thanks in advance.

Ray

P.S There is also a table border in F.F that should not be there. Any info on this also appreciated.

[tedster]

Try adding the attribute style="display:block;" to the <img> tag.

[Ray_Dar]

Hi Ted,

So do you mean like this -

<td width="139" valign="middle" bgcolor="#000000"><p align="left"><a href="index.htm">style="display:block;"<img src="images/buttons/home.jpg" name="home" width="138" height="34" border="0"></a></p></td>

Thanks again.

Ray

[tedster]

Attributes always go inside the tag for the element, just as you have already done with the src, name, width, height and border attributes. So it might look like this:

<img src="images/buttons/home.jpg" name="home" width="138" height="34" border="0" style="display:block;">

[Ray_Dar]

Hi Ted,

Thanks for the reply.

I placed that code inside the text as you instructed but it didn't seem to fix the page.

So for now, I've left the code in the page in case you want to check it yourself. Let me know if you need the url.

Annoying how browsers don't operate the same way. Any other ideas welcome.

Thanks

Ray

[edited by: Ray_Dar at 4:26 pm (utc) on Nov. 19, 2007]

[tedster]

Did you validate the HTML and CSS?

[Xapti]

You probably designed the page based off IE6's quirky-ass rendering. In my opinion, it's always best to code STANDARDS COMPLIANT, then add fixes for stuff like IE.
W3C Validating the HTML and CSS may let you know of a problem with the way your code was written.

[Ray_Dar]

G'day guys,

I built this site in DW, not sure what version of IE it used to render.

How do I validate the code?

Is there something else that can be done or a simple tutorial somewhere?

Cheers

Ray

[Ray_Dar]

Anyone else have any other ideas?

Cheers

Ray