[SOLVED] XHTML doctype ruins styling?

Crow555 · #1 Jun 25th, 2008, 17:16

I've been working on our web app this afternoon and successfully managed to get a page transitional compliant. Trouble is now the styling is ruined. If I take the doctype header out, it's back to normal.

Some aspect of the styling still work (links have backcolour of yellow when they are active which is correct) but the links that were previously styled at buttons (borders, backcolours etc) now only have left and right border and are visibly shorter in height.

I guess what I'm trying to say in a roundabout way is that when I added this code

Code: Select all

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

the styling stopped working properly.

Any ideas?

moojoo · #2 Jun 25th, 2008, 20:45

Transitional:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Strict:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Should fix your problem.

Grubious · #3 Jun 26th, 2008, 00:58

Probably best next time to add the doctype when you first start the page.

Also, if it breaks when you add a doctype, its because you have coded to "quirks mode" (default mode when you dont have a doctype) and its suddenly being told to interpret it differently so if will break. Running it through the HTML validator (http://validator.w3.org/) should help you fix your issues as it will read your doctype, then read the rest of that code based on the doctype.

Crow555 · #4 Jun 26th, 2008, 10:20

It's a web app we've just bought over from another company and it's been around for about 5 or more years. I had original asked to make it accessible which I've done but now I've been asked to make it XHTML compliant (I'm assuming CSS 2.1 compliant too but I've pretty much done that already) which is why I am where I am now.

I've since posting this worked out that page is formated using tables. (I could take it away but it's would be a massive task) It seems as though the buttons/links mentioned above are contained within table data (<td>) which have not fixed to a smaller size. I guess I'll have to fiddle around with the cellpadding and cellspacing attribute.

It's a bit of a nuisense but I guess it's something I have to put with for the 50 odd pages I have to work on.

Crow555 · #5 Jun 26th, 2008, 14:06

I've made a few more discoveries. I found one of the pages that doesn't have any table styling. It consists of 4 CSS columns that resize according to browser width and have CSS buttons which are normally identical sizes.

I've made copies of the source and put it up on a server (it's normally on a secure server)

Page with tables:
No XHTML doctype defined
http://bbctest.marrakech.com/bbc/XHT...esNoXHTML.html
Transitional doctype defined.
http://bbctest.marrakech.com/bbc/XHT...blesXHTML.html

(Note the sizing on the buttons)

Page without tables for formatting.
No XHTML doctype defined
http://bbctest.marrakech.com/bbc/XHT...esNoXHTML.html
Transitional doctype defined
http://bbctest.marrakech.com/bbc/XHT...blesXHTML.html

(note loss of background and button links are various sizes in doctype version)

In both cases the only difference in the doctype being added. Why should the doctype affect the styling like this?

Bocaj · #6 Jun 26th, 2008, 15:42

Because the browsers interpreting it from a whole new perspective.

I can only thing of crummy similies to try and explain this (although it involves a yellow lemon

).

Maybe someone else could explain that better.

Once you've validated the page, things should start to work and you can start to fix things.

I strongly advice against fixing problems prior to validation (causes headaches in the long run).

Crow555 · #7 Jun 27th, 2008, 09:47

I actually took the unedited source and stuck it into firefox and got the exact same result as the doctype when viewed in IE7. I guess then that firefox was right all along and IE7 was displaying it wrong even though it was the result we wanted.

I guess I have a lot of fixing up to do. I hope this will help anyone else in the future. In future, the doctype will be the first thing to be changed.

Thanks again everyone.

Bocaj · #8 Jun 27th, 2008, 10:06

Yeah, i can only speak for myself but i've been stung by these kinds of issues in the past (and building a site of errors because it looked right, and the the headache of sorting out the errors).

But then you start to learn, and now i constantly validate, and check both IE/FF with every change, no matter how small. (i hate it when you make about a dozen changes, and something cocked up and you just can't see which one it is).

Crow555 · #9 Jun 27th, 2008, 11:14

It doesn't help that I've just started Web Dev. I was a VB.NET developer before this. Oh well, live and learn.

Thanks again for your help, really appreciate it.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Styling more than one list	Lchad	Web Page Design	7	Nov 2nd, 2007 08:09
[SOLVED] styling a div with a link and hover	lister110	Web Page Design	6	Oct 31st, 2007 15:33
[SOLVED] Doctype	mcdanielnc89	Web Page Design	3	Oct 21st, 2007 00:00
Validating XHTML - Am I choosing the right doctype?	swillicott	Web Page Design	5	Sep 20th, 2007 21:07
The frame ruins my page	KevinKeegan	JavaScript Forum	3	May 21st, 2007 19:46

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] XHTML doctype ruins styling?