Avatar of allanmark
allanmark asked on

CSS Background and scroill setting not working

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>

Open in new window

Web Languages and StandardsHTMLCSS

Avatar of undefined
Last Comment
allanmark

8/22/2022 - Mon
Meritor

1) LightGray is not working even with style. You have written that LightGray was avaible with you. I am not sure how can the color name be anyone. Coz as per my knowledge the name are parsed by the Browser and its completely depandent on browser only. Your ASP code may convert LightGray to its Haxa value. It will better to check the code by clicking "view source" in final HTML ouptut.
2) No, div may not expand to its contents if you have defined height and width.
You can handle this using 'OVERFLOW' property of CSS
There are 4 values of
a) overflow: auto;
b) overflow: hidden;
c) overflow: visible;
d) overflow: scroll;
Please visit: http://www.w3schools.com/CSS/ for more understanding on CSS
ASKER
allanmark

Thanks for the explnation - now I have a better understanding of how the div works.
LightGrey-in-page-sourceview.jpg
LightGrey-in-browser.jpg
ASKER
allanmark

Sorry about that ... Gateway timeout ...

Anyway, the attached 2 dumpos (previous post) show the output page and the sourceview of that page - using LightGrey.

Sorry to sound so dumb, but I'm really confused.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Meritor

I have checked the code given by u
The LightGray is working for me in Mozilla but not in IE
Regarding your CSS question of LightGray. Its working fine with Mozilla
.TextBoxes
{
    background-color: LightGray;
}

If you still facing any issue. Please copy all your HTML page source, so that the actual reason can be figured out.
ASKER
allanmark

Many thanks for your patience!

I've attached:

source - HtML
source -VWD
CSS file
HTML Source:
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	Read Page
</title><link rel="stylesheet" type="text/css" href="Princess.CSS" /></head>
<body id="read">
    <form name="form1" method="post" action="Read.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTc5NDM5MjQyMGRkU+6NC1Me3+raTOs9fAMQyux63Zg=" />
</div>
 
    
            <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>
    
    <div id="content2" class="pageBodyDiv" style="background-color:BlanchedAlmond">
 
       <label class="labels" style="top: 7px; left: 8px">Categories:</label>       
       <select name="ddlCategories" id="ddlCategories" style="background-color: LightGrey; width: 200px; left: 10px; position: absolute; top: 25px">
 
</select>
       <label class="labels" style="top: 60px; left: 8px">Stories:</label>
       <select size="4" name="lbStoryList" id="lbStoryList" style="background-color: LightGrey; width: 200px; left: 10px; position: absolute; top: 77px; height: 350px">
 
</select>
       <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>       
       <textarea name="txtStory" rows="2" cols="20" id="txtStory" class="TextBoxes" style="position: relative; left: 65px; top: 25px; width: 500px; height: 900px"></textarea>
    </div>
 
        
    <div id="pgFooter" class="pageFooter" style="background-color: Yellow">
  <hr align="center" color="Black" height= "15px" width="75%" />
  <label class="smallerFontSize">Copyright Allan Van Riel @ 2008</label>                          
</div>
<div>
 
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgL1k7azDwLE2qS1DoK4Ki20IrnyneBChs8AXdNWTMw9" />
</div></form>
</body>
</html>
 
 
 
 
VWD 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" style="background-color:BlanchedAlmond">
 
       <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: 65px; top: 25px; width: 500px; height: 900px" TextMode="MultiLine"></asp:TextBox>
    </div>
        
    <!--#include file="CSS_Stuff/Footer.inc"--> 
     
    </form>
</body>
</html>
 
 
CSS FILE:
 
body
{    
   background: url(CSS_Stuff/paper.gif); 
   font: Verdana, "Minion Web", Helvetica, sans-serif;     
}
 
.xyz
{
    position:fixed;        
}
 
.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
{
    position: relative;
    top: 200px;
    margin-left:auto; 
    margin-right:auto;    
    padding: 0px;
    text-align:center;    
}
 
.pageFooterDiv
{    
   
}
 
.smallerFontSize
{
    position: relative;
   font-size: smaller;  
}
.labels
{font: smallerFontSize;
 position: absolute;
}
.TextBoxes
{
    font: smallerFontSize;
    background-color: Gray;
}
 
#headerPic {position: absolute; top: 28px; left: 825px} 
 
#content1 
{width: 60%; border:2px solid black; padding:10px; 
}
 
#content2 
{width: 100%; 
}
 
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;
}

Open in new window

Meritor

Its working fine with me.
This is a weird problem.
See How do we spell LIGHTGREY OR LIGHTGRAY
If I write LightGray (the correct one) its not working, but if you write 'LightGrey' its working fine.
Now in case of only 'Gray' its working fine, here its not working with 'Grey'.
This is really weired.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
allanmark

Freaky!!

Next steps?
Meritor

Next Steups?
Use 'LightGrey' in
.TextBoxes
{
   background-color: LightGrey;
}

Thats it!
Do you expect anyting more?
ASKER
allanmark

I'vce tried that before and got "Error      1      'LightGrey' is not a valid value for the 'background-color' property." - so, I assumed taht it wouldn't worked. This morning I browsed the poage and despite that, saw that it gives the desired colour.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Meritor

Which browser are you using.
I have tested in IE 6 and Mozilla 2 and it was wokring fine with this browsers
ASKER
allanmark

Sorry ... I'm not explaining myself very well!!  :(  :(

Also using Mozilla 2.0 aand agree - displays ok.

I'm coding the CSS file inside of VWD (right-click Solution; Add New Item; Add Stylesheet)  -- when I type it in the style sheet, the message appears in the Errors box.
ASKER CERTIFIED SOLUTION
Meritor

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
allanmark

Thanks!

Will do as you suggest.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.