|
-
Apr 19th, 2009, 04:01 PM
#1
CSS Issues
The following snippet is the basic layout for a page that is generated at runtime (in VB6, using web browser control and MS HTML Object Library). Is it possible to change the background color of the LI element when the Input element gets focus? It must be CSS and not a script.
Also, why do I need to use a negative margin for the .TextBox class.? If I don't the text inputs are indented
HTML Code:
<!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></TITLE>
<STYLE>
body{
padding:0;
margin:0;
font-family: arial;
font-size:10pt;
}
#pgContent
{
padding: 0.5in;
margin-left:2in;
width: 7.5in;
background-color: #eeeedd;
}
table{table-layout:fixed;}
li{vertical-align:top; margin-bottom:1em;}
ol{list-style-type:none;}
ol ol{list-style-type:decimal;margin-left:2.5em;}
ol ol ol{list-style-type:lower-alpha;}
ol ol ol ol{list-style-type:none;margin-left:-1.5em;}
label{white-space:nowrap;}
td input{width:100%;}
.Section{font-size:12pt;font-weight:bold;}
.Section ol{font-size:10pt;font-weight:normal;}
.Section li.Section{font-size:10pt;font-weight:bold;}
.Question{display:inline-block;width:28%;vertical-align:top;}
.Answer{display:inline-block;width:70%;vertical-align:top;text-align:right; }
.Answer span{width:20%;display:inline-block;overflow:hidden;text-align:left;}
.Caption{font-size:8pt;padding-left:1em;}
.TextBox{border:0;border-bottom:1px solid black;background-color:transparent;width:100%;}
.Answer input.TextBox{margin-left:-75px;}
</STYLE>
<HEAD>
<BODY>
<DIV id=pgContent>
<OL>
<LI class=Section>Identification
<OL id=Q_1>
<LI id=Q_20><SPAN class=Question>Surname<SPAN class=Caption></SPAN></SPAN><SPAN class=Answer><INPUT class=TextBox id=A_20></SPAN></LI>
<LI id=Q_21><SPAN class=Question>First and Middle name(s)<SPAN class=Caption></SPAN></SPAN><SPAN class=Answer><INPUT class=TextBox id=A_21></SPAN></LI>
<LI id=Q_22><SPAN class=Question>Alias names(s)<SPAN class=Caption></SPAN></SPAN><SPAN class=Answer><INPUT class=TextBox id=A_22></SPAN></LI>
</OL>
</LI>
<LI class=Section>Background Information
<OL id=Q_2>
<LI id=Q_26>
<SPAN class=Question>Date of Birth<SPAN class=Caption></SPAN></SPAN>
<SPAN class=Answer><SELECT id=A_26_D title="Select a Day"><OPTION value=1 selected>1</OPTION><OPTION value=2>2</OPTION><OPTION value=3>3</OPTION><OPTION value=4>4</OPTION><OPTION value=5>5</OPTION><OPTION value=6>6</OPTION><OPTION value=7>7</OPTION><OPTION value=8>8</OPTION><OPTION value=9>9</OPTION><OPTION value=10>10</OPTION><OPTION value=11>11</OPTION><OPTION value=12>12</OPTION><OPTION value=13>13</OPTION><OPTION value=14>14</OPTION><OPTION value=15>15</OPTION><OPTION value=16>16</OPTION><OPTION value=17>17</OPTION><OPTION value=18>18</OPTION><OPTION value=19>19</OPTION><OPTION value=20>20</OPTION><OPTION value=21>21</OPTION><OPTION value=22>22</OPTION><OPTION value=23>23</OPTION><OPTION value=24>24</OPTION><OPTION value=25>25</OPTION><OPTION value=26>26</OPTION><OPTION value=27>27</OPTION><OPTION value=28>28</OPTION><OPTION value=29>29</OPTION><OPTION value=30>30</OPTION><OPTION value=31>31</OPTION></SELECT><SELECT id=A_26_M title="Select a Month"><OPTION value=Jan selected>January</OPTION><OPTION value=Feb>February</OPTION><OPTION value=Mar>March</OPTION><OPTION value=Apr>April</OPTION><OPTION value=May>May</OPTION><OPTION value=Jun>June</OPTION><OPTION value=Jul>July</OPTION><OPTION value=Aug>August</OPTION><OPTION value=Sep>September</OPTION><OPTION value=Oct>October</OPTION><OPTION value=Nov>November</OPTION><OPTION value=Dec>December</OPTION></SELECT><SELECT id=A_26_Y title="Select a Year"><OPTION value=2009 selected>2009</OPTION><OPTION value=2008>2008</OPTION><OPTION value=2007>2007</OPTION><OPTION value=2006>2006</OPTION><OPTION value=2005>2005</OPTION><OPTION value=2004>2004</OPTION><OPTION value=2003>2003</OPTION><OPTION value=2002>2002</OPTION><OPTION value=2001>2001</OPTION><OPTION value=2000>2000</OPTION><OPTION value=1999>1999</OPTION><OPTION value=1998>1998</OPTION><OPTION value=1997>1997</OPTION><OPTION value=1996>1996</OPTION><OPTION value=1995>1995</OPTION><OPTION value=1994>1994</OPTION><OPTION value=1993>1993</OPTION><OPTION value=1992>1992</OPTION><OPTION value=1991>1991</OPTION><OPTION value=1990>1990</OPTION><OPTION value=1989>1989</OPTION><OPTION value=1988>1988</OPTION><OPTION value=1987>1987</OPTION><OPTION value=1986>1986</OPTION><OPTION value=1985>1985</OPTION><OPTION value=1984>1984</OPTION><OPTION value=1983>1983</OPTION><OPTION value=1982>1982</OPTION><OPTION value=1981>1981</OPTION><OPTION value=1980>1980</OPTION><OPTION value=1979>1979</OPTION><OPTION value=1978>1978</OPTION><OPTION value=1977>1977</OPTION><OPTION value=1976>1976</OPTION><OPTION value=1975>1975</OPTION><OPTION value=1974>1974</OPTION><OPTION value=1973>1973</OPTION><OPTION value=1972>1972</OPTION><OPTION value=1971>1971</OPTION><OPTION value=1970>1970</OPTION><OPTION value=1969>1969</OPTION><OPTION value=1968>1968</OPTION><OPTION value=1967>1967</OPTION><OPTION value=1966>1966</OPTION><OPTION value=1965>1965</OPTION><OPTION value=1964>1964</OPTION><OPTION value=1963>1963</OPTION><OPTION value=1962>1962</OPTION><OPTION value=1961>1961</OPTION><OPTION value=1960>1960</OPTION><OPTION value=1959>1959</OPTION><OPTION value=1958>1958</OPTION><OPTION value=1957>1957</OPTION><OPTION value=1956>1956</OPTION><OPTION value=1955>1955</OPTION><OPTION value=1954>1954</OPTION><OPTION value=1953>1953</OPTION><OPTION value=1952>1952</OPTION><OPTION value=1951>1951</OPTION><OPTION value=1950>1950</OPTION><OPTION value=1949>1949</OPTION><OPTION value=1948>1948</OPTION><OPTION value=1947>1947</OPTION><OPTION value=1946>1946</OPTION><OPTION value=1945>1945</OPTION><OPTION value=1944>1944</OPTION><OPTION value=1943>1943</OPTION><OPTION value=1942>1942</OPTION><OPTION value=1941>1941</OPTION><OPTION value=1940>1940</OPTION><OPTION value=1939>1939</OPTION><OPTION value=1938>1938</OPTION><OPTION value=1937>1937</OPTION><OPTION value=1936>1936</OPTION><OPTION value=1935>1935</OPTION><OPTION value=1934>1934</OPTION><OPTION value=1933>1933</OPTION><OPTION value=1932>1932</OPTION><OPTION value=1931>1931</OPTION><OPTION value=1930>1930</OPTION><OPTION value=1929>1929</OPTION><OPTION value=1928>1928</OPTION><OPTION value=1927>1927</OPTION><OPTION value=1926>1926</OPTION><OPTION value=1925>1925</OPTION><OPTION value=1924>1924</OPTION><OPTION value=1923>1923</OPTION><OPTION value=1922>1922</OPTION><OPTION value=1921>1921</OPTION><OPTION value=1920>1920</OPTION><OPTION value=1919>1919</OPTION><OPTION value=1918>1918</OPTION><OPTION value=1917>1917</OPTION><OPTION value=1916>1916</OPTION><OPTION value=1915>1915</OPTION><OPTION value=1914>1914</OPTION><OPTION value=1913>1913</OPTION><OPTION value=1912>1912</OPTION><OPTION value=1911>1911</OPTION><OPTION value=1910>1910</OPTION><OPTION value=1909>1909</OPTION><OPTION value=1908>1908</OPTION><OPTION value=1907>1907</OPTION><OPTION value=1906>1906</OPTION><OPTION value=1905>1905</OPTION><OPTION value=1904>1904</OPTION><OPTION value=1903>1903</OPTION><OPTION value=1902>1902</OPTION><OPTION value=1901>1901</OPTION><OPTION value=1900>1900</OPTION></SELECT></SPAN></LI>
<LI id=Q_27>
<SPAN class=Question>Gender<SPAN class=Caption></SPAN></SPAN>
<SPAN class=Answer>
<SPAN><INPUT id=A_27_1 type=radio value=Male name=A_27><LABEL title=Male for=A_27_1>Male</LABEL></SPAN>
<SPAN><INPUT id=A_27_2 type=radio value=Female name=A_27><LABEL title=Female for=A_27_2>Female</LABEL></SPAN>
</SPAN>
</LI>
</OL>
</LI>
</OL>
</DIV>
</BODY>
</html>
-
Apr 19th, 2009, 05:22 PM
#2
Re: CSS Issues
How exactly is the code being generated? Chances are the alignment in the input field is incorrect because of so many non-compliant oddities in the code.
There are several uppercase tags, input tags are missing a closing tag, id/class/values, etc are not enclosed in quotes, etc. I would assume it is some combination of the bunch that is causing the input field to do funny stuff.
As for the focus issue, I do not believe it is possible without using javascript to modify the CSS. You could set the :hover in the CSS, but that would obviously only work if they're using the mouse.
If you're able to write the CSS yourself, why wouldn't you be able to use an external JavaScript file as well to change the list colour based on field selection?
-
Apr 19th, 2009, 11:42 PM
#3
Re: CSS Issues
Hi Bruce,
Unfortunately, onfocus can't be used without javascript:
From devguru.com -
The onfocus attribute is an event that allows the execution of JavaScript code when an element comes into focus (for example, the mouse was clicked onto the element or a tab navigation brought the cursor to the element).
Like kfcSmitty said why can't you use Javascript?
when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
https://get.cryptobrowser.site/30/4111672
-
Apr 20th, 2009, 01:16 AM
#4
Re: CSS Issues
There are several uppercase tags, input tags are missing a closing tag, id/class/values, etc are not enclosed in quotes, etc. I would assume it is some combination of the bunch that is causing the input field to do funny stuff.
I have a file that is basically an empty document, ie <html><body><div></div></body></html>. At runtime the app reads through a recordset and generates the rest of the documment using the MSHTML Object Library. A sample of the VB code is
Code:
Dim objParent As MSHTML.IHTMLDOMNode
Dim objNode As MSHTML.IHTMLDOMNode
Set objNode = objParent.appendChild(mobjDocument.createElement("<li>"))
objNode.className = "Section"
objNode.innerText = DocumentTree.Fields("QuestionText").Value
The HTML code I posted was created by writing the .innerHTML property of the HTML node to a text file. So whatever that property contains is fine by me.
Regarding Javascript. Since this web page will not be served by IIS or any web-server IE will block any Script or ActiveX from running unless you "Allow blocked Content". I just want to avoid the hassle of that popup. Anyways, I think I can change the background of the LI tag using MSHTML.
My main concern right now is the margin of the Text Input element.
Using this cleaned up html, you will see that the TextBox is indented while the Radio button is not.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
li{border:thin solid lime;}
.Question{display:inline-block;width:28%;border:thin solid maroon;}
.Answer{display:inline-block;width:70%; border:thin solid orange;}
</style>
</head>
<body>
<div id="pgContent">
<ol id="Q_1">
<li id="Q_20">
<span class="Question">Surname<span class="Caption"></span></span>
<span class="Answer">
<input type="text" id="A_20">
</span>
</li>
<li id="Q_27">
<span class="Question">Gender<span class="Caption"></span></span>
<span class="Answer">
<span><input id="A_27_1" type="radio" value="Male" name="A_27"><label title="Male" for="A_27_1">Male</label></span>
<span><input id="A_27_2" type="radio" value="Female" name="A_27"><label title="Female" for="A_27_2">Female</label></span>
</span>
</li>
</ol>
</div>
</body>
</html>
-
Apr 20th, 2009, 01:58 AM
#5
Re: CSS Issues
 Originally Posted by brucevde
My main concern right now is the margin of the Text Input element.
Using this cleaned up html, you will see that the TextBox is indented while the Radio button is not.
Make sure you don't accidentally have some spaces before the text box! I put your code in to Dream Weaver and deleted some spaces before the text box and the radio button and text box aligned.
Edit:
Oops, that was in Fire Fox! 
Edit II:
Align the textbox and radio button:
HTML Code:
<style>
li{border:thin solid lime;}
.Question{display:inline-block;width:28%;border:thin solid maroon;}
.Answer{display: inherit;width:70%; border:thin solid orange;}
</style>
Last edited by Nightwalker83; Apr 20th, 2009 at 02:18 AM.
Reason: Adding more!
when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
https://get.cryptobrowser.site/30/4111672
-
Apr 20th, 2009, 02:28 AM
#6
Re: CSS Issues
Have you tried the li:hover CSS?
li:hover
{
background-color: #cccccc;
}
Last edited by Pradeep1210; Apr 20th, 2009 at 02:37 AM.
-
Apr 20th, 2009, 04:48 AM
#7
Re: CSS Issues
Originally Posted by Pradeep1210
Have you tried the li:hover CSS?
li:hover
{
background-color: #cccccc;
}
This site explains more about the hover method when used with lists, etc.
http://www.xs4all.nl/~peterned/csshover.html
Last edited by Nightwalker83; Apr 20th, 2009 at 04:53 AM.
when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
https://get.cryptobrowser.site/30/4111672
-
Apr 20th, 2009, 06:32 AM
#8
Re: CSS Issues
Highlighting the textbox on focus should be an easy task.
Code:
.TextBox:focus {
background-color: #ffffff;
}
But you are not looking for that as far as I understand. You need to highlight the label which is the parent of this textbox, when textbox gets focus. That won't be possible without some javascript or some dirty css hack.
w3c defines no selectors that can select the parent of any element, though many people are demanding it and it may get included in the future.
Have a look here for valid selectors:
http://www.w3.org/TR/CSS2/selector.html
Last edited by Pradeep1210; Apr 20th, 2009 at 06:36 AM.
-
Apr 20th, 2009, 10:04 AM
#9
Re: CSS Issues
Edit II: Align the textbox and radio button:
Using display:inherit does work for the sample code but I think it needs to stay as a block element.
What I am trying to do is divide the LI into left and right columns. In many cases the Answer span will contain numerous Input controls. If the number of controls takes up more than 1 line, the second line starts at the far left (using display:inherit . I also want the controls to line up properly.
I tried using floated divs for the Question and Answer halves but I couldn't get that to work.
here is an example of an Answer with numerous radio buttons.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
li{vertical-align:top;border:thin solid lime;}
.Question{display:inline-block;width:28%; vertical-align:top;border:thin solid maroon;}
.Answer{display:inline-block;width:70%; vertical-align:top;border:thin solid orange;}
.Answer span{width:32%;display:inline-block;overflow:hidden;text-align:left;}
</style>
</head>
<body>
<div id="pgContent">
<ol id="Q_1">
<li id="Q_20">
<span class="Question">Surname<span class="Caption"></span></span>
<span class="Answer"><input class="TextBox" type="text" id="A_20" value="Hello World"></span>
</li>
<li id="Q_27">
<span class="Question">Gender<span class="Caption"></span></span>
<span class="Answer">
<span><input id="A_27_1" type="radio" value="Male" name="A_27" ><label title="Male" for="A_27_1">Male</label></span>
<span><input id="A_27_2" type="radio" value="Female" name="A_27"><label title="Female" for="A_27_2">Female</label></span>
<span><input id="A_27_3" type="radio" value="Male" name="A_27" ><label title="Male" for="A_27_3">Male</label></span>
<span><input id="A_27_4" type="radio" value="Female" name="A_27"><label title="Female" for="A_27_4">Female</label></span>
<span><input id="A_27_5" type="radio" value="Male" name="A_27" ><label title="Male" for="A_27_5">Male</label></span>
<span><input id="A_27_6" type="radio" value="Female" name="A_27"><label title="Female" for="A_27_6">Female</label></span>
<span><input id="A_27_7" type="radio" value="Male" name="A_27" ><label title="Male" for="A_27_7">Male</label></span>
<span><input id="A_27_8" type="radio" value="Female" name="A_27"><label title="Female" for="A_27_8">Female</label></span>
<span><input id="A_27_9" type="radio" value="Male" name="A_27" ><label title="Male" for="A_27_9">Male</label></span>
<span><input id="A_27_10" type="radio" value="Female" name="A_27"><label title="Female" for="A_27_10">Female</label></span>
</span>
</li>
</ol>
</div>
</body>
</html>
-
Apr 20th, 2009, 08:14 PM
#10
Re: CSS Issues
Originally Posted by brucevde
Using display:inherit does work for the sample code but I think it needs to stay as a block element.
What I am trying to do is divide the LI into left and right columns. In many cases the Answer span will contain numerous Input controls. If the number of controls takes up more than 1 line, the second line starts at the far left (using display:inherit . I also want the controls to line up properly.
Try this display method:
http://www.vbforums.com/showthread.php?t=550218
when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
https://get.cryptobrowser.site/30/4111672
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote
icon on the left of the post. 
