...

View Full Version : Sidebar floats to wrong place in IE (CSS)



mbabb
07-16-2007, 02:20 AM
Hi everyone, I'm "M," and this is my first post at CodingForums. I'm writing asking for some help in regards to a discrepancy between Firefox and IE on a site I'm putting together.

For reference, here's the address: http://www.greekcheex.com/Trans1/styles.htm.

You'll notice how the sidebar titled "What's New @ Greek Cheex" falls pretty far down on the right side (if you're looking at it in IE; Firefox displays correctly). On the index page, index.htm (http://www.greekcheex.com/Trans1/index.htm), the same sidebar floats just under the header, in the right place! I'm fairly positive it has something to do with my unordered lists ("prodgrid") on the styles page.

Here's the CSS file ...



body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
}

h1, h2, h3 {
margin: 0;
font-weight: normal;
color: #85C329;
}

h1 {
font-size: 197%;
}

h2 {
font-size: 167%;
}

h3 {
font-size: 100%;
font-weight: bold;
}

h4 {
font-size: 125%;
font-weight: bold;
color: #FF65BC;
line-height: 197%;
margin: 0 0 5px 0;
border-top: 0px none;
border-right: 0px none;
border-bottom: 1px dotted;
border-left: 0px none;
padding: 0px;
}

p, ol, ul {
line-height: 180%;
}

p {
}

ol {
}

ul {
}

blockquote {
margin: 0;
padding-left: 20px;
border-left: 10px solid #E6E6E6;
font-style: italic;
color: #999999;
}

blockquote * {
line-height: normal;
}

a {
color: #79a9ff; /* E06529 */
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

img {
border: none;
}

img.left {
float: left;
margin: 0 15px 0 0;
}

img.right {
float: right;
margin: 0 0 0 15px;
}

hr {
display: none;
}

em {
font-size: 90%;
font-weight: bold;
font-style: italic;
}

/* Header */

#header {
width: 760px;
height: 90px;
margin: 0 auto;
}

/* Logo */

#logo {
float: left;
padding-top: 0px;
background: url(images/title.jpg) no-repeat left top;
width: 449px;
height: 80px;
text-align: right;
}

#logo h1, #logo h2 {
margin: 0;
padding-left: 60px;
font-weight: normal;
color: #aaaaaa;
}

#logo h1 {
font-weight: bold;
}

#logo h2 {
font-size: 92%;
position: relative;
top: 62px;
}

#logo a {
text-decoration: none;
}

/* Top Menu */

#topmenu {
float: right;
}

#topmenu ul {
margin: 0;
padding: 32px 0 0 0;
list-style: none;
line-height: normal;
}

#topmenu li {
display: inline;
}

#topmenu a {
padding: 0 20px;
border-left: 1px solid #79a9ff;
text-decoration: none;
font-size: 92%;
}

#topmenu a:hover {
text-decoration: underline;
}

#topmenu .first a {
border: none;
}

/* Header 2 */

#header2 {
width: 760px;
height: 200px;
margin: 0 auto;
}

/* Menu */

#menu {
float: left;
width: 200px;
height: 200px;
background: url(images/img03.jpg);
}

#menu ul {
margin: 0;
padding: 20px 20px 0 20px;
list-style: none;
line-height: normal;
}

#menu li {
display: inline;
}

#menu a {
display: block;
padding: 8px 10px;
background: url(images/img05.gif) repeat-x;
text-decoration: none;
font-size: 100%;
font-weight: bold;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: underline;
}

#menu .first a {
background: none;
}

#cartpic {
position: relative;
left: 60px;
bottom: 28px;
}

#carttop {
position: relative;
right: 13px;
top: 1px;
}

/* Splash */

#splash {
float: right;
width: 560px;
height: 200px;
}


/* Page */

#page {
width: 760px;
margin: 0 auto;
padding: 30px 0;
}

/* Product Line-Up */

#prodgrid {
float: left;
width: 480px;
margin: 0px;
padding-left: 20px;
text-align: left;
}

#prodgrid ul {
margin-left: 0;
padding: 0px 0px 20px 0px;
list-style: none;
clear: left;
}

#prodgrid ul li {
padding-left: 15px;
padding: 0px 0px 20px 15px;
float: left;
width: 150px;
text-align: center;
margin-right: 30px;
}

/* doesn't work, how do I get different colors stars for 'content' and 'prodgrid'???

#content,prodgrid ul li {
background: url(images/img08_1.gif) no-repeat 0 8px;
}

*/

#prodgrid a {
text-decoration: none;
}

#prodgrid a:hover img {
border-color: #79a9ff;
}

#prodgrid img {
margin: 0px;
padding: 1px;
border: 1px;
border-style: dotted;
border-color: #aaaaaa;
}

/* Content */

#content {
float: left;
width: 480px;
padding-left: 20px;
}

#content ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}

#content ul li {
padding-left: 15px;
background: url(images/img08.gif) no-repeat 0 8px;
}

#content ol {
margin-left: 0;
padding-left: 0;
list-style: lower-alpha inside;
}

.title {
padding-top: 3px;
}

.content {
padding: 20px;
background: url(images/img10.gif) no-repeat;
}

.twocols {
}

.twocols .col1 {
float: left;
width: 220px;
}

.twocols .col2 {
float: right;
width: 220px;
}

.prog {
color: #FF0000;
font-size: 92%;
font-weight: bold;
}

/* Sidebar */

#sidebar {
float: right;
width: 220px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin-bottom: 20px;
background: #E6E6E6 url(images/img07.gif) no-repeat right bottom;
}

#sidebar li ul {
padding: 10px 20px;
font-size: 92%;
}

#sidebar li li {
margin: 0;
padding: 5px 0;
background: none;
border-top: 1px dotted #CDCDCD;
}

#sidebar h2 {
height: 30px;
margin: 0;
padding: 6px 0 0 10px;
background: url(images/img06.gif) no-repeat;
font-size: 100%;
font-weight: bold;
color: #145997;
}

#sidebar h3 {
margin: 0;
}

#sidebar p {
margin: 0;
line-height: normal;
}

#sidebar a {
text-decoration: none;
}

#sidebar a:hover {
text-decoration: underline;
}

#sidebar .first {
border: none;
}

#rside {
color: #79a9ff;
}

/* Footer */

#footer-wrapper {
height: 60px;
padding: 8px 0;
background: #E6E6E6;
border-top: 10px solid #CDCDCD;
}

#footer {
width: 760px;
margin: 0 auto;
}

#footer p {
margin: 0;
line-height: normal;
}

#footer a {
color: #666666;
}

#legal {
float: left;
padding: 10px 0 10px 60px;
background: url(images/img11.gif) no-repeat left center;
}

#links {
float: right;
padding: 10px 0 0 0;
}


Any ideas would be greatly appreciated, thanks in advance.

koyama
07-16-2007, 05:43 AM
You'll notice how the sidebar titled "What's New @ Greek Cheex" falls pretty far down on the right side (if you're looking at it in IE; Firefox displays correctly). On the index page, index.htm (http://www.greekcheex.com/Trans1/index.htm), the same sidebar floats just under the header, in the right place! I'm fairly positive it has something to do with my unordered lists ("prodgrid") on the styles page.

Usually, while developing, it is a good idea to use some background colors so one knows how large the elements are. With a transparent background color one sees nothing.


#content {
float: left;
width: 480px;
padding-left: 20px;
background: red;
}
#prodgrid {
float: left;
width: 480px;
margin: 0px;
padding-left: 20px;
text-align: left;
background: green;
}

With the above background colors, you will clearly see that #prodgrid is too wide. You need to adjust some values for the width, margin, or padding on some of the elements.

Due to a bug [1], Internet Explorer 6 will generally expand the parent if it is not wide enough to hold its child elements. In turn this results in float dropping. This explains the different renderings in Firefox and IE6.

[1] http://www.positioniseverything.net/explorer/expandingboxbug.html

mbabb
07-16-2007, 08:05 AM
With a transparent background color one sees nothing.

With the above background colors, you will clearly see that #prodgrid is too wide.

I'm humbled, and excited to learn a new technique! Thanks for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum