HTML/CSS Doctype Issue

LondonVirus

11-03-2009, 11:04 AM

Hi,

I have some issues with the site I am working on, I have spent 5 hours looking for a solution on the web but I can't seem to find it. The problem is that I have coded a page in HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta name="description" content="SM1 & SM2 Local Magazine">
<meta name="keywords" content="SM1, SM2, Magazine">
<meta name="author" content="MG Computers And Electronics">

<link rel="stylesheet" type="text/css" href="CSS/Default.css">

<title>Welcome to SM1 & SM2Local</title>
</head>

<body>

<div id="div0">

<div id="div1">
<img src="Images/Magazine/2009/Nov2009/November_2009_Banner.jpg" height="100" width="1000" border="0" alt="Please Upgrade Browser">
</div>

<div id="div2">
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_Logo.gif" height="50" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_5Blank.gif" height="50" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_Home.gif" height="20" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_3Blank.gif" height="30" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_Local_News.gif" height="20" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_1Blank.gif" height="10" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_E-magazine.gif" height="20" width="200" border="0"alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_1Blank.gif" height="10" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_Competitions.gif" height="20" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_3Blank.gif" height="30" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_About_Us.gif" height="20" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_1Blank.gif" height="10" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_Contact_Us.gif" height="20" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_3Blank.gif" height="30" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_Editor.gif" height="20" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_1Blank.gif" height="10" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_Webmaster.gif" height="20" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_3Blank.gif" height="30" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_Advertise_With_Us.gif" height="20" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_5Blank.gif" height="50" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_5Blank.gif" height="50" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_3Blank.gif" height="30" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_1Blank.gif" height="10" width="200" border="0" alt="Please Upgrade Browser"></a>
<a href="Index.html"><img src="Images/Magazine/2009/Nov2009/Menu/Nov2009_Menu_Bottom.gif" height="45" width="200" border="0" alt="Please Upgrade Browser"></a>

</div>

<div id="div3">

This site is currently being built by<br>
MG Computers And Electronics: 08000 304 764<br>

<br>

A copy of the paper based magazine can be downloaded from here
<a href="Downloads/Magazine/2009/November_2009.pdf">November_2009</a><br><br>

<font size="2" face="verdana" color="red">
Please note, the site is expected to be fully working by the 1st of November 2009<br><br>
We estimate 10,000 viewers per month, starting from the first week of November 2009<br><br>
Should you wish to be one of the first to advertise on our site, please contact us<br>
Webmaster.SM1Local@MGComputersAndElectronics.co.uk
</font>

</div>

<div id="div4">
<a href="Webmaster.html"><img src="Images/Adverts/Static_Adverts/Defaults/Placed_Advert_banner.jpg" height="100" width="200" border="0" alt="Please Upgrade Browser"></a>
</div>

<div id="div5">
<a href="Webmaster.html"><img src="Images/Adverts/Static_Adverts/Defaults/Placed_Advert_banner.jpg" height="100" width="200" border="0" alt="Please Upgrade Browser"></a>
</div>

<div id="div6">
<a href="Webmaster.html"><img src="Images/Adverts/Static_Adverts/Defaults/Place_Advert_banner.jpg" height="100" width="200" border="0" alt="Please Upgrade Browser"></a>
</div>

<div id="div7">
<a href="Webmaster.html"><img src="Images/Adverts/Static_Adverts/Defaults/Place_Advert_banner.jpg" height="100" width="200" border="0" alt="Please Upgrade Browser"></a>
</div>

<div id="div8">
<a href="Webmaster.html"><img src="Images/Adverts/Static_Adverts/Defaults/Place_Advert_banner.jpg" height="100" width="200" border="0" alt="Please Upgrade Browser"></a>
</div>

<div id="div9">
<a href="Webmaster.html"><img src="Images/Adverts/Static_Adverts/Defaults/Place_Advert_banner.jpg" height="100" width="200" border="0" alt="Please Upgrade Browser"></a>
</div>

<div id="div10">
<a href="http://www.RebeccasKitchen.co.uk" target="_blank"><img src="Images/Adverts/Static_Adverts/Rebeccas_Kitchen/Rebeccas_Kitchen_Banner.jpg" height="100" width="1000" border="0" alt="Please Upgrade Browser"></a>

</div>

</div>

</body>

</html>

The page has external CSS file:

Body {
Color: #000000;
Font-Family: Verdana;
Background-Color: #FFF68F;

margin: 0px;
}

A:Link {
Color: #FFD600;
Font-Family: Verdana;
Text-Decoration: none;
}

A:Hover {
Color: #FFD600;
Font-Family: Verdana;
Text-Decoration: none;
}

A:Active {
Color: #FFD600;
Font-Family: Verdana;
Text-Decoration: none;
}

A:Visited {
Color: #FFD600;
Font-Family: Verdana;
Text-Decoration: none;
}

#Div0 {
Position: Absolute;
left: 10%;

}

#Div1 {
Position: absolute;

Top: 5px;
Left: 5px;

Width: 1000px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div2 {
Position: Absolute;

Top: 110px;
Left: 5px;

Width: 200px;
Height: 625px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFF68F;

margin: 0px;
}

#Div3 {
Position: Absolute;

Top: 110px;
Left: 210px;

Width: 590px;
Height: 625px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div4 {
Position: Absolute;

Top: 110px;
Left: 805px;

Width: 200px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div5 {
Position: absolute;

Top: 215px;
Left: 805px;

Width: 200px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div6 {
Position: absolute;

Top: 320px;
Left: 805px;

Width: 200px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div7 {
Position: absolute;

Top: 425px;
Left: 805px;

Width: 200px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div8 {
Position: absolute;

Top: 530px;
Left: 805px;

Width: 200px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div9 {
Position: absolute;

Top: 635px;
Left: 805px;

Width: 200px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div10 {
Position: absolute;

Top: 740px;
Left: 5px;

Width: 1000px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

This all works fine untill I add the doctype that you can see above in the HTML section, at this point the css positioning does not apply anymore and the page looks a mess as you can see on http://SM1Local.co.uk

I have validated both pages and they are both 100% correct,
I really don't know what to do please help!:(

PS: The issue is the same in 5 browsers, IE, FF, Opera, Chrome, Safari

abduraooft

11-03-2009, 11:19 AM

Your markup is an example of divitis (http://csscreator.com/divitis). Try to make it semantic (http://boagworld.com/technology/semantic-code-what-why-how).

..and be aware that using frames is bad to make website (http://www.google.com/search?q=why+frames+are+bad)

Now, how would you like to get your display?

LondonVirus

11-03-2009, 12:23 PM

Hi,

Thank you for your reply, I know that there is a few too many DIV tags, but this should not stop it from working, it works fine when the Doctype is not present, oh and also the frame is not mine, its from the hosting company, it's that or showing the DDNS in the address bar, my actual site hase no frames

drhowarddrfine

11-03-2009, 01:31 PM

The doctype is the list of rules you tell the browser you are following to create the page. It's the very first thing you put on a page before you do anything else. It is NOT something you put on afterwards because, then, you are changing the rules. That is why things shifted on you when you added the doctype. Without one, you are in 'quirks mode'. With one, you are in proper 'standards mode'. You never want to be in quirks.

On top of that, your doctype is the wrong one. No one has any need for the transitional doctype on new web pages.

LondonVirus

11-03-2009, 02:33 PM

I know, thats all true but I would like not to have to rebuild the site, couldnt anyone have a look at it please?

LondonVirus

11-03-2009, 02:40 PM

If I put the css inline it work by the way, but if it leave it in the css external file it only loads colours (font colour, bg-colour and so on)

BONECRUSHER

11-03-2009, 02:52 PM

I wish i could help but i'm not able to open your link.. The most irritating part about designing a website , is that you gotta test on different browsers... Please fix the link on the first post so that we can take a look at it :)

Cheers, BONE

LondonVirus

11-03-2009, 03:11 PM

The above link works http://sm1local.co.uk
I tried it on all the above memtioned browsers, just it dont work like I want it to be, I will give you the DDNS link too with both a with and a without doctype

http://mgcae.getmyip.com/SM/SM1Local/Index.html - (With)
http://mgcae.getmyip.com/SM/SM1Local/Index1.html - (Without) this is how I want it

abduraooft

11-03-2009, 03:15 PM

http://mgcae.getmyip.com/SM/SM1Local/Index1.html - (Without) this is how I want it Try to customise the good three column layout given at http://bonrouge.com/3c-hf-fixed.php for your needs.

drhowarddrfine

11-03-2009, 03:18 PM

I know, thats all true but I would like not to have to rebuild the site

The problem is you will have ongoing problems without the doctype, especially getting pages to look right in IE compared to the other more modern browsers.

LondonVirus

11-03-2009, 03:22 PM

Thats is why i am trying to add it, I know I should have added it before, but if both the CSS and the HTML validate fine even with the specified doctype, then why doesnt the site work? technicaly it should because the coding of the pages are both correct...

It's like if you build something and both parts are brand new and fully tested but when you build with the two of them it doesnt work? as mentioned before if I use the css inline by using the exact css from the css file (copy/paste) it work fine, but from the external file it does not :(:eek:

Excavator

11-03-2009, 03:59 PM

Hello LondonVirus,
That code looks like DreamWeaver generated stuff. DW can be a very useful program but I really dislike how it points new coders toward using so much absolute positioning.
Your site is not hopeless though. I would suggest following the previous suggestions here and lose the frames. A Strict DocType should replace your Trasitional also.

To start fixing the code, Have a look at the CSS I've quoted below. Too many changes to highlight in red like I usually do.
There were a lot of those ignored only because the markup is in small caps and your CSS was using capitalization.

It would be a lot easier to name your divs differently.
#div0 could be #wrap
#div1 could be #header
and so on. That's just my personal pet peeve, nothing wrong with leaving them as they are.

Lastly, Congratulations on the valid code! This is a perfect example of how valid doesn't guarantee function though.

body {
Color: #000000;
Font-Family: Verdana;
Background-Color: #FFF68F;
}
* {margin:0;padding:0;}
a:link {
Color: #FFD600;
Text-Decoration: none;
}
a:hover {
Color: #F00;
Text-Decoration: none;
}

a:active {
Color: #FFD600;
Text-Decoration: none;
}

a:visited {
Color: #FFD600;
Text-Decoration: none;
}
#div0 {
width: 1000px;
margin: 0 auto;
background: #fff; /*for testing purposes*/
}
#div1 {
Width: 1000px;
Height: 100px;
Color: #000000;
}
#div2 {
Width: 200px;
float: left;
Color: #000000;
Background-Color: #FFF68F;
}
#div3 {
Width: 550px;
Height: 625px;
float: left;
margin: 10px 0 0 10px;
Color: #000000;
Background-Color: #FFFFFF;
}
#div4 {
Width: 200px;
Height: 100px;
float: right;
margin: 0 10px 0 0;
Color: #000000;
Background-Color: #FFFFFF;
}
#div5 {
Width: 200px;
Height: 100px;
float: right;
margin: 0 10px 0 0;
Color: #000000;
Background-Color: #FFFFFF;
}
#div6 {
Width: 200px;
Height: 100px;
float: right;
margin: 0 10px 0 0;
Color: #000000;
Background-Color: #FFFFFF;
}

#Div7 {
Position: absolute;

Top: 425px;
Left: 805px;

Width: 200px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div8 {
Position: absolute;

Top: 530px;
Left: 805px;

Width: 200px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div9 {
Position: absolute;

Top: 635px;
Left: 805px;

Width: 200px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

#Div10 {
Position: absolute;

Top: 740px;
Left: 5px;

Width: 1000px;
Height: 100px;

Color: #000000;
Font-Family: Verdana;
Background-Color: #FFFFFF;

margin: 0px;
}

drhowarddrfine

11-03-2009, 04:16 PM

It's like if you build something and both parts are brand new and fully tested but when you build with the two of them it doesnt work?

You went from using the Honda lawnmower manual to the Lawnboy owner's manual. Like I said, you change the rules when you added the doctype. Using the correct syntax may work with different doctypes but how the browser handles them changes with the rules. By not using a doctype, you set things to quirks, but now you are using standards mode. Not the same thing.

LondonVirus

11-03-2009, 04:39 PM

Hi Excavator,

Thank you very much, to think that I have been trying to solve this problem since 4.30am this morning, and it was only the caps :p I have changed all the caps in the CSS to low case and its working fine now appart from, as you mentioned, the IE hack. I was always told to write codes in lower case but I am a perfectionist so I used caps to make it look tidy lol oh and by the way the positioning is not a DW genereted code is the way I coded it line by line, and thank you for the congrats, but as you say sometimes validating doesnt help either :eek: well I think we can mark this post as resolved and will make sure to use this site in the future, the people on here are quick and very helpful :)

Thank you all for all the sujestions too :)

LondonVirus

11-03-2009, 05:25 PM

Stupid thing works in all the browsers I mean all! Opera, Safari, Firefox, Chrome, Netscape but not in IE!? Whats the work round for the positioning issue? code above for more info

VIPStephan

11-03-2009, 05:29 PM

To understand why IE behaves wrong it helps to know that hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) exists and what it does.

LondonVirus

11-03-2009, 05:39 PM

I will read it an learn it as soon as possible but for now this is a customer site and needs to be sorted ASAP the owner is after me lol... any quick solotion appart from calling microsoft and telling them that they suck?!