Link to home
Start Free TrialLog in
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

Avatar of Meritor
Meritor
Flag of India image
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
Avatar of allanmark
allanmark

ASKER

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

ASKER

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.
Avatar of Meritor
Meritor
Flag of India image
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.
Avatar of allanmark
allanmark

ASKER

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

Avatar of Meritor
Meritor
Flag of India image
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.
Avatar of allanmark
allanmark

ASKER

Freaky!!

Next steps?
Avatar of Meritor
Meritor
Flag of India image
Next Steups?
Use 'LightGrey' in
.TextBoxes
{
   background-color: LightGrey;
}

Thats it!
Do you expect anyting more?
Avatar of allanmark
allanmark

ASKER

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.
Avatar of Meritor
Meritor
Flag of India image
Which browser are you using.
I have tested in IE 6 and Mozilla 2 and it was wokring fine with this browsers
Avatar of allanmark
allanmark

ASKER

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
Avatar of Meritor
Meritor
Flag of India image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of allanmark
allanmark

ASKER

Thanks!

Will do as you suggest.