Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorJerfer
    • CommentTimeJul 26th 2006
     permalink
    Here's the site. Under the menu there's a content div with a padding of 5px. In that content div is "Register". In IE, there's a huge space between the menu and Register. Why does it do that and how can it be fixed?

    I noticed when I took the paragraph tags out above the menu, the content was where it was supposed to be. When I placed break tags there instead it still messed up, although not as much. They won't be there once we have a logo, but I'd hate there to be a likely problem later.
    • CommentAuthorcalvinc
    • CommentTimeJul 26th 2006 edited
     permalink
    I haven't looked at your code.

    But if I'am right it's because you havent declared the margin and padding to a value. IE adds padding/margin by default. So if you haven't set them to a value, IE will give them the default value. Instead of repeating all the padding: a b c d, margin: a b c d, you can put something like: *{ margin:0; padding:0; } on the top to set all your selector by default to zero.

    Try setting your paragraph selector's padding and margin to 0, you wil understand what I mean above.

    hope that helps, good luck :)
    • CommentAuthordeaghean
    • CommentTimeJul 26th 2006 edited
     permalink
    This is actually remarkably similar to the problem Calvin had in this thread:
    http://www.cssbeauty.com/skillshare/comments.php?DiscussionID=853

    At any rate, this'll fix it:

    #navContainer
    {
    float: none;
    }

    #navContainer:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    #navContainer {display:inline-block;}
    /* Hide from IE Mac \*/
    #navContainer {display:block;}
    /* End hide from IE Mac */

    Again, all but the first rule can be replaced by putting something like <div style="clear:both;"></div> after the ul if you want to go the markup route.
    • CommentAuthorkmg
    • CommentTimeJul 26th 2006
     permalink
    Jerfer-

    here is your html page:

    I put a <p> tag around the register

    put some breaks before the #navContainer ( i assume you will put your logoContaciner here )

    <body>

    <div id="container">
    <br>
    <br>

    <div id="navContainer">
    <ul>

    <li><a href="/?show&phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Home</a></li>
    <li><a href="/register.php?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Register</a></li>
    <li><a href="/board/?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Board</a></li>
    <li><a href="/blogs/?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Blogs</a></li>
    <li><a href="/groups/?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Groups</a></li>
    </ul>

    </div>
    <div id="content">
    <p>Register</p>
    </div>
    </div>

    </body>

    i the css I added a p{} with 0px padding, 0px margin

    in the #content{} just float it left and your issue is fixed

    body {
    /*margin:0;
    padding:0;*/
    font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    text-align:center;
    color:#000000;
    background-color:#EFEBDF;
    }

    p{
    margin:0;
    padding:0;
    }

    a {
    color:#EFEBDF;
    text-decoration:none;
    }

    a:hover {
    text-decoration:underline;
    }

    #container {
    margin:0 auto;
    width:790px;
    height:500px;
    text-align:left;
    border:1px solid #555555;
    background-color:#FFFFFF;
    }

    #logoContainer {
    height:100px;
    }

    #navContainer {
    float:left;
    width:100%;
    border-top:1px solid #555555;
    border-bottom:1px solid #555555;
    background-color:#899796;
    }

    #navContainer ul {
    margin:0;
    padding:0;
    list-style:none;
    }

    #navContainer ul li {
    display:inline;
    margin:0;
    padding:0;
    }

    #navContainer ul li a {
    float:left;
    padding:5px 8px 5px 8px;
    font-weight:bold;
    }

    #content {
    float:left;
    margin:5px;
    padding:0;
    background-color:#990000;
    }

    .columnHeader {
    padding:5px;
    color:#FFFFFF;
    background-color:#655F56;
    }


    Calvin is right however at the top of your css page use the universal selector
    *{
    padding:0px
    margin:0px;
    }
    • CommentAuthorJerfer
    • CommentTimeJul 26th 2006
     permalink
    Adding float:left to #content fixed it, but now it's pushing/running out of the container since I have to put width:100% on #content because the div didn't go all the way across
    • CommentAuthorkmg
    • CommentTimeJul 26th 2006
     permalink
    set the width to 780px unless you are planning to keep that border around there then set it to 778px
    • CommentAuthorJerfer
    • CommentTimeJul 26th 2006
     permalink
    Oh, so the padding and border is what caused it. Thanks guys.
    • CommentAuthorkmg
    • CommentTimeJul 26th 2006
     permalink
    yes but your should really put the border style in the css or if you you decide to update that border one day it will be a lot of work cause you'll have to update it on every page as opposed to one page stay away from inline styles

    so in the #content div

    #content{
    border:1px solid #FF0000;
    }
Add your comments
    Username Password
  • Format comments as (Help)