1 Topic by Tavocado (edited by Tavocado 2007-07-25 18:35)

  • From: Dundee, Scotland
  • Registered: 2007-05-23
  • Posts: 5

Topic: Strict XHTML Problem

Hey there! To be perfectly honest I'm not the best of coders (or spellers >.<) so please bear with me!

I am in the middle of a new project and I am experiance a rather annoying problem. I have made a table which is as far as I am concerned is coded correctly but it dosn't display properly on certain browsers. The really odd thing is that it's FF, Opera and Safari opposed to the usual problematic IE6. Also if I have the page set in transitional XHTML the page displays as I want it but in strict XHTML it dosn't. Anyways the actual problem is a random gap which is appearing below images within a table.

Strict Example < problematic within FF, Opera and Safari

Transitional Example

I have placed a black border around the cell to highlight the issue. The really odd thing is that with the second image I set "font-size:0px;" which reduced the size of gap but hasn't eradicated it entirely. As it is FF, Opera and Safari I am led to believe that it is a problem with my code opposed to it being the browser just not rendering properly but I can't for the life of me get to the bottom of the problem.

Obviously the easy way around this would to simple code the site in Transitional XHTML but then I wouldn't be learning anything! Any help would be most appreciated smile Also I realise the code on the pages isn't completly valid but they are just quick examples I chucked together.

"was I created this way too?" - Pixel Otaku

Tavocado's Website

2 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Strict XHTML Problem

img {display: block} in your stylesheet or styleblock will fix the dispaly though it won't correct the errors with the page.

Check the validator. You need to get all the attributes such as height, width, border etc out of hte markup and use css instead. Also, strict doctypes are case sensitive, that is, lower case only for attribute names.

  • From: Dundee, Scotland
  • Registered: 2007-05-23
  • Posts: 5

Re: Strict XHTML Problem

As I said it was just a quick mockup to give an idea of what the problem was. I have cleaned the code and added "display:block;" and it is working perfectly big_smile

Thanks a lot for your help but I was wondering if you would be able to explain exactly why it is required? Is it a work around for a bug or does it actually serve a proper purpose?

"was I created this way too?" - Pixel Otaku

Tavocado's Website

4 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Strict XHTML Problem

Its there for a reason. An inline image is treated the same as inline text. The line box which is automatically generated to hold inline text has to allow for descenders in lower case text which fall beneath the baseline e.g. "j" and "g". When the image is rendered its bottom edge sits on the baseline that lowercase text without descenders would occupy so you see a gap below it. I'm told you can also fix it with {vertical-align: sub} for Firefox etc and {vertical-align:bottom} for IE if you need to display the img inline. I'm not sure but I suspect the reason the problem doesn't occur in IE is that it incorrectly treats the bottom edge of the descender as the baseline.

It isn't just images where this is relevant either. The other place you can run into similar problems is when trying to properly align form controls.

  • From: Dundee, Scotland
  • Registered: 2007-05-23
  • Posts: 5

Re: Strict XHTML Problem

Ok cool I'll keep all that in mind for the future. Thanks a lot not only for your help but helping me learn a little something smile Hopefully I won't come across anyother little annoyances!

"was I created this way too?" - Pixel Otaku

Tavocado's Website