SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: Layout becomes weird in Firefox
-
Oct 31, 2004, 11:11 #1
- Join Date
- Oct 2004
- Location
- china
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 ^^
-
Oct 31, 2004, 11:24 #2
- 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; }
-
Oct 31, 2004, 12:51 #3
- 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 wrongLast edited by hadisentosa; Oct 31, 2004 at 13:45. Reason: update
-
Oct 31, 2004, 14:26 #4
- 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.
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%}
Paul
-
Oct 31, 2004, 17:28 #5
- Join Date
- Oct 2004
- Location
- china
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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}
-
Nov 1, 2004, 07:28 #6
- 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}
Code:* html #content{width:746px;}
Paul
-
Nov 2, 2004, 00:16 #7
- Join Date
- Oct 2004
- Location
- china
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank You So Much
IT worked ! thank you so much paul
nice tutorial !
Bookmarks