SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Top part cut off in Explorer?

    This site has the top of the name cut off yet when I view it in Firefox/Camino on my mac it looks fine?

    http://www.donalhinman.com/about.html#

    thanks

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like it may be a bug in IE6 in the way that it handles negative margin's. If you remove the width from the #head then it seems to work

    Code:
    #head {
        margin: 0em 0 0.5em;
        width: 100%;
        line-height: 0em;
    }
    The #head is a <div> so in reality it shouldn't have any impact anyway but for some reason it's throwing a bit of a wobbly in IE6.

    However, you seems to be using negative margin's on a few occasions and for a simple design like this, you should really be able to get away without using them.

    I'd simply float the #head left, float the #nav right, apply a width and then push any content within these down using padding.

    There's different ways of achieving something like this but this method will be the most effective way to achieve cross browser compatibility.

    Hope that helps anyway.

  3. #3
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On my computer your page shows up fine in FF. But when I view it in both IE 6 and 7, the top part is cut off.

    The problem appears to be with your #head element. If you give your "head" element a border, you will notice that due to the following:

    Code CSS:
    #head h1 {
        font: 400 3.75em arial, sans-serif;
        color: #666;
        --> margin-top: -15px; <--
        margin-bottom: 0px;
        padding-bottom: 0px;
        letter-spacing: -0.1em;
        padding-top: 0px;
        }

    the head element cuts off the "h1" element because you're basically moving the H1 element into the inner canvas of the Head element, if that makes sense.

    Personally, I will have to play around with this to give it the same layout effect, without the being cut off.
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  4. #4
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    However, you seems to be using negative margin's on a few occasions and for a simple design like this, you should really be able to get away without using them.
    I agree... I would generally try to avoid negative margins if my designs.
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys I am new to this trying to learn. I will try removing the negative witdth and see what happens.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    When you use negative margins in IE you will very often need to use position: relative as well otherwise the part that extends out of the element seems to be drawn under the canvas or element above. Using position:relative creates a stacking context and it pop backs into view.

    Removing the width as csswiz said should also have the same affect as "HasLayout" will be removed from the header and should allow it to slide upwards without problem.

    There's no harm in using negative margins as long as you use them wisely and aren't using them to fix other errors such as not controlling the padding/margins properly etc .

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    There's no harm in using negative margins as long as you use them wisely and aren't using them to fix other errors such as not controlling the padding/margins properly etc .
    Completely agree, they're all to often used though to achieve things that could be done much easier with simpler positioning and padding/margins applied correctly.

    Personally with this example (which is quite a nice design by the way), I'd probably go for a fixed width layout of around 760px and position float the elements inside this with other set widths.

    Keano, if you're just starting to learn then fixed widths are probably easier to deal with so I'd definitely suggest using this method to start with before moving onto liquid/fluid designs.

    Off Topic:

    Hopefully Keano is a reference to Roy and not Robbie?

  8. #8
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys I am trying to put a border around the header but can't seem to to see it. I am using
    #head {
    margin: 0em 0 0.5em;
    line-height: 0em;
    border:#666666; border:solid; border:thin;
    }

    nothing shows?

    BTW your right getting rid of the width helped thanks!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    H,

    You are using shorthand for each value and each shorthand resets all the properties for that style to their defaults so all you end up with is border:thin being applied. This means the default for border-style gets reset to its default of 'none' which means no border will show and the computed width is reset to zero.

    With shorthand, values are usually optional but the ones you don't define are reset to their defaults which may over-ride settings you made previously.

    It should simply be:

    Code:
    border: 1px solid #666;
    Also use a pixel width instead of a keyword because the keywords vary between browsers (thin in ie is 2px and mozilla is 1px IIRC).

  10. #10
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that helped. I also tryed to move the name up more near top but can't figure out what to tweak. Gets confusing.


Bookmarks

Posting Permissions

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