CSS Issues

Printable View

Apr 19th, 2009, 04:01 PM
brucevde

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
kfcSmitty

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
Nightwalker83

Re: CSS Issues

Hi Bruce,

Unfortunately, onfocus can't be used without javascript:

From devguru.com -

Quote:

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?
Apr 20th, 2009, 01:16 AM
brucevde

Re: CSS Issues

Quote:

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
Nightwalker83

Re: CSS Issues

Quote:

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! :o

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>
Apr 20th, 2009, 02:28 AM
Pradeep1210

Re: CSS Issues

Have you tried the li:hover CSS?

li:hover
{
background-color: #cccccc;
}
Apr 20th, 2009, 04:48 AM
Nightwalker83

Re: CSS Issues

Quote:

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
Apr 20th, 2009, 06:32 AM
Pradeep1210

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
Apr 20th, 2009, 10:04 AM
brucevde

Re: CSS Issues

Quote:

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
Nightwalker83

Re: CSS Issues

Quote:

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