Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sidebar floats to wrong place in IE (CSS)

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

    Code:
    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.
    Last edited by mbabb; 07-16-2007 at 02:25 AM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by mbabb View Post
    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, 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.
    Code:
    #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/...ingboxbug.html

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by koyama View Post
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •