DIV not working correctly

text not showing in div

[AllenQ]

Hi,

I'm having trouble working on a project for a client. I'm new to using css positioning and DIVs and I've made some kind of mistake that I can't identify. The project is a medical form that I'm recreating from a PDF file.

I am using DIV containers to position the different form boxes and headers and I cannot get the text in the lower header to show.
Can someone please help ASAP? I'm on a deadline for this project.

Here is the code:

<DIV class="leftHeader">


<P>HORMONE ASSAY</P>



</DIV>

and the css for this DIV

.leftHeader {
background-color:#5B5B5B;
color:#ffffff;
font-weight:bold;
font-family:Verdana,Arial,sans-serif;
font-size:24px;
text-align:center;
position:fixed;
left:30px;
top:605px;
bottom:150px;
width:35%;
padding:5px;
height: 30px;
margin:0px auto;
}

The text "hormone assay" is not showing, only the grey background no matter what I do! There are two other DIVs above this one and the grey background has to be the same width as the DIV above it which it is...that's not a problem...its that the text wont show. It is showing in Microsoft Expression Web but not on the page itself in either browser.

Thanks!
--Allen

[lucy24]

White text on gray background? I hope this isn't for an ophthalmologist's site :)

Is this the only div with this background? So you're sure you're seeing this one and not something else? If in doubt, set a visible border on only this div. Just for testing; throw it out as soon as things are working.

top:605px;
bottom:150px;
height: 30px;
left:30px;
width:35%;
padding:5px;

{position: fixed;} is probably the single trickiest positioning scheme there is. It may help to spell out, in English, what you want the element to look like and how you want it to behave.

In this example, three of the values are offsets determined by the containing box-- which for {position: fixed} is the viewport, not the page. If you add everything up, the element will only display as intended if the viewport is about 46px wide (i.e., number that 30px would be 65% of) by 795px tall. This sounds over-constrained to me ;)