Grow your CSS skills. Land your dream job.

Removing space on top of the page in ie

  • # March 29, 2009 at 2:07 am

    hi

    i am new to css ….i desinged a page it shows space on top of the page…
    if i use the margin-top property it works fine in firefox but it doent in ie

    please help me

    you can find the page @ http://www.innov8.in

    css


    body {
    font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
    background-color:#3399cc;
    }
    div#wrapper
    {
    margin:0 auto;
    width:1000px;
    border-color:#000000;
    border-style:solid;
    top:20px;
    }
    div#top_banner_back
    {
    background-image:url(images/top_back.png);
    background-repeat:no-repeat;
    width:1000px;
    height:161px;

    }
    div#menu
    {
    background-image:url(images/menu_back.png);
    background-repeat:repeat-x;
    width:1000px;
    height:41px;
    margin:0 auto;
    margin-top:-5px;
    }
    div#menu_left
    {
    float:left;
    background-image:url(images/menu_left.png);
    background-position:left;
    background-repeat:no-repeat;
    width:59px;
    height:41px;
    }
    div#menu_right
    {
    background-image:url(images/menu_right.png);
    background-position:rightt;
    background-repeat:no-repeat;
    float:right;
    width:47px;
    height:41px;
    }



    html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>INNOV8 Redefining innovation::::</title>
    <link href="couldstyle.css" type="text/css" rel="stylesheet" />

    </head>
    <body>
    <div id="wrapper">
    <div id="top_banner_back">
    </div>
    <div id="menu">
    <div id="menu_left"></div>
    <div id="menu_content"></div>
    <div id="menu_right"></div>

    </div>
    </div>
    </body>
    </html>

    Rob
    # March 29, 2009 at 3:12 am

    pop this at the start of your CSS

    * {margin:0; padding:0;}

    then have a look into CSS resets :)

    http://developer.yahoo.com/yui/reset/

    # March 29, 2009 at 6:11 am

    that worked…..thank you so much…

    # March 31, 2009 at 10:34 am

    I’ve read somewhere in interweb.

    * { margin: 0; padding: 0; }

    is not a good piece of code. I guess there are issues with form elements. :notsure:

    @ threadstarter

    I’ve been there. Its really a frustrating thing to see you webpages react different in different browsers, some of them are because all the browsers has its default stylesheets. Its better to rip off all the default styles with CSS-Resets and design from scratch.

    I personally use Eric meyers reset. you can google for different resets and tweek them to suit your needs.

    Rob
    # March 31, 2009 at 11:14 am
    "sathish" wrote:
    I’ve read somewhere in interweb.

    * { margin: 0; padding: 0; }

    is not a good piece of code. I guess there are issues with form elements. :notsure:

    Its a fine bit of code, just not very specific. That’s why I recommended the CSS Reset. I don’t know why people dislike it, there is no reason, it does exactly what its suppose to. I think its more code snobbery than anything else.

    # March 31, 2009 at 11:43 am
    Quote:
    Its a fine bit of code, just not very specific. That’s why I recommended the CSS Reset. I don’t know why people dislike it, there is no reason, it does exactly what its suppose to. I think its more code snobbery than anything else.

    Alledgedly it puts a lot of strain on the page renderer, especially on large pages and it will mess up things like the default submit button on forms.
    It can be handy to get yourself out of a tight spot but it’s no substitute for a "proper" reset.

    Rob
    # March 31, 2009 at 11:51 am
    "apostrophe" wrote:
    Alledgedly it puts a lot of strain on the page renderer, especially on large pages and it will mess up things like the default submit button on forms.
    It can be handy to get yourself out of a tight spot but it’s no substitute for a "proper" reset.

    yea but you is gonna need one huge page for it to make a difference really… and yes proper resets all the way lol

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".