Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts

    Top margin seemingly incorrectly calculated in IE7

    In http://secret.gsnedders.com/foo3.html the date beside the header appears (vertically) down below it, as if the margin isn't being set to zero on the date. Without a copy of IE (of any version, yet alone 7 specifically, where this issue occurs) to play with, I'm rather lost about possible causes. Any ideas?

  • #2
    Regular Coder QBall777's Avatar
    Join Date
    Mar 2005
    Location
    uk
    Posts
    156
    Thanks
    5
    Thanked 1 Time in 1 Post
    Not quite sure what you mean. Is your div tag wide enough for the header and date?

    After looking at your code I think its because Lead Developer, Anolis is in a <h3> tag. This will automatically give you a line break.
    Last edited by QBall777; 03-31-2009 at 10:45 PM.

  • #3
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by QBall777 View Post
    After looking at your code I think its because Lead Developer, Anolis is in a <h3> tag. This will automatically give you a line break.
    Compare IE7 with any other browser with CSS 2.1 selectors support. The h3 has is floated left, and the paragraph following it has no margins, thus should appear along side.

  • #4
    Regular Coder QBall777's Avatar
    Join Date
    Mar 2005
    Location
    uk
    Posts
    156
    Thanks
    5
    Thanked 1 Time in 1 Post
    If you remove the <p> or set the <p> margin-bottom: 0ex; it will work fine.

    <p><abbr class=dtstart title=20080216>February 2008</abbr> –
    <abbr class=dtend title=20081119>present</abbr>.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    There seems to be a lot going on here I don't recognize. It validates (???) as HTML5, I've never seen a + sign used in the CSS like that and I always hated how html lets you leave elements open like that.

    A ul that only contains the title of the next ul, I wonder if that shouldn't be a dl instead?

    This seems to work though. Swapped out the + for a comma but the + seemed to work too -
    Code:
    h3, p {
    margin-top: 0;
    float: left;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder QBall777's Avatar
    Join Date
    Mar 2005
    Location
    uk
    Posts
    156
    Thanks
    5
    Thanked 1 Time in 1 Post
    Yeh I agree with Excavator looks very crowded in there.

    h3, p {
    margin-top: 0;
    float: left;
    }

    Works fine this end.

  • #7
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by Excavator View Post
    A ul that only contains the title of the next ul, I wonder if that shouldn't be a dl instead?
    I'd argue that it isn't a name-value grouping though (as implied by a definition list).

    This seems to work though. Swapped out the + for a comma but the + seemed to work too -
    Code:
    h3, p {
    margin-top: 0;
    float: left;
    }
    , and + are very different in CSS. "," allows more than one selector to match a group of rules, and "+" is a the adjacent sibling combiner (i.e., the selector on the right is a sibling — with no element siblings in between — of the selector on the left), so that doesn't fix the problem (there are other things that'll break).

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    html {
    font: 0.95em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    padding: 5ex 5em;
    color: black;
    background-color: white;
    }
    Did you mean em? btw, I wouldn't apply padding/margin directly on html selector.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    So, I've made both the h3 and p inline-block in things that support it, and inline in things that don't, which basically works.


  •  

    Posting Permissions

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