SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div background-color not working

    I have a main <div> that is 756px and servers as the container for my site, and I want it to have a bg color different of that of the body's, but putting

    Code:
    #container {
      background-color: #457632;
    }
    does not work...

  2. #2
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there's nothing wrong with that CSS, in your HTML are your refering to it by ID or by class?

  3. #3
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.htmlhelp.com/tools/csscheck/ says, when I posted your code fragment:

    "The shorthand background property is more widely supported than background-color."
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  4. #4
    011521 dbalsdon's Avatar
    Join Date
    Feb 2003
    Location
    North Of Scotland
    Posts
    444
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as platinum said.. the problem isn't with the CSS coding... its probably with his html/xhtml coding...

    Possibility... in your coding, you should(if you arent already) be using <div id="container"></div>

    edit:
    could you maybe point us in the direction of the page you are having difficulty with?
    Daniel Balsdon
    My Site

  5. #5
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks lik it's working to me (IE6 Win2k)

  7. #7
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Middle section and the outlaying sections shoudl be different colors. I'm using IE6 with XP and it doesn't work...not with Mozilla, either.

  8. #8
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you are expecting, the only background-color tags you have are

    background-color: #2C3A35;
    On the body, which looks right (I sort of dark green)

    background-color: #555555;
    on everything else, a very dark gray which also appears correctly

    The only difference from this is the header, newest and poll divs that have background images.

    Your code does not contain this
    Code:
    #container {
      background-color: #457632;
    }

  9. #9
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK your problem is that all of you divs are absolutely positioned. This takes them out of normal document flow so that your container div actually has no content so has no height.

    Personally I do not think that absolute positioning is a very good idea except possibly in the case of having a div of known width AND height. I certainly think it's a bad idea where it is basically unrequired (your title div).

  10. #10
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have just checked your CSS you appear to have heights on all divs. Why do you not just add a height to the container div ?

    height: 720px;

    looks like it should do the trick.

  11. #11
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But then what happens when my news / content goes past 720 height? Will it expand automatically?

    (btw, I was messing around with the code, so you probably cought it when I took away the div bgcolor)

  12. #12
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No but since you content div is fixed height as well it wont expand either I think, so you will have to alter your heights anyway.

    If you want differing elements to take account of each others height then you need to maintain document flow which means not using absolute positioning.

    Also I am not sure which broswer you are using for development testing but you should try to find a copy/computer with IE5 Windows on it to check you site in.

    IE5.x is still in use and does not support CSS nearly as well as the other popular browsers (not that all of them support it entirely).

  13. #13
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have just seen that your Javascript writes <style>...</style> tags into the body of the browser. I believe the onloy valid place for style tags is the head of the document. Although doing this seems to work in IE6 (and may be other browsers) you should move the code to the head of the document because you have no garunttee that it will work on all current browsers and even if it does that it will continue to work with new releases.

    And while we are talking javascript are you aware that if a browser supports javascript then the spans in you menu deisplay as block level elements (which is what a presume you want cos it looks quite good) but if a browser doesn't support javascript then all the menus are displayed (also what you want) but the spans are displayed as in-line elements not block elements.

  14. #14
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK here is your site with absolute positioning removed (this is probably not the only solution and it needs testing on platforms other than IE6 Win2K (what I am using). I have done the following:

    • Added a doc type to get IE6 out of quirks mode
    • Removed all absolute and relative positioning
    • Removed unrequired heights and widths
    • Floated the menu on the left and the Newest and Poll on the right
    • Alter the order of newest and poll in the html to get the correct order
    • Removed all the tables from your menu
    • Adjusted margins and padding to get as close as possible to original layout (I think it might be 1px out here and there)
    • Added box model hack to divs with widths and padding.


    See what you think one the attached zip file is verified
    Attached Files Attached Files

  15. #15
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything looks fine so far, still checking it out. Thanks a lot for your time.

    EDIT:

    Finished checking, put the menu and style into header2.php and style2.php, everything looks fine. Thanks a lot!

    ( http://www.the-barracks.com/v4/index4.php )

    EDIT 2: Err, it is all skewed while browsing in Mozilla.
    Last edited by Nick; Sep 18, 2003 at 12:08.

  16. #16
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Skewed in what way. I don't have Mozilla so a screen shot would be handy.

    The menu height is not high enough in IE6. when you expand the items they drop off the end of the background for War of the Ring and Age of Empires.

    Clever multi-browser stuff is always a challenge

  17. #17
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind, I am doing something totally different now. Thanks anyways!


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
  •