OutFront Forums
     Home    Register     Search      Help      Login    

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

 

A Newbie Margin ?

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> A Newbie Margin ?
Page: [1]
 
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

 
A Newbie Margin ? - 7/23/2008 7:58:09   
I'm in the process of building my second tableless website. I am creating a basic header, 3 column, footer layout. I want a 1% margin around my header. The following works fine in IE7 but there is no top margin in FF. Would someone give me or point me to the problem of this dilemma? Here is my header css.

#outerWrapper #header {
background-color: #99cc99;
margin: 1% 1% 1% 1%;
padding: 10px 10px 10px 10px;
font-weight: bold;
border-bottom: solid 1px #627850

_____________________________

Author of " How To Build A Website With Duct Tape"
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: A Newbie Margin ? - 7/23/2008 8:22:57   
Sounds like a border collapse issue. If you have margins on different divs touching each other they'll collapse in Mozilla (and opera?) browsers. This is to prevent double margins (e.g. on a paragraph with top and bottom margins in theory there'd be double margin between paragraphs which isn't what you actually want - you'd actually want only one margin-depth between paragraphs).

The simplest way around this is to add a border-top to the header in the same colour as the header or the outer div. This is because in theory with a border there now the two margins aren't touching.

Other ways around it are to use absolute or relative positioning (usually more trouble than it's worth - sometimes using RP is ok) or floating the div - again generally not the best solution in this sort of situation.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to MCD)
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

 
RE: A Newbie Margin ? - 7/23/2008 8:38:59   

quote:

ORIGINAL: Tailslide

Sounds like a border collapse issue. If you have margins on different divs touching each other they'll collapse in Mozilla (and opera?) browsers. This is to prevent double margins (e.g. on a paragraph with top and bottom margins in theory there'd be double margin between paragraphs which isn't what you actually want - you'd actually want only one margin-depth between paragraphs).


I knew you would solve the mystery for me. My hair is getting thinner every day. Thanks for your help Tailside.


_____________________________

Author of " How To Build A Website With Duct Tape"

(in reply to Tailslide)
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: A Newbie Margin ? - 7/23/2008 9:19:40   
No problem at all!

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to MCD)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> A Newbie Margin ?
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts