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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts

    my newest positioning issue

    Having recent success with some CSS layouts I figured I had it down pretty good and decided to convert my main page to CSS only. And now I know I was wrong...

    here is the page
    here is the style sheet

    My probem is that in Mozilla(firefox) the topShape div doesn't sit below all the divs above it. It goes to the top as if it were positioned absolutely.

    Can anyone see why this is?

    Works fine in IE so if you have that laying around you can see what I'm shooting for. Both pages do validate in case you were wondering.

    Thanks again.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Width / margin / padding?

    Try 'n reduce the width of the topshape div, or explicitly set its margin and padding to zero. If we're talking IE5.x/win, it implements the incorrect box model, remember?
    A tip on the side: use ids for the various divs instead of classes; it'll allow you to simplify your styles.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Regular Coder
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No luck. =\

    I explicitly set margin and padding and played around with a bunch of other attributes but it will still only display correctly in IE.

    I suppose I could just give the topShape div a margin-top large enough to push it down to where I want it. But then I would have the problem of it displaying correctly in Mozilla and not IE.

    I could also position it absolutely for that matter but I would really like to find out why this is doing this.

  • #4
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is very odd. I don't see any reason for these boxes to act like this. What does the page look like in Opera, or Mac browsers?

    (btw: you should be using background-image for just about everything, including that banner).
    Last edited by me'; 02-23-2004 at 07:05 PM.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Stillwater Ok
    Posts
    226
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Its acting correctly believe it or not. Read this, and see if it makes sense as to why.

    Make this one change and see if it works for you.

    .row .left {
    float: none;
    }

    /*EDIT*/
    I may have answered a little to quickly, after closer investigation, I'm not sure you need: position: relative; on #header .topShape either.
    Last edited by Eskimo; 02-23-2004 at 08:32 PM.
    "Never offend people with style when you can offend them with substance."
    --Sam Brown

  • #6
    Regular Coder
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That didn't help though it did produce some interesting results.

    So the topShape div is acting like there is nothing above it because the divs above it are floated. According to the link you provided, everything else on the page will flow vertically as if the floated div didn't exist.

    But I thought that's what this class was supposed to correct:
    PHP Code:
    .clear {
       
    clear:     both;
       
    height:  0px;

    You may have noticed that I put an empty clear div as the last thing in the row div. Isn't that supposed to make everything else around it act like normal?

  • #7
    Regular Coder
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think I fixed it!

    Previously in my clear div I had this '<!-- -->' because....that's how I've been doing it for a while.

    So on a whim I replaced <!-- --> with &ampnbsp; and my topShape div went down to where I want it in IE, Mozilla, and Opera!

    W00T!

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Stillwater Ok
    Posts
    226
    Thanks
    0
    Thanked 0 Times in 0 Posts
    good to hear.

    Why did you have a blank HTML comment in your div again?
    "Never offend people with style when you can offend them with substance."
    --Sam Brown

  • #9
    Regular Coder
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I was doing that based on a tip I read in this article.

  • #10
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Eskimo
    good to hear.

    Why did you have a blank HTML comment in your div again?
    Because floated elements are taken out of the flow, so a box with just floated elements in would have a height of zero. So we stick another nonfloating div that is told to rest after the floats with clear:both (normally), to give the box height.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


  •  

    Posting Permissions

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