...

View Full Version : IE working; other browsers are not



jfsknight
11-12-2008, 12:52 AM
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="mailto:pizzaclassics@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;
}

drhowarddrfine
11-12-2008, 04:54 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum