homepage Welcome to WebmasterWorld Guest from 54.82.229.76
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
DIV not working correctly
text not showing in div
AllenQ




msg:4580187
 7:14 pm on Jun 1, 2013 (gmt 0)

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




msg:4580197
 8:15 pm on Jun 1, 2013 (gmt 0)

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 ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved