homepage Welcome to WebmasterWorld Guest from 54.204.168.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
page not showing correctly in IE 7 and older
CSS positioning IE7
nugg79

5+ Year Member



 
Msg#: 4277353 posted 5:50 am on Mar 6, 2011 (gmt 0)

I know this is an easy fix but I have been staring at the screen too long today. The page shows up correctly in all modern browsers but IE wants to collapse the wrapper when I position it relatively and the wrapper shows if positioned absolutely but footer goes to the top of the page. Below is the css for positioning and the HTML is below it. Thanks in advance for the help.

CSS

@import url("typography.css");
html, body { height:100%; }


body {
background: #fdfdfd url('../img/bg.png') repeat-x right top;
}
a{
text-decoration:none;
}
#wrapper {

margin-left: auto;
margin-right: auto;
width: 720px;
padding: 0px;
position: relative;
}
#whitebox{
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
width: 720px;
padding: 0px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(border-radius.htc);
position: relative;
}
#topNav{
position:relative;
width: 720px;
margin-left: auto;
margin-right: auto;
text-align: right;
margin-bottom: 15px;
padding-right: 20px;
}
#pink_bg{
position:absolute;
left:0;
top: 182px;
height:60px;
width:100%;
background-color:#C01768;

}
#logo{
position:relative;
float:left;
width:100%;
margin-left: 35px;
margin-top: 30px;
margin-bottom: 50px;
}
#navigation{
position:relative;
min-height:60px;
width:717px;
margin-left:auto;
margin-right: auto;
padding-left:3px;
clear: both;
}
.nav {
position: relative;
float:left;
height:60px;
width:236px;
margin-bottom:5px;
line-height: 60px;
background-color:#c01768;
}
.nav:hover{
background-color:#5a5a5a;
}
.bump{
margin-right:3px;
}
.centerme {
padding-left:61px;
}
.more {
padding-left:71px;
}
#banner{
clear:both;
position:relative;
margin-left:auto;
margin-right: auto;
width: 715px;
min-height: 146px;
margin-top: .15em;
margin-bottom: 50px;
}
#mainContent{
position:relative;
clear:both;
margin-left:75px;
margin-right:75px;
padding-bottom:160px;
width:560px;
}
#mainContent li{
list-style-image:url(../img/bullet.gif);
margin-bottom:10px;
}
#footer{
position:relative;
clear:both;
width: 720px;
height: 20px;
margin-left: auto;
margin-right: auto;
padding-top:5px;
padding-bottom: 50px;
padding-left:80px;
}
#footer ul{
margin:0;
padding-top:0px;
}
#footer li{
display:inline;
margin-right: 20px;
}
.spacer{
border-right: 1px solid #5a5a5a;
height:14px;
padding-right: 15px;
float:left;
}
.noLine{
padding-left: 15px;
border:none;
float:left;
}
#copy{
position:relative;
margin-top:0px;
float:left;
clear:left;
margin-bottom: 20px;
}

------end of css------

CSS for IE6 and 7

@charset "utf-8";
/* CSS Document */

#wrapper{
position:absolute;
margin-left: 25%;

}
#whitebox{
z-index:100;

}
#pink_bg{
z-index:-500;
}
#footer{
position: relative;
clear:both;
}
-------end of css for IE--------

HTML

<body>
<div id="pink_bg">&nbsp;</div>
<div id="topNav"> <a href="">Login</a> </div>
<div id="wrapper">
<div id="whitebox">
<a href="index.html"><div id="logo"><img src="img/logo.gif" alt="Logo" title="Logo" height="64" width="353" border="0" /></div></a>
<div id="navigation">
<a href="qm.html"><div class="nav bump"><span class="centerme">-QM</span></div></a>
<a href="e.html"><div class="nav bump"><span class="more">-E</span></div></a>
<a href="rm.html"><div class="nav"><span class="centerme">-RM</span></div></a>
</div>
<div id="banner"> <img src="img/banner_img.jpg" alt="banner" title="Banner image" height="164" width="715" border="0" /> </div>
<div id="mainContent">

<h2>Three modules work together:</h2>
<ul>
<li><span class="accent">STAR-QM</span> focuses on measures that drive the CMS star ratings.</li>

<li><span class="accent">-E</span> Lorum ipsitur.</li>
<li><span class="accent">-RM</span> Lorum ipsitur.</li>
</ul>
<h2>Lorum ipsitur.</h2>
<p><span class="accent">ESSENTIALS</span> Lorum ipsitur.</p>

<h2>Intuitively designed.</h2>
<p>&ldquo;Make sense&rdquo; drill-downs from the plan level, to IPA, to the provider group, to the individual provider and/or PCP, and ultimately to the member level profile.</p>
<p>For plans that do not have PCP assignments, <span class="accent">ESSENTIALS</span> Lorum ipsitur.</p>
<h2>Plan-level dashboard.</h2>

<p>Key indicators reported throughout <span class="accent">ESSENTIALS</span> Lorum ipsitur <span class="accent">ESSENTIALS</span> Lorum ipsitur.</p>
<h2>Web-based and easily accessible to all users.</h2>
<p>The <span class="accent">ESSENTIALS</span> system iis. <span class="accent">ESSENTIALSTARS</span> is of PHI.</p>

</div>
</div><!--end of div to create white box around main content-->
<div id="footer">
<div>
<div class="spacer"><a href="about.html" target="_self">About Us</a></div>
<div class="noLine"><a href="contact.html" target="_self">Contact</a></div>

<div id="copy">
<p>&copy; 2011 Copyright</p>
</div>
</div>
</div>

</div>

</body>

[edited by: alt131 at 7:36 pm (utc) on Jul 9, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

 

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4277353 posted 9:37 am on Mar 6, 2011 (gmt 0)

Hi nugg79

Tip for the day ;) - too much relative positioning going on, there is no need to use relative positioning unless there is something inside a div that you want to position absolutely, but take it's position from the div instead of the viewport, that'll remove a few IE headaches.. and there is no need to "clear:both" when there's no floats to clear..

there are also some HTML errors, where you have divs nested in links

This can be rewritten fairly easily without needing any IE specific CSS at all. because the layout does not need floats (apart from your navigation links) it doesn't need so much fixed widths or relative positioning or clearance, in other words.. loosen up and let it flow, letting the elements do what they're best at ..

here's the Sunday freebie:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/" type="text/css" media="screen" charset="utf-8">
<style type="text/css" media="screen">

html body {margin: 0; padding: 0; /* don't force a height but do reset */ }
body {background: #444; /* temporary */}
a {text-decoration:none;}

#wrapper {
width: 720px;
margin: 0 auto;
padding: 0;
}

#whitebox{
background: #fff;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
position: relative;
behavior: url(border-radius.htc);
width: 720px; /* for haslayout - width shouldn't be needed as it should be 100% of the wrapper, by default - think maybe it was the behaviour that needed it though it corrected itself once other positioning removed. I left in for safety as haven't tested IE6 */
}

#pink_bg{
position:absolute; /* to the viewport */
left:0;
top: 182px;
height:60px;
width:100%;
background-color:#C01768;
}

#topNav{
text-align: right;
margin-bottom: 15px;
margin-top: 15px;
padding-right: 20px;
}

#logo{
margin-left: 35px;
margin-top: 30px;
margin-bottom: 30px;
}

#logo img {display: block;}

#navigation{}

.nav { /* now a ul */
float: left;
width:100%;
margin: 0;
padding: 0;
list-style: none;
}

.nav li {
float:left;
height:60px;
width:236px; /* 236 x 3 = 708 */
margin-left: 3px; /* 3px x 3 = 9 + 708 width = 717, leaving 3px natural "margin" at the right side */
margin-bottom:5px;
line-height: 60px;
text-align: center;
}

.nav a {
display: block;
width: 100%;
background-color:#c01768;
color: #fff;
}

.nav a:hover{
background-color:#5a5a5a;
}
/* end navigation */

#banner{
width: 715px;
margin: 0 auto;
min-height: 146px;
margin-top: .15em;
margin-bottom: 50px;
}

#mainContent{
margin: 0 75px;
width:570px; /* whole width is 720px - 150px margins = 570px - probably don't need but it will help IE */
padding-bottom: 50px;
}

/* relax the footer! the #footer padding should take care of the spacing */
#footer{
padding-top: 10px;
padding-bottom: 30px;
text-align: center; /* centers the spans and the text in the divs */
background: #dad; /* temp to show footer is now in the flow */
}

.links { /* div */ }

.links span {
display: inline-block;
padding: 1px 15px 1px 11px;
border-right: 1px solid #5a5a5a;
}
.links .last {border:none;}

#copy {/* div */}
#copy p {margin: 0;}

</style>
<body>
<div id="pink_bg">&nbsp;</div>
<div id="topNav"> <a href="">Login</a> </div>
<div id="wrapper">
<div id="whitebox">

<div id="logo">
<a href="index.html"><img src="img/logo.gif" alt="#" title="#" height="64" width="353" border="0"></a>
</div>

<div id="navigation">
<ul class="nav">
<li class="first"><a href="qm.html">STAR-QM</a></li>
<li><a href="e.html">STAR-E</a></li>
<li class="last"><a href="rm.html">STAR-RM</a></li>
</ul>
</div>

<div id="banner"> <img src="img/banner_img.jpg" alt="#" title="#" height="164" width="715" border="0"> </div>
<div id="mainContent">

<h2>Heading:</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

</div><!-- end MainContent -->
</div><!--end of div to create white box around main content-->

<div id="footer">
<div class="links">
<span class="first"><a href="about.html">About Us</a></span>
<span class="last"><a href="contact.html">Contact</a></span>
</div>
<div id="copy"><p>&copy; 2011 Copyright</p></div>
</div><!-- end footer -->

</div><!--end wrapper -->
</body>
</html>


the nav links clear because their parent <ul> is also floated at 100% width. The outer float serves to 'contain' the links and the 100% then leaves no room for content to float beside it - so no forced clear required

you'll have to re-adjust margins and padding to suit - remember that if you adjust any side padding/borders it will affect the width so adjust it, if applicable, too, always advisable to use a "first" and "last" class on links for just the reasons like a differing border and margins when they're horizontal, like your footer

Enjoy!
Suzy

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved