CSS alignment problem:Firefox and Interent Explorer

Discussion in 'HTML & Website Design' started by christopher785, Jan 16, 2009.

0
  1. #1
    Hey, I am working on a weather news website. I am using CSS and HTML.

    I have found a major bug in my code. Basicly It looks perfect in either firefox or Internet Explorer. I can basicly adjust the size attributes to make all the borders alligned correctly in firefox, but then its not aligned in IE. If i make it aligned right in IE, its not aligned right in firefox. Any help for be greatly appreciated.

    Thanks,
    Chris.

    Im not sure whats wrong. Here is the link to my page:

    http://weathernewschris.net78.net

    Here is the source code for my page:

    <html>
    <head>
    <title>WeatherNewsChris</title>
    <style type="text/css">
    #header{
    border:1px solid black;
    width:1000px;
    height:60px;
    }
    #content{
    border:1px solid black;
    width:1000px;
    height:600px;
    }
    #navigation{
    border:1px solid black;
    width:120px;
    height:660px;
    position:absolute;
    margin-top:10px;
    top:5px;
    margin-left:79px;
    }
    </style>
    </head>


    <body>

    <center>
    <div id="header">
    </div>

    <div id="content">
    </div>
    </center>

    <div id="navigation">
    </div>

    </body>
    </html>
     
    christopher785, Jan 16, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    You will never get IE to attempt to perform like other more modern browsers without a proper doctype on the first line. Add this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Always use modern browsers, like Firefox, to initially test your markup. Then look to see if/when IE screws it up. The bugs and quirks of IE are well known, as are the hacks to fix it.
     
    drhowarddrfine, Jan 16, 2009 IP
  3. Knewber

    Knewber Peon

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    First things first, you need a doctype, which has been posted by DR.

    Then, if you really want to start 100% clean and even amongst the different browsers, I recommend you put this with all the other CSS code on your site. You will then have to add padding and margins to the divs to suit.
    
/*RESET*/

body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,p,blockquote{ 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
    Code (markup):
    Also, get rid of the old deprecated <center> tags and stuff like that. You might want to run your page through a html 4.01 validator (search it on the web). Other then that, I suggest reading some more HTML tutorials to get your knowledge of semantic code and web design up.

    I apologize if that is too advanced for you or hard to implement, but it is 12:30am here. PM me if you have issues.
     
    Knewber, Jan 17, 2009 IP
  4. euphoriajoca

    euphoriajoca Peon

    Messages:
    112
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Try to use:
    margin: 0 auto;
    in css in header and content.
     
    euphoriajoca, Jan 19, 2009 IP
  5. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #5
    justinlorder, Jan 19, 2009 IP