SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. Oct 31, 2004, 10:11 #1
    hadisentosa
    hadisentosa is offline
    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. Oct 31, 2004, 10:24 #2
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 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. Oct 31, 2004, 11:51 #3
    hadisentosa
    hadisentosa is offline
    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 12:45. Reason: update
  4. Oct 31, 2004, 13:26 #4
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 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. Oct 31, 2004, 16:28 #5
    hadisentosa
    hadisentosa is offline
    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. Nov 1, 2004, 06:28 #6
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 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. Nov 1, 2004, 23:16 #7
    hadisentosa
    hadisentosa is offline
    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 !


« Previous Thread | Next Thread »

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
  •  

Forum Rules