I'm sure this has been asked before, but I couldn't find the answer I was looking for. I am currently redesigning a site but have spent the last 3 hours trying to figure out this problem.
My header which holds the #logo, #newsletter, and #simple-cart is not displaying correctly. For some reason when viewing in IE the #simple-cart is being pushed down and breaks the wrapping div titled "#header". I have tried for the last 3 hours to solve this issue but to no avail. I believe that it has something to do my float properties on the #logo, #newsletter, and #simple-cart. I'm not sure though.
You can view the shopping cart with this link:
My WebpageHere is the CSS:
CODE
#logo{
float:left;
margin: 0px;
height:113px;
border:none;
width:297px;
}
#header{
margin: 0;
background-color:#FFFFFF;
}
/* ----------------NEWSLETTER---------------- */
#newsletter{
float:left;
background-image:url(/indexfolder/headerimages/newsletterbackdrop.gif);
width: 324px;
height: 113px;
}
#newsletter p{
margin: 0 0 0 8px;
padding: 19px 60px 0px 30px;
line-height: 16px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
}
#newsletter ul{
margin: 24px 0 0px 0px;
list-style-type:none;
padding-left:37px;!important
}
#newsletter li{
float: left;
margin: -18px 0px 0px 0px;
}
#newsletter form{
margin: 0px;
}
#newsletter strong{
font-size:17px;
color:#FFFFFF;
}
.join{
margin-left:2px;
margin: 3px 0px 0px 3px;!important
border:none;
}
/* ----------------SHOPPING CART---------------- */
#simple-cart{
postition: relative;
margin: 0px;
height: 113px;
background-image:url(/indexfolder/headerimages/shoppingcartbackdrop.gif);
margin: 0px;
padding:0;
width: 330px;
overflow: hidden;
text-decoration: none;
}
.view-cart{
margin: 19px 0px 0px 42px;
display: block;
background: transparent url(/indexfolder/headerimages/cart.png) no-repeat;
padding-left: 25px;
height: 18px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
float: left;
text-decoration: none;
}
.view-cart strong{
font-size:17px;
color:#FFFFFF;
}
.checkout{
float: right;
margin: 19px 75px 0px 0px;
display: block;
background: transparent url(/indexfolder/headerimages/cartgo.png) no-repeat;
padding-left: 25px;
height: 18px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration: none;
}
.checkout strong{
font-size:17px;
color:#FFFFFF;
}
.shoppingcart{
color:#2A1D0D;
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
font-style:normal;
font-weight:normal;
text-decoration:none;
}
#cart-info{
clear: right;
padding: 9px 75px 0px 0px;
line-height: 16px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
}
#simple-cart a{
color: #FFFFFF;
}
hr.shoppingcart{
display: none;
}
#simple-cart tr{
vertical-align: top;
}
#simple-cart table{
height: 30px;
overflow: hidden;
}
#simple-cart p{
margin: 0;
padding: 0;
font-size: 12px;
text-decoration:none;
}
#simple-cart table a{
display: none;
}
#simple-cart .horizontal{
height: 1px;
margin: 14px 0 3px 0;
}
/* ----------------TOP NAVIGATION----------------*/
#top-nav{
height: 30px;
width:951px;
background: #FFFFFF url(/indexfolder/headerimages/topnavbg.gif) repeat-x;
font-size: 13px;
float:left;
font-family:Arial, Helvetica, sans-serif;
}
#top-nav ul{
float: right;
width: 375px;
height:30px;
margin:8px;
}
#top-nav li{
float: left;
list-style:none;
}
#top-nav a{
display: block;
margin: 0;
padding: 0px 15px;
text-decoration: none;
color: #666666;
}
#top-nav a:hover{
text-decoration: none;
color: #000000;
padding: 0px 15px;
}
#top-nav img{
float: left;
}
body {
margin: 0px 0px 0px 0px;
}
The main elements of importance is the #logo, #newsletter, and #simple-cart tags. Here is the html:
CODE
<div style="margin: 0px auto; width: 951px;">
<div id="header">
<div id="logo">
<a href="http://www.greekcreations.com" title="GreekCreations.com Home"><img src="../indexfolder/headerimages/logo.gif"/></a>
</div>
<div id="newsletter">
<p><strong>Sign up for our newsletter</strong><br>
and we'll send you updates on new products, sales and exclusive offers.</p>
<form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post">
<ul>
<li><input type="text" name="ea" size="20" value="Enter Email Here!" style="font-size: 8pt" onclick="clearIt(txtEmail)" onblur="replacetext(txtEmail);">
</li>
<li class="join"><input class="join" type="image" value="GO" name="go" src="../indexfolder/headerimages/joinbutton.gif" style="font-size: 8pt">
</li>
</ul>
<input type="hidden" name="m" value="1101864522096">
<input type="hidden" name="p" value="oi">
</form>
</div>
<div id="simple-cart">
<a class="view-cart" href="index.asp?PageAction=CARTDETAILS" title="View Cart"><strong>View Cart</strong></a><a class="checkout" href="index.asp?PageAction=CARTCHECKOUT&Step=0&DC=&" title="Checkout"><strong>Checkout</strong></a>
</p>
<div id="cart-info">
<table style="border-collapse: collapse;" border="0" height="76" width="100%">
<tbody><tr><td>
<p style="margin-top: 0pt; margin-bottom: 0pt;" align="right">
Items in your Cart: <%Cart.Count%>
</p>
<p style="margin-top: 0pt; margin-bottom: 0pt;" align="right">
Current Subtotal: <%Cart.Total%>
</p>
<p style="margin-top: 0pt; margin-bottom: 0pt;" align="right">
<!-- <a title="Clear Your Cart" href="#"><img src="/images/tcart-clear.gif" border="0"></a> -->
<a title="Checkout" href="/checkout.aspx"><img alt="Checkout Button" title="Click Here To Checkout" src="/images/tcart-checkout.gif" border="0"></a>
<a title="View Your Cart" href="/cart.aspx"><img src="/images/tcart-view.gif" border="0"></a>
</p>
</td></tr></tbody>
</table>
</div>
</div>
</div>
<div id="top-nav">
<img src="../indexfolder/headerimages/topnavphonenumber.gif" alt="Our Phone Number" />
<ul>
<li><a href="index.asp?PageAction=Custom&ID=4" title="Track Order"><strong>Track Order</strong></a></li>
<li><a href="index.asp?PageAction=Custom&ID=33" title="About Us"><strong>About Us</strong></a></li>
<li><a href="index.asp?PageAction=Custom&ID=33" title="Design Tools"><strong>Design Tools</strong></a></li>
<li><a href="index.asp?PageAction=Custom&ID=33" title="Help"><strong>Help</strong></a></li>
</ul>
</div>
</div>
| 