There are several things that are causing your problems. One is that you don't have a doctype declared. This will cause your page to look differently in different browsers. Another is that some of your statements aren't written correctly. I am going to try to look at this and see if I can help fix it.
**EDIT**
Okay, Try this code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#wrapper {
width: 800px;
margin: 0 auto;
background: #fff ;
text-align: justify;
}
#header { margin: 0; padding: 0;
background: #fff url("http://www.americanmicrosemi.com/images/header.gif") 0px 0px no-repeat;
height: 106px;
}
ul#topmenu {
list-style: none;
margin: 1px 0px 0 0;
float: left;
position: relative;
display: inline;
padding: 79px 0 0 10px;
height: 2px;
}
ul#topmenu li {
padding: 2px 10px 4px 32px;
float: left;
clear: none;
background: url("http://www.americanmicrosemi.com/new/images/topmenu-separator.gif") top left no-repeat;
}
ul#topmenu li a {
font: 300 12px/18px Arial;
color: #fdb;
text-shadow: #ddd 1px -1px 1px;
padding: 0 1px 0 0;
}
ul#topmenu li a#home {
background: url("http://www.americanmicrosemi.com/new/images/topmenu-home.gif") top left no-repeat;
padding-left: 18px;
}
ul#topmenu li a#home:hover {
background: url("http://www.americanmicrosemi.com//new/images/topmenu-home-hover.gif") top left no-repeat;
}
ul#topmenu li a#cart {
background: url("http://www.americanmicrosemi.com/new/images/topmenu-cart.gif") top left no-repeat;
padding-left: 24px;
}
ul#topmenu li a#cart:hover {
background: url("http://www.americanmicrosemi.com//new/images/topmenu-cart-hover.gif") top left no-repeat;
}
ul#topmenu li a#catalog {
background: url("http://www.americanmicrosemi.com/new/images/topmenu-catalog.gif") top left no-repeat;
padding-left: 18px;
}
ul#topmenu li a#catalog:hover {
background: url("http://www.americanmicrosemi.com/new/images/topmenu-catalog-hover.gif") top leftno-repeat;
}
ul#topmenu li a#contact {
background: url("http://www.americanmicrosemi.com/new/images/topmenu-contact.gif") top left no-repeat;
padding-left: 20px;
}
ul#topmenu li a#contact:hover {
background: url("http://www.americanmicrosemi.com/new/images/topmenu-contact-hover.gif") top left no-repeat;
}
ul#topmenu li a:hover {
color: #fff;
background-position: 1px 0px;
padding-right: 0;
margin-left: 1px;
}
p{
padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="topmenu">
<li><a href="http://www.americanmicrosemi.com/home/" id="home" title="Return to our homepage">Home</a></li>
<li><a href="http://www.americanmicrosemi.com/products/catalog/" id="catalog" title="browse our catalog of semiconductors andics">Catalog</a></li>
<li><a href="http://order.store.yahoo.com/cgi-bin/wg-order?americanmicrosemiconductor" id="cart" title="View items in your Shopping Cart">Cart</a></li>
<li><a href="http://americanmicrosemi.com/company/contact/" id="contact" title="Submit a message using our online form">Contact Us</a></li>
</ul>
</div><!-- end of header -->
<p>You are ordering on a secure server; your privacy is protected. Most orders
ship the next business day. Thanks for shopping at American Microsemiconductor. Spend <b>$100.00</b> or more and receive
<b><blink>FREE UPS Ground Shipping</blink></b>
available within the 48 continental United States ONLY. Goto Shipping Options on Shipping Page.
Get 3% discount on all international orders over $200.00. Enter code INTER3 at checkout.**
**Discount applies to orders shipped outside the United States. Discount does not include shipping charges.
</p>
</div><!--end wrapper-->
</body>
</html>
Here are the things I found and corrected:
1. no doctype
2. you have a div with an id of "horizon" in your html, but not in your css, so I removed it from the html
3. there was an extra body tag stuck in there
4. there were 2 random "/center" tags stuck in the code
5. there wasn't really a need for the CLASS called "wrapper" (you need the ID, but not the CLASS)
6. the content needed to be put into paragraph tags
7. there is no need for the "font" tag. It wasn't really serving a purpose. You should also use css instead of the font tag.
8. there was an extra "/b" tag.
9. there was a missing "/div" tag for the wrapper div
10. and finally, you were declaring padding of 79px for all the sides of the menu, not just the top.
I think that is pretty much it!
Last edited by angele803; 08-28-2007 at 04:50 PM..
|
