•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 402,000 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,438 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1557 | Replies: 2
 |
•
•
Join Date: Apr 2007
Posts: 1
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Hello I have a div inside other div with a margin-top, it looks good in Ie7 but i have an issue in firefox, it doesn't work the margin-top
/*CSS*/
#main{background-color:#003399; height:50px; margin-top:10px; width:300px;}
#child{background-color:#993300; height:50px; margin-top:10px; margin-bottom:10px; margin-right:10px;}
/*HTML*/
<div id="main">
<div id="child">test</div>
</div>
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 943
Reputation:
Rep Power: 5
Solved Threads: 47
Posting Shark
Try using a padding-top:10px for the main div instead of a margin-top:10px for the child div, and a padding-top of 10px on the body instead of a margin-top on the main div.
I can't tell you why it doesn't work; but it doesn't seem to work on Opera either o_O
I can't tell you why it doesn't work; but it doesn't seem to work on Opera either o_O
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Jan 2007
Posts: 2,537
Reputation:
Rep Power: 7
Solved Threads: 109
You didn't leave enough room for the child to fit inside the main.
Unless the margins, borders, and paddings are all set to 0, space is needed for a complete set of these inside the main, but surrounding the child.
When stuff doesn't fit, the browser looks to see where it can steal some pixels to force-fit it. Sledgehammer rendering at work!
Your child object is 70 pixels tall with the margins, and you are trying to cram it inside the main object, which is 50 pixels tall.
It's kind of like all of the department-store Santa Clauses in the world trying to go down the same chimney all at once.
Unless the margins, borders, and paddings are all set to 0, space is needed for a complete set of these inside the main, but surrounding the child.
When stuff doesn't fit, the browser looks to see where it can steal some pixels to force-fit it. Sledgehammer rendering at work!
Your child object is 70 pixels tall with the margins, and you are trying to cram it inside the main object, which is 50 pixels tall.
It's kind of like all of the department-store Santa Clauses in the world trying to go down the same chimney all at once.
Last edited by MidiMagic : Apr 16th, 2007 at 11:58 pm.
Daylight-saving time uses more gasoline
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- CSS stylesheet layout (HTML and CSS)
- Amazing Website Designs - How do they do this? (Site Layout and Usability)
- I think I'm going to cry... (JSP)
- Form not sending email (PHP)
- Help building Table, Images dont cleanly come together (HTML and CSS)
- This is my first Website. Constructive Criticism Is Welcome! (Website Reviews)
- Drop Down Menu (ASP.NET)
Other Threads in the HTML and CSS Forum
- Previous Thread: Mouse Positioning
- Next Thread: content box display limit
