Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unwanted margin in Firefox

    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

    Code:
    <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

    Code:
    *{
    	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;
    }
    Last edited by darrylm; 01-25-2013 at 03:22 PM.

  • #2
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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.

    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.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you

  • #7
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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

    Code:
    display:inline-block;
    width:100%;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •