Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE7 + Fixed positioning problems...

    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



    CSS

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

    #box { /*BOX DEFINITION*/
    width: 700px;
    background-color: #0a0d2d;
    padding: 25px;}

    #top { /*LOGO AREA DEFINITION*/
    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*/
    margin:0;
    font-size: small;}



    /*CONTENT*/




    #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;}

    #content p { /*PARAGRAPH POSITION CONTROL*/
    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;}





    /*NAVIGATION*/






    #navigation { /*NAVIGATION PLACEMENT AND SIZING*/
    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;}

    #navigation ul{ /*NAVIGATION LIST ARRANGEMENT*/
    margin: 0.5em 0 1em 0;
    padding: 0;
    list-style: none;}

    #navigation li p{ /*NAVIGATION TEXT ARRANGEMENT*/
    text-align: left;
    padding: 2px 0 0 5px;
    border-style: none;
    margin:0;}

    #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;}

    #navigation h2 { /*NAVIGATION HEADING ARRANGEMENT*/
    border:0;
    margin:0;
    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">




    <head>

    <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" />


    </head>




    <body>

    <div id="box">


    <div id="top"></div>
    <div id="topleft"></div>
    <div id="topright"></div>
    <div id="navigation">
    <h2>navigation</h2>
    <ul>
    <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>

    <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>
    </ul>
    </div>

    <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>


    </div>

    </body>









    </html>
    Last edited by finbarr; 09-20-2007 at 12:35 PM.

  • #2
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Next time, please put your code in "
    Code:
    code
    " tags, Thanks

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Last edited by finbarr; 09-20-2007 at 12:35 PM.
    Finbarr Taylor
    Sometimes I get so sick at the world I can't even finish my second apple pie.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Its a good practise to use strict doctype, but don't forget to validate your code . Have a look at the errors in you markup.

    Then, did you have a try on adding
    margin-left:auto;margin-right:auto; for your #box ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    cough.

    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.
    Finbarr Taylor
    Sometimes I get so sick at the world I can't even finish my second apple pie.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •