Padding & Margin in Opera - IE

Discussion in 'CSS' started by fex, Mar 1, 2009.

  1. #1
    Hi,

    I've searched a lot on the internet and fora, but nothing really helps. So I'm hoping one of you can help me.

    Watch this site in IE and Opera and notice the difference of the placement of the Yellow header text in the lower box. The one in IE is the 'right' one, let's say the one I want it to be like.
    Example


    CSS:
    body{
        margin: 0px; 
        padding: 0px;   
        background-color: #11090a;
        font-family: Arial, Helvetica, sans-serif; 
    }
    
    
    #wrapper{   
        background: url(../images/bg_side.jpg) repeat-x #000000;   
    }   
    #container{   
        background: url(../images/bg_main.jpg) no-repeat;   
        min-height: 900px; 
        width: 1000px;   
        position: relative;   
    }  
    
    
    #content{    
        padding: 565px 0px 0px 85px;
        width: 815px;   
        color: #674f5d;   
        font-size: 13px;   
        line-height: 20px;    
    }   
    #content h2{   
        font-weight: normal;  
        font-family: Georgia, "Times New Roman", Times, serif;   
        color: #dbaa70;   
        margin: 0px 0px 18px 0px;   
    }   
    
    .column_left{ 
    	float: left; 
    	width: 230px; 
    	margin: 0px 30px 0px 0px;
    }   
    .column_right{ 
    	float: left; 
    	width: 500px;  
    }   
    
    .spacer{
    	clear: both;
    	height: 30px;
    	overflow: hidden;
    }
    
    #footer{
        border-top: 1px solid #3f2324;   
        padding: 30px 50px 80px 50px;   
        color: #674f5d;   
        font-size: 9px;   
        line-height: 14px;    
    }
    #footer span{   
        display: block;   
        float: left;   
        width: 250px;   
    }   
    #footer a{   
        color: #9e8292;   
        text-decoration: none;   
    }   
    #footer a:hover{ 
    	color: #ffffff; 
    }  
    Code (markup):
    The lower 'black' box is divided into two div's. One with classname column_left and the other with column_right.

    Any ideas how come ? :confused:
     
    fex, Mar 1, 2009 IP
  2. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    valid HTML first...
     
    unigogo, Mar 3, 2009 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Lawlz, did you notice the extra doctypes getting repeated regularly throughout your HTML?
     
    Stomme poes, Mar 3, 2009 IP
  4. fex

    fex Peon

    Messages:
    89
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Now I did notice,, it was because other htm files are included and I did not remove those doctypes and other body's indeed.

    Used a float right now and a margin to place .column_right correctly, there's still a bit of difference in height (which I don't really mind).. Is this unavoidable ??
     
    fex, Mar 5, 2009 IP