Help with CSS margin collapse

Discussion in 'HTML' started by sevillad, Aug 29, 2007.

  1. sevillad

    sevillad Guest

    Hi,

    I'm using an inline ul to get a horizontal menu, but it's long so it
    takes two lines, and when I try to add some spacing between them with
    margin, it doesn't work. I've searched and read something about margin
    collapse, they always say that one solution is to add border/padding
    but it hasn't worked. The code is below, it's the menu3 that is giving
    me trouble (notice how the black boxes intersect).

    On a related note, if I change margin to 0, in Firefox 2 there's still
    some horizontal distance between the boxes, whereas in IE 6 they are
    tightly packed. Is it because of something funny in my code that is
    treated differently? (I don't understand much about adding style to
    "ul", to "ul li", to "ul li a" and so on, I've just experimented until
    it looked right).

    Thanks in advance,

    David

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
    www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>
    <title>Personal page of David Sevilla: Mathematics - Research</title>
    <meta http-equiv="Content-type" content="text/html;
    charset=ISO-8859-1">
    <style type="text/css">
    body { background-color: #69c; background-image: url(degradado-
    azul.gif); background-repeat: repeat-x; margin-left: 10%; margin-
    right: 10%; }

    #maindiv {width: 100%;}

    #title { padding: 5px; height: 45px; text-align: center; overflow:
    auto; color: blue; font-size: 35px; }

    #bannerright { float: right; margin: 10px 0px; border: 0;}

    #menu ul { margin: 0; padding: 1em 0; list-style: none; text-align:
    center; }
    #menu ul li { display: inline; height: 60px; }
    #menu ul li a { padding: .2em 1em; color: blue; font-size: 25px; text-
    decoration: none; }
    #menu ul li a:hover { color: navy; }
    #menu ul li .current { color: white; text-decoration: underline; }

    #menu2 ul { margin: 0; padding: 1em 0; list-style: none; text-align:
    center; }
    #menu2 ul li { display: inline; }
    #menu2 ul li a { padding: .2em 1em; color: white; background-color:
    #036; text-decoration: none;}
    #menu2 ul li a:hover { background-color: #369; }
    #menu2 .current { text-decoration: underline; }

    #menu3 ul { font-size: larger; margin: 0; list-style: none; text-
    align: center; }
    #menu3 ul li { display: inline; border: 2px black solid; padding:
    0.5em; margin: 0.5em; }
    #menu3 ul a { color: #036; text-decoration: none; }
    /*#menu3 ul li a:hover { background-color: #369; }*/
    #menu3 .current { text-decoration: underline; color: #369; }

    #wrapper {padding: 0 40px; border: 2px; border-style: solid; clear:
    both; background-color: #D2E7F4; }

    #content a { color: blue; }
    #content a.empty { color: red; text-decoration: none; }

    #footer { font-size: smaller; text-align: center; padding: 5px 0; }

    h2, h3 { color: navy; margin: 30px 0; }
    img { margin: 0px; }
    p.note { font-size: smaller; }
    ..subs { vertical-align: sub; font-size: smaller; }
    ..sups { vertical-align: super; font-size: smaller; }

    #lastupdated { font-size: smaller; text-align: center; }
    </style>
    </head>

    <body>
    <div id=maindiv>

    <div id=title>
    Personal Page of David Sevilla
    </div>

    <div id=menu>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="math.html" class=current>Mathematics</a></li>
    <li><a href="personal.html">Personal</a></li>
    <li><a href="blog.html">Blog</a></li>
    </ul>
    </div>

    <div id=wrapper>

    <div id=menu2>
    <ul>
    <li><a href="math.html">Mathematics - Main</a></li>
    <li><a href="math-research.html" class=current>My research</a></li>
    <li><a href="math-publications.html">My publications</a></li>
    <li><a href="math-fun.html">Math fun</a></li>
    </ul>
    </div>

    <div id=menu3>
    <ul>
    <li><a href="" class=current>Research - Main</a></li>
    <li><a href="">Functional decomposition</a></li>
    <li><a href="">Monstrous moonshine</a></li>
    <li><a href="">Hyperelliptic curves</a></li>
    <li><a href="">Root parametrizations</a></li>
    </ul>
    </div>


    <div id=content>
    Hello!

    </div> <!-- content -->

    </div> <!-- wrapper -->

    </div> <!-- maindiv -->
    </body>

    </html>
     
    sevillad, Aug 29, 2007
    #1
    1. Advertising

  2. sevillad

    rf Guest

    "sevillad" <> wrote in message
    news:...
    > Hi,
    >
    > I'm using an inline ul to get a horizontal menu, but it's long so it
    > takes two lines, and when I try to add some spacing between them with
    > margin, it doesn't work.


    line-height.

    Please do not post code. Post a URL.

    --
    Richard.
     
    rf, Aug 29, 2007
    #2
    1. Advertising

  3. sevillad

    sevillad Guest

    Hi,

    On Aug 29, 12:48 pm, "rf" <> wrote:
    > "sevillad" <> wrote in message
    >
    > news:...
    >
    > > Hi,

    >
    > > I'm using an inline ul to get a horizontal menu, but it's long so it
    > > takes two lines, and when I try to add some spacing between them with
    > > margin, it doesn't work.

    >
    > line-height.
    >
    > Please do not post code. Post a URL.
    >
    > --
    > Richard.


    Thanks, it's solved. I would also like to understand why adding border
    or padding didn't work, since it seems to be a common solution.

    On a related note, I don't really know where to add CSS when I have
    elements inside other elements (in my case, I have a UL, and LI's
    inside, and in each one there's an A). And now that I'm at it, should
    I wrap those A's in DIVs or P's for the sake of meaningful code?

    Thanks a lot,

    David
     
    sevillad, Aug 30, 2007
    #3
  4. sevillad

    rf Guest

    "sevillad" <> wrote in message
    news:...
    > On Aug 29, 12:48 pm, "rf" <> wrote:


    >> line-height.


    > Thanks, it's solved. I would also like to understand why adding border
    > or padding didn't work, since it seems to be a common solution.


    I assume you mean margin, not border. Margin and padding work differently
    for inline elements. Put this:
    * {border: solid 1px pink;}
    at the very top of your CSS. You will see exactly which real estate each
    element is taking up, and you will see that the margin and/or padding
    applied to the now inline <li> elements actually escapes outside the <ol>s
    real estate. When the <ol> goes to two lines this becomes quite apparent,
    and is the source of your original problem.


    Have a good read in the specs about the visual layout model.

    > On a related note, I don't really know where to add CSS when I have
    > elements inside other elements (in my case, I have a UL, and LI's
    > inside, and in each one there's an A).


    Er, where the CSS rules should take effect, to produce the visual effect you
    desire? Um. Hard question.

    > And now that I'm at it, should
    > I wrap those A's in DIVs or P's for the sake of meaningful code?


    No. Why would that make the code more meaningful? There lies the way of div
    soup :) The <a> can quite happily live inside a <li>. No need for more.

    --
    Richard.
     
    rf, Aug 30, 2007
    #4
  5. sevillad

    sevillad Guest

    Hi,

    > > On Aug 29, 12:48 pm, "rf" <> wrote:


    > Have a good read in the specs about the visual layout model.


    I definitely will, it seem complicated when I did some time ago, but
    it seems it's important enough.

    > > And now that I'm at it, should
    > > I wrap those A's in DIVs or P's for the sake of meaningful code?

    >
    > No. Why would that make the code more meaningful? There lies the way of div
    > soup :) The <a> can quite happily live inside a <li>. No need for more.


    Thanks. I was asking because in the old days I used to think that <p>
    was the same as <br>, until I started reading about content vs. style.

    David
     
    sevillad, Aug 31, 2007
    #5
  6. sevillad

    rf Guest

    "sevillad" <> wrote in message
    news:...
    > Hi,
    >
    >> > On Aug 29, 12:48 pm, "rf" <> wrote:

    >
    >> Have a good read in the specs about the visual layout model.

    >
    > I definitely will, it seem complicated when I did some time ago, but
    > it seems it's important enough.


    It's imperative if you are going to be doing advanced stuff, and changing
    <li>s from block to inline is IMHO somewhat advanced.

    It's also hard going, but worth it. Don't worry if you don't get it all at
    once, as you won't. I still re-read it from time to time and surprise myself
    with bits that I had forgotten, or missed last time.

    >> > And now that I'm at it, should
    >> > I wrap those A's in DIVs or P's for the sake of meaningful code?

    >>
    >> No. Why would that make the code more meaningful? There lies the way of
    >> div
    >> soup :) The <a> can quite happily live inside a <li>. No need for more.


    Further, if you were to wrap those <a>s in <p>s you would be probably quite
    surprised at the resultant layout. Please try it, and see if you can explain
    what is happenning :) Hint: <p> is a block level element. Remember to leave
    those borders switched on. Perhaps specify a different coloured border for
    <p> elements.

    > Thanks. I was asking because in the old days I used to think that <p>
    > was the same as <br>, until I started reading about content vs. style.


    Think of a poem. Each stanza is, well can be construed to be, a <p>. A
    block, with blank space before and after. However the stanza is comprised of
    definite lines, broken by a <br>, that is, break the line box here. Just
    don't think that multiple <br>s will (or should) produce blank space. A line
    (box) can only (logically) be broken once, even though most browsers
    disagree.

    --
    Richard.
     
    rf, Aug 31, 2007
    #6
  7. sevillad

    dorayme Guest

    In article <InSBi.28926$>,
    "rf" <> wrote:

    > A line
    > (box) can only (logically) be broken once, even though most browsers
    > disagree.


    Can it? Do they?

    0123456789

    <br><br>, depending on where it is inserted in the line above,
    does this:

    (1) It breaks the box that existed and creates another box on a
    new line either one with characters in it or one with no
    characters in it; the latter, a box that is brimming with mere
    potentiality.

    (2) It then operates on this second box and breaks it.

    In all of this is a breaking of one thing, followed by a breaking
    of another thing. There is no double breaking of one line and so
    the question of whether it is logical to break a line twice does
    not arise to be logical or not logical.

    Browsers, unlike, earthlings, see into the virtual world more
    clearly. A box with nothing in it is still a box to them. They
    are happy with boxes that do not have positive dimensions. In
    fact, some browsers probably recognise boxes that have negative
    dimensions, but let us not go into that murky world.

    Browsers also like it when earthlings think like they do and they
    like it when they are given shorthand instructions in advance. I
    have heard browsers purring contentedly on being double breaked.

    --
    dorayme
     
    dorayme, Aug 31, 2007
    #7
    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. Vaclav Jedlicka

    datagrid and border-collapse:collapse style

    Vaclav Jedlicka, Jun 26, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    5,947
    Yan-Hong Huang[MSFT]
    Jun 30, 2003
  2. Cal Who
    Replies:
    1
    Views:
    432
    Alexey Smirnov
    May 16, 2010
  3. VVSRKS

    How can I avoid border-collapse:collapse to come ...

    VVSRKS, Sep 16, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    200
    VVSRKS
    Sep 16, 2004
  4. Tom Castiglia

    Why does Gridview ALWAYS emit style="border-collapse: collapse;"

    Tom Castiglia, Jun 4, 2006, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    2,009
    Tom Castiglia
    Jun 9, 2006
  5. M.L.
    Replies:
    9
    Views:
    299
Loading...

Share This Page