CSS Layout Problem in IE (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

boonedawg -> CSS Layout Problem in IE (6/10/2006 2:54:06)

I am having some layout issues with IE. My site looks great in FireFox. But when I view it in IE it becomes broken. I have no idea what is going on here.

Here is the template I created: template

Here is the CSS code I am using for the layout: 

/* CSS Document */

body {
	width: 970px; 
	background: #ffffff; 
	text-align: center; 
	padding: 0; 
	margin: 0 auto; 
	}

#container {
	width: 970px; 
	background: #ffffff; 
	text-align: left; 
	padding: 0; 
	margin: 0; 
	}

#header {
	float: right; 
	width: 970px; 
	padding: 0; 
	margin-bottom: 5px; 
	}

.logo {
	float: left; 
	width: 139px; 
	height: 44px; 
	padding: 0; 
	margin: 0; 
	}

.headnav {
	float: right; 
	width: 155px; 
	height: 20px; 
	text-align: right; 
	text-decoration: none; 
	font-size: 10px; 
	color: #001750; 
	outline: none; 
	padding: 0; 
	margin: 0; 
	}

#topbar {
	clear: both; 
	float: right; 
	width: 970px; 
	padding: 0; 
	margin: 0; 
	}

.topleftwrap {
	float: left; 
	width: 485px; 
	padding: 0; 
	margin: 0; 
	}

.topwarranty {
	float: left; 
	width: 243px; 
	padding: 0; 
	margin: 0; 
	}

.topshipping {
	float: right; 
	width: 242px; 
	padding: 0; 
	margin: 0; 
	}

.toprightwrap {
	float: right; 
	width: 485px; 
	padding: 0; 
	margin: 0; 
	}

.toppickup {
	float: left; 
	width: 243px; 
	padding: 0; 
	margin: 0; 
	}

.topsecure {
	float: right; 
	width: 242px; 
	padding: 0; 
	margin: 0; 
	}

#breadsearch {
	float: right; 
	width: 635px; 
	height: auto; 
	border-top: 1px solid #cccccc; 
	border-bottom: 1px solid #cccccc; 
	padding: 0; 
	margin: 0; 
	}

.bread {
	float: left; 
	width: 330px; 
	text-align: left; 
	text-decoration: none; 
	font-size: 10px; 
	color: #001750; 
	outline: none; 
	padding-top: 1px; 
	padding-left: 5px; 
	margin: 0; 
	}

.search {
	float: right; 
	width: 295px; 
	text-align: right; 
	display: inline; 
	padding-top: 5px; 
	padding-right: 5px; 
	margin: 0; 
	}

#content {
	clear: both; 
	float: left; 
	width: 820px; 
	background: #ffffff; 
	text-align: center; 
	padding: 0; 
	margin: 0; 
	}

#adContainer {
	float: right; 
	width: 625px; 
	height: 250px; 
	text-align: left; 
	padding: 5px 5px 0 5px; 
	margin: 0; 
	}

#newproducts {
	float: right; 
	width: 625px; 
	padding: 0 5px; 
	margin-top: 5px; 
	}

.newproductscontainer {
	float: left; 
	width: 613px; 
	border: 1px solid #f1f1f1; 
	text-align: left; 
	padding: 5px; 
	margin: 0; 
	}

.newproductscontent {
	float: left; 
	width: 613px; 
	padding: 0; 
	margin: 0; 
	}

.helpnav {
	float: right; 
	width: 613px; 
	text-align: center; 
	padding-top: 10px; 
	margin: 0; 
	}

#sidebar {
	float: left; 
	width: 185px; 
	text-align: left; 
	padding-bottom: 5px; 
	margin: 0; 
	}

.topsellers {
	float: left; 
	width: 173px; 
	border-top: 1px solid #cccccc; 
	border-left: 1px solid #cccccc; 
	border-right: 1px solid #cccccc; 
	text-align: left; 
	color: #011750; 
	font-size: 12px; 
	font-weight: bold; 
	padding: 2px 5px 2px 5px; 
	margin-top: 5px;  
	}

.topproduct {
	float: left; 
	width: 185px; 
	text-align: center; 
	visibility: visible; 
	padding: 0; 
	margin: 0; 
	}

.viewtopsellers {
	float: left; 
	width: 178px; 
	border-left: 1px solid #cccccc; 
	border-right: 1px solid #cccccc; 
	border-bottom: 1px solid #cccccc; 
	text-align: center; 
	font-weight: bold; 
	padding: 5px 0 5px 5px; 
	margin: 0; 
	}

.ramareaffiliates {
	float: left; 
	width: 173px; 
	border: 1px solid #cccccc; 
	text-align: left; 
	padding: 5px; 
	margin-top: 5px; 
	}

#adbar {
	float: right; 
	width: 150px; 
	text-align: left; 
	padding: 0; 
	margin-bottom: 5px; 
	}

.newsletter {
	float: left; 
	width: 138px; 
	background: #f9f9f9; 
	border-top: 1px solid #cccccc; 
	border-right: 1px solid #cccccc; 
	border-left: 1px solid #cccccc; 
	text-align: center; 
	font-size: 10px; 
	padding: 5px; 
	margin: 0; 
	}

.mail {
	float: left; 
	width: 138px; 
	background: #f9f9f9; 
	border-right: 1px solid #cccccc; 
	border-bottom: 1px solid #cccccc; 
	border-left: 1px solid #cccccc; 
	text-align: left; 
	padding: 0 5px 5px 5px; 
	margin: 0; 
	}

.2CO {
	float: left; 
	width: 150px; 
	padding: 0; 
	margin: 0; 
	}

.ramaretitle {
	float: left; 
	width: 138px; 
	background: #011750; 
	border-top: 1px solid #cccccc; 
	border-left: 1px solid #cccccc; 
	border-right: 1px solid #cccccc; 
	text-align: center; 
	color: #ffffff; 
	font-weight: bold; 
	padding: 2px 5px 3px 5px; 
	margin: 0; 
	}

.ramareproduct {
	float: left;
	width: 138px; 
	border: 1px solid #cccccc; 
	text-align: left; 
	padding: 0 5px; 
	margin-bottom: 5px; 
	}

.accessories {
	float: left;
	width: 138px; 
	border: 1px solid #cccccc; 
	text-align: left; 
	padding: 0 5px; 
	margin-bottom: 5px; 
	}

.ramarebay {
	float: left; 
	width: 150px; 
	padding: 0; 
	margin: 0;
	}

.knowledge {
	float: left; 
	width: 138px; 
	border: 1px solid #cccccc; 
	text-align: left; 
	padding: 5px; 
	margin-bottom: 5px; 
	}

.help {
	float: left; 
	width: 138px; 
	border: 1px solid #cccccc; 
	text-align: left; 
	padding: 5px; 
	margin-top: 5px; 
	}

#bottomsearch {
	clear: both; 
	width: 970px; 
	height: 51px; 
	background: #011750; 
	text-align: center; 
	color: #ffffff; 
	padding: 0; 
	margin: 0; 
	}

.search2 {
	float: right; 
	width: 970px; 
	text-align: center; 
	display: inline; 
	padding: 5px 0; 
	margin: 0; 
	}

#footerlinks {
	width: 970px; 
	text-align: center; 
	padding: 10px 0; 
	margin: 0; 
	}

#footerNav {
	clear: both; 
	width: 970px; 
	text-align: center; 
	text-decoration: none; 
	font-size: 10px; 
	outline: none; 
	padding: 0; 
	margin: 0; 
	}

#footer {
	width: 970px; 
	color: #333333; 
	text-align: center; 
	padding-bottom: 3px; 
	margin: 0; 
	}


Any help with this issue will be greatly appreciated. Thanks in advance.

Boonedawg

[edit]I put all the code inside code tags (the <% on the menu of the post editor box) so the page wasn't 5 miles long.



d a v e -> RE: CSS Layout Problem in IE (6/10/2006 5:15:22)

first thing to do is fix your xhtml errors
http://tinyurl.com/ojs6h
(no slash / at the end of the dtd) ;)



boonedawg -> RE: CSS Layout Problem in IE (6/10/2006 13:13:49)

hmmm...

are you talking about this line of code?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />



womble -> RE: CSS Layout Problem in IE (6/10/2006 13:47:06)

Yep, you don't need the '/' in the doctype. Or in the following line either: 
<html xmlns="http://www.w3.org/1999/xhtml" />



jaybee -> RE: CSS Layout Problem in IE (6/10/2006 13:49:23)

Yes, doctypes don't have a / on the end.

Here are your validator results

and the second line should be

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

for an English language site. Again no /



boonedawg -> RE: CSS Layout Problem in IE (6/10/2006 14:22:43)

I am cofused as to why my content div, which contains my left navigation and main content, is breaking out of my main container that holds everything together. It works fine in FireFox, but the wonderful IE seems to have a problem with my code. Any ideas on what I need to fix? I also took the / out of the top of my code.



d a v e -> RE: CSS Layout Problem in IE (6/10/2006 14:50:34)

fix all the errors first to rule out any layout faults due to those, then we can look at browser differences ;)



boonedawg -> RE: CSS Layout Problem in IE (6/10/2006 17:21:52)

Ok, my code now validates. I am still getting the error...[sm=BangHead.gif]



d a v e -> RE: CSS Layout Problem in IE (6/10/2006 17:35:00)

not sure how important it is but you still have 3-4 errors in your style sheet ;)



boonedawg -> RE: CSS Layout Problem in IE (6/10/2006 17:39:08)

I do, would you be so kind as to point them out to me?



spitfire -> RE: CSS Layout Problem in IE (6/10/2006 19:36:06)


quote:

ORIGINAL: boonedawg
I do, would you be so kind as to point them out to me?

They are:
quote:

URI : http://www.ramare.com/scripts/pageStyles2.css
Line: 247 Context : .2CO
In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) : To make ".2CO" a valid class, CSS2 requires the first digit to be escaped (".\32CO")

URI : http://www.ramare.com/scripts/navStyles.css
Line: 45 Context : #navcontainer ul li a
Invalid number : background Too many values or values are not recognized : transparent url(../imgs/mb.gif) 5px center no-repeat

Line: 55 Context : #navcontainer ul li a:hover
Invalid number : background Too many values or values are not recognized : transparent url(../imgs/mb2.gif) 5px center no-repeat

Line: 61 Context : #navcontainer ul li a#current
Invalid number : background Too many values or values are not recognized : transparent url(../imgs/mb2.gif) 5px center no-repeat

But I am not entirely convinced any of them have anything to do with the structure of the page.
You have done a lot of work on this and made a number of changes but you do not appear to have put your latest version on line. So, would you be prepared to go a few steps further?
1) If you do not already have it, download the Fx Web Developer Toolbar. Then select "outline" and "block level elements". Look at how the divs abut each other very closely. IE doesn't like this much and tends to squidge things all over the place.
2) Down load the IE Accessibility Toolbar (best NOT to use the newish Microsoft one yet/until it gets bedded in). Then select "structure" and "show divs". The extent of IE's squidging becomes apparent. [:@]
4) Now consider the math (going from the online version at this moment) and add up the widths of everything that you want in #container, #content etc. Don't forget margins/padding etc just for IE's benefit. Doesn't quite fit.
5) You could try closing the header div after .headnav. It appears to work for IE and seems to have no effect on Fx BUT you will have the existing (extra) closing div after #newproductscontent . If you close it, it will mess up your "Stay informed" area. If you leave it there you will get a validator error, if that means a lot to you. It's a fudge (forced by the existing page layout you have, or have been given, which isn't really cross-browser friendly) but, hey it's a workable fudge.[:D]

It looks like it is shaping up into a good looking site and worth keeping plugging away at.[;)]






d a v e -> RE: CSS Layout Problem in IE (6/11/2006 2:55:48)

thanks for the (much) fuller explanation spitfire :)



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375