...

View Full Version : Unwanted margin in Firefox



darrylm
01-25-2013, 11:45 AM
A margin is appearing between my <html> and <body> but only in Firefox.

I have declared *{margin:0; padding:0} in the stylesheet and using Firefox's developer tool shows that there is no margin or padding or margin calculated, however this problem persists.

I have found the apparent cause, but I'm uncertain as to the reason.

The nav will sit at the top of the page as expected when it has padding attached to it, however, when that padding is removed, a margin appears between <html> & <body>

When removing the margin from #content, the margin between <html> & <body> is also removed.

Why is this?

The obvious solution is to either add padding to the nav or remove margins from #content but this is papering over the cracks and not exactly how I want my webpage to look




<body>
<div id="container">
<nav id="top">
<ul id="menu">
<li><a id="one" href="homepage-2.html">Home</a></li>
<li id="channels">
<span>Channels</span>
<ul>
<li><a href="channels-2.html">Channel 1</a></li>
<li><a href="channels-2.html">Channel 2</a></li>
<li><a href="channels-2.html">Channel 3</a></li>
</ul>
</li>
<li><a id="three" href="talent-2.html">Your talent</a></li>
</ul>
<div class="clear"></div>
</nav>
<section id="content">
<hgroup>
<h1><img src="img.png" alt="IMG" height="90" /></h1>
<!--<h2>Site description</h2>-->
</hgroup>
<ul id="social">
<li><img src="facebook32px.png" alt="FB" /></li>
<li><img src="twitter_32.png" alt="Twitter" /></li>
<li><img src="youtube32px.png" alt="YouTube" /></li>
</ul>
<div class="clear"></div>
<section class="col col1">
<article id="vid1" class="vid-container">
<div class="vid-name">
<h3>Video 1</h3>
</div>
<div class="vid">
<iframe src="http://www.youtube.com/embed/WwoM5fLITfk" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vid-desc">
<p>A description of the video above and what its all about</p>
</div>
</article>
<article id="vid2" class="vid-container">
<div class="vid-name">
<h3>Video 2</h3>
</div>
<div class="vid">
<iframe src="http://www.youtube.com/embed/0UjsXo9l6I8" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vid-desc">
<p>A description of the video above and what its all about</p>
</div>
</article>
</section>
<section class="col col2">
<article id="about">
<h3>Small section to describe what the website is about / what its goals are etc.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut imperdiet erat. Cras luctus ullamcorper quam, id dignissim mi interdum non. Sed nunc urna, volutpat eu tristique ut, scelerisque non tellus. Praesent sagittis, turpis sit amet luctus malesuada, dolor erat tristique dui, a pellentesque nisi orci non sem. Curabitur molestie, ligula sit amet luctus tincidunt, ligula dui bibendum ligula, a faucibus tellus turpis at ligula.</p>
</article>
<article id="join">
<h3>Join the team! Link to talent.html</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut imperdiet erat. Cras luctus ullamcorper quam, id dignissim mi interdum non. Sed nunc urna, volutpat eu tristique ut, scelerisque non tellus. Praesent sagittis, turpis sit amet luctus malesuada, dolor erat tristique dui, a pellentesque nisi orci non sem. Curabitur molestie, ligula sit amet luctus tincidunt, ligula dui bibendum ligula, a faucibus tellus turpis at ligula.</p>
</article>
<aside>
<section id="twitter" class="widget">
<h3>Twitter</h3>
</section>
<section id="facebook" class="widget">
<div class="fb-like" data-send="true" data-width="300" data-show-faces="true" data-font="segoe ui" data-colorscheme="light"></div>
</section>
<section id="news" class="widget">
<h3>News</h3>
</section>
</aside>
</section>
<section class="col col3">
<h3>Check out the channels...</h3>
<article class="vid-container">
<div class="vid">
<iframe src="http://www.youtube.com/embed/WwoM5fLITfk" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vid-name">
<h3>Channel 1</h3>
</div>
<div class="vid-desc">
<p>A description of the video above and what its all about</p>
</div>
</article>
<article class="vid-container">
<div class="vid">
<iframe src="http://www.youtube.com/embed/0UjsXo9l6I8" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vid-name">
<h3>Channel 2</h3>
</div>
<div class="vid-desc">
<p>A description of the video above and what its all about</p>
</div>
</article>
<article class="vid-container">
<div class="vid">
<iframe src="http://www.youtube.com/embed/WM1RChZk1EU" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vid-name">
<h3>Channel 3</h3>
</div>
<div class="vid-desc">
<p>A description of the video above and what its all about</p>
</div>
</article>
</section>
<div class="clear"></div>
</section>
<footer>
<nav id="secondary">
<section class="col col1">
<h4>Channels</h4>
<ul>
<li><a href="channels-2.html">Channel 1</a></li>
<li><a href="channels-2.html">Channel 2</a></li>
<li><a href="channels-2.html">Channel 3</a></li>
</ul>
</section>
<section class="col col2">
<h4>Quick links</h4>
<ul>
<li><a href="homepage-2.html">Home</a></li>
<li><a href="talent-2.html">Your talent</a></li>
</ul>
</section>
<section class="col col3">
<h4>Contact</h4>
<ul>
<li>Address line 1</li>
<li>Town</li>
<li>County</li>
<li>Postcode</li>
<li>Email</li>
<li>Phone</li>
</ul>
</section>
<div class="clear"></div>
</nav>
</footer>
<div class="center">np</div>
</div>
</body>
</html>



CSS




*{
margin:0;
padding:0;
border:none;
}
body{
background-color:#000;
color:#FFF;
font-family:'Lato';
font-weight:400;
background:#000000;
}
#container, footer{
margin:0 auto;
width:1240px;
padding-bottom:20px;
}
ul{
list-style:none;
}
#nav-button{
display:none;
}
nav#top{
/* if padding is added here, no margin appears at the top */
}
#content{
background:url(bg_6.png) #0D0D0D repeat;
border-radius:10px;
padding:20px;
/* the margin below is creating a margin at the top of the page between <html> and <body>
*/
margin:20px 0px;
}

darrylm
01-25-2013, 03:19 PM
http://npsolutions.co.uk/test/homepage-2.html

Excavator
01-25-2013, 03:52 PM
Hello darrylm,
The code you've posted doesn't seem to recreate the issue you describe. I wonder if it's a cache issue on your end?

You are describing "uncollapsing margins" but I've never seen that bug manifest itself on the body of a document before. See about uncollapsing margins here (http://nopeople.com/CSS%20tips/uncollapsing-margin/index.html).

darrylm
01-25-2013, 04:18 PM
Hello darrylm,
The code you've posted doesn't seem to recreate the issue you describe. I wonder if it's a cache issue on your end?

You are describing "uncollapsing margins" but I've never seen that bug manifest itself on the body of a document before. See about uncollapsing margins here (http://nopeople.com/CSS%20tips/uncollapsing-margin/index.html).


Thanks for the reply,

I removed a lot of CSS I thought might be irrelevant to the problem, as the problem seems to root from either the #content CSS or the nav#top CSS

I have a link to the page in full here:

http://npsolutions.co.uk/test/homepage-2.html

I have checked Opera, Chrome and Safari on the same Mac, all of which do not force the top nav margin, I also tried IE9 and that isn't a problem either.

Excavator
01-25-2013, 05:56 PM
I see it now. Odd your posted code didn't do it but...


nav{overflow: auto;} fixes it. I'm not sure yet why nav is affected by margin on #content. Uncollapsing margins can be very confusing sometimes...

The other fixes for uncollapsing margin work too, like nav{border-top: 1px solid #000;}

darrylm
01-28-2013, 02:30 PM
Thank you

darrylm
01-28-2013, 03:54 PM
I see it now. Odd your posted code didn't do it but...


nav{overflow: auto;} fixes it. I'm not sure yet why nav is affected by margin on #content. Uncollapsing margins can be very confusing sometimes...

The other fixes for uncollapsing margin work too, like nav{border-top: 1px solid #000;}

This did fix the problem outlined, but will cause more problems if using a CSS drop-down menu with nested lists (as I am).

The solution is to add



display:inline-block;
width:100%;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum