#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2005
    Posts
    16
    Rep Power
    0

    CSS looks fine in Explorer, not in Firefox or NS


    Hi everyone! I'm pulling my hair out on this one. I must confess I'm a bit green when it comes to css, but I've been playing around with this page and was finally able to get it looking the way I want in IE. If you look at it in Firefox or Netscape, the container doesn't expand at the bottom, and the links just spill out. Any ideas on how I can get this to expand like it does in IE?

    http://www.gotop100.com/test.html

    Thanks!
  2. #2
  3. No Profile Picture
    JackOfAllTrades, MasterOfNone
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    Kentucky, USA
    Posts
    398
    Rep Power
    129
    The reason that happens is because Netscape and Firefox are following the rules, and Explorer isn't (as usual). When you float an element, the containing element is not supposed to stretch to fit it. The fix is to put an element after the floated elements, which has the clear property set. My suggestion is to do this with the :after pseudo element, which IE will ignore but it doesn't need it anyway.
    Code taken from Position is Everything:
    css Code:
    #container:after {
    	content: ".";
    	visibility: hidden;
    	display: block;
    	height: 0;
    	clear: both;
    }

    This dynamically creates a cleared element, requiring no additional markup. You will need to apply the style to the div containing those floated divs, the easiest way would be with an id. Just replace whatever you use for "#contatiner".
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2005
    Posts
    16
    Rep Power
    0
    Perfect - that fixed it. Thank you for the help!
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2005
    Posts
    33
    Rep Power
    14
    Hi--I hope you don't mind me sending a request to you regarding a coding issue. You seem to be very knowledgable and I was hoping I could get your assistance for a moment. I submitted a CCS/JS forum question in the hopes of getting some help ... Below is the message and a link--if you don't mind, could I get your intuition and/or help in finding out the issue--and for some reason I think it's right in front of me and I cannot see it! I'll be more than happy to provide you the original code for your review if you cannot extract it ....

    Conflicting div layers and menu ... (w/Firefox)

    http://www.deltatango5.com/TESTER6b.html

    this is the link to reference ....... once you select a menu item: SERVICES and chose a link it of course populates the paired windows ... BUT when you go to GIFT IDEAS for instance, the menu appears until you mouse over ..... there is some kind of conflict with the "content" window/div and the submenu ..... I for the life of me cannot find the issue--assistance is greatly appreciated.

    NOTE: it works fine with IE ... FIREFOX is the issue ...
  8. #5
  9. No Profile Picture
    JackOfAllTrades, MasterOfNone
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    Kentucky, USA
    Posts
    398
    Rep Power
    129
    Seems to work OK to me. Can you describe exactly what is supposed to happen, and what is actually happening?
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2005
    Posts
    33
    Rep Power
    14

    div tags, css and FIREFOX--not working


    Originally Posted by jnsg
    Seems to work OK to me. Can you describe exactly what is supposed to happen, and what is actually happening?
    when selecting a menu item initially from the link provided it populates two windows, the problem is if you go further right on the menu at the top the dropdowns "disappear" when you attempt to scroll down the menu that hovers over the second window on the right ... make any sense?
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2005
    Posts
    33
    Rep Power
    14

    div tags, css and FIREFOX--not working


    Originally Posted by jnsg
    Seems to work OK to me. Can you describe exactly what is supposed to happen, and what is actually happening?
    when selecting a menu item initially from the link provided it populates two windows, the problem is if you go further right on the menu at the top the dropdowns "disappear" when you attempt to scroll down the menu that hovers over the second window on the right ... make any sense?
  14. #8
  15. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    Can't see any problems with that menu in FF1.5, except for poor choice of colours and the lack of a of a no-javascript version.

    What version of Firefox are you using?
  16. #9
  17. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2005
    Posts
    33
    Rep Power
    14

    Question


    Originally Posted by Akh
    Can't see any problems with that menu in FF1.5, except for poor choice of colours and the lack of a of a no-javascript version.

    What version of Firefox are you using?
    I used the blue color just to help me find ... it by no means will be blue menus ... have you selected a link to have the areas populate? I'm using FF 1.0.7 ... After downloading FF 1.5, it works fine, BUT NS 7+ is the kicker of a problem

    any wisdom you can provide would be greatly appreciated!!!!
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It seems ok in NS7.2, though there is the bug in NS7.0.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo