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.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Location
    3rd planet from the sun
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS page disforming in Oper/Firefox etc..

    Hi All,

    I have to admit this side of designing is very foreign to me using CSS. I tried to recreate my site using Cascading style sheets. It looks great in IE. But in any navigator type browsers such as Oper and Firefox .... It really distorts.

    As I'm new to it i can't debug what i wrote and fix it. If someone could have a quick look at it and point me in the right direction it would be much appreciated.
    http://www.mddesigns.com.au/private

    Pougee
    Last edited by Pougee; 05-17-2005 at 12:31 PM.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,706
    Thanks
    0
    Thanked 236 Times in 231 Posts
    Hi there Pougee,

    and a warm welcome to these forums.

    I have made some changes to your html and consequently some
    modifications to your CSS. Basically I removed the table and
    replaced it with a containing div. Note also that 'id' is unique and
    the multiple applications have therefore been replaced with 'class'.

    HTML file
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>MD Designs - Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="layout.css" rel="stylesheet" type="text/css">
    
    </head>
    <body>
     
    <div id="container">
    
        <div id="layout">
         <div class="button"><img src="images/home.gif" width="92" height="56" alt="You're Already Here"></div>
         <div class="spacer-button"><img src="images/homespacer.gif" width="78" height="56" alt="spacer"></div>
         <div class="button"><img src="images/portfolio.gif" width="92" height="41" alt="Portfolio"></div>
         <div class="spacer-button"><img src="images/portspacer.gif" width="78" height="41" alt="spacer"></div>
         <div class="button"><img src="images/pricelist.gif" width="92" height="44" alt="Price List"></div>
         <div class="spacer-button"><img src="images/pricespacer.gif" width="78" height="44" alt="spacer"></div>
         <div class="button"><img src="images/contact.gif" width="92" height="41" alt="Contact"></div>
         <div class="spacer-button"><img src="images/contactspacer.gif" width="78" height="41" alt="spacer"></div>
         <div id="toolspace"></div>
         <div id="toolspacer"></div>
         <div class="space"></div>
         <div class="space"></div>
    
    </div>
    
    <div id="content">
         <h4 id="one">Welcome to MD Designs</h4>
         <h4>Where your pages are made with quality</h4>
    </div>
    
    </div>
     
    </body>
    </html>
    CSS file
    Code:
    body {
         background-color: #000;
         font-family:Verdana, Arial, Helvetica, sans-serif;
         font-size:12px; 
         color: #ccc;
         text-align:center;
         margin-top:30px;
     }
    
    #container {
         width:600px;
         margin:auto;
     }
    
    #layout {
         width:170px;
         height:600px;
         float:left;
         text-align:left;
     }
    	
    .button {
         width:92px;
         float:left;
         background-color:#000;
     }
    	
    .spacer-button {
         width:78px;
         float:left;
         background-color:#000;
    }
    	
    #content {
         width:430px;
         height:600px;
         float:left;
         background-image:url(images/bg.jpg);
    }
    
    	
    #toolspace {
         width:92px;
         height:121px;
         padding:0px;
         float:left;
         background-image:url(images/toolspace.gif);
    }
    
    #toolspacer {
         width:78px;
         height:121px;
         float:left;
         background-image:url(images/toolspacer.gif);
    }
    .space {
         width:85px;
         height:297px;
         float:left;
         background-color:#858874;
    }	
    
    
    h4 {
         color: #ccc;
         text-align:center;
     }
    
    h4#one {
         margin-top:250px;
     }
    coothead

  • #3
    New to the CF scene
    Join Date
    May 2005
    Location
    3rd planet from the sun
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou for the warm welcome.

    Not only did you completely fixed my site. You got rid of the table. That was my next question.

    Thanks for your time
    Cheers
    Pougee

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,706
    Thanks
    0
    Thanked 236 Times in 231 Posts
    No problem, you're welcome.

  • #5
    New to the CF scene
    Join Date
    May 2005
    Location
    3rd planet from the sun
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok got it all to validate and have done the change over. Thanks again

    www.mddesigns.com.au

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by coothead
    HTML file
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Fwiw/imho/caveat/caveat/…

    When giving examples, it's always worth using a full DTD as it encourages those viewing the example to use them also. A full (preferably even 'Strict') DTD places a browser into 'standards-compliant' (read: best behaviour) mode (as opposed to 'quirks' mode) and this helps to ensure the best level of cross-browser consistency in layouts.

    So, fwiw, the full version of the above DTD is as follows…
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    hth

  • #7
    New to the CF scene
    Join Date
    May 2005
    Location
    3rd planet from the sun
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What does that acheive?

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Pougee
    What does that acheive?
    A full and valid DTD puts browsers on their best behaviour by triggering 'standards-compliant' mode. This means they interpret things like markup and css as closely to how the W3C prescribe as they are able.
    Partial and other invalid DTDs trigger 'quirks' mode, which means that browser are free to interpret the markup and css according to any peculiarities they have.
    Some browsers will stick fairly closely to the W3C prescription even in quirks mode (as web standards have been a constant consideration during their development), but in the case of MSIE6/Win, quirks mode causes it to (mis)understand the box model incorrectly, just as MSIE5/Win does. This can cause layouts to become inconsistent from one browser and may require the use of alternative markup techniques or hacks (alt) to work around the mistakes that MSIE5/Win and MSIE6/Win(q) will make.

    Incidentally, using the xml prologue with a full and valid XHTML DTD will still trigger quirks mode in MSIE6/Win, so you should avoid using the xml prologue for now (unless you really know what you're doing).
    Last edited by Bill Posters; 05-24-2005 at 03:19 PM.


  •  

    Posting Permissions

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