Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Jan 2006
    Location
    Perth, Australia
    Posts
    22
    Member #
    12343
    Hi all,

    Have trawled the web and this forum for info on how to fix this, and tried LOADS of techniques (<br clear:all> | #footer { clear: both; } etc etc. Even down to creating another box just to house the nav (which didn`t work in either).

    Anyway, here`s the offending page (in the closest I can get it):
    http://home.exetel.com.au/stormz/M5/index.html

    and the css is:
    http://home.exetel.com.au/stormz/M5/css/main.css

    IE 6 displays exactly as I want (makes a change) :
    http://home.exetel.com.au/stormz/M5/m5_IE_1.jpg

    FF moves the <ul> down alot (don`t know why).:
    http://home.exetel.com.au/stormz/M5/m5_FF_1.jpg

    The big blank space between the header and nav in FF is apparently the #container , according to the 'display element and id info' Web Developer FF plugin.

    You`ll see some the #navbox I tried, failed, and commented out.

    When I changed the #sidebar-a background-image to 'fixed', IE remained the same:
    http://home.exetel.com.au/stormz/M5/m5_IE_posFixed.jpg

    The nav <ul> in FF actually stayed at the top, under the header, but the left image scrolled along with the scrollbar::
    http://home.exetel.com.au/stormz/M5/m5_FF_posFixed.jpg

    Any help would be appreciated.... driving me kerrrazy!
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Firstoff, thanks for the screenshots; very helpful and thoughtful.

    Tip: If you are debugging pages in Firefox, make sure you have these three extensions:
    1. DOM inspector
    2. Firebug -- Use the Inspect mode, for example
    3. Web Developer toolbar -- Try its Edit CSS command. Heck, try all its features, like Topographic view. Amazing extension.
    OK, now down to business.

    I think the problem is that #sidebar-a is pushing down your <ul>.

    You might try something like changing your right margin on ul.two to be negative [width of #sidebar-a]. Something like that, or make the <ul> actually be not so wide and right-aligned somehow or another.

    That should help. Let me know if it doesn't. If it does, click that little thumbs-up button
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  4. #3
    Junior Member
    Join Date
    Jan 2006
    Location
    Perth, Australia
    Posts
    22
    Member #
    12343
    Cheers Alan,

    What you said made me look (yet again), at those areas.... and do what all devs do..... change things randomly to see what happens

    I got rid of the 180px left padding on the ul.two. That padding is great if I didn`t have the sidebar floated:left, but useless once I had floated it, which was pushing it below the sidebar as you suggested.
    I also changed the hight of the ul.two, to 30px (from 17px), which helped somehow.

    Anyway, thanks alot, and for others benefits to learn from (and adapt to their own designs):

    FIXED:
    HTML: http://home.exetel.com.au/stormz/M5/index.html
    CSS: http://home.exetel.com.au/stormz/M5/css/main.css

    BROKEN:
    HTML: http://home.exetel.com.au/stormz/M5/index_wrong.html
    CSS: http://home.exetel.com.au/stormz/M5/css/main_wrong.css

    Tabbed menu system courtesy of:
    http://www.dragon-labs.com/articles/utm/

  5. #4
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    I'm glad that helped, and that you got it all figured out.
    Thanks for thoughtfully leaving your fixed code for others.
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:39 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com