Not displaying the same in all browsers - css issues?

Discussion in 'HTML & Website Design' started by renet, Apr 7, 2011.

0
  1. #1
    This page seems to display almost correctly in Firefox but not in IE. Would be interested in ideals of how to make it display correctly in browsers besides Firefox.

    ---------------------------------------------------------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.example.net/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang="en" xmlns="http://www.example.net/1999/xhtml"><head>



    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>

    <meta name="description" content="real estate listings">
    <meta name="keywords" content="homes for sale">

    <style type="text/css">
    body {
    margin: 0px;
    }
    #header {
    background-color: #cccccc;
    width: 796px;
    height: 75px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 32px;
    padding-top: 20px;
    border: 2px solid black;
    }
    #container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    }
    #img1 {
    width: 290px;
    height: 220px;
    float: left;
    padding: 0px;
    border: 2px solid black;
    background-image:url('http://example.net');
    background-position: center center;
    background-repeat: no-repeat;
    }
    #img2 {
    width: 290px;
    height: 220px;
    float: left;
    margin-left: 5px;
    padding: 0px;
    border: 2px solid black;
    background-image:url('http://example.net');
    background-position: center center;
    background-repeat: no-repeat;
    }
    #coupon {
    width: 200px;
    height: 220px;
    float: right;
    border: 2px solid black;
    text-align: center;
    margin: 0px;
    background-color: #FFEBCD;
    }
    #box1 {
    width: 585px;
    height: 250px;
    float: left;
    border: 2px solid black;
    padding: 2px;
    }
    #box2 {
    width: 200px;
    height: 548px;
    float: right;
    border: 2px solid black;
    }
    #box3 {
    width: 290px;
    height: 268px;
    float: left;
    margin-top: 5px;
    border: 2px solid black;
    padding-top: 15px;
    padding-bottom: 2px;
    }
    #box4 {
    width: 290px;
    height: 280px;
    float: left;
    margin-top: 5px;
    margin-left: 5px;
    border: 2px solid black;
    padding-top: 5px;
    padding-bottom: -25px;
    background-color: #FFEBCD;
    }
    .clearBoth {
    clear:both;
    }
    #imgcontainer {
    width: 794px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 2px solid black;
    padding-top: 5px;
    }
    </style>
    </head>
    <body>
    <center>
    <div id="header">
    <b>Brentwood Luxury Homes</b>
    </div><img src="http://example.net"></a>
    <div id="container">
    <div id="img1">
    </div>
    <div id="img2">
    </div>
    <div id="coupon">
    <b>Option</b><br />
    <a href="http://example.net/">Example</a>
    <p>
    Payments Less than <br />
    Down Payment <br />
    Cash to Close: <br />
    <p>
    Name<br />
    555-555-1212<br />
    for More Info<br />
    <a href="http://example.net">Schedule Showing</a>
    </div>
    <br class="clearBoth" />
    </div>
    <div id="container">
    <div id="box1">
    <h2>3 bed, 2.5 bath, 2-car garage &#8211; ONLY $250,000<br />

    Better than move-in ready condition<br />
    Example</h2>
    <p>
    Example, example, example, example, example
    Example, example, example, example, example
    Example, example, example, example, example
    Example, example, example, example, example
    Example, example, example, example, example
    <p>
    For more info call <b>Phone</b> or <a href="http://example.net">Request Showing</a> <b></b>
    </div>
    <div id="box2">

    <br />
    <h3>Score<br />
    "8.5"</h3>

    <p>
    Nearby Schools<br /><p>
    High School<br />
    Junior High<br />
    Elementary<br />
    Private<br />
    <p>
    Nearby Shopping<br /><p>
    Statton Ranch<br>
    Trader Joe's<br>
    Home Deport<p>
    Nearby Medical<p>
    John Muir<br>
    Kaiser<br>



    </div>
    <div id="box3">
    <b>Free Mortgage Book</b><br /><p>
    "Everything You Ever Wanted<br> To Know About Home Mortgages"<br /><p>
    No Obligation Mortgage Pre-Approval<br />
    With a "Select" Local Lender
    </div>
    <div id="box4">
    <h1>Brentwood, CA<br>Bank Owned<br />

    <a href="http://example.net">Inventory List</a></h1>
    <p>
    <h3>Luxury Homes<br>Approved Short Sales<br />
    Price Reductions<br> Failed Pendings</h3>
    </div>
    <br class="clearBoth" />
    </div>
    <div id="imgcontainer">
    <center>
    <img src="http://example.net" width="255px" />
    <img src="http://example.net" width="255px" />

    <img src="http://example.net" width="255px" />
    *rates and payments subject to change, buyer must qualify
    </center>
    </div>
    </center>
    </body>
    </html>


    Thank you for all your help!
     
    renet, Apr 7, 2011 IP
  2. style0

    style0 Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    if you want help with css problems, this is no good. post a link to the site so people can check the code live.

    Besides, most problems with different rendering in IE is due to the fact the every time you float an element, it needs to be cleared properly to "start a new row" so to speak.

    So start by looking over your floats and clears
     
    style0, Apr 7, 2011 IP