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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Location
    Belgium - W-FLANDRES
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What wrong with this code

    In IE7 & Mozilla FF is everything fine but in IE6 my layout is not right, seems IE6 takes a larger left-margin almost the double and so my #menuspace & #iconspace divs are placed under de #logo div



    My HTML

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nieuwe pagina 1</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
    </head>
    
    <body>
    <div id="container">
    
    <div id="header">
    
    <div id="logo">
    </div>
    <div id="menuspace">
    </div>
    <div id="iconspace">
    </div>
    </div>
    <div id="midframe">
    </div>
    </div>
    
    </body>
    
    </html>
    My CSS

    Code:
    * {
    	margin: 0px;
    	padding: 0px;
    }
    
    body {
    	background-image: url(../images/body_back.jpg);
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    	text-align: center;
    }
    
    #container {
    	height: 600px;
    	width: 900px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px;
    	position: relative;
    	background-color: #FFFFFF;
    }
    
    #header {
    	height: 154px;
    	width: 900px;
    	background-color: #111111;
    }
    
    #logo {
    	height: 123px;
    	width: 123px;
    	background-image: url('../images/logo.jpg');
    	float: left;
    	margin-left: 17px;
    	margin-right: 15px;
    
    }
    
    #menuspace {
    	float: right;
    	height: 50px;
    	width: 745px;
    	background-color: #222222;	
    }
    
    #iconspace {
    	float: right;
    	height: 103px;
    	width: 743px;
    	border-top-width: 1px;
    	border-top-color: #FFFFFF;
    	border-top-style: solid;
    	border-right-width: 1px;
    	border-right-color: #FFFFFF;
    	border-right-style: solid;
    	border-left-width: 1px;
    	border-left-color: #FFFFFF;
    	border-left-style: solid;
    	background-color: #333333;
    
    }
    
    #midframe {
    	border-left:1px solid #FFFFFF; 
    	border-right:1px solid #FFFFFF; 
    	border-bottom:1px solid #FFFFFF; 
    	height: 416px;
    	width: 898px;	
    	background-color: #555555; 
    	text-align:left;
    }
    
    #midframe p{
    	padding-left:15px;
    }

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You are suffering from the double margin bug.

    In IE6, floated elements' margin are doubled in the direction of a float. e.g., if I gave header the properties float: left; and margin: 1em 0 0 10&#37;;, in IE6 its left margin'll be 20%.

    To get around this, use a conditional comment. For your instance, they'd work like this:
    Code:
    <!--[if lt IE 7]><style type="text/css">
    /* IE6 fixes */
    selector {
        value: property;
    }
    </style><![endif]-->
    Also, you are not using a DTD. No doubt someone'll come along to scream at you, soon enough. I must admit, though, that the code will pass validation if you did specify one. If you wish to use quirks mode, as you are now, put <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional"> (not recommended.) If you go the proper, good coding route, use either
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr">
    ...
    or
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    ...
    (if you use the latter, find out about the differences between XHTML and HTML.)
    Last edited by Apostropartheid; 12-08-2007 at 05:39 PM.

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Location
    Belgium - W-FLANDRES
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the quick answer... Cyanlight and thanks for the tip but on my live code I use DTD strict XHTML.

    I use a single style sheet for screen and another for print but I think I can't use the conditional comment is de style sheet so do I have to to duplicate the style sheet en load the one or the other with the comment ? (I don't really like to do that)

    Or is there another way, to have the same conditional syntax ?

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by filip.beunens View Post
    Thanks for the quick answer... Cyanlight and thanks for the tip but on my live code I use DTD strict XHTML.

    I use a single style sheet for screen and another for print but I think I can't use the conditional comment is de style sheet so do I have to to duplicate the style sheet en load the one or the other with the comment ? (I don't really like to do that)

    Or is there another way, to have the same conditional syntax ?
    That truly makes no sense.

    If you're talking about the different medias, the @media rule in your style block will help you.

    Code:
    ...
    <style type="text/css">
    @media screen {
     p {
       color: blue;
     }
    }
    @media print {
     p {
       color: green;
     }
    }
    @media handheld {
     p {
       color: red;
     }
    }
    </style>
    ...
    <p>If you're using a computer screen, this will be the colour blue. Printed, this will be green. On a handheld device, this will be red.</p>
    ...
    Remember the order of cascade.
    Last edited by Apostropartheid; 12-08-2007 at 06:13 PM.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by filip.beunens View Post
    I use a single style sheet for screen and another for print but I think I can't use the conditional comment is de style sheet so do I have to to duplicate the style sheet en load the one or the other with the comment ?
    The styles you load in the order you call them. So if you call your normal screen.css first, you can then—via a conditional comment—call up an IE-only CSS file that only has IE-specific rules that overrides the normal CSS. Make sense?


  •  

    Posting Permissions

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