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
does not work...Code:#container { background-color: #457632; }
| SitePoint Sponsor |
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
does not work...Code:#container { background-color: #457632; }
there's nothing wrong with that CSS, in your HTML are your refering to it by ID or by class?
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.
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?
I do use id.
http://the-barracks.com/v4/index3.php
Looks lik it's working to me (IE6 Win2k)
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.
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; }
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).
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.
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)
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).
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.
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
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.
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
Never mind, I am doing something totally different now. Thanks anyways!
Posting Permissions
//
Bookmarks