Forum Moderators: not2easy
I'm trying to do some CSS to make h4 tags be a fixed width box with a dark background and light text, centered in the containing div. Problem is, either the background color is dark the entire way across the div when the width isn't set, or the block isn't centered when the width is set. Any ideas? Thanks
Here is the css code that causes this:
h4.sectionheader {
display: block;
background-color: #22f;
color: #ff3;
text-align: center;
width: 40%;
margin: 0px auto;
}
h4.sectionheader {
display: block;
background-color: #22f;
color: #ff3;
text-align: center;
width: 300px; /* specified the width in pixels*/
margin: 0px auto; }
and it works just fine, specified at 300pixels and centered.
I imagine your problem might have something to do with a different part of your css?
Adding text-align: center; to the <h4>s parent container will center the <h4> in IE. You may wish to counter this 'hack' with a text-align: left; further on in your code.
Remember that with IE7 soon to be correcting many IE display ideosyncrasies it is best practice to use IE conditional statements to 'hide' hacks from more standards compliant browsers. And to use a full DocType to escape 'quirks' differences.
I tried setting it to an exact pixel width with the same result. I am using Firefox (forgot to even consider that IE might not like something as simple as centering, maybe I'll just reformat the page to use it full width ><)
In any case, here is the entirety of that page (stripped of all actual content, but still exhibiting the effect). BTW, as a CSS newbie, I am willing to take any and all advice/cricticism about any of the other CSS in here also ;) Sorry for the unformattedness of it, but the Code UBB tag stripped out all the tabs :(
Edit - below corrected for standards compliance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title><style type="text/css">
body {
padding: 0px;
margin: 0px;
}
h4.sectionheader {
display: block;
background-color: #22f;
color: #ff3;
text-align: center;
width: 200px;
margin: 0px auto;
}
#container {
min-width: 650;
}
#topleft {
background-color: #eee;
float: left;
width: 100%;
height: 200px;
}
#topright {
background-color: #ddd;
width: 100%;
height: 200px;
}
#bottomleft {
background-color: #ccc;
float: left;
width: 100%;
}
#bottomright {
background-color: #bbb;
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 400px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<div id="topleft">
<p>Top Left</p>
</div>
<div id="bottomleft">
<p>Bottom Left</p>
</div>
</div>
<div id="right">
<div id="topright">
<h4 class="sectionheader">Test Title</h4>
<p>Test Text</p>
</div>
<div id="bottomright">
<p>Bottom Right</p>
</div>
</div>
</div>
</body>
</html>
[edited by: MattHock at 11:14 pm (utc) on Aug. 28, 2006]
Edit - Fixed the standards problems (no namespace, style incorrectly nested outside of head). Problem persists.
[edited by: MattHock at 11:15 pm (utc) on Aug. 28, 2006]
Chances are, if it's not working in IE 6 (I assume you're using IE 6?) but it is in Firefox, you are still in quirks mode for IE.
If you weren't in quirks mode for IE, you -can- use
margin: 0px auto;So my questions are:
