Re: [css-d] ID Selector Question
10.9.2011 6:38, Mary Villanueva wrote: What does it mean or do when one sets an ID selector to an HTML element such as the one below? Setting an attribute like id=blueDropdowns to an HTML element does not as such have any effect on rendering. In functionality, it means that the element can be a target of a link (that uses a URL ending with #blueDropdowns) and can be conveniently accessed in client-side JavaScript; these things do not affect styling but they are often part of the reason of using the attribute. It seems to be acting as a class in this case No, it’s not acting as a class, but an ID selector such as #blueDropdowns can be used in many situations where a class selector would be another option. The difference is that ID selector matches (at most) one element in a document whereas a class selector may match many elements (and often does). The reason is that an id attribute value must be unique within a document. I want to understand this syntax so that I can be assured that I'm not inadvertently building something that is going to fall apart in IE8 backwards. Id selectors as well as simple class selectors are as safe as you can get – the selector types that have been supported by CSS-enabled browsers from the beginning. This, however, applies only when id and class attributes are used correctly. If two or more elements in a document have the same id attribute value, all bets are off. Anything may happen. I also have the other dropdown menus set to classes as shown in the example below. I’m doing this because I need to be able to space the elements precisely. ul id=blueDropdowns class=”About” So do you have id=blueDropdowns on more than one element? Somehow I read between lines that this might be the case. Then you should use class attributes and class selectors. Note that you can assign two classes to an element, e.g. class=blueDropdowns About (which works well, ever since Netscape 4 stopped being an issue). (And do you use curly quotation marks in attribute specifications? The attribute class=”About” is correct as per HTML5 but means that the quotation marks are part of the attribute value!) And here’s the partial CSS for the dropdown menus. I hope it’s enough to help. People say that a URL says more than a thousand words, but that’s really an understatement. Here the main problem, if there is a problem, appears to be in HTML markup, not in CSS code. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ID Selector Question
On 10/09/2011 1:38 PM, Mary Villanueva wrote:
Greetings all,
Hello, Yucca has already answered the majority of you questions.
I want to understand this syntax so that I can
be assured that I'm not inadvertently building something that is going to
fall apart in IE8 backwards.
I presume you are referring to IE7 and backwards. IE8 and IE9 has made
great strides in many aspects of standards support. With IE7 you often
have to give it alternative style rules. This is usually achieved by
providing CSS that has a selector with greater specificity.
*:first-child+html #blueDropdowns { ... }
*:first-child+html .About { ... }
And here’s the partial CSS for the dropdown menus. I hope it’s enough to
help. Thanks in advance for your kind assistance! - Mary
#blueDropdowns /* About Us Navbar Menu */
{
margin:0;
padding:0;
height:1em; /* Opera hack - has a width of 100% by default */
}
This hack for Opera is just not needed. If this is the case, then the
styling is fundamentally flawed.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ID Selector Question
Greetings all,
I am doing a CSS dropdown menu which is working but I don’t understand this
piece of code. What does it mean or do when one sets an ID selector to an
HTML element such as the one below? It seems to be acting as a class in this
case but I’m not really sure. I want to understand this syntax so that I can
be assured that I'm not inadvertently building something that is going to
fall apart in IE8 backwards.
ul id=blueDropdowns
I also have the other dropdown menus set to classes as shown in the example
below. I’m doing this because I need to be able to space the elements
precisely.
ul id=blueDropdowns class=”About”
And here’s the partial CSS for the dropdown menus. I hope it’s enough to
help. Thanks in advance for your kind assistance! - Mary
/* _ DROPDOWN MENUS __ */
#topNav #blueMenu /* Container for blue nav dropdown menus - used to
position text away from the corners */
{
float:left;
margin:0 0 0 32px;
padding:0;
/*border:1px solid green;*/
}
#blueDropdowns /* About Us Navbar Menu */
{
margin:0;
padding:0;
height:1em; /* Opera hack - has a width of 100% by default */
}
#blueDropdowns.news /* News Menu */
{
position:relative;
top:-30px;
left:110px;
margin:0;
padding:0;
height:1em; /* Opera hack - has a width of 100% by default */
}
#blueDropdowns.events /* Events Menu */
{
position:relative;
top:-60px;
left:200px;
margin:0;
padding:0;
height:1em; /* Opera hack - has a width of 100% by default */
}
#blueDropdowns.volunteers /* Volunteers */
{
position:relative;
top:-90px;
left:300px;
margin:0;
padding:0;
height:1em; /* Opera hack - has a width of 100% by default */
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
