SitePoint Sponsor |
|
User Tag List
Results 1 to 14 of 14
Thread: firefox and margin-top
Hybrid View
-
Sep 1, 2007, 12:42 #1
- Join Date
- Sep 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
firefox and margin-top
Hi, this is my first topic here.
Why Firefox don't show the "margin-top" and "margin-bottom" of the first and
last elements of the code below?
The code:
XHTML
<!DOCTYPE ETC> .....
<body>
<div id="rap">
<h1 id="header">Header</h1>
<h1 id="content">Content</h1>
<h1 id="footer">Footer</h1>
</div>
</body>
....
* { margin:0; padding:0; }
body { background-color:#099; }
#rap { margin:10px auto; width:760px; background-color:black; }
h1 { margin:105px; width:750px; border:1px solid green; }
#header { background-color:red; }
#content { background-color:white; }
#footer { background-color:blue; }
-
Sep 1, 2007, 12:46 #2
- Join Date
- Oct 2005
- Location
- Taos, NM, US
- Posts
- 441
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Off Topic:
I think you can get rid of the "rap" DIV. Just take the styles from it and apply it to BODYMatt Alexander
Alexander Site Design
-
Sep 1, 2007, 12:52 #3
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
margin collapse
http://www.maxdesign.com.au/presenta...op/slide46.htm
a bit more heavy explanation
http://complexspiral.com/publication...psing-margins/
PS there usually is only one H1 tag on a page
width 750 + left right margin of 2 x 105 = ?
A dirty simple trick is to add a border top bottom to the wrapper
-
Sep 1, 2007, 13:02 #4
- Join Date
- Sep 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ops, i posted wrong css code. The correct is:
* { margin:0; padding:0; }
body { background-color:#099; }
#rap { margin:10px auto; width:760px; background-color:black; }
h1 { margin:5px; width:750px; }
#header { background-color:red; }
#content { background-color:white; }
#footer { background-color:blue; }
.
Firefox would not have to show the margins as the IE (6)?
how I can resolve this problem?
-
Sep 1, 2007, 13:10 #5
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
read my post Please , H1 is block level and don't need a width set , with a margin or padding or border they adjust to a screen or container ( wrapper )
Code:<!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" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- saved from url=(0022)http://www.domain.com/ --> <style type="text/css"> * { margin:0; padding:0; } body { background:#099; } #rap{margin:10px auto;width:760px; background:black;border-top:1px solid #ffff00;border-bottom:1px solid #ffff00;} h1{margin:5px;border:1px solid green; } #header{background:red;} #content{background:white;} </style> <script type="text/javascript"> </script> </head> <body> <div id="rap"> <h1 id="header">Header</h1> <h1 id="content">Content</h1> <h1 id="footer">Footer</h1> </div> </body> </html>
-
Sep 1, 2007, 13:30 #6
- Join Date
- Sep 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok, but firefox don't show the margin-top black (the color of div rap) as in IE 6.
-
Sep 1, 2007, 13:42 #7
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Sep 1, 2007, 13:54 #8
- Join Date
- Sep 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
@all4nerds
Yes, but if you removed all the borders?
and thank you
-
Sep 1, 2007, 13:57 #9
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
See links above, you can't always get what you want, you get what you need M J
PS div for main containers and proper use of H and P tags , there are ways to solve this by separating css (hack) or use floats, etc, both use more code and also need understanding, H Tags usually only need padding, and your model is rather theoretical
PS use a border color the same as your body background color
-
Sep 1, 2007, 14:08 #10
- Join Date
- Sep 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks, man... Just one more thing...
And if i set the "overflow:auto" in the #rap? Same effect, but no extra padding or border... Any problem with this?
-
Sep 1, 2007, 14:11 #11
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
No
-
Sep 2, 2007, 08:58 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Ok, but firefox don't show the margin-top black (the color of div rap) as in IE 6.
Collapsing margins are a complicated subject and you should read the links all4nerds pointed to, or my own take on this.
-
Sep 2, 2007, 11:45 #13
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
Or in other words, if you want headaches use them, other wise try to avoid them
( Padding on wrapper and use h1 p h2 p p h3 p p, etc so that you can control there margin or better padding on the p tags , not that difficult )Last edited by all4nerds; Sep 2, 2007 at 19:14.
-
Sep 2, 2007, 17:15 #14
- Join Date
- Sep 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
ok, thank you again!
Bookmarks