Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation HTML/CSS Doctype Issue

    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:

    Code:
    <!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 &amp; 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 &amp; 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:

    Code:
    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Your markup is an example of divitis. Try to make it semantic.

    ..and be aware that using frames is bad to make website

    Now, how would you like to get your display?
    Last edited by abduraooft; 11-03-2009 at 11:29 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation

    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

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation

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

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation

    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)

  • #7
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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

  • #8
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation

    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

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by LondonVirus View Post
    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.

  • #11
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation

    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

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.

    Code:
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    LondonVirus (11-03-2009)

  • #13
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by LondonVirus View Post
    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.

  • #14
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    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 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 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

  • #15
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer

    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •