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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE working; other browsers are not

    The website is: http://pizzaclassics.x10hosting.com

    It looks fine in IE7. Firefox 3 displays it incorrectly as do many other browsers. I'm having problems with the <divs>. This is my first real attempt to use CSS and I'm at a loss as to what's going on. Wrapping maybe? Padding, width? I don't know.

    The html:
    <body>
    <div id="page_wrapper">
    <div id="header">
    <h1>PIZZA CLASSICS</h1>
    <h1>320-8080</h1>
    <h2>"Serving All of the Austin Area"</h2>
    </div>
    <div id="nav">
    <ul>
    <li><a href="./index.html">Home</a></li>
    <li><a href="./menu.html">Menu</a>
    <li><a href="./directions.html">Directions</a></li>
    <li><a href="./aboutus.html">About Us</a></li>
    </ul>
    </div>
    <div id="right_column"><p><b>Hours:</b><br>Mon. - Thurs.: 5pm - 3am<br>Fri. &amp; Sat.: 5pm - 4am<br>Sunday: 5pm - 3am</p></pre><p><b>Contact us:</b><br>Pizza Classics<br>604 W. 29th St.<br>(512) 320-8080<br><a href="mailtoizzaclassics@pizzaclassics.com">pizzaclassics@pizzaclassics.com</a></p></div>
    <div id="border_wrapper">
    <div id="content">
    <div id="header2"><h1>OPEN Till 4:00 am<br>Friday &amp; Saturday</h1></div>
    <div class="ingredients_wrapper">
    <div id="ingredients_left">
    <center><b>Ingredients:</b></center>
    <ul>
    <li>Pepperoni Slices</li>
    <li>Sausage</li>
    <li>Canadian Bacon</li>
    <li>Hamburger</li>
    <li>Green Olives</li>
    <li>Black Olives</li>
    <li>Fresh Onions</li>
    <li>Fresh Bell Pepper</li>
    <li>Fresh Mushrooms</li>
    <li>Fresh Tomatoes</li>
    <li>Jalapeno Peppers</li>
    <li>Pineapple</li>
    </ul>
    </div>
    <div id="ingredients_right">
    <center><b>Special Ingredients:</b></center>
    <ul>
    <li>Chicken</li>
    <li>Artichoke</li>
    <li>Garlic</li>
    <li>Sun-dried Tomatoes</li>
    <li>Pesto Sauce</li>
    <li>Feta Cheese</li>
    <li>Spinach</li>
    </ul>
    </div>
    </div>
    <div id="header2"><h2>Ask about our new Chicago-style Stuffed Pizza</h2></div>
    </div>
    </div>
    <div id="footer">&copy; Pizza Classics<br><a href="mailto:webmaster@domain.com">Email webmaster</a></div>
    </div>
    </body>
    The CSS:
    body {
    margin: 10px 0px padding:0px;
    font-family: arial, verdana;
    font-size: 10pt;
    color: #966C8F;
    background-color: white;
    text-align:center; /* Hack for IE5/Win */
    }
    h1, h2, h3, h4, h5, h6 {
    color: #E51B4A;
    margin: 0;
    padding: .5em 15px;
    }
    p {
    margin: 0;
    padding: 0 15px 1em;
    }
    #page_wrapper {
    margin: 0 auto;
    width: 760px;
    border: 1px solid #ccc;
    }
    #header {
    width: auto;
    letter-spacing: .6em;
    text-align: center;
    padding: 2px 0;
    background-color: white;
    }
    #header h1 {
    font-size: 2.2em;
    }

    #header h1 a:link, a:active, a:visited {
    color:inherit;
    }
    #header a img {
    border:none;
    }
    #header h2 {
    font-size: 1em;
    }

    #header2 {
    width: auto;
    text-align: center;
    padding: 2px 0;
    background-color: white;
    }

    #header2 h2 {
    font-size: 1.25em;
    }

    #nav {
    width: auto;
    height: 22px;
    border: 1px solid #ccc;
    border-width: 2px 1px;
    background-color: #E33;
    }

    #border_wrapper {
    border-right: 250px solid #FBECEC;
    }
    #right_column {
    width: 250px;
    background-color: #FEE;
    padding: 15px 0;
    float: right;
    }
    #right_column h1, #right_column h2, #right_column h3, #right_column h4, #right_column h5, #right_column h6 {
    color: #999;
    }
    #content {
    width: auto;
    padding: 15px 0;
    text-align:left;
    }

    .ingredients_wrapper, .pickup_specials, .mini_menu, .directions, .about_us {
    width: 80%;
    margin: 5px auto;
    }

    #ingredients_left {
    float:left;
    padding: 0px 10px;
    }
    #ingredients_right {
    float:right;
    padding: 0px 10px;
    }

    .pickup_specials {
    text-align: center;
    border: 1px solid black;
    }
    #pickup_specials td {
    text-align: right;
    }

    #pickup_specials td#left {
    text-align: left;
    }

    .mini_menu {
    border: 1px solid black;
    }

    table#containerTable td {
    padding-top: 0.5em;
    }
    td.dots {
    background: transparent url(dots.gif) bottom left repeat-x;
    width: 95%;
    vertical-align: bottom;
    text-align: left
    }
    span.item {
    background-color: white;
    font-weight: bold;
    padding-right: 0.5em;
    }
    td.price {
    text-align: right;
    width: 5%;
    padding-left: 0.5em;
    vertical-align: bottom;
    }

    #disclaimer {
    text-align: center;
    font-size: 0.75em;
    }

    #footer {
    clear: both;
    width: auto;
    padding: 3px;
    text-align: center;

    border: 1px solid #ccc;
    border-top-width: 2px;

    background-color: #E33;
    color: white;
    }
    /* Affecting all ul and li elements under navigation */
    #nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
    }
    #nav li {
    margin: 0;
    padding: 0;

    float: left;

    border-right: 2px solid #ccc;
    }
    /* Affecting only ul and li elements in sub menus */
    #nav li ul li {
    border-right: none;
    border-top: 2px solid #ccc;
    }
    #nav li ul {
    width: 100px;

    position: absolute;
    /*
    * Trick that keeps the sub menus that shouldn't be visible, invisible.
    * Don't try and use display: none; instead, as this may not result in
    * the desired effect in all browsers.
    */
    left: -999em;
    top: 0; /* Don't set to auto, it will break in some browsers. */
    }
    /* This automatically places the sub menu where it should be; below the parent menu item */
    #nav li:hover ul {
    left: auto;
    top: auto;
    }
    #nav a:link, #nav a:visited, #nav a:active {
    display: block;
    width: 100px;
    margin: 0;
    padding: 3px 10px;

    text-decoration: none;

    background-color: #F03;
    color: white;
    }
    #nav a:hover {
    background-color: #CB3644;
    }

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    You have no doctype. This throws IE into quirks mode and won't attempt to act like modern browsers, such as Firefox. Use this one on the first line of your page:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Then validate your html and css for those lists of errors. After fixing your page, use Firefox as your reference for design and how things should work. Never IE. It is 10 years behind web standards and incorrect in much of its implementation.


  •  

    Tags for this Thread

    Posting Permissions

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