I think its a floating problem...

My design looks good in everything but IE

Page 1 of 1

5 Replies - 987 Views - Last Post: 02 September 2008 - 10:23 AM

#1 Shadow OSX  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 67
  • Joined: 28-March 06

I think its a floating problem...

Posted 25 August 2008 - 01:25 PM

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 Webpage

Here is the CSS:

#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:

<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>


Is This A Good Question/Topic? 0
  • +

Replies To: I think its a floating problem...

#2 Shadow OSX  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 67
  • Joined: 28-March 06

Re: I think its a floating problem...

Posted 26 August 2008 - 06:20 AM

No one huh?
Was This Post Helpful? 0
  • +
  • -

#3 djkitt  Icon User is offline

  • D.I.C Head

Reputation: 29
  • View blog
  • Posts: 189
  • Joined: 22-May 08

Re: I think its a floating problem...

Posted 26 August 2008 - 12:27 PM

So, I don't know if this is causing the problem, but...

As you have said, I notice that you have a float:left; on both logo and newsletter, but don't specifiy a float position for simple-cart. I suppose you have tried both a float:left; and a float:right; for simple-cart.

Sometimes adding another div wrapper around a group of divs has helped me get things to line up...

Maybe you could try throwing a clear-left in top-nav.

Anyway, what version of IE are you using?
Was This Post Helpful? 0
  • +
  • -

#4 Shadow OSX  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 67
  • Joined: 28-March 06

Re: I think its a floating problem...

Posted 27 August 2008 - 08:32 AM

View Postdjkitt, on 26 Aug, 2008 - 12:27 PM, said:

So, I don't know if this is causing the problem, but...

As you have said, I notice that you have a float:left; on both logo and newsletter, but don't specifiy a float position for simple-cart. I suppose you have tried both a float:left; and a float:right; for simple-cart.

Sometimes adding another div wrapper around a group of divs has helped me get things to line up...

Maybe you could try throwing a clear-left in top-nav.

Anyway, what version of IE are you using?


Thanks for your response. I have tried a float right on the simple-cart. But unfortunately no luck.

I really like the idea of "Maybe you could try throwing a clear-left in top-nav." I'm still kinda intermediate when it comes to CSS. So to understand what you are saying my code for this would look like this?
#top-nav{
	clear:left;
	height: 30px;
	width:951px;
	background: #FFFFFF url(/indexfolder/headerimages/topnavbg.gif) repeat-x;
	font-size: 13px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-family:Arial, Helvetica, sans-serif;
}



One of my buddies said to put a "clear" div on the right and left of the wrapper div. I'm not sure what he meant by this...btw im using IE 7. Thanks again for your help!
Was This Post Helpful? 0
  • +
  • -

#5 djkitt  Icon User is offline

  • D.I.C Head

Reputation: 29
  • View blog
  • Posts: 189
  • Joined: 22-May 08

Re: I think its a floating problem...

Posted 27 August 2008 - 09:06 AM

Yes, that looks like what I was talking about. Did it have any effect? You might need to try it in conjunction with a float:left; in your simple-cart div.

The reason I was asking what version of IE you were checking the site with is that IE 7 has a very nice tool for inspecting your layout code. It is located under View- Explorer Bar - IE Developer Toolbar.
Was This Post Helpful? 0
  • +
  • -

#6 Shadow OSX  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 67
  • Joined: 28-March 06

Re: I think its a floating problem...

Posted 02 September 2008 - 10:23 AM

View Postdjkitt, on 27 Aug, 2008 - 09:06 AM, said:

Yes, that looks like what I was talking about. Did it have any effect? You might need to try it in conjunction with a float:left; in your simple-cart div.

The reason I was asking what version of IE you were checking the site with is that IE 7 has a very nice tool for inspecting your layout code. It is located under View- Explorer Bar - IE Developer Toolbar.


Unfortunately not.. I'm gonna try that wrapper div thingy. I'll let you know how that goes. If you have any other ideas, please do share. Thanks again...
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1