SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Aug 2002
    Location
    Washington State
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div positioning incorrectly...NS6 & MZ

    I recently redesigned my design site to use CSS for positioning and styles,
    to go table free. I *thought* I had gotten all the kinks out, but realized
    yesterday I had not, looks great in IE though... LOL

    Anyhow, for some reason the copyright div is showing in between the content
    and menu, but only in NS6.2 and Mozilla 1.0 . The CSS validates with only
    one warning regarding background-color. The HTML also validates.

    http://silverwebsstudio.com/problems.html

    Any ideas? Solutions? Similar problems?

    Thanks,

    Diana

  2. #2
    SitePoint Member
    Join Date
    Aug 2002
    Location
    Washington State
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    All fixed...

    I was using class instead of id... oh the simple errors that wreak havoc.

    Diana

  3. #3
    SitePoint Member
    Join Date
    Aug 2002
    Location
    Washington State
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I was hallucinating earlier or my computer is playing games with me. It's not fixed. I hate it I hate it I hate it. This is almost enough to drive me back to tables... *sigh*

    Can someone take a look and see if they spot something wrong?

    http://silverwebsstudio.com/problems.html

    the stylesheet involved is
    http://silverwebsstudio.com/affordable_web_design.css

    which imports http://silverwebsstudio.com/basics.css

    Hopefully, someone here can spot the error. Everything still validates....

    Diana, a most frustrated designer today

  4. #4
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually it was working earlier. What have you changed since then?
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  5. #5
    SitePoint Member
    Join Date
    Aug 2002
    Location
    Washington State
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothing, that I can think of. I hadn't uploaded the corrected files (at least I don't think I had), so I'm not sure how it could have been working. Are you checking in NS6 or Mozilla?

    I swear some days I wish I never turned on the computer... LOL

    Diana

  6. #6
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In Mozilla 1.1 it worked the first time I looked. Then it stopped working.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  7. #7
    SitePoint Member
    Join Date
    Aug 2002
    Location
    Washington State
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't happen to have the working copy cached do you? LOL
    This is truly embarassing... I hate it... I have a MZ1.0, so maybe I should upgrade. Still doesn't explain the NS6 issue though. *big sigh*

    Diana

  8. #8
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Somerset, UK
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think your problem is using vertical-align to position your #coptright id, in netscape 4.0+ vertical-align only works for images, see here
    I would use position:absolute; to make sure its positioned where you want it.

    hope this helps
    dave

  9. #9
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    1) remove the float:left from the "#content" CSS rule
    2) put the "menu" div *before* the "content" div, like this:

    <div id="frame">
    <div id="banner">...</div>
    <div id="menu">
    ...
    </div>
    <div id="content">
    ...
    </div>

    </div>
    <div id="copyright">
    ...
    </div>
    </div>

    For me, at least, that leaves you with the same appearance in IE6 and a recent Mozilla nightly.

    The "float: left" causes Gecko to regard the "content" div as being separate from the "frame" div (it's floating). The "float: right" on the menu causes THAT div to appear on the right. The "copyright" div is now the only div that's actually in the "flow" of the page, and so ends up wrapping itself into the gaps between the two floats.

    The content doesn't NEED to be in a float, I think, so just take it out. If the Menu div is after the content div in the source, then it's vertically positioned below the content. but if it's BEFORE the content div, it ends up where you want it.

    I think Moz's behaviour is correct, according to the W3C spec - see http://www.w3.org/TR/REC-CSS2/visuren.html#floats There are a couple of good examples there.

    How well older browsers will cope with this is another issue...

  10. #10
    SitePoint Member
    Join Date
    Aug 2002
    Location
    Washington State
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wanted to say thank you, that fixed it. I'll have to play with the CSS more (separetly) to see if I can get the content ahead of the menu, again for better SE optimization. But for now this is better than looking sloppy!

    Thanks again,

    Diana

  11. #11
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll have to play with the CSS more (separately) to see if I can get the content ahead of the menu, again for better SE optimization.
    My better CSS-educated Significant Other pointed to a simpler solution which does just that:

    Keep your original HTML (i.e. divs in the order banner, content, menu, copyright), leave the "float: left;" on the content div, and add "clear: left;" to the CSS for the copyright div. That explicitly tells browsers to do what IE is doing without being asked. Looks fine in Mozilla and IE6, but again, no guarantees about older browsers. If your menu gets longer than your content div for any reason, change that to "clear: both".

    And, glad to help, it encouraged me to FINALLY figure out how floats work - it'd been a mystery for some time.


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
  •