Chapter 5 example5-2 and 5-3.html

ericfields6483 · September 30th, 2005, 11:41 AM

When I run example 5-2 the items in the drop down select menu "How'd you hear about us?" do not display until I scroll the mouse over them.
They appear just fine when running example 5-3, the minute I hit the down button all of the items display without scrolling the mouse over them.
I know the change occurs because of the addition of the darkgray background added on the style sheet at

label + input, label + select, label + textarea {
background: darkgray;
}

but why is that? I don't see how changing the background color causes them to suddenly appear.

richard.york · September 30th, 2005, 01:12 PM

There is no text because you set the text color to be white, and of course, white text on a white background isn't going to be visible.

That was done early on with this rule:

Code:

            * {
                font-family: sans-serif;
                color: white;
            }

That rule selects all elements, including the form controls and specifies a white, sans-serif font.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

ericfields6483 · September 30th, 2005, 02:08 PM

Quote:

quote:Originally posted by richard.york
There is no text because you set the text color to be white, and of course, white text on a white background isn't going to be visible.

That was done early on with this rule:

Code:

            * {
                font-family: sans-serif;
                color: white;
            }

That rule selects all elements, including the form controls and specifies a white, sans-serif font.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

Thanks Rich, I'm new at web design. I see that I need to keep the big picture in mind while viewing the details.

richard.york · September 30th, 2005, 02:18 PM

No problem, we were all new at one time ;).

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

GrantSlade · May 23rd, 2006, 01:07 PM

I am currently running these examples - I've noticed that in the examples, that IE is rendering it without the float left working

Code:

            <div>
                <label for='feedback[name]'>Name:</label>
                <input type='text' size='25' name='feedback[name]' />
            </div>
            <div>
                <label for='feedback[email]'>Email:</label>
                <input type='text' size='25' name='feedback[email]' />
            </div>

So in the above, in IE (v.6.0.2800.1106. etc., etc.) these input text fields still appear under the label. Also, in IE, these fields appear yellow, not darkgrey even when they get set. Same thing in Firefox (v. 1.5.03). Just wondering why they are yellow, or if you think that I might have entered something wrong. In Opera, it all displays correctly.

richard.york · May 23rd, 2006, 01:26 PM

IE does not support the selectors used in those examples (this is stated in the compatibility notes for each selector). Firefox, OTOH, does support these selectors. There is at least one exercise at the end of the Chapter 5 in which the reader is instructed to re-write the example so that it works in IE.

I don't know what you mean by the fields appearing yellow and not darkgrey, please provide the full source you're using so I can see what you are referring to.

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html