SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2004
    Location
    china
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Layout becomes weird in Firefox

    Hi all

    I am a newbie in css, and I tried to design my website entirely in css. It works OK in IE but not in Firefox, netscape, etc. If someone could take a quick look at my css and point out the wrong part I would be really grateful.

    http://www.wihara.com/Etomite0.6/index.php?id=19

    here is the css file :
    /* CSS Document */

    #header {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #669900;
    position: absolute;
    height: 100px;
    width: 1003px;
    left: 0px;
    top: 0px;
    background-image: url(../../manager/media/images/bg/waterlilies6-fin2.jpg);
    background-repeat: no-repeat;


    }
    #menu {
    position: absolute;
    left: 0px;
    width: 125px;
    padding: 20px;
    top: 100px;
    height: auto;
    background-color: #CCFF99;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #669900;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    line-height: 23px;
    text-align: center;









    }
    #content {
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-style: dotted;
    border-bottom-style: dotted;
    border-right-color: #669900;
    border-bottom-color: #669900;
    position: absolute;
    height: auto;
    width: 753px;
    left: 125px;
    top: 100px;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #669900;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    line-height: 23px;
    background-color: #FFFFFF;









    }
    #right {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #669900;
    position: absolute;
    height: auto;
    width: 125px;
    left: 878px;
    top: 100px;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    background-color: #CCFF99;
    line-height: 23px;



    }
    #float {
    border: 1px dashed #000000;
    height: 200px;
    width: 200px;
    float: right;
    background-color: #0099CC;
    padding: 8px;
    margin: 0px;





    }
    body {
    background-color: #99CC99;
    padding: 0px;
    margin: 0px;

    }
    #menu a:hover {



    }
    #menu a:link {

    }
    #menu a:visited {
    color: #006666;
    }

    the html is just : <body>
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content"></div>
    <div id="right"></div>


    Thank you for your help

    p.s Im trying to make a buddhist website, so please help out ! Thanks ^^

  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,

    You need to take into account the broken box model of ie.

    have a look at the FAQ sticky thread as it explains it in detail.

    Here is the code to fix it but read the fAQ for the explanation
    Code:
    #header {
     border-bottom-width: 1px;
     border-bottom-style: dotted;
     border-bottom-color: #669900;
     position: absolute;
     height: 100px;
     width: 1003px;
     left: 0px;
     top: 0px;
     background-image: url(http://www.wihara.com/Etomite0.6/man...lies6-fin2.jpg);
     background-repeat: no-repeat;
    
    }
    #menu {
     position: absolute;
     left: 0px;
     width: 85px;
     padding: 20px;
     top: 100px;
     height: auto;
     background-color: #CCFF99;
     border-bottom-width: 1px;
     border-bottom-style: dotted;
     border-bottom-color: #669900;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #000000;
     line-height: 23px;
     text-align: center;
    }
    * html #menu{width:125px;}
    #content {
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-right-style: dotted;
     border-bottom-style: dotted;
     border-right-color: #669900;
     border-bottom-color: #669900;
     position: absolute;
     height: auto;
     width: 711px;
     left: 125px;
     top: 100px;
     border-left-width: 1px;
     border-left-style: dotted;
     border-left-color: #669900;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #000000;
     padding-top: 20px;
     padding-right: 20px;
     padding-left: 20px;
     line-height: 23px;
     background-color: #FFFFFF;
    }
    * html #content{width:753px}
    #right {
     border-bottom-width: 1px;
     border-bottom-style: dotted;
     border-bottom-color: #669900;
     position: absolute;
     height: auto;
     width: 85px;
     left: 878px;
     top: 100px;
     padding: 20px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #000000;
     background-color: #CCFF99;
     line-height: 23px;
    }
    * html #right{width:125px;}
    
    #float {
     border: 1px dashed #000000;
     height: 184px;
     width: 184px;
     float: right;
     background-color: #0099CC;
     padding: 8px;
     margin: 0px;
    }
    * html #float{width:200px;height:200px;}
    body {
     background-color: #99CC99;
     padding: 0px;
    }
    #menu a:hover {
    
    }
    #menu a:link {
    }
    #menu a:visited {
     color: #006666;
    }
    Paul

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    china
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks !

    Wow thanks a lot for helping me out . really appreciate it

    let me putting the code then heeh

    hmm i need to check out the sticky post

    again, thanks !



    Updated:

    eh the code isnot completely right

    i don't know but on the right side there is still like 10px uncovered area with my #right box.
    so on very right side, it showed my background instead of being covered with my #right box.

    do you know what is wrong
    Last edited by hadisentosa; Oct 31, 2004 at 13:45. Reason: update

  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)
    i don't know but on the right side there is still like 10px uncovered area with my #right box.
    so on very right side, it showed my background instead of being covered with my #right box.
    Are you talking about firefox or IE ?

    If you are talking about firefox the I suspect its due to the fact that you have made your page a fixed width and you have your sreen set to 1024x768. Anyone on a higher resolution is going to see a gap the to the right because thats how you've designed it.

    In firefox a scrollbar is not shown until its needed therefore firefox is about 20px wider than ie. I think this is the gap you are talking about. Obviously you can't change the size of your layout for each browser.

    Youcan force a scrollbar in mozilla with this:
    Code:
    html{height:100.1%}
    Which will make it roughly the same size as ie.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Oct 2004
    Location
    china
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up new css

    i made a new css file , it worked on firefox , netscape but a little different on IE. ( little white space between menu & header, etc).

    how do I fix this problem ?

    thank you very much paul.

    you are the man


    #header {
    background-image: url(waterlilies6-fin3.jpg);
    background-repeat: no-repeat;
    position: absolute;
    height: 100px;
    width: 1005px;
    left: 0px;
    top: 0px;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #669900;

    }
    #menu {
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #669900;
    position: absolute;
    height: auto;
    width: 92px;
    left: 0px;
    top: 101px;
    padding: 20px;
    background-color: #99CC99;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    line-height: 23px;
    text-align: center;

    }

    * html #menu{width:132px;}
    #content {
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-left-style: dashed;
    border-right-color: #669900;
    border-bottom-color: #669900;
    border-left-color: #669900;
    position: absolute;
    height: auto;
    width: 704px;
    left: 132px;
    top: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    padding: 20px;
    line-height: 20px;
    background-color: #FFFFFF;



    }

    * html #content{width:744px}

    #right {
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #669900;
    position: absolute;
    height: auto;
    width: 87px;
    left: 878px;
    top: 101px;
    background-color: #99CC99;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    line-height: 23px;
    padding: 20px;
    }
    * html #right{width:127px;}
    body {
    padding: 0px;
    background-color: #CCFF99;

    }
    * {padding:0;margin:0}

  6. #6
    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,

    You need to take care of the box model issue on the height.

    Code:
    * html #header{height:101px}
    The width of your center content need to take into account the borders also:
    Code:
    * html #content{width:746px;}
    Have another look at teh FAQ on the broken box model as you will xonstantly run into these issues if you don't understand them and how to avoid/compensate for them

    Paul

  7. #7
    SitePoint Member
    Join Date
    Oct 2004
    Location
    china
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thank You So Much

    IT worked ! thank you so much paul

    nice tutorial !



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
  •