|
| |
|
|
boonedawg
Posts: 36
Joined: 4/8/2006
Status: offline
 |
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.
< Message edited by jaybee -- 6/10/2006 10:30:39 >
|
|
|
|
d a v e
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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) ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
boonedawg
Posts: 36
Joined: 4/8/2006
Status: offline
|
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" />
| |
|
|
|
boonedawg
Posts: 36
Joined: 4/8/2006
Status: offline
|
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
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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 ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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 ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
boonedawg
Posts: 36
Joined: 4/8/2006
Status: offline
|
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
Posts: 424
Joined: 8/6/2005
Status: offline
|
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.
It looks like it is shaping up into a good looking site and worth keeping plugging away at.
| |
|
|
|
d a v e
Posts: 4055
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: CSS Layout Problem in IE - 6/11/2006 2:55:48
thanks for the (much) fuller explanation spitfire :)
_____________________________
David Prescott
Gekko web design
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
