View Full Version : IE7 + Fixed positioning problems...

09-19-2007, 03:45 PM
My page consists of a box, the box has padding round the edge to box everything in further, there is a logo at the top of the box, there is a line of gradient directly beneath the logo. On the left beneath the gradient there is a fixed position navigation bar (this scrolls up and down the page when you move down). To the right of the navigation is my content box. At the base of the page there is a footer.

When I initially declared my navigation box fixed opera and firefox handled it absolutely fine. IE 7 moved the navigation ontop of the content for some reason and left a blank space where the navigation should have been. I managed to resolve this with the left: property, but this leaves me no option for centering my page - this is issue number 1.

Issue number 2: (I currently have IE7 Firefox and Opera all working fine).

My content section is just positioned statically - IE 6 places this underneath and to the right of where the navigation initially begins - this is easily solved by making the content Float: right.

Now down to the issue - this means that the lowest static element is the gradient, so the bottom bar jumps up to the top and leaves the navigation and the content hanging off the bottom of the box - strangely enough this only happens on firefox and opera - the proper browsers, IE seems to ignore the fact that content is now floating.

"Clear: right" I hear you say - yes - fantastic, that works on ie6, firefox, and opera! But with IE7 it makes ANY FIXED ELEMENTS DISAPPEAR ENTIRELY. WHAT!!!!!????? I'll post the code beneath and I'll upload the broken version of the page into my webspace, see http://www.glowstix.biz/product.html


body { /*MASTER RULES*/
background-color: black;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin-left: 8px;
margin-top: 8px;
line-height: 1.2;}

width: 700px;
background-color: #0a0d2d;
padding: 25px;}

background-image: url(top/glowgo.jpg);
background-repeat: no-repeat;
width: 700px;
height: 220px;}

#topleft { /*BAR ABOVE NAVIGATION - the gradient*/
width: 12em;
height: 1em;
background-color: #1b2c71;
float: left;
background: url(top/gradleft.jpg) repeat-x left;}

#topright { /*BAR ABOVE CONTENT - the gradient*/
height: 1em;
background-color: #0e1345;
background: url(top/gradright.jpg) repeat-x left;}
#bottombar { /*BAR BELOW THE CONTENT
height: 1em;
background-color: #0f0d36;
clear: right;}
#bottom { /*FOOTER*/
height: 1em;
width: 700px;
color: #f8ff01;
text-align: right;
background: black;
clear: right;
/*background: black url(top/station2.jpg) no-repeat left;*/
/*border-top: 1em #0f0d36 solid;*/}

#bottom p { /*FOOTER TEXT CONTROL*/
font-size: small;}


#content { /*CONTENT CONTROL*/
border: solid #1b2c71 1em;
color: white;
width: 29.75em;
margin-left: 12em;
background: #0f0d36 url(top/ccbl.jpg) no-repeat bottom left;
float: right;}

#content h1 { /*HEADER TEXT CONTROL*/
margin: 0;
padding: 1em 0 0.5em 0;
background: url(top/cctl.jpg) no-repeat top left;
text-align: center;}

margin: 0 1em 1em 1em;
text-align: justify;}

#content a { /*ANCHOR COLOUR*/
color: #FFFF00;}

#content a:hover { /*ANCHOR HOVER*/
text-decoration: none;}

#content strong { /*STRONG DEFINITION*/
border: 1px yellow solid;}

#content em { /*EMPHASIS DEFINITION*/
color: #bdce2c;}

#content blockquote { /*BLOCKQUOTE CONTROL*/
color: #bdce2c;
font-size: 14px;
text-align: justify;
margin-right: 3em;}

#content a.quote { /*QUOTE CONTROL*/
color: white;
font-size: 12px;
margin-left: 1em;}

#content img { /*IMAGE CONTROL*/
margin: 1em 0 2em 2.5em;}

#content li {
margin-right: 1em;}


left: 33px;
position: fixed;
width: 10em;
border: solid #0e1345;
border-top-width: 1em;
border-right-width: 8px;
border-bottom-width: 8px;
border-left-width: 1em;
padding: 0 8px 8px 0;
background: #bdce2c url(top/nav.gif) no-repeat center;}

margin: 0.5em 0 1em 0;
padding: 0;
list-style: none;}

text-align: left;
padding: 2px 0 0 5px;
border-style: none;

#navigation ul a.active{ /*NAVIGATION BUTTON ARRANGEMENT for active links*/
text-decoration: none;
display: block;
background: #0a0d2d;
color: white;
margin: 0 0 1px 1em;
width: 8em;
height: 1.5em;} /*HOVER EFFECT ON active LINKS*/ #navigation ul a.active:hover{ background: gray;}

#navigation ul a.inactive{ /*NAVIGATION BUTTON ARRANGEMENT for inactive links*/
text-decoration: none;
display: block;
background: black;
color: white;
margin: 0 1em 1px 1em;
width: 8em;
height: 1.5em;} /*HOVER EFFECT ON inactive LINKS*/ #navigation ul a.inactive:hover{ cursor: default;}

padding: 0.5em 1em 0 2.5em;
color:#333333; /*
background: #bdce2c url(top/smallcorner.jpg) no-repeat top right; THIS WILL NEED A SHADOW*/
font-size: medium;}

The html is literally just content but I'll post a shorter page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<META NAME="author" CONTENT="Finbarr Taylor">
<META NAME="description" CONTENT="Glowstix.biz - We sell glowsticks to you, but we prefer to sell them for you...">
<META NAME="abstract" CONTENT="Glowstix.biz - We sell glowsticks to you, but we prefer to sell them for you...">
<META NAME="keywords" CONTENT="glowstix, glowstix.biz, buy glowsticks, sell glowsticks, buy bulk glowsticks, sell bulk glowsticks, buy glow sticks, buy lightsticks, buy light sticks, buy lightstick, buy light stick, buy glowstuck, glasgow events, edinburgh events, night clubs, the arches, pressure, death disco, soundhaus, fantazia, strathclyde union, secc glasgow, rave, glowstick pictures, glowstick photos">
<META NAME="revisit-after" CONTENT="3 days">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Glowstix.biz - The Product</title>

<link href="glow2.css" rel="stylesheet" type="text/css" />



<div id="box">

<div id="top"></div>
<div id="topleft"></div>
<div id="topright"></div>
<div id="navigation">
<li><a class="active" title="Home page" href="index.html"><p><strong>></strong> home</p></a></li>
<li><a class="active" title="What is a glowstick?" href="product.html"><p><strong>></strong> the product</p></a></li>
<li><a class="active" title="Buy glowsticks" href="buy.html"><p><strong>></strong> buy glowsticks</p></a></li>
<li><a class="active" title="The services we offer" href="services.html"><p><strong>></strong> services</p></a></li>
<li><a class="active" title="Contact us" href="contact.html"><p><strong>></strong> contact us</p></a></li>

<ul id="2nd">
<li><a class="active" title="Jobs @ Glowstix.biz" href="jobs.html"><p><strong>></strong> jobs</p></a></li>
<li><a class="inactive" title="photos page offline" href=""><p><strong>></strong> <em>photos</em></p></a></li>
<li><a class="inactive" title="forum offline" href=""><p><strong>></strong> <em>forum</em></p></a></li>
<li><a class="inactive" title="events page offline" href=""><p><strong>></strong> <em>events</em></p></a></li>

<div id="content">
<h1>What is a glowstick?</h1>
<p><blockquote><em>"A lightstick, also called a glowstick, is a transparent plastic tube which contains chemical fluids held apart in two compartments. The outer plastic tube contains one part of the chemical mixture, and the inner compartment is a glass or brittle plastic tube containing the second mixture. If the lightstick is bent, the inner tube breaks and the chemicals mix, resulting in a reaction that emits light but not necessarily heat. This phenomenon is called chemoluminescence."</em> <a class="quote" href="http://encyclopedia.thefreedictionary.com/Glowstick">thefreedictionary</a></blockquote> </p>
<p>Sounds like fun. These are incredibly popular as they turn an otherwise boring dancefloor into a swirling mass of colour. They come in all different colours and sizes. At Glowstix.biz we sell the 6" disco sized variety (diameter 15mm). We sell only the finest, non toxic, fully uk certified glowsticks. Our glowsticks are cold to the touch and remain bright for around 8 hours. We sell 7 different colours. The photograph below is of a green glowstick.</p>
<img src="top/green.jpg" width="400px" height="201px" /></div>

<div id="bottom"><p>&copy; FINBARR TAYLOR 2007 v2.3</p></div>




09-19-2007, 07:50 PM
Next time, please put your code in "
code" tags, Thanks

09-20-2007, 01:32 PM
Is this just a bug then or what? I thought I had formatted the text display fairly clearly. I'll make sure to give you the full benefit of that extra code tag next time eh? :-P

09-21-2007, 07:02 AM
Its a good practise to use strict doctype, but don't forget to validate your code . Have a look at the errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.glowstix.biz%2Fproduct.html&charset=%28detect+automatically%29&doctype=Inline&group=0) in you markup.

Then, did you have a try on adding
margin-left:auto;margin-right:auto; for your #box ?

10-04-2007, 06:06 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


I point out that you cant use the auto auto margins, because I've had to use a left: property on the navigation element... If you're using a widescreen this would move the box into the middle and keep the navigation 33px from the left. Had to use the left cos IE totally blows, and seems to add in random pixels whenever you use an absolutely or fixed positioned element.