jfsknight
11-11-2008, 11:52 PM
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. & 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 & 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">© 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;
}
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. & 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 & 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">© 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;
}