Problems with margins, paddings, divs and floats! PLEASE HELP!

Discussion in 'HTML' started by Agix, May 9, 2007.

  1. Agix

    Agix Guest

    HI there,

    I am fairly new to web coding, not so new I don't know what tags are
    or anything that basic, but new enough to be frustrated by obstacles
    that trying to use multiple browsers is causing and not knowing the
    way round it.

    Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
    per sé, but more for an explanation of why I see this behaviour - my
    experienced friend coder doesn't seem to understand my plight.

    I have even include a link to the offending page
    http://www.clarifysolutions.co.uk/certenroll/

    Now this is just a test page I was making and playing around with CSS.

    This is a copy of my CSS:

    *******************************************************************************************

    body
    {
    background-color:#000000;
    margin:5px;
    padding:0px;
    }

    #mainpageset
    {
    width:560px;
    background-image:url(abackground.gif);
    padding:0px;
    margin:0px
    height:595px;
    }

    #navbarmain
    {
    margin:0px;
    padding:0px;
    width:375px;
    height:30px;
    }

    ..buttonbarmain
    {
    width:75px;
    height:30px;
    float:right;
    background-image:url(button.rest1.gif);
    background-repeat:no-repeat;
    text-align:center;
    padding:0px;
    margin:0px;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    }

    ..buttonbarmain:hover
    {
    background-image:url(button.active1.gif);
    }

    ..linktextbarmain
    {
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    margin:0px;
    padding:0px;
    }

    #adbarright
    {
    float:right;
    text-align:center;
    color:#000066;
    border: solid #00CC66 1px;
    width:160px;
    padding:0px;
    margin:0px;
    height:590px;
    }

    #mainpagecont
    {
    border:solid 1px #00CC66;
    width:400px;
    height:560px;
    padding:0px;
    margin:0px;
    overflow:hidden;
    }

    ..adbarimage
    {
    width:160px;
    height:auto;
    margin:0px;
    padding:0px;
    }

    **************************** END CSS
    **************************************

    If you take a look at particularly "#mainpageset" this is a div tag
    container for the entire page contents. It has it's width set to
    560px.

    Notice how I have set EVERY id and class to have margin AND padding =
    0px. This is so I can work out how the browser is behaving.

    Secondly, take note of "#mainpagecont" and "#adbarright" - 400px and
    160px respectively in width.

    If you take a look at the link in Firefox - it renders ok, but messes
    up a fair bit. In IE6+7 it looks plain awful. What I am really annoyed
    about is that the two divs, no margins or paddings but they still
    overlap!!!!

    Correct me if i'm wrong but - 400px + 160 px = 560px , no?!?!?! Why
    does the browser not follow mathematics?

    HELP!

    HTML Included to be helpful....

    *********************************************************************************************

    <body>
    <div id="mainpageset">
    <div id="adbarright">
    ADS!
    <img class="adbarimage" src="world_of_warcraft_050905.jpg" />
    <img class="adbarimage" src="world_of_warcraft_050905.jpg" />
    <img class="adbarimage" src="world_of_warcraft_050905.jpg" />
    <img class="adbarimage" src="world_of_warcraft_050905.jpg" />
    </div>
    <div id="navbarmain">
    <div class="buttonbarmain"><a href="#NULL"><font
    color="#FFFFFF">Links</font></a></div>
    <div class="buttonbarmain"><a href="#NULL"><font
    color="#FFFFFF">Discuss</font></a></div>
    <div class="buttonbarmain"><a href="#NULL"><font
    color="#FFFFFF">Reviews</font></a></div>
    <div class="buttonbarmain"><a href="#NULL"><font color="#FFFFFF">News</
    font></a></div>
    <div class="buttonbarmain"><a href="#NULL"><font color="#FFFFFF">Home</
    font></a></div>
    </div>
    <div id="mainpagecont">Lorem Ipsum
    Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
    Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
    Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
    Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
    </div>
    </div>
    </body>
    </html>

    ************************* END HTML
    **********************************************************

    Please remember, i was an explanation for this effect as well as a
    solution. I know I can fix it easily, but I want to KNOW WHY this is
    happening.

    Many thanks if you're the one who can come up with the goods.

    Gregory
    Agix, May 9, 2007
    #1
    1. Advertising

  2. Agix

    Ben C Guest

    On 2007-05-09, Agix <> wrote:
    > HI there,
    >
    > I am fairly new to web coding, not so new I don't know what tags are
    > or anything that basic, but new enough to be frustrated by obstacles
    > that trying to use multiple browsers is causing and not knowing the
    > way round it.
    >
    > Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
    > per sé, but more for an explanation of why I see this behaviour - my
    > experienced friend coder doesn't seem to understand my plight.
    >
    > I have even include a link to the offending page
    > http://www.clarifysolutions.co.uk/certenroll/

    [...]
    > If you take a look at particularly "#mainpageset" this is a div tag
    > container for the entire page contents. It has it's width set to
    > 560px.
    >
    > Notice how I have set EVERY id and class to have margin AND padding =
    > 0px. This is so I can work out how the browser is behaving.
    >
    > Secondly, take note of "#mainpagecont" and "#adbarright" - 400px and
    > 160px respectively in width.
    >
    > If you take a look at the link in Firefox - it renders ok, but messes
    > up a fair bit.


    What's wrong with it?

    > In IE6+7 it looks plain awful. What I am really annoyed about is that
    > the two divs, no margins or paddings but they still overlap!!!!


    > Correct me if i'm wrong but - 400px + 160 px = 560px , no?!?!?! Why
    > does the browser not follow mathematics?


    Firefox is following mathematics OK here.

    400px + 160px + 2px + 2px = 564px.

    Each 2px is for the left and right borders of mainpagecont and
    adbarright.
    Ben C, May 9, 2007
    #2
    1. Advertising

  3. Agix

    dorayme Guest

    In article
    <>,
    Agix <> wrote:

    > HI there,
    >
    > I am fairly new to web coding, not so new I don't know what tags are
    > or anything that basic, but new enough to be frustrated by obstacles
    > that trying to use multiple browsers is causing and not knowing the
    > way round it.
    >
    > Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
    > per sé, but more for an explanation of why I see this behaviour - my
    > experienced friend coder doesn't seem to understand my plight.
    >
    > I have even include a link to the offending page
    > http://www.clarifysolutions.co.uk/certenroll/
    >

    ....
    >
    > Notice how I have set EVERY id and class to have margin AND padding =
    > 0px. This is so I can work out how the browser is behaving.
    >


    If you want to set all margins to 0 for testing purposes you can
    just put * {margin: 0;} at top of your css. Ditto padding.


    > If you take a look at the link in Firefox - it renders ok, but messes
    > up a fair bit. In IE6+7 it looks plain awful. What I am really annoyed
    > about is that the two divs, no margins or paddings but they still
    > overlap!!!!
    >


    As for how floats behave in different browsers, IE6 is known to
    add pixels and you will need to study how this browser and othe
    IE browsers leave the standards: Not bad to start with may be:

    <http://www.positioniseverything.net/explorer.html>

    One thing you should do is recheck your code. You leave out a
    semicolon where you should not (it is usually important not to do
    this):


    #mainpageset
    {
    ...
    margin:0px
    height:595px;
    }


    And don't use font tags, use the css sheet to control fonts.

    And, while I am at it, forget the doc type you are using, use
    4.01 Strict, you gain nothing at all from it.

    --
    dorayme
    dorayme, May 9, 2007
    #3
  4. Agix

    Agix Guest

    On 9 May, 19:47, Ben C <> wrote:
    > On 2007-05-09, Agix <> wrote:
    >
    >
    >
    > > HI there,

    >
    > > I am fairly new to web coding, not so new I don't know what tags are
    > > or anything that basic, but new enough to be frustrated by obstacles
    > > that trying to use multiple browsers is causing and not knowing the
    > > way round it.

    >
    > > Here I must stress I AM NOT LOOKING for workarounds or fixes or hacks
    > > per s?, but more for an explanation of why I see this behaviour - my
    > > experienced friend coder doesn't seem to understand my plight.

    >
    > > I have even include a link to the offending page
    > >http://www.clarifysolutions.co.uk/certenroll/

    > [...]
    > > If you take a look at particularly "#mainpageset" this is a div tag
    > > container for the entire page contents. It has it's width set to
    > > 560px.

    >
    > > Notice how I have set EVERY id and class to have margin AND padding =
    > > 0px. This is so I can work out how the browser is behaving.

    >
    > > Secondly, take note of "#mainpagecont" and "#adbarright" - 400px and
    > > 160px respectively in width.

    >
    > > If you take a look at the link in Firefox - it renders ok, but messes
    > > up a fair bit.

    >
    > What's wrong with it?
    >
    > > In IE6+7 it looks plain awful. What I am really annoyed about is that
    > > the two divs, no margins or paddings but they still overlap!!!!
    > > Correct me if i'm wrong but - 400px + 160 px = 560px , no?!?!?! Why
    > > does the browser not follow mathematics?

    >
    > Firefox is following mathematics OK here.
    >
    > 400px + 160px + 2px + 2px = 564px.
    >
    > Each 2px is for the left and right borders of mainpagecont and
    > adbarright.


    Thank you thank you thank you thank you.

    I was just being ignorant about the browsers including the borders in
    their calculations. Explains the dodgy look in IE as well.

    I will bear that in mind for future designs.

    Although do the browsers include a border calculation if there is not
    one? or do they just sit flush together?

    many thanks again

    Gregory
    Agix, May 9, 2007
    #4
  5. Agix

    Ben C Guest

    On 2007-05-09, Agix <> wrote:
    > On 9 May, 19:47, Ben C <> wrote:

    [...]
    >> Firefox is following mathematics OK here.
    >>
    >> 400px + 160px + 2px + 2px = 564px.
    >>
    >> Each 2px is for the left and right borders of mainpagecont and
    >> adbarright.

    [...]
    > Although do the browsers include a border calculation if there is not
    > one? or do they just sit flush together?


    If you're doing a series of left floats for example, with borders, they
    will line up flush next to one another. Or should, but I keep hearing
    about strange 3px gaps in IE.

    Same goes for a series of inline-blocks, inlines or table cells
    generally. So yes, you won't generally get that overlapping unless you
    start setting widths on everything.
    Ben C, May 10, 2007
    #5
  6. Agix

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > If you're doing a series of left floats for example, with borders, they
    > will line up flush next to one another. Or should, but I keep hearing
    > about strange 3px gaps in IE


    In IE if you float a box left to some static text content, IE6
    will add 3px to - let me be nice to Microsoft for a moment - give
    some grace to the text, it always looks so ugly if the author
    forgets to provide some (and it is easy to muck up this little
    bit where floats are concerned if the author does not quite know
    what he/she is doing)

    --
    dorayme
    dorayme, May 10, 2007
    #6
  7. Agix

    Bergamot Guest

    dorayme wrote:
    > In article <>,
    > Ben C <> wrote:
    >
    >> I keep hearing about strange 3px gaps in IE

    >
    > In IE if you float a box left to some static text content, IE6
    > will add 3px to - let me be nice to Microsoft for a moment - give
    > some grace to the text


    Grace has nothing to do with it. It's a bug.
    http://www.positioniseverything.net/explorer/threepxtest.html

    --
    Berg
    Bergamot, May 10, 2007
    #7
  8. Agix

    dorayme Guest

    In article <>,
    Bergamot <> wrote:

    > dorayme wrote:
    > > In article <>,
    > > Ben C <> wrote:
    > >
    > >> I keep hearing about strange 3px gaps in IE

    > >
    > > In IE if you float a box left to some static text content, IE6
    > > will add 3px to - let me be nice to Microsoft for a moment - give
    > > some grace to the text

    >
    > Grace has nothing to do with it. It's a bug.
    > http://www.positioniseverything.net/explorer/threepxtest.html


    I do not know your grounds for being so sure of this. It is
    hardly a demo to point to the annoying consequences of a non
    standard rendering browser. If the MS engineers deliberately put
    in such a gap (eg, with floated pictures in mind, without
    thinking through all the consequences for the html/css authoring
    community) it may have had some motivation in providing a bit of
    "god-given padding', grace. To show that grace had nothing to do
    with it, you might need to provide more than the endless gnashing
    of teeth and "workaround" website pages.

    My remark was partly based on the principle of charity and partly
    on a half forgotten memory of some MS engineer talking in some
    forum about this issue.

    --
    dorayme
    dorayme, May 10, 2007
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. rich
    Replies:
    0
    Views:
    708
  2. Kosio

    Floats to chars and chars to floats

    Kosio, Sep 16, 2005, in forum: C Programming
    Replies:
    44
    Views:
    1,238
    Tim Rentsch
    Sep 23, 2005
  3. Jon Slaughter

    paddings or margins

    Jon Slaughter, Mar 23, 2007, in forum: HTML
    Replies:
    2
    Views:
    330
    Andy Dingley
    Mar 23, 2007
  4. JL
    Replies:
    7
    Views:
    618
    dorayme
    Sep 15, 2007
  5. maya
    Replies:
    4
    Views:
    224
Loading...

Share This Page