SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile comments on this code requested. Is everything is ok? What can I improve?

    Hi

    I guess the title of this thread says pretty much everything. I just wanna make sure that there are no 'big mistakes' in my code. If you havee something to say about any improvements that I could make, feel free to speak! It's just a little layout, but before I use the above code in all the pages of my site, I wanna hear the pros!

    Thanks in advance for your time and your support.

    style.css:
    Code:
    /* *************** html and body *************** */
    
    html, body {
     margin: 5px;
     padding: 5px;
     }
    
    body { 
     background: #fff;
     color: #000; 
     line-height:17pt; 
     font-size:11px; 
     font-family:Verdana, Arial, Helvetica, sans-serif;
     text-align:center;/* center for ie5*/
     }
     
    
    /* *************** layout *************** */ 
    
    #container {
     background: #fff;
     position: relative;
     margin: 0px auto;
     padding: 15px;
     width: 95%;
     border: 2px dashed #e0e0e0;
     text-align:left;/*re-set text*/
    }
    
    * html #container {width:90%;w\idth:90%}
    
    
    #pageHeader {
    min-height:30px;/* all compliant browsers (not ie - ie just ignores it)*/
    height:auto;/*all compliant browsers (inc IE) */
    margin: 0px;
    border-bottom: 2px solid #e0e0e0;
    padding-top:15px;
    }
    
    * html #pageHeader {height:30px}/* only ie gets this and it overrides the height:auto and so must follow that style in the css and not be placed before it */
    
    #hozSeparation {
     background: #e0e0e0;
    } 
    
    #mainContent {
     height: 400px;
     min-height:400px;
     border: none;
    } 
    
    body>#container #mainContent {height:auto}
    #leftCol {
     height: 400px;
     min-height:400px;
     border-right: 20px solid #e0e0e0;
     float:left;
     width:140px;
     margin-right:-2px;
    }
    
    body>#container #mainContent {height:auto}
    #content {
     height: 400px;
     min-height:400px;
     margin-left:2px;
    }
    
    
    body>#container {height:auto}
    #footer {
     height: 30px;
     background: #fff;
     border-top: 2px solid #e0e0e0;
    }
    
    
    
    /* *************** paragraphs *************** */ 
     
     
    p {
     margin: 4px;
    }
    
    .pBold {
     font-weight: bold;
    }
    
    /* *************** links *************** */ 
    
    
    a:link {color: #3e5c92; text-decoration: underline}
    a:visited {color: #3e5c92; text-decoration: underline}
    a:hover {color: #b7b7b7; text-decoration: underline}
    a:active {color: #b7b7b7; text-decoration: underline}
    
    
    /* *************** text size *************** */ 
    
    
    h6 {
     font-size: 90%;
     font-weight: bold;
     color: #3e5c92;
     border-bottom: 2px dashed #b7b7b7;
     width: 140px;
     margin-left:5px;
     padding:left:5px;
    }
    template.html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    
    <div id="container"> 
    
      	<div id="pageHeader">
      	Page Header
      	</div>
      	
      	<div id="hozSeparation">
      	<br />
      	</div>
      	
    	<div id="mainContent">
    	
    		<div id="leftCol">
    		left column
    		</div>
    		<div id="content">
    		content
    		</div>
    		
    	</div>
    	
    	<div id="footer">
    	footer
    	</div>
    	
    	
    </div>
    	
    
    </body>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Alex,

    Haven't seen you in here for a while

    Here are my comments in between the code:
    Code:
    /* *************** html and body *************** */
    html, body {
    margin: 5px;
    padding: 5px;
    }
    Using this will give you a 20px gap around the page in mozilla because it gets added to the html and to the body as well thus doubling the margins and padding.

    Set padding and margins to zero and the just set the required margin.
    e.g.
    Code:
    html, body {
    margin: 0;
    padding: 0;
    }
    body {margin:10px;}

    Code:
     
    body { 
    background: #fff;
    color: #000; 
    line-height:17pt; 
    font-size:11px; 
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:center;/* center for ie5*/
    }
    Points are only relevant to printing and are not usually used for screen dimensions as they are not as reliably sized as other methods.


    Code:
    #container {
    background: #fff;
    position: relative;
    margin: 0px auto;
    padding: 15px;
    width: 95%;
    border: 2px dashed #e0e0e0;
    text-align:left;/*re-set text*/
    }
    * html #container {width:90%;w\idth:90%}
    You have a 95% width and padding of 15px and borders of 2px. This will never add up and at some stage will fail. Use padding on inner elements or use a percentage padding so that you can control it. You can probably get away with the borders without causing too much upset.

    Why the backslash extra style as you are offering nothing different to ie6 from the first style (width:90%} so just leave the first one in. Also why is ie 5% less than mozilla this will make your layouts different sizes!


    Code:
     
    #leftCol {
    height: 400px;
    min-height:400px;
    border-right: 20px solid #e0e0e0;
    float:left;
    width:140px;
    margin-right:-2px;
    }
    body>#container #mainContent {height:auto}
    You will need to account for the broken box model in ie because you have a 20px border. IE5 and 5.5. need their width increased by 20px to compensate.

    If the margin-right:-2px is to offset ies 3 pixel jog then you need to put it in a separate style for ie only.
    e.g. * html #leftCol {margin-right:-3px}.

    Even if it was for something else then you will still need the fix above for ie.

    Code:
    #content {
    height: 400px;
    min-height:400px;
    margin-left:2px;
    }
     
    body>#container {height:auto}
    
    Shouldn't that be content not container

    Code:
    #footer {
    height: 30px;
    background: #fff;
    border-top: 2px solid #e0e0e0;
    }
     
    /* *************** paragraphs *************** */ 
     
     
    p {
    margin: 4px;
    }
    .pBold {
    font-weight: bold;
    }
    /* *************** links *************** */ 
     
    a:link {color: #3e5c92; text-decoration: underline}
    a:visited {color: #3e5c92; text-decoration: underline}
    a:hover {color: #b7b7b7; text-decoration: underline}
    a:active {color: #b7b7b7; text-decoration: underline}
     
    /* *************** text size *************** */ 
     
    h6 {
    font-size: 90%;
    font-weight: bold;
    color: #3e5c92;
    border-bottom: 2px dashed #b7b7b7;
    width: 140px;
    margin-left:5px;
    padding:left:5px;
    }
    Box model again - 5px extra needed for ie5 and 5.5.

    The other things to watch out for are that you control the height of your content and side columns because your page won't increase with the content uniformly.

    Hope that helps.

    Paul

  3. #3
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haven't seen you in here for a while
    hey that's nice to see that you remember me

    As usual Paul, your help is invaluable...

    I have almost corrected everything. I'm struggling with the box model though... What should I do to take IE5/5.5 into account?

  4. #4
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and by the way, I'm still unsure of the use of this trick:
    Code:
    * html #container {width:90%;w\idth:90%}
    first value is for IE5 and second value is for IE6?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    first value is for IE5 and second value is for IE6?
    Yes the first value without the backslash is for ie5 and ie5.5. The second value is for ie6 as the other two can't parse the backslash correctly.

    If you are offering the same size to all ie browsers then you only need the first value.

    For more info on the box model I think I have covered all eventualities in the FAQ section where there is a long explanation and what to do to take account in whatever mode (srtandards or quirks mode) that you are using.

    If you are still having problems then post the bit of code you need to apply it to (and what doctype you are using (full, partial, xml prologue etc) and I'll give you the correct version

    Paul

  6. #6
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I have tried to correct the box model in order to make my layout IE5.x friendly. I am not sure of the result though.

    Code:
    /* *************** html and body *************** */
    
    html, body {
     margin: 0;
     padding: 0;
     }
    
    body { 
     background: #fff;
     color: #000; 
     margin: 10px;
     line-height: 1.9em; 
     font-size: 0.75em; 
     font-family:Verdana, Arial, Helvetica, sans-serif;
     text-align: center;/* center for ie5*/
     }
     
    
    /* *************** layout *************** */ 
    
    #container {
     background: #fff;
     position: relative;
     /*margin: 0px auto;*/
     padding: 1%;
     width: 96%;
     border: 2px dashed #e0e0e0;
     text-align:left; /*re-set text*/
    }
    
    * html #container {width: 96%;}
    
    
    #pageHeader {
    min-height:30px;/* all compliant browsers (not ie - ie just ignores it)*/
    height:auto;/*all compliant browsers (inc IE) */
    margin: 0px;
    border-bottom: 2px solid #e0e0e0;
    padding-top:15px;
    }
    
    * html #pageHeader {height:30px}/* only ie gets this and it overrides the height:auto and so must follow that style in the css and not be placed before it */
    
    #hozSeparation {
     background: #e0e0e0;
    } 
    
    #mainContent {
     height: 400px;
     min-height:400px;
     border: none;
    } 
    
    body>#container #mainContent {height:auto}
    #leftCol {
     height: 400px;
     min-height:400px;
     border-right: 20px solid #e0e0e0;
     float:left;
     width:140px;
     margin-right:-3px;
    }
    
    * html body>#container #mainContent {height:auto}
    #leftCol{
    width:160px;/*for ie5.x win */
    w\idth:140px;/*for ie6*/
    }
    
    
    body>#container #mainContent {height:auto}
    #content {
     height: 400px;
     min-height:400px;
     margin-left:3px;
    }
    
    
    body>#container {height:auto}
    #footer {
     height: 30px;
     background: #fff;
     border-top: 2px solid #e0e0e0;
    }
    
    
    ..............
    
    h6 {
     font-size: 90%;
     font-weight: bold;
     color: #3e5c92;
     border-bottom: 2px dashed #b7b7b7;
     width: 200px;
     margin-left:5px;
     padding:left:5px;
    }
    
    * html h6{
    width:210;/*for ie5.x win */
    w\idth:200px;/*for ie6*/
    }
    I must confess that I am not sure of the relevance of writing height:auto in my code for each element:
    ex:
    Code:
    body>#container #mainContent {height:auto}
    #leftCol {
    thanks in advance for your comments

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have a couple of little errors in there that I have tidied up.
    Code:
    html, body {
     margin: 0;
     padding: 0;
     }
    body { 
     background: #fff;
     color: #000; 
     margin: 10px;
     line-height: 1.9em; 
     font-size: 0.75em; 
     font-family:Verdana, Arial, Helvetica, sans-serif;
     text-align: center;/* center for ie5*/
     }
     
    /* *************** layout *************** */ 
    #container {
     background: #fff;
     position: relative;
     /*margin: 0px auto;*/
     padding: 1%;
     width: 96%;
     border: 2px dashed #e0e0e0;
     text-align:left; /*re-set text*/
    }
    * html #container {width: 98%;w\idth:96%}/*for ie5.* and ie6 etc*/
    /* all the above will still be 4 pixels out because of the border which can't be accounted for with percentages and pixels added together*/
    #pageHeader {
    min-height:30px;/* all compliant browsers (not ie - ie just ignores it)*/
    margin: 0px;
    border-bottom: 2px solid #e0e0e0;
    padding-top:15px;
    }
    * html #pageHeader {height:30px}/* only ie gets this and it overrides the height:auto and so must follow that style in the css and not be placed before it */
    #hozSeparation {
     background: #e0e0e0;
    } 
    #mainContent {
     min-height:400px;
     border: none;
    } 
    * html #mainContent {height:400px}
    #leftCol {
     min-height:400px;
     border-right: 20px solid #e0e0e0;
     float:left;
     width:140px;
     margin-right:-3px;
    }
    * html #leftCol{
    height:400px;
    width:160px;/*for ie5.x win */
    w\idth:140px;/*for ie6*/
    }
    #content {
     min-height:400px;
     margin-left:3px;
    }
    * html #content { height: 400px;}
    #footer {
     height: 30px;
     background: #fff;
     border-top: 2px solid #e0e0e0;
    }
    h6 {
     font-size: 90%;
     font-weight: bold;
     color: #3e5c92;
     border-bottom: 2px dashed #b7b7b7;
     width: 200px;
     margin-left:5px;
     padding-left:5px;
    }
    * html h6{
    width:205px;/*for ie5.x win */
    w\idth:200px;/*for ie6*/
    }
    Note that where you have specified percentages and borders then there is no way to account for this exactly so you will be 4 pixels out whatever you do in your #container style. Also you had ie set to 96% which was the same as the original definition and should have been 98% for ie5 and 5.5. and 96% for ie6. (Assuming you are working in standards mode.)

    When you specify min-height then all you need to is to give ie height. Its best to do this with the star selector so that you don't compromise any other browsers and keep your hacks separate and safe. The height auto is then not needed as that is the default anyway.

    In one instance you had mixed in the star selector hack and and the child selector hack in one style which effectively meant that ie5 mac would be the only browser you were targetting. I find is safer not to use the child selector to target browsers as ie5 will occasionally read the following style after the child selector as though the selector wasn't there. (If you do use it then test in ie5 to make sure its behaving.)

    If you're just addressing ie's faults then its best not to compromise other browsers as mentioned above and use the star selector hack which only ie parses.

    Hope that helps.

  8. #8
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot Paul!



Bookmarks

Posting Permissions

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