CSS - Newbie Here... Setting Background For A Class Still Shows Up Without The Selector!
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 Similar TutorialsI'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! 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 Greetings, friends! I have a quick question about CSS. I am fairly versed in CSS 2.0 and the selectors that are used within. However, I am not sure if any specific type of selector is available to help me do what I want. I am looking for a selector that will define styles for an element that contains specific children. To give you an example, let's say that I have an image on my page. That image is assigned the class of "alignleft". Now, let's say that I make that image into a link. I would like to find a CSS selector that allows me to assign style definitions to that link. Let's say my code looks like: Code: <a href="http://www.example.com/"><img src="example-pic.png" class="alignleft" alt="Example Picture" /></a> Now, I know if it was the other way around: Code: <a class="alignleft" href="http://www.example.com/"><img src="example-pic.png" alt="Example Picture" /></a> I could use something like: Code: .alignleft > img However, I am not sure if there is any way to go up a level in CSS. I would envision it looking something like: Code: a < img.alignleft but I can't find anything in the CSS spec that refers to instances like that. Does anyone know of anything? For instance, I would want a spec that looks something like: Quote: E < F - Matches any E element that is the parent of an element F. The specific reason I'm looking for something like this is that I am using the class of "external" to assign a background image to all of my links that lead away from our Web site. However, if that link is an image rather than text, I want to set the background of my link to "none" so that the background image does not interfere with the image itself. Any help would be greatly appreciated. Thank you. 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; } 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. 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? Hi, these forums have being a godsend to me so far, providing really useful information on my road to becoming a webdesigner, I wondered if someone could help me with a CSS problem I am having. I want to have a green background behind some text, however, I want the background to just be behind the text not to extend all the way across the screen. I think that the best way to do this is to have a division that I set the length of using CSS and include the text in there, my code so far is as follows: <style type="text/css"> body {background-color:} h1 {background-color: #00ff00} p {background-color:} h2 {background-color: transparent} div.block {style=width:300px} </style> <div style="width: 300px"} <p><h1>THIS TEST</h1></p> </div> <div class="block"> <p><h1>THIS TEST</h1></p> </div> For some reason the div is not tallying with the div.block in the style sheet, if I specify the width of the division in the actual html tag within the body its working fine, can anyone spot what I might be doing wrong. I will give some time back at this forum helping others when I am finished on my current project in exhange for the time people have given up for me. Thanks Hello, I was wondering if anyone could help me get this background image to show up in firefox. It shows up in IE. It's the first #header image. I included the other code in case something is conflicting. *edit... nvm. Hello, after a few hours I managed to identify the CSS element responsible for this problem. However so far I have no solution on how I could solve this problem. Basically the problem is very minor but still frustrating. I am using the following command to set a DIV element with transparent background; Code: filter: progid:DXImageTransform.Microsoft.gradient (gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000'); The DIV element becomes transparent. However the parent element - which is set with the CSS attribute overflow:hidden - is always displaying an extra pixel on the right of the container. This might not be clear at first, which is why I attached the following screen shot. (the light red line is the extra 1px I am referring to) If I remove the transparency CSS attribute for IE8 then this extra 1px will disappear. However that means loosing the wanted transparency. I have also developed the following example of the problem; 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> <style> body { margin: 0px; padding: 0px; /* * IE hack to center .content div (part1). */ *text-align: center; } div.content { width:600px; margin: 0px auto; /* * IE hack to center .content div (part2). */ *text-align: left; } div#a { border-bottom: 1px solid grey; border-top: 1px solid grey; padding-bottom: 5px; padding-top: 5px; } div#a div#b { overflow: hidden; height: 280px; position:relative; } div#a div#b div#c { position: absolute; } div#a div#b div#c img { border: none; display: block; } div#a div#b div#e { background-color: red; color: #fff; position:absolute; padding: 20px 10px; width:260px; height: 240px; margin-left: 500px; /* IE8 hack for background colour with alpha value */ filter: progid:DXImageTransform.Microsoft.gradient (gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000'); } </style> </head> <body> <h1>Test 5</h1> <div id="a" class="content"> <div id="b"> <div id="c"> <img src="pic.png" /> </div> <div id="e"> hello </div> </div> </div> </body> </html> Does anyone know what's causing the problem and how I can solve it. It is true that 1px might not sound much. But it still frustrates me knowing that it is there and the fact that on Firefox all works great. I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. Hello Friends, I want to place an image bellow my (h1 heading). The image is a 50px-800px box with curved edges both the side. Basically we place an image bellow any text with "background: url('image-location') repeat-x;" css code. But as i told the image have curved edges at both sides. Hence, I have cut the image in 3 pieces namely h1.gif, h2.gif & h3.gif respectively. Now i am confused how can i place it. Please help me! This is the tag i am using <div id="title"> <h1>This is the title</h1> </div> And This is the CSS code bellow, #title { height: 50px; background: url('../img/h1.jpg') no-repeat; background-attachment: fixed; } I'm just learning CSS, trying to create a simple 3 column layout using floats. I have a background image and would like each column to have a background transparency. I'm able to sort of do this using something like the following: //background: white; //opacity:0.2;filter:alpha(opacity=20); the problem I have is that it changes the transparency of the content I put into the float, not just the background. I tried creating a span and specifying the opacity of that but it only works relative to the transparency of the float. It still doesn't create non-transparency within the float. I am using <input type=image> in my code and setting a background image for this element using css. I am not defining"src" so I get blank image symbol. How do I remove that? How can I set a background image as a wrapping element? Here is what I do have: graphics/navigation.gif left top no repeat Note that links will be set over the image. I am trying to set background of my divs with: background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat; It works fine with IE but at Firefox there is only a white background. You can check this out at: http://www.pearl.ru/isdunyasi hello. i'm building a javascript application which will allow the user to select a file from his/her hard drive (using <input type='file' />) and display the image in the background. when the user hits submit, the image will be uploaded and in the future, the user will have the image hosted from the server. the reason i post this in the CSS forum is because the error is coming from CSS, not javascript. i need to know how to point the css to an image on the user's local machine. Usually I find anything I need to know if I have the source code of a web site but this time I've lost. Some web sites changes the background color of the browsers address (URL) input field (works only with Gecko type browers I think). Just one example: https://www.gmx.net (a commercial email service provider in Germany). How can this be done? Ciao, Meph okay, so for my site i want all the backgrounds in a frame to have the same background image, so i made them all part of the class called sub, and in my .css file i have this line of code: body.sub {background-image: url(/images/body.jpg)} it doesnt work. now if i go into each page individually and put: <style type="text/css"> body {background-image: url(/images/body.jpg)} </style> then it works. why? oh yeha, i can change the background color from my .css file, but not the image, so: body.sub {background-color: #FFFFCC} does works. thanks for the help! |