CSS - How To?:id Selector For A Class (css Rule)
I want to know if ID Selectior for a class is avaible in css.
I got many textboxes cssclass'es applied to .TEXTBOX_BLACK but I wantto add extra attribute to only Textbox10 something like overflow :auto; thanks much before any answers. regards. my attempt is below but ofsure not working: .TEXTBOX_BLACK { border-style : solid; border-width: 1px; border-color:Black; font-family: Tahoma; height:14px; width:140px; background-color: #414141; } .TEXTBOX_BLACK #TextBox10 { overflow :auto; } Similar TutorialsWhy does my third style rule have no effect? I thought the "A > B" was read as applying the rule to B if it was a child of A? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled</title> <style> div.large_title { font-family: Trebuchet MS; font-size: 18pt; line-height: 20pt; color: #003366; } div.quickpick { border: 1px solid #003366; border-collapse: collapse; width: 250px; text-align: center; } div.quickpick > div.large_title { font-weight: bold; } </style> </head> <body> <div class="quickpick"> <div class="large_title">Test</div> </div> </body> </html> Also, how can I add top and bottom margin to a text string? Do I use Margin or Line Height? Hi everyone, Been racking my brains trying to figure out why a class is not being applied to a div, then i narrowed it down and realised that the ID selector is always taking precedence to the class attribute. Consdier this html page: Quote: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <style type="text/css"> #container { background-color: red; width: 100px; height: 50px; } .change_bg { background-color: green; } </style> </head> <body> <div id="container" class="change_bg" ></div> </body> </html> The div's background color comes out red and not green, as one would expect. Why is this happening? aren't styles supposed to be cascading? isn't that what CSS is all about? I can use !important but i want to know why it's not doing what is expected. Many thanks Greets, I hope someone can help me achieve this in IE6. it should be simple (famous last words?) ... but am stumped right now: What I am trying to achieve: I'm trying to get a class displayed for a link in an unordered list (Ie: Have the "home" section highlighted when I'm on the index page and so forth) Html/cfm code: Code: ... <div id="LeftMenu"> <ul> <li><a href="./index.cfm" title="Home">Home</a></li> <cfif (GetAuthUser() neq "")> <li><a href="./index.cfm?action=edit_profile" title="Edit Profile" <cfif request.action eq "edit_profile"> class="l_menu_selected"</cfif>>Edit profile</a></li> <li> </li> <li><a href="./index.cfm?logout=1" title="Logout" style="font-size: 8pt; color: red; ">Logout</a></li> <li> </li> <cfelse> <li><a href="./index.cfm?action=create_profile" title="Create Profile" <cfif request.action eq "create_profile"> class="l_menu_selected"</cfif>>Create profile</a></li> </cfif> </ul> </div> ... The css bit that goes with it: Code: #LeftMenu { width: 200px; } #LeftMenu ul { margin: 0px; padding: 0px; } #LeftMenu ul li { margin-top: 2px; margin-left: -14px; /*WHY ON EARTH does ie set me up with some kind of funky margin on the left I didn't ask for???*/ } #LeftMenu ul li a:link, #LeftMenu ul li a:visited,#LeftMenu ul li a:active { display: block; background-color:#99cdff; height: 28px; width: 170px; vertical-align:middle; line-height:30px; margin:0px; padding-left: 30px; font-weight:bold; font-size: 8pt; background-image: url(../images/arrow.gif); background-repeat: no-repeat; background-position: left center; } #LeftMenu ul li a:hover, #LeftMenu ul li a.l_menu_selected, .l_menu_selected { background-color:#6fb2f8; } I gather my last selector is where it's FUBAR. When parsing the page, I can clearly see the class tag is displayed... but the desired colour doesn't show up. Code: <li><a href="./index.cfm?action=create_profile" title="Create Profile" class="l_menu_selected">Create profile</a></li> Our client uses IE6 exclusively, so... no matter how nice it looks in FF (too many good developing tools to pass it up)... i need this displayed properly in IE6. As a bonus: if someone can tell me why the <li>'s are shown by default with a left padding of 20px in IE (hence, me having to resort to "margin-left: -14px;") I'm a bit confused about the class and id selector. It seems they both produce the same result. I've a book and it said that the id selector can be used once. Is that mean used once on the web page or on the css? <div class="content"></div> <div id="content"></div> Thanks. I'm a CSS newbie and have a basic question. It seems that the selectors class and id do ecaxtly the same thing. So this begs the question: Which one should I use and why is it better then the other selector? I see that both should not begin with a number (css1) and I am unclear about the requirement for the selector to be unique. Thanks Folks! Hello, This is my first post at devshed and I must say I am more than excited to have found this community... I am having a css problem and I was hoping that someone might be able to help me? I am trying to add "styles" to my wysiwyg text editor... My editor plugin points to a css file to define the different "styles" for text. Currently it is working fine with the following code... all of the styles listed below in the css display correctly: Code: /* Typography Styles */ ul.bullet-1, ul.bullet-2, ul.bullet-3, ul.bullet-4, ul.bullet-5, ul.bullet-6, ul.bullet-7, ul.bullet-8 { padding-left: 15px; overflow: hidden; margin-left: 5px; } ul.bullet-1 li, ul.bullet-2 li, ul.bullet-3 li, ul.bullet-4 li, ul.bullet-5 li { list-style: none; padding-bottom: 3px; margin-bottom: 5px; padding-left: 10px; } ul.bullet-6 li, ul.bullet-7 li, ul.bullet-8 li { list-style: none; padding-bottom: 3px; margin-bottom: 5px; padding-left: 22px; } ul.bullet-1 li {background: url(../images/typo/bullet-1.png) 0 5px no-repeat;} ul.bullet-2 li {background: url(../images/typo/bullet-2.png) 0 5px no-repeat;} ul.bullet-3 li {background: url(../images/typo/bullet-3.png) 0 5px no-repeat;} ul.bullet-4 li {background: url(../images/typo/bullet-4.png) 0 5px no-repeat;} ul.bullet-5 li {background: url(../images/typo/bullet-5.png) 0 5px no-repeat;} ul.bullet-6 li {background: url(../images/typo/bullet-6.png) 0 2px no-repeat;} ul.bullet-7 li {background: url(../images/typo/bullet-7.png) 0 2px no-repeat;} ul.bullet-8 li {background: url(../images/typo/bullet-8.png) 0 3px no-repeat;} pre { padding: 10px; background: #f6f6f6; border-top: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } blockquote { display: block; font-style: italic; font-size: 120%; line-height: 150%; width: auto; padding: 10px 20px 10px 20px; margin: 15px 0; background: #f6f6f6; border-top: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } blockquote.blue, blockquote.red, blockquote.green, blockquote.purple, blockquote.orange, blockquote.brown, blockquote.grey { display: block; font-style: italic; font-size: 120%; line-height: 150%; width: auto; padding: 0px 20px; margin: 15px 0; border: 0; background: 0; } blockquote.blue{color: #0D507A;} blockquote.red{color: #D12E2E;} blockquote.green{color: #74A824;} blockquote.purple{color: #9E0E87;} blockquote.orange{color: #CC8300;} blockquote.brown{color: #8B6846;} blockquote.grey {color: #666;} blockquote.quotes { display: block; background: url(../images/typo/quote-start.png) 0 5px no-repeat; padding: 0px 20px 0 38px; margin: 20px 0; font-size: 120%; line-height: 150%; width: auto; color: #666; border: 0; } blockquote.quotes p { padding: 0 38px 0 0; margin-top: 0; background: url(../images/typo/quote-end.png) 100% 100% no-repeat; } .important, .important-blue, .important-red, .important-green, .important-purple, .important-orange, .important-brown, .important-grey { padding: 15px; margin: 15px 0; } span.important-title, span.important-title-blue, span.important-title-red, span.important-title-green, span.important-title-purple, span.important-title-orange, span.important-title-brown, span.important-title-grey { position: absolute; display: block; margin-top: -24px; background: #fff; padding: 0 8px; font-weight: bold; font-size: 120%; } .important {border: 1px solid #333;} .important-blue {border: 1px solid #0D507A;} .important-red {border: 1px solid #D12E2E;} .important-green {border: 1px solid #74A824;} .important-purple {border: 1px solid #9E0E87;} .important-orange {border: 1px solid #CC8300;} .important-brown {border: 1px solid #8B6846;} .important-grey {border: 1px solid #666;} span.important-title {color: #333;} span.important-title-blue {color: #0D507A;} span.important-title-red {color: #D12E2E;} span.important-title-green {color: #74A824;} span.important-title-purple {color: #9E0E87;} span.important-title-orange {color: #CC8300;} span.important-title-brown {color: #8B6846;} span.important-title-grey {color: #666;} span.number, span.number-blue, span.number-red, span.number-green, span.number-purple, span.number-orange, span.number-brown, span.number-grey { display: block; font-size: 170%; float: left; margin: 2px 10px 0 15px; } span.general_heading{ background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg10.png) #3A3A3A repeat-x 0px 0px; display: block; height: 26px; line-height: 26px; text-indent: 8px; font-size: 12px; font-weight: bold; color: #cccccc; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; margin: 0px 3px 3px 3px; text-transform: uppercase; } span.number {color: #333;} span.number-blue {color: #0D507A;} span.number-red {color: #D12E2E;} span.number-green {color: #74A824;} span.number-purple {color: #9E0E87;} span.number-orange {color: #CC8300;} span.number-brown {color: #8B6846;} span.number-grey {color: #666;} span.highlight {background: #FFFBD5;padding: 1px 2px;} span.highlight-blue {color: #0D507A;} span.highlight-red {color: #D12E2E;} span.highlight-green {color: #74A824;} span.highlight-purple {color: #9E0E87;} span.highlight-orange {color: #CC8300;} span.highlight-brown {color: #8B6846;} span.highlight-grey {color: #666;} span.highlight-bold {font-weight: bold;font-size: 120%;} span.dropcap, span.dropcap-blue, span.dropcap-red, span.dropcap-green, span.dropcap-purple, span.dropcap-orange, span.dropcap-brown, span.dropcap-grey { display: block; font-size: 260%; float: left; margin: 0px 4px 0 0; line-height: 100%; } span.dropcap {color: #333;} span.dropcap-blue {color: #0D507A;} span.dropcap-red {color: #D12E2E;} span.dropcap-green {color: #74A824;} span.dropcap-purple {color: #9E0E87;} span.dropcap-orange {color: #CC8300;} span.dropcap-brown {color: #8B6846;} span.dropcap-grey {color: #666;} span.inset-left { display: block; color: #000; padding: 15px; float: left; width: 20%; font-size: 110%; font-weight: bold; font-style: italic; } span.inset-right { display: block; color: #000; padding: 15px; float: right; width: 20%; font-size: 110%; font-weight: bold; font-style: italic; } span.attention, span.notice, span.alert, span.download, span.approved, span.media, span.note, span.cart, span.camera, span.doc {display: block;padding: 8px 10px 8px 36px;margin: 15px 0;} span.attention {overflow: hidden;color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url(../images/typo/attention.png) 10px 50% no-repeat;} span.notice {color: #648434;border: 1px solid #9BCC54;background: #CDEFA6 url(../images/typo/notice.png) 10px 50% no-repeat;} span.alert {color: #CF3738;border: 1px solid #FFACAD;background: #FFD5D5 url(../images/typo/alert.png) 10px 50% no-repeat;} span.download {color: #1C6B8B;border: 1px solid #6ABCE2;background: #A8CDE3 url(../images/typo/download.png) 10px 50% no-repeat;} span.approved {color: #666;border: 1px solid #a8a8a8;background: #ccc url(../images/typo/approved.png) 10px 50% no-repeat;} span.media {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url(../images/typo/media.png) 10px 50% no-repeat;} span.note {color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url(../images/typo/note.png) 10px 50% no-repeat;} span.cart {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url(../images/typo/cart.png) 10px 50% no-repeat;} span.camera {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url(../images/typo/camera.png) 10px 50% no-repeat;} span.doc {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url(../images/typo/doc.png) 10px 50% no-repeat;} HOWEVER.... WHEN I ADD THE FOLLOWING "STYLES" / CODE TO THE CSS ABOVE... MY EDITOR ONLY RECOGNIZES A FEW OF THE ITEMS?!?! I WAS TOLD I NEEDED TO DO SOMETHING WITH THE CLASS SELECTOR NAMES? Code: .general_heading{ background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg10.png) #3A3A3A repeat-x 0px 0px; display: block; height: 26px; line-height: 26px; text-indent: 8px; font-size: 12px; font-weight: bold; color: #cccccc; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; margin: 0px 3px 3px 3px; text-transform: uppercase; } .heading { background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg9.png) #890605 repeat-x 0px 0px; display: block; height: 28px; line-height: 28px; text-indent: 8px; font-size: 12px; font-weight: bold; color: #cccccc; font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; margin: 0px 3px 3px 3px; text-transform: uppercase; } /*side bar*/ /* The box sorrounding the side bar*/ div.box_sidebar{ background-color: #F7F7F7; border: 1px solid #C0D5EC; color: #333333; float: right; margin: 40px 10px 10px 10px; padding: 10px 10px 10px 10px; top: 40px; } div.sidebar { float: left; width: 29%; } img.user_image_class{ margin: 5px 5px 5px 5px; } /* article title*/ .article_title, a.article_title{ } .background-image img{ margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px; } /*author mini profile*/ .box_author{ background-color: #F7F7F7; border: 1px solid #C0D5EC; color: #333333; margin: 30px 20px 20px 10px; padding: 5px 5px 5px 5px; } /* descriptions*/ .description{ background-color: #ffffff; color: #333333; font-size: 12px; margin: 3px 3px 3px 3px; } .description div p{ background-color: #ffffff; color: #333333; font-size: 12px; margin: 3px 3px 3px 3px; } /*intro*/ .intro_horizontal { background-color: #ffffff; color: #333333; display: block; font-size: 12px; margin: 5px 5px 5px 5px; } .quotes { padding: 0 10px 0 10px; width: 230px; } .quotes div { background-color: #ffffff; color: #333333; font-size: 14px; font-weight: bold; } .quotes img { padding: 0px 10px 0px 10px; } /* Alignment of the text of the sidebar area*/ .sidebar_area { text-align: left; } /* Alignment of the image in the sidebar area*/ .sidebar_area img{ float: right; } .sidebar_article_title { background-color: #ffffff; color: #666666; font-size: 12px; font-weight: bold; text-decoration: none; } hr { background-color: #ffffff; color: #ebebeb; height: 0px; border-style: dotted; } TIA RYAN Forgive the subject, I'm not sure how to describe this oddity. This seems to only happen in IE, test with this snippet: Code: <style> a:hover span { color: Green } </style> <a href="#"><span>link</span></a> One would expect the text to turn green when hovering, but it doesn't. Works fine in other browsers as it should, but not in IE. However, if you add any valid style, regardless of function, to the bare :hover pseudo-class of the anchor, it works fine. For example, this doesn't change the theoredical function at all: Code: <style> a:hover { visibility: inherit } a:hover span { color: Green } </style> <a href="#"><span>link</span></a> But now it works fine in IE. It doesn't recognize the psuedo-class as a parent unless there's an explict valid style for the item itself. Order doesn't appear important. I guess I'm posting in part as a PSA and just to have this odd behavior confirmed by third parties. I've done a lot of reading on IE bugs and don't recall seeing this come up. It probably stems from the lack of :hover support for non-anchor tags. Confirm/deny/comment? Don't know if I got the language right on the headline? I've got the following css for my forms: .form table { border-collapse: collapse; color: black; border: 1px solid black;} and the markup looks like this <table class="form" width="100%" cellspacing="0"> however when I link a different page to the same sheet I'm getting a table that has been styled with the above scc even though i haven't marked up the class... any ideas... good http://www.rickweston.com/my_ucwdc/membership/register.php bad http://www.rickweston.com/judge/about_judge/index.php thnks for any help My page layout consists of a content section and a sidebar section. I'm attempting to match the style of the sidebar links to those within the content. Odd thing is, although the style of the links appears correctly within the content DIV, any links within the sidebar refuse to style correctly when declared with the content declaration. So, this works: Code: #content a, #copyright a, #footer a, .twitter a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;} #sidebar a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;} Whilst this does not: Code: #content a, #sidebar a, #copyright a, #footer a, .twitter a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;} I'm at my wits end as to why the second (preferred) declaration will not style any sidebar links. Any ideas? Ok what i want to happen is that when person clicks on a link i want a div to appear/be visible underneath that link. But i want that div to not take any space unless i click on a link. I recently did something similar BUT the div was taking the space but was just hidden. Hi, I am putting together a design for a client and have a complex navigation menu made in CSS (the CSS menu was paid for from a third party). Now I have found out that it is not IE6 compliant because the maker of the menu falls into the 'nobody should use IE6 because it is too old and painful to code for, therefore I won't cater to it' camp. Apparently he doesn't mind cutting out 18% to 32% of visitors. So I am hoping someone here will recognise the behaviour and be able to suggest the fix. I feel sure it would be doable with one of those exception rules in the CSS, for IE6. Here is the site (work in progress still): http://southcarolinanightlife.com/ The CSS for the menu is he http://southcarolinanightlife.com/templates/tmpl_uni/css/menu/menu15.css Note how, with IE6, when you hover over navigation drop down menus, the submenus all appear at the extreme left, rather than beneath the menu item you are hovering over. In other browsers it seems to be just fine. Many thanks if anyone can assist. Kevin ive found that in previous attempts this would work: Code: <hr width='90%' color='#990000' /> but when i changed to storing the colors and things in a css file, i found that i had to do this: Code: hr { width:90%; border:1px solid #990000; } <hr /> now is there a way where either i can set the horizontal rule to use an image as the color (just a 2px high image) or is there a way where i can get an image to act as a horizontal rule? PS, if the latter is the choice then is there a way to get it so that i dont have to keep specifying the image source? I am trying to create a separator bar that will act like a HTML <HR> If firefox it works like I want, but in IE it does not. In IE it only displays the width of the image file spacer.gif CSS: Code: .bar { display: block; position: absolute; left: 50px; right: 60px; top: 280px; height: 15px; background-image: url(bar.gif); } HTML: Code: <div class="bar"><img src="spacer.gif"></div> I have all pages that follow a CSS Rule. These are Dev Boxes that I created for my site. One of the text on one of the pages is 1700 pixels height the others are only 700. When I created a rule for all pages but when I added the text on the one with 1700 pixels it stretched out all the boxes on all other pages as well. I want to break that one from the others so that it does not format all my pages like that one. How do I do it. I do I keep the CSS code style but on that one in particular change the rule to only allow that one to be 1700 pixels long. Basically I don't want to have to recode the CSS page but I want that particular code to be just for that one page and keep the others with the 700 pixels height. Please give me a simple explanation on how to break the rule on that page so that I can manually adjust it for that one page. thanks I'm customizing an IP Board (version 3.2.1). I've set up a test board and when I've got it how I want it I'm going to export it as a skin which I'll install on a live board. In the current version of IP Board, the post title is above the main title bar in post view, whereas in the previous version, the post title was in the main title bar, which is where I want it. One of the IPB boffins gave me a code mod which enabled me to place the post title in the main title bar. The problem is the standard code that governs the post title also governs the forum title (pictured below) in forum view. I need to get rid of this title (circled) in order to reduce some of the space between the header and the main title bar. But if I comment out this title, I also comment out the post title. According to the guy who was helping me, the only way around this is to create a new class, which is beyond his expertise -- and way beyond mine. How do I do this, or is there an alternative and hopefully simpler solution? Many thanks! This is the code in question. Code: .ipsType_pagetitle, .ipsType_subtitle { font: 300 16px/1.3 Helvetica, Arial, sans-serif; color: #141719;} The circled title is what I want to remove. http://www.thechristianidentityforum.net/smf/pix/screenshot.jpg The code also affects the post title in post view, which is why I need a new rule set/class, so I can delete the forum title in forum view but not the post title. http://www.thechristianidentityforum.net/smf/pix/screenshot2.png EDIT: For some reason the images won't display in the post. They display in preview but not when posted. Just click on the urls to see the pix. I apologize if I've broken a forum rule or two in doing this. So, what would I like to have? A css rule that would affect visual appearance of only the <input type="submit"> elements (or any other sub-type of <input>, but again, affecting that sub-type only). Is it possible to do? How? I have a lot of .NET pages with a LOT of submit buttons (within datagrids and regular buttons too). There is a way to do it programaticaly in source code of .NET pages, but I'd like an elegant solution like css, which could be done without recompiling entire project. Any help is highly appreciated. Is there a CSS selector that only IE5 will detect? I have my site working fine in IE6 and Firefox now and it displays legibly in IE5 but the padding is a bit off. Is there a selector I can use (such as * for IE in general) to make a change to the padding on IE5. Or should I be looking into loading separate CSS files dependent on the users browser? I have three INPUT elements in a row and I want to apply different formatting to the second two. I know I can use: input+input { } This affects all but the first of the INPUT elements, which is exactly what I want. However, this works only with NS/Mozilla, and not MSIE. There is a way to apply CSS based on words within the value of the element, but I'm not sure how it works. For instance in the code: <INPUT type="submit" name="Submit" value="Browse"> I think there's a way to say "apply this style if the word 'BROWSE' is present in the element", but I can't make it work. Also, I know I can apply a CLASS to the element, but I'd like to not touch the HTML and use strictly CSS if possible. Can anybody help with this? Thanks. Hi, I check my css file on 3wc. you will find the error messages/warnings and my css code in this link http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Falicelee.no-ip.com&usermedium=all I did some research on ID selector. I still don;t understand understand why 3wc css validator cannot recognize ID selector... how should i correct the errors and warning? i have already done the html validation... it is error-free and valid in html 4.0 thanks Can someone help me with this issue? I've looked through the selector section of the CSS2.1 spec, but I can't find anything about it. Consider the following CSS excerpt (real life example): Code: #attachments table td, #attachments table th { padding: 0 1em; } Lots of extraneous text in there, right? Isn't it possible to do something like this instead: Code: #attachments table (td, th) { padding: 0 1em; } Or at least something similar? Can anyone help poor little me with this? |