How can I get this to work in IE too?

liunx · Jan 10, 2008

Hello. 
 
I hope you can help please. 
I have had to paste the code below as I don't have a site where I can put it - as it's on a LAN, apologies. 
 
Basically, this CSS works fine in all browsers except for IE and Mozilla. 
 
What I'm trying to achieve is that the border-left on the right blocks will always reach the "margin" div despite how much content it holds. As you can see, I've added lots of &nbsps's so purposely the main content is higher than what the right blocks contain, in Konqueror, Opera with the "spacer" div - the border-left of the right blocks reaches the bottom, but not IE. 
 
Any suggestions, or better ways of doing any of the code, and how to fix this is greatly appreciated. 
 
Purposely all colours etc have been removed to make it as simple on the actual layout as poss. 
 
Thanks. 
 
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
<html lang="en" dir="ltr"> 
<head> 
<title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<style type="text/css"> 
body, html { 
margin : 0; 
padding : 0; 
color : #000; 
} 
 
#head { 
text-align : left; 
} 
#head p { 
margin : 0; 
padding : 13px; 
color : #fff; 
} 
#nav { 
border-width: 1px 0px; 
border-color: #000; 
border-style: solid; 
text-align : left; 
} 
#nav p { 
margin: 0; 
} 
 
#area { 
width : 80%; 
float : left; 
} 
#content { 
margin : 0; 
padding : 15px; 
text-align : center; 
} 
 
#rightside { 
margin : 0 0 10px 80%; 
border-left : 1px dashed #000; 
} 
.right h4 { 
margin : 0; 
padding : 4px; 
border : 1px solid #000; 
color : #fff; 
} 
.rightbox { 
padding : 10px; 
border-top : 0; 
} 
.rightbox p { 
margin : 0; 
} 
.right { 
text-align : center; 
} 
 
#spacer { 
clear : both; 
height : 8px; 
font-size : 1pt; 
} 
#margin { 
margin : 0; 
padding : 0; 
clear : both; 
height : 10px; 
border-width: 1px 0px; 
border-color: #000; 
border-style: solid; 
} 
#bottom { 
clear : both; 
} 
#bottom p { 
margin : 0; 
padding : 6px; 
} 
</style> 
</head> 
 
<body> 
<div id="head">Title</div> 
 
<div id="nav"> 
Some nav here 
</div> 
 
<div id="area"> 
<div id="content"> 
 
Content here. 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
</div> 
</div> 
 
<div id="rightside"> 
<div class="right"> 
<h4>Block 1:</h4> 
 
<div class="rightbox"> 
Content. 
</div> 
</div> 
 
<div class="right"> 
<h4>Block 2:</h4> 
 
<div class="rightbox"> 
Content. 
</div> 
</div> 
 
<div class="right"> 
<h4>Block 3:</h4> 
 
<div class="rightbox"> 
Content. 
</div> 
</div> 
 
<div class="right"> 
<h4>Block 4:</h4> 
 
<div class="rightbox"> 
Content. 
</div> 
</div> 
 
<div id="spacer"></div> 
</div> 
 
<div id="margin"></div> 
 
<div id="bottom"> 
Text... 
</div> 
</body> 
</html>Try putting in your CSS this: 
 
overflow: visable; 
 
where your having your problem with it hiding content 
 
alternatively try 
 
padding: 20px; 
 
for padding for all sides or you and also use one or more of these: 
 
padding-top: 20px; 
padding-right: 20px; 
padding-bottom: 20px; 
padding-left: 20px; 
 
you can change the 20px to the value that you want 
 
also does it work in tables instead of DIV tags (I do not know any thing about DIV)one other thing: 
 
with your CSS instead of having everything branching of body, use the specific tags it applies to eg 
 
div { 
 
#head { 
text-align : left; 
} 
#nav { 
border-width: 1px 0px; 
border-color: #000; 
border-style: solid; 
text-align : left; 
} 
 
 
also instead of having the classes and the ids in a random order, have the classes together and the ids together.Hiya. 
 
Tried the overflow, but still the same :\ 
 
Any other ideas? 
 
Thanks for your reply and feedback, I've done this with the CSS now grouping it togethet etc. 
 
Thanks in advance. 
 
Regards,what version browsers are you using?I just noticed that you are using a percentage for margin width. I had a simalar problem with tables. I tried to make the picture show in a cell set for 100%. when you resize the window, the more you constrict the window the more of the picture that would get cut off. So when I changed the percentage to pixel amount it was fixed, although I did not get the centreing that I wanted. 
 
So question is: if you change the percentage to pixels on yours does it work then?

How can I get this to work in IE too?

liunx

Guest