SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: CSS woes

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS woes

    Page

    I have the layout from this page which works well in IE/Gecko/Opera etc(I hope. :P), anyways im trying to make the header a sticky and on Gecko the header continues to the right and never stops i think. And on IE its just totally broken. The CSS is in the HTML file.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    What was the question again!

    I may not have understood your question properly but here's my attempt to help. If you want the header to be fixed at the top then IE doesn't understand position fixed but mozilla does. So you can give mozilla position fixed and IE something else (or you can use one of the javascript fixed scripts that are flying about the web to fix IE).

    Assuming you don't want javascript then this should achieve a respectable layout.

    change these styles to this:

    Code:
    #top { 
     width:100%;
     padding: 0px;
     background-color: #666666;
     height: 120px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     height: 110px;
     text-align: center;
     z-index: 1;
     }
    html>body #top {
     height: 110px; /* ie5win fudge ends */
     position:fixed;
     }
    #header {
     background-color: #7d7761;
     background-image: url("http://ausurt.silvs.net/img/bg.png");
     background-position: left;
     margin: 10px 10px 10px 10px;
     padding: 4px 4px 4px 4px;
     border: 1px solid #000000;
     height: 100px; /* ie5win fudge begins */
     voice-family: "\"}\"";
     voice-family:inherit;
     height: 90px;
     text-align: center;
    }
    html>body #header {
     height: 90px;
    }
    #middle {
     margin: 0px 165px 10px 145px;
     padding: 0px 4px;
     border: 1px solid #000000;
     background: #848284;
     }
    html>body #middle {position:absolute;margin-top:120px;}
    Next move the html for your left id to the end of the html code.(i.e. after the html code for the middle id). (The middle section is now just in the normal flow and the left and right are positioned absolutely which means their code can come afterwards.)

    The page should now display with a fixed header at the top for mozilla and just a normal page for IE.

    I think this is what you were asking.

    If you want to fix the header in IE there is a solution here that doesn't involve javascript:
    http://devnull.tagsoup.com/fixed/horizontal.html

    Hope that helps.

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh that helped heaps. Thanks.

    Now i got it working well and did a refurbished design for a similar site, but when i load it up in Firebird the middle (#content) loads funnily the first time. Can't get a screenshot now cause it works well. But yeh if you can check it out in Mozilla. http://www.aussavage.net you'll see it.

    Thanks for the help.

    UPDATE http://www.aussavage.net/Screenshot.jpg
    Last edited by ausurt; Sep 29, 2003 at 02:30.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I haven't got firebird but I've tried mozilla 1.2 and 1.4 and they both look ok.

    Perhaps someone who has firebird can have a look as I'd be shooting in the dark here [img]images/smilies/wink.gif[/img].

    Paul
    Edit:


    Just installed firebird 0.6.1 and it looks ok. Same as Moz 1.2 & 1.4. I couldn't see the problem.
    Last edited by Paul O'B; Sep 29, 2003 at 06:46.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrmph stange. Oh well atleast it works now.

    Thanks Paul.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK in the CSS file i set min-width: 800px on body for Gecko etc, but it didnt work. When the window minimises smaller than 800px width the right side bar goes over the middle and under the left if you push it that far. Is it possible to stop the right side bar from moving once the min-width is 800?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That's a difficult one!

    The only thing I can think of is to giv your middles a higher z-index as follows:

    Code:
    #middle { 
     position:relative;z-index:100;
    etc..........
    In this way the right sidebar will pass underneath the middle content.

    Also change the top position of the right bar so that it doesn't rub out the border above.
    Code:
    #right {
     position: absolute;
     top: 106px;
    etc.......
    That's all I can think of at the moment.

    Paul

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh i want it to rub out the border. :P

    Yeh just hope people dont shrink the window browser. :\


Bookmarks

Posting Permissions

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