troubleshooting Question

CSS Background and scroill setting not working

Avatar of allanmark
allanmark asked on
Web Languages and StandardsCSSHTML
13 Comments1 Solution678 ViewsLast Modified:
Greetings all

I have a page (created using CSS (my 2nd attempt!).  On that page I have various controls - and the following 2 problems (hope it's ok to put thjis in onbe question1):

(1) If I define a controls style inline (eg. <asp:DropDownList ID="ddlCategories" runat="server" Style="background-color: LightGrey; ..........x"></asp:DropDownList>) I have the LightGrey colour available. If I define it through CSS (see class "TextBoxes" in attached snippet) that colour is not available. What can I do abouth this?

(2) I have a DIV with a predefined height. My understanding was that the DIV would automatically expand to accomodate it's contents, yet my Textbox scrolls happily over all else. WHat should I be doing?

In advance, thanks!!!

allanmark
READ>ASPX SOURCE:
 
<%@ Page Language="C#" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Read Page</title>
    
    <link rel="stylesheet" type="text/css" 
    href="Princess.CSS" />
    
</head>
<body id="read">
    <form id="form1" runat="server">
    
    <!--#include file="CSS_Stuff/Header.inc"-->
    
    <div id="content2" class="pageBodyDiv">
 
       <label class="labels" style="top: 7px; left: 8px">Categories:</label>       
       <asp:DropDownList ID="ddlCategories" runat="server" Style="background-color: LightGrey; width: 200px; left: 10px; position: absolute; top: 25px"></asp:DropDownList>
       <label class="labels" style="top: 60px; left: 8px">Stories:</label>
       <asp:ListBox ID="lbStoryList" runat="server" Style="background-color: LightGrey; width: 200px; left: 10px; position: absolute; top: 77px; height: 350px"></asp:ListBox>
       <label class="labels" style="font-size:small; top:430px; left: 8px">Double-click to load highlighted story</label>
       <label class="labels" style="top: 7px; left: 300px">Story:</label>       
       <asp:TextBox ID="txtStory" CssClass="TextBoxes" runat="server" Style="position: relative; left: 100px; top: 25px; width: 500px; height: 900px" TextMode="MultiLine"></asp:TextBox>
    </div>
        
    <!--#include file="CSS_Stuff/Footer.inc"--> 
     
    </form>
</body>
</html>
 
 
 
CSS SOURCE:
 
body
{    
   background: url(CSS_Stuff/paper.gif); 
   font: Verdana, "Minion Web", Helvetica, sans-serif;     
}
 
.pageHeaderDiv
{    
    padding: 0px;
    width:100%;
    height:125px;    
    background-image: url(CSS_Stuff/blspeck.jpg);
    left: 0;
    top: 0;
    position:fixed;        
    color:White;
    text-align:center;
    z-index:9;
}
 
.pageBodyDiv
{
    width: 100%;
    padding: 0px;
    height:700px;
    text-align:center;
}
 
.pageFooterDiv
{    
 position: relative; 
 top: 100px;       
}
 
.smallerFontSize
{
   font-size: smaller;  
}
.labels
{font: smallerFontSize;
 position: absolute;
}
.TextBoxes
{
    font: smallerFontSize;
    background-color:;
}
 
#headerPic {position: absolute; top: 28px; left: 825px} 
 
#content1 
{width: 60%; margin-left:auto; margin-right:auto; position:relative; top: 200px;
 border:2px solid black; padding:10px; 
}
 
#content2 
{width: 100%; position:relative; top: 125px;
}
 
 
 
ul#menu { top: -30px; width: 40%; height: 38px; background: #FFF url("CSS_Stuff/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0;}
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
ul#menu li a { height: 38px; color: black; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
ul#menu li a:hover { color: red; background-color:Silver }
ul#menu li a.current{ color: Black; background: gray url("CSS_Stuff/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }
 
body#home a#menuHome,
body#read a#menuRead,
body#evaluate a#menuEvaluate,
body#write a#menuWrite,
body#email a#menuEMail
 {
color: #fff;
background: #930;
}
 
 
 
HEADER.INC:
 
        <div id="pgheader" class="pageHeaderDiv" >                   
            
          <h1>Princess And The Paupers</h1>
            <img id="headerPic" height="70" src="CSS_Stuff/Princess.jpg" width="144" style="border-width:5px;" />
 
          <center><ul id='menu'>
                
                <li ><a href='Default.aspx' id='menuHome' >Home</a></li>
                <li ><a href='Read.aspx' id='menuRead' >Read</a></li>
                <li ><a href='Evaluate.aspx' id='menuEvaluate' >Evaluate</a></li>
                <li ><a href='Write.aspx' id='menuWrite' >Write</a></li>
                <li ><a href='EMail.aspx' id='menuEMail' >EMail</a></li>
            </ul>
          </center>
            
        </div>
 
 
 
FOOTER.INC:
 
<div id="pgFooter" class="pageFooter">
  <hr align="center" color="Black" height= "15px" width="75%" />
  <label class="smallerFontSize">Copyright Allan Van Riel @ 2008</label>                          
</div>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 13 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 13 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros