ntcwebguy2424
asked on
CSS Overlap Issue IE
I have browser issues with overlapping divs in IE, I don't want the divs to overlap.
It looks correct in Firefox see attached.
I also need to keep the left Nav box the same length as the right Content box.
Currently its set to ( height:auto;) so if there's more text in one of the boxes then one side is taller than the other, I need to keep them the same length always.
Please inspect the attached css and php file.
css-ff-overlap.png
css-navbox-contentbox.png
It looks correct in Firefox see attached.
I also need to keep the left Nav box the same length as the right Content box.
Currently its set to ( height:auto;) so if there's more text in one of the boxes then one side is taller than the other, I need to keep them the same length always.
Please inspect the attached css and php file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php print $head_title; ?></title>
<?php print $head; ?><?php print $styles; ?><?php print $scripts; ?>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body class="<?php print $body_classes; ?>">
<div class="wrapper">
<div class="topHeader"><a href="#content"><?php print t('Skip to Main Content'); ?></a>
<div class="logotop"> </div>
<div class="search_top_right"></div>
</div>
<!--topHeader -->
<div class="wrapperBody">
<div class="left_nav">
<p> </p>
<p> </p>
</div>
<div class="contentMain" >
<div class="breadcrumb"></div>
<div class="innerHeader"></div>
<div class="titlebar">TITLE HERE</div>
<p>TEXT HERE</p>
</div>
<!-- contentMain -->
</div>
<!-- wrapperbody -->
</div>
<!--wrapper -->
<div class="footerWrapper">
<div class="footerWatermark">
<div class="footerInner">
<div class="footercolum1">
<p><a href="#" class="left_nav_links">link</a></p>
</div>
<div class="footercolum2"><a href="#" class="left_nav_links">link</a></div>
<div class="footercolum3"><a href="#" class="left_nav_links">link</a></div>
<div class="footercolum4"><a href="#" class="left_nav_links">link</a></div>
<div class="footercolum5"><a href="#" class="left_nav_links">link</a></div>
<div class="footercolum6"><a href="#" class="left_nav_links">link</a></div>
</div> <!-- footerInner-->
</div><!-- footerWatermark -->
</div><!--footerWrapper-->
</div>
</body>
</html>
____________________________________________________
<!-- CSS CODE This is actually a separate file -->
@charset "utf-8";
/* 2010 Redesign */
* {margin: 0px; padding: 0px;}
/* Main Content Section */
body,html {
margin:0 auto;
padding: 0px;
background-color:#CCC;
border-top: thick #06C solid;
height: 100%;
min-height: 100%;
max-height: 100%;
}
.wrapper{
margin:0 auto;
width: 1450px;
overflow:visible;
background-image:url(images/watermark_top.png);
background-repeat: no-repeat;
height: 100%;
min-height: 100%;
max-height: 100%;
}
.wrapperBody {
margin:0 auto;
margin-bottom:10px;
width: 1000px;
clear:both;
height: 100%;
min-height: 100%;
max-height: 100%;
}
.topHeader{
width:1000px;
margin: 0 auto;
clear:none;
}
/*Left Nav*/
.left_nav {
background-image: url(images/diag_box.png);
background-repeat:repeat;
border: 2px solid #000;
width: 225px;
float:left;
padding-left:5px;
padding-top:10px;
padding-right:5px;
margin-top:20px;
margin-bottom:10px;
height: 100%;
min-height: 100%;
}
.contentMain {
background-color: #FFF;
border: 2px solid #000;
width: 727px;
float:left;
padding-left:10px;
padding-top:10px;
padding-right:5px;
margin-top: 20px;
margin-left: 10px;
margin-bottom:10px;
clear:right;
height: 100%;
min-height: 100%;
}
.titlebar {
width:600px;
height:37px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bolder;
font-size:18px;
color:#FFF;
padding-left:15px;
margin-bottom:15px;
background-image: url(images/titlebar.png);
clear:none;
margin-top:15px;
}
.breadcrumb{
width: 720px;
height:20px;
margin-bottom:10px;
}
.innerHeader {
width:713px;
height:145px;
border: 2px solid #006;
}
.subHead{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#FFF;
}
/* Top Section */
.logotop {
background-image: url(images/logo.png);
background-repeat: no-repeat;
float: left;
clear:none;
margin-top:10px;
height: 93px;
width: 356px;
}
.search_top_right {
float: left;
margin-left: 70px;
clear:none;
margin-top:10px;
height: 93px;
width: 556px;
}
/* Links */
.top_links {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #039;
text-align: right;
font-weight: bold;
}
a.top_links:link, a.top_links:visited
{COLOR:#039; TEXT-DECORATION:underline}
a.top_links:active, a.top_links:hover
{COLOR:#FF0; TEXT-DECORATION:none}
.left_nav_links {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
text-align: left;
font-weight: bold;
}
a.left_nav_links:link, a.left_nav_links:visited {COLOR:#FFF; TEXT-DECORATION:none}
a.left_nav_links:active, a.left_nav_links:hover
{COLOR:#FF0; TEXT-DECORATION:none
}
/* Footer */
.footerWrapper{
min-height:150px;
height:auto;
width:100%;
margin:0 auto;
padding: 0px;
background-color: #333;
border-top: thick #06C solid;
clear: both;
background-position: top right;
float:left;
display: table;
}
.footerWatermark {
min-height:150px;
height:auto;
width: 1450px;
margin:0 auto;
padding: 0px;
background-image: url(images/watermark_top.png);
background-repeat: no-repeat;
background-position: top right;
clear: both;
float:left;
}
.footerInner {
width: 1000px;
min-height:100px;
margin:0 auto;
padding: 0px;
background:none;
font:Arial, Helvetica, sans-serif;
color:#FFF;
}
.footercolum1{
margin-top:10px;
width:161px;
min-height:90px;
float:left;
}
.footercolum2{
margin-top:10px;
width:161px;
min-height:90px;
margin-left:5px;
float:left;
}
.footercolum3{
margin-top:10px;
width:161px;
min-height:90px;
margin-left:5px;
float:left;
}
.footercolum4{
margin-top:10px;
width:161px;
min-height:90px;
margin-left:5px;
float:left;
}
.footercolum5{
margin-top:10px;
width:161px;
min-height:90px;
margin-left:5px;
float:left;
}
.footercolum6{
margin-top:10px;
width:161px;
min-height:90px;
margin-left:5px;
float:left;
}
.overlapsol{
/*height:20px;
float:left;
clear:both;
width:1000px;
background-color:#000;*/
}
<!-- end of footer -->
.site-name{
padding:0;
margin:0;
}
css-ff-overlap.png
css-navbox-contentbox.png
ASKER
That fixed the overlap part, but the length of the left nav box isn't the same as the content box now. So basically one part got fixed but broke another.
Okay fine. Can u post me as link...
You have to use a background tile on the content wrapper and also use overflow hidden in order to avoid setting heights on containers. Containers will expand according to the text contained.
I have just build an example to illustrate this better.
You can adapt it to your needs.
Regards
I have just build an example to illustrate this better.
You can adapt it to your needs.
Regards
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body, html{
margin:0px;
padding:0px;
width:100%;
}
#main_wrapper{
margin:0 auto;
padding:0px;
width:95%;
}
#content_wrapper{
margin:0px;
padding:0px;
overflow:hidden;
background:#ffffff url(bg_tile.gif) repeat-y top center;
}
#left_content{
margin:0px;
margin-left:10px;
padding:0px;
width:26%;
float:left;
border:2px #4A4A4A solid;
}
#right_content{
margin:0px;
padding:0px;
width:70.5%;
float:right;
border:2px #4A4A4A solid;
}
#right_content h2{
margin:0 auto;
margin-top:20px;
padding:0px;
width:96%;
border:2px #4A4A4A solid;
}
.text{
margin:0px;
padding:10px;
font-size:1em;
}
#header, #footer{
margin:0px;
padding:0px;
width:100%;
height:100px;
/*background:#415194;*/
background:#4A4A4A;
}
#header{
border-bottom:7px #415194 solid;
}
#footer{
border-top:7px #415194 solid;
}
#header ul, #footer ul{
margin:0 auto;
padding:0px;
width:36%;
list-style:none;
display:inline;
display:block;
}
#header ul li, #footer ul li{
margin:0px;
padding:0px;
width:24%;
float:left;
}
#header ul li a, #footer ul li a{
margin:0px;
padding:0px;
width:100%;
float:left;
color:#FFFFFF;
font-weight:bold;
}
#header ul li a:hover, #footer ul li a:hover{
margin:0px;
padding:0px;
width:20%;
float:left;
color:#FFFFFF;
font-weight:bold;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header">
<ul>
<li><a href="#" class="nav">Home</a></li>
<li><a href="#" class="nav">link2</a></li>
<li><a href="#" class="nav">link3</a></li>
<li><a href="#" class="nav">link4</a></li>
</ul>
</div><!--header-->
<div id="content_wrapper">
<div id="left_content">
<p class="text">
Left Content Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis est quis dolor lacinia vitae pellentesque lorem pretium. Donec magna nunc, pharetra id feugiat congue, venenatis at augue. Sed sit amet diam leo, a egestas eros. Nulla sit amet risus est, vel cursus nunc. Phasellus ornare nisl at erat adipiscing elementum. Curabitur molestie, tellus ut tincidunt pulvinar, elit mauris vestibulum enim, vitae sollicitudin turpis sapien sit amet tortor. Nam eget magna vehicula dolor cursus faucibus eu sed mi. Proin dapibus dapibus erat quis pretium. Sed sodales quam non arcu facilisis vestibulum. Nullam id lorem et enim sollicitudin adipiscing sit amet quis lacus. Nulla orci elit, porttitor sed porttitor id, venenatis et nibh. Ut vitae orci at quam adipiscing tempor ut quis tortor. Mauris volutpat luctus magna, volutpat faucibus est elementum quis. Pellentesque quam arcu, porttitor vel tempus id, mollis eget libero. Aenean in vestibulum felis.
</p>
</div><!--left_content-->
<div id="right_content">
<h2 id="right_content_hedline">This is the headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis est quis dolor lacinia vitae pellentesque lorem pretium. Donec magna nunc, pharetra id feugiat congue, venenatis at augue. Sed sit amet diam leo, a egestas eros. Nulla sit amet risus est, vel cursus nunc. Phasellus ornare nisl at</h2>
<p class="text">
Main Content Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis est quis dolor lacinia vitae pellentesque lorem pretium. Donec magna nunc, pharetra id feugiat congue, venenatis at augue. Sed sit amet diam leo, a egestas eros. Nulla sit amet risus est, vel cursus nunc. Phasellus ornare nisl at erat adipiscing elementum. Curabitur molestie, tellus ut tincidunt pulvinar, elit mauris vestibulum enim, vitae sollicitudin turpis sapien sit amet tortor. Nam eget magna vehicula dolor cursus faucibus eu sed mi. Proin dapibus dapibus erat quis pretium. Sed sodales quam non arcu facilisis vestibulum. Nullam id lorem et enim sollicitudin adipiscing sit amet quis lacus. Nulla orci elit, porttitor sed porttitor id, venenatis et nibh. Ut vitae orci at quam adipiscing tempor ut quis tortor. Mauris volutpat luctus magna, volutpat faucibus est elementum quis. Pellentesque quam arcu, porttitor vel tempus id, mollis eget libero. Aenean in vestibulum felis.
Praesent vestibulum, eros vitae gravida volutpat, velit diam euismod erat, varius hendrerit velit velit sed nulla. Suspendisse nec lorem turpis. Curabitur id ipsum ut sapien lacinia adipiscing et quis libero. Ut lobortis egestas interdum. Ut vestibulum purus ac dolor euismod egestas eu eget mi. Integer vulputate ornare facilisis. Aenean viverra pretium interdum. Nulla facilisi. Nam dapibus congue dictum. In varius tristique mollis. Duis a nisl et urna eleifend interdum sit amet vel ligula. Nullam feugiat congue lacus vitae elementum. Phasellus faucibus neque eu dui tincidunt molestie. Proin ornare, est at congue ullamcorper, sapien ante convallis elit, in porttitor purus sapien id nisl. Proin dictum aliquam sem id ullamcorper. Curabitur adipiscing lobortis augue et pulvinar. Nulla facilisi. Nunc sodales turpis a urna commodo ultrices.
Nunc nec arcu a eros tristique eleifend. Proin iaculis dolor erat, id ornare enim. Donec facilisis sapien eu diam elementum ac sollicitudin leo ultricies. Sed pulvinar convallis orci a ornare. Praesent ac lectus eu sapien adipiscing pretium et vel sapien. Nullam pellentesque augue quis arcu luctus euismod feugiat magna sollicitudin. Duis tortor massa, fringilla non congue eget, sollicitudin id risus. Quisque porta nisl ut odio euismod vel auctor nulla dignissim. Nullam nec risus nulla. Vestibulum imperdiet semper tellus, ac semper augue sodales eget. Nulla nunc quam, faucibus a egestas at, ultricies in orci. Curabitur imperdiet consequat tellus. Nam non nulla diam.
Pellentesque dictum nulla sit amet enim convallis id mollis nisl ultrices. Vestibulum dictum metus et neque tempor et cursus libero aliquam. Nulla facilisi. Nullam pellentesque ante non nisl imperdiet imperdiet mattis lorem mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus viverra convallis lorem, eget interdum massa euismod vitae. Curabitur blandit mi non neque volutpat consequat. Curabitur sollicitudin fringilla quam a adipiscing. Nunc in tincidunt nibh. Cras nec tempor turpis.
Duis bibendum quam ac urna elementum ac volutpat nisl commodo. Sed convallis odio sed urna suscipit consectetur eu iaculis odio. Maecenas aliquam congue sodales. Donec rutrum turpis non leo varius in faucibus orci laoreet. Vivamus vehicula, mi eget facilisis vestibulum, orci ante venenatis mauris, quis tristique ligula enim a orci. Nunc dignissim, justo non convallis porta, enim lectus venenatis arcu, sed sollicitudin urna turpis nec neque. Phasellus laoreet nulla sed lectus ullamcorper nec dictum leo pulvinar. Etiam ac convallis sem. Maecenas bibendum massa nec ligula blandit placerat. Integer quis lacus a nisl blandit pharetra. Ut vitae erat dolor, a semper eros. Fusce scelerisque faucibus vulputate. Donec laoreet, leo et fermentum consectetur, nunc mi condimentum turpis, a volutpat eros augue tincidunt lectus. Sed consequat urna ut dui dapibus sagittis. Nunc cursus fermentum semper.
</p>
</div><!--right_content-->
</div><!--content_wrapper-->
<div id="footer">
<ul>
<li><a href="#" class="nav">Home</a></li>
<li><a href="#" class="nav">link2</a></li>
<li><a href="#" class="nav">link3</a></li>
<li><a href="#" class="nav">link4</a></li>
</ul>
</div><!--footer-->
</div><!--main_wrapper-->
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Great job on this... very accurate solution.
.wrapper{
margin:0 auto;
width: 1450px;
overflow:visible;
background-image:url(image
background-repeat: no-repeat;
height: 100%; ------->Remove this
min-height: 100%; ------->Remove this
max-height: 100%; ------->Remove this
}
Remove these three.
Hope it works...