Forums

Mr Dobalino

Hi,

I am struggling with floats and IE 6 on a site I am trying to get going and was hoping for some 'fresh eyes' on the problem.

I am trying to test on IE6 and it now crashes when I try to load the page. It started crashing since I have been playing around with it, because it was displaying but the layout was completely wrong.

Page works fine and looks great in Firefox.

I figure it is a problem related to IE 'haslayout' but can't seem to find what I am doing. I am not quite sure where the problem lies so I will post all of the CSS I am using related to the page.

CSS

@charset \"UTF-8\";
/* CSS Document */


body {
	background-image:url(images/bg.jpg);
	background-repeat:repeat-x;
	font-family: \"helvetica\", Geneva, sans-serif;
	font-size:10px;
	line-height: 24px;
	text-decoration: none;
}

a:link	{color:#947E51;}

a:visited{color:#b3882b;}

a:hover{color:#4c7bc1;}

a:active{color:#a8bfe1;}	


#page-wrap {
	margin:0px auto;
	width: 932px;
	background: url(images/bg-content.png) repeat-y;
	
	}

#header {
	background-image:url(images/banner.jpg);
	width:932px;
	height:149px;	
}

ul#nav {
	width:932px;
	overflow:hidden;
	}
	
	ul#nav li{
		display:inline;
		float:left;
		}

			ul#nav li a{
				display:block;
				height:31px;
				text-indent:-9999px;
				}
			
			ul#nav li.fill{
				background-image: url(images/fill.jpg);
				height: 31px;
				overflow:hidden;
				}
		
			
			ul#nav li.home a{
				background: url(images/home.jpg) top center no-repeat;
				width: 129px;
				}
				
			ul#nav li.about a{
				background: url(images/about.jpg) top center no-repeat;
				width: 128px;
				}
				
			ul#nav li.services a{
				background: url(images/services.jpg) top center no-repeat;
				width: 128px;
				}
			
				
			ul#nav li.contact a{
				background: url(images/contact.jpg) top center no-repeat;
				width: 147px;
				}
					
			ul#nav li a:hover{
				background-position: bottom;
				}
				

#content{
	margin:40px 0px 0px 40px;
	overflow:hidden;
	width:860px;
	}

			#main-content{
				display:block;
				width:450px;
				float:left;
			
				}
				
										
					h1{
						display:inline;
						font-size:20px;
						color:#8aab46;
						margin:60px 0px 0px 0px;
						background: url(images/h1back.gif) repeat-x;
						}
						
						
						 h2.home{
							 color: #696969;
							 width:100%;
							 text-decoration: none;
							 padding-top:10px;
							 font-size:14px;
							 line-height:22px;
							 }
							 
							 h2.home p{
								 padding:10px 0px 10px 0px;
								 }
			
				
			#sidebar{
				display:block;
				margin:20px 30px 0px 0px;
				width:367px;
				height:278px;
				background: url(images/vanpic.jpg) no-repeat bottom left;
				float:right;
				}
	


	
ul.front{
	display:block;
	text-indent:30px;
	list-style-type: square;
	}
	

	
#footerimage{
	margin:0px auto;
	background: url(images/bg-footer.png) no-repeat bottom;
	width:932px;
	height:19px;	
	}

#footer{
width:310px;
margin:50px auto 0px auto;
padding-bottom:30px;
bottom:0px;

}

	#footer ul#footlinks{
		display:inline;
		overflow:hidden;
		width:310px;
		}		
			
		#footer	 ul#footlinks li{
				display:block;
				height: 21px;
				float:left;
				border-right-color: #999999;
				border-right-style: solid;
				border-right-width: 2px;
				padding:0px 10px 0px 10px;
				font:arial;
				font-size:12px;
				}
				
						#footer ul#footlinks li a:link{
								color:#6b6b6b;
						}
						#footer ul#footlinks li a:visited{
								color:#999999;

						}
						#footer ul#footlinks li a:hover{
								color:#d5d5d5;

						}
						#footer ul#footlinks li a:active{
								color:#d5d5d5;

						}

HTML

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<html>

<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
<title>Southern</title>

<link rel=\"stylesheet\" href=\"reset-min.css\" type=\"text/css\">
<link rel=\"stylesheet\" href=\"main.css\" type=\"text/css\">

<!--[if IE]>
	<link rel=\"stylesheet\" href=\"ie-only.css\" type=\"text/css\">
	<script type=\"text/javascript\" src=\"js/unitpngfix.js\"></script>
<![endif]-->

<style type=\"text/css\" media=\"screen\">

</style>
</head>

<body>

<div id=\"page-wrap\">
    <div id=\"header\"></div>
    <ul id=\"nav\">
    	<li class=\"fill\"><img src=\"images/fill.jpg\"/></li>
        <li class=\"home\"><a href=\"index.html\">Home</a></li>
        <li class=\"about\"><a href=\"about.html\">About Us</a></li>
        <li class=\"services\"><a href=\"services.html\">Services</a></li>
        <li class=\"contact\"><a href=\"contact.html\">Contact Us</a></li> 	     	   		 
    </ul>	 	  
		<div id=\"content\">
    
			<div id=\"main-content\">
				
			   <h1>Services</h1>
			
					<h2 class=\"home\">Southern </h2>
					<h2 class=\"home\">Our Key services included:
						<ul class=\"front\">
							<li>Heatpump installation and servicing</li>
							<li>Cool and Freezer Rooms</li>
							<li>Air Conditioning units</li>
						</ul></h2>
					<h2 class=\"home\">We install, maintain and service a range of units on a commercial level and  provide maintenence services, ensuring all of your equipment is operating at optimum efficiency. </h2>
					<h2 class=\"home\">Feel free to <a href=\"contact.html\">contact us</a> if you have an enquiry</h2>
			
			</div><!--end 'main-content'-->
	
			<div id=\"sidebar\"></div><!--end 'sidebar'-->

		</div><!--End 'content'--> 	     	   		

	   		 
			<div id=\"footer\">
 		 		<ul id=\"footlinks\">
   		 	      <li><a href=\"index.html\">Home</a></li>
   		 	      <li><a href=\"about.html\">About Us</a></li>
   		 	      <li><a href=\"services.html\">Services</a></li>
   		 	      <li><a href=\"contact.html\">Contact Us</a></li>
	 	        </ul>

	 	     </div><!--end 'footer'-->

</div> <!-- End of \"page-wrap\" div -->

<div id=\"footerimage\"> </div><!--end footerimage-->

</body>
</html>

I have got an external style sheet in conditional comments (targeting IE) with the following code in it:

#content, ul#nav, #footer ul#footlinks {zoom:1}

I am not completely sure if I am doing the write thing in regards 'haslayout'. I have tried playing around with 'height:1%' etc but like I say, I might not be exactly understanding the problem.

Any advice, including the state of my code, would be much appreciated

Thanks

AshtonSanders

You're going to have to either describe the problem in extreme detail or give us a link so we can investigate what's going wrong.

Mr Dobalino

OK, sorry about that, I can't offer a link just yet

I know I have put all the code in there but I don't know what is affecting it.

I am running IE 6 in XP on Parallels on my Mac

When I load the index.html file into IE, it flashes up the text that is held within the 'h2' tags. The picture in the 'sidebar' div flashes up below and to the right (basically I want it to appear to the right, level with the text). The 'footerimage' appears about half the size it is supposed to be and slightly to the the left.

Then I get the hour glass and the 'IE has encountered a problem and needs to close' error message, something to do with the mshtml.dll

If I restart windows and try again, I might not even get that brief flash of layout before IE craps out.

In Firefox, The text in 'h2' tags appears to the left, the pic in 'sidebar' appears to the right of it all nicely lined up and the footer image sits on the bottom of the repeated 'bg-content.png' image which I have set to repeat-y on the 'page-wrap'. The footer navbar sits nicely on that in the center.

Before it started crashing in IE, I was trying to fix the layout in IE and it was consistently showing as described above, but now it just crashes out.

Hope this is more useful, if there is anymore I can do to help I would be happy to.

Thanks again

AshtonSanders

Hey man,

First thing: You should Validate your CSS and HTML to make sure everything is valid. That should fix your "crashing IE6"

I'm assuming this is the h2 you are talking about:

                 
                   h2.home{
                      color: #696969;
                      width:100%;
                      text-decoration: none;
                      padding-top:10px;
                      font-size:14px;
                      line-height:22px;
                      }

If you want the Sidebar to come up next to the h2, I wouldn't have the h2 be 100%.

Also, you should not have Paragraphs inside of H2's:

  h2.home p{
       padding:10px 0px 10px 0px;
}

I don't have time to read through the rest of the code. Let me know how that works.

Mr Dobalino

Hey,

Thanks alot, could swear I had it properly validated but I took the elements out from the header tag and rearranged a few things. I then cleared everything from IE (cookies, history etc) and it seems to be OK now.

Thanks for pointing me in right direction, didn't realise nesting elements in H tags was a bad idea

AshtonSanders

Great. I'm glad that helped. It was a shot in the dark.

Yea, Headings and paragraphs are block elements for organizing/categorizing text. Having a paragraph inside a header is like a box in a box. pointless.

l8r,

treehouse : what would you like to learn today?

Forums

IE 6 Layout / Float issue