Solved

Gaps between header, content and footer divs in Firefox

Posted on 2007-12-01
8
941 Views
Last Modified: 2013-12-07
Hi

I'm trying to convert my table design to CSS tableless; so far I've managed to get the main content div & background image to expand down as needed. It looks right in IE but there are gaps between the header div/content div in Firefox when I use <p> tags and <h1> tags, and there's also a gap between the content div and the footer div that I don't know how to get rid of. Can someone please take a look and maybe help me figure this out? the page is here: www. angelsaffordablewebdesign.com/web-design-div.htm . The css is included in the page code. Thank you!!
0
Comment
Question by:Angelz22
  • 5
  • 3
8 Comments
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 500 total points
ID: 20390211
As always, when a page is rendered differently in IE and Firefox, Firefox gets it right.

The gaps you see comes from margin-collapsing:

http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php

As the header and paragraph tags have a margin by default, this margin will extend outside the parent element, so that there will be a margin between your containing divs.

The solution is simple; use padding instead. Like:

h1, p { margin: 0; padding: 5px 0; }
0
 

Author Comment

by:Angelz22
ID: 20390225
Thank you, GreenGhost, that corrected the problem with the gap between the header div and the content div, but I am still having the problem with the gap between the content div and the footer div; also, is it possible to set the padding in the content div without wrecking the design, so I do not have to use a separate div within the content div like I'm doing now? Thank you!
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20390902
I was going to take a look at the html code, but I quickly gave up when I saw it... It's virtually unreadable, how do you maintain code like that?

Anyhow, an extra div is one way of handling margin-collapsing, but it's not the only way.
0
 

Author Comment

by:Angelz22
ID: 20391707
The code is more easily read now; sorry about that, I forgot; I'm so used to getting rid of extra white space. Frankly it's much easier for me to maintain the way it was, but I guess that's because I'm used to it. Anyway, if someone could help me figure this out it would be very much appreciated...thanks :)
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:Angelz22
ID: 20391775
Hmmm, I seem to have corrected the gaps issue; there is still an issue with setting the margins (padding?) within the div though. It's not a huge problem but I would rater be able to just set the left and right margins within the div itself so the text is aligned where it currently is without having to use an extra div for that-any suggestions?
0
 

Author Closing Comment

by:Angelz22
ID: 31412153
Thanks! still have the other question but that wasn't part of the original question and you did help me figure this out :)
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20391872
When I look at the code it still looks horrible, but now I realise where it comes from. I use "Edit HTML" in Devloper Toolbar, and then I also get the html code that your navigation scripts write, and that is what makes it unreadable. The rest of it doesn't look that bad.

If you add padding to an element, that adds to the specified size. When you add horisontal padding you have to reduce the width to keep the total size the same. Do like this in the #web-design-3 class, and you don't need another div inside it:

padding: 0 67px 0 70px;
width:743px;
0
 

Author Comment

by:Angelz22
ID: 20391950
Beautiful, thank you so much!!!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now