www.webdeveloper.com
Results 1 to 11 of 11

Thread: top margin

  1. #1
    Join Date
    Jul 2007
    Posts
    10

    top margin

    Hey,

    When i put my header div as a "position:relative", i get automatic positioning which is about 15px top and 10px left (more or less), i think its a built-in deafult of the html or css ....

    Anyhow. Is there anyway to cancel that (beside telling the div to start -15px from top and left)?

    I hope my question is clear
    tnx in advance,

    Bugy

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    <style>
    * {margin:0; padding:0;}
    </style>

    Removes default padding & margin on all elements. All browsers (esp. IE) use a 'default', this removes it.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Jul 2007
    Posts
    10
    tnx for the reply.
    The problem with that syntax is that if i integrate it in css style file, it affects all lines of text as well. is there a way around it?

    tnx,
    bugy

  4. #4
    Join Date
    Jul 2007
    Posts
    113
    Quote Originally Posted by yoda69
    tnx for the reply.
    The problem with that syntax is that if i integrate it in css style file, it affects all lines of text as well. is there a way around it?

    tnx,
    bugy
    Just remove margin and padding on the body. Then your next level page element starts top and left.

    <style>
    body {margin: 0; padding: 0;}
    </style>

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by mactheweb
    Just remove margin and padding on the body. Then your next level page element starts top and left.

    <style>
    body {margin: 0; padding: 0;}
    </style>
    Exactly. :-) I prefer my 'all element reduced to zero' because I encounter problems later on with some element like <form> or so forth, but "body" pad-less/margin-less does solve the immediate problem.

    I might even go:

    html, body {margin: 0; padding: 0;}

    -just to be sure that I got it all (and still, not to affect any element other than html & body).
    I build for: Firefox and tweak for IE

  6. #6
    Join Date
    Jul 2007
    Posts
    113

    That works but...

    Quote Originally Posted by WebJoel
    Exactly. :-) I prefer my 'all element reduced to zero' because I encounter problems later on with some element like <form> or so forth, but "body" pad-less/margin-less does solve the immediate problem.

    I might even go:

    html, body {margin: 0; padding: 0;}

    -just to be sure that I got it all (and still, not to affect any element other than html & body).
    Using the body selector is enough. html isn't necessary.

  7. #7
    Join Date
    Jul 2007
    Posts
    10
    tnx very much for your help guys.
    solved my problem

  8. #8
    Join Date
    Mar 2007
    Location
    Jeddah (Currently)
    Posts
    157
    so, I guess, you're done with it, lolz
    I came 2 late, lool

  9. #9
    Join Date
    Jul 2007
    Posts
    10
    okay.... so wasn't as done as i thought i was.
    one thing is happening now, i'm getting this irritating margin at the bottom of my screen. meaning under the "footer" div there are about 25px of empty white space (which is a bummer cause my footer background is a colored gif :-(

    the only way i managed to overcome this is to enter a "top:40px;" however that has other disadvantages.....
    so any way to overcome it? isn't the line i entered for the body:
    body {margin: 0; padding: 0;}
    suppose to solve this?

    tnx once more,
    Bugy

  10. #10
    Join Date
    Jul 2007
    Posts
    113
    have to see the code to understand the problem

  11. #11
    Join Date
    Jul 2007
    Posts
    10
    found the problem,
    I had a bottom margin hiding somewhere...

    tnx anyway

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles