|
CSS - Child Selector Rule Problem
Why 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? Similar TutorialsI 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; } 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 Hello friends How can i define a css rule with an ID selector for two or more different ID's for an <div> element thanks Hi I've got a bit of a problem. I am making a website and what I want to do is create links with block background showing an image, which changes to just pink on a mouse over. what I did was make a div, give it classname menu_items and in that div put different hyperlinks. my code: Code: /* Menu picture caption */
.menu_items a { display: block; color: #FFF; background-color: #FF0066; text-decoration: none; padding: 5px; position: absolute; }
#menu_0910_dg000 { background-image: url('img/0910_dg000.jpg'); height: 90px; width: 140px; top: 100px; left: 0px; font-size: 12pt; }
#menu_0910_dg000:hover { background-image: none; color: #FFF; }
#menu_0910_dg601 { background-image: url('img/0910_dg601.jpg'); height: 90px; width: 140px; top: 100px; left: 150px; font-size: 12pt; }
#menu_0910_dg601:hover { background-image: none; color: #FFF; }
#menu_0910_dg200 { background-image: url('img/0910_dg200.jpg'); height: 90px; width: 140px; top: 100px; left: 300px; font-size: 12pt; }
#menu_0910_dg200:hover { background-image: none; color: #FFF; }
#menu_0910_elderly { background-image: url('img/0910_elderly.jpg'); height: 90px; width: 440px; top: 0px; left: 0px; font-size: 18pt; }
#menu_0910_elderly:hover { background-image: none; color: #FFF; }
#menu_0910_demos { background-image: url('img/0910_demos.jpg'); height: 90px; width: 890px; top: 200px; left: 0px; font-size: 20pt; }
#menu_0910_demos:hover { background-image: none; color: #FFF; }
Code: <div class="menu_items"> <a id="menu_0910_dg000" href="0910_elderly.html">Assignment: DG000 Introducing Competency-Centred Learning </a> <a id="menu_0910_dg601" href="0910_elderly.html">Assignment: DG601 Digital Video</a> <a id="menu_0910_dg200" href="0910_elderly.html">Assignment: DG200 Creative Programming for Designers</a> <a id="menu_0910_elderly" href="0910_elderly.html">Project: Elderly Interacting with the Digi-world</a> <a id="menu_0910_demos" href="0910_elderly.html">External: Demos Bar Committee</a> </div> You can see that I first used the nested selector .menu_items a, but this doesn't work with hover, so .menu_items a:hover doesn't work. Why not and how to fix?:S gr Bram Hi, I'm currently designing a Wordpress skin for someone and trying to style the navigation using CSS. Given that Wordpress is so popular, I expect that someone has encountered this before - but I can't find anything about this particular problem. Basically, I'm having problems achieving the correct precedence in the CSS cascade for certain elements of my page (navigation) design. In one part of the CSS I've had to use !important to get it to behave appropriately, but then I have another part which I need to be able to denote as "very important" but I don't think this is possible. I get the feeling that I can probably do this without !important since I'm aware that it is abusing its purpose a bit (i.e. accessibility?) and instead I could do it according to the selector's specificity if I understood it better: http://www.w3.org/TR/REC-CSS2/casca...cascading-order Here's a HTML snippet of what I have in the navigation: html4strict Code: Original - html4strict Code <div id="sidebar"> <ul> <li class="page_item current_page_item"> <a title="Home" href="home.php">Home</a> <ul> <li class="page_item"> <a title="Directors" href="home.php?page_id=12">Directors</a> </li> </ul> </li> <li class="page_item"><a title="News" href="home.php?page_id=3">News</a> </li> </ul> </div>
I'm then using the following CSS to attempt to style this part: css Code: Original - css Code #sidebar { float: left; width: 149px; padding: 1em 0; } #sidebar ul { list-style: none; } #sidebar ul li { margin: 0.4em 0.8em; padding: 1px; } #sidebar ul li a { font-size: 1.5em; font-weight: 500; padding: 0.3em; text-decoration: none; color: #000; background: #FFFACD; display: block; border: 1px solid blue; } #sidebar ul li a:hover { color: #bb2a2a; } #sidebar ul li ul li { display: none; } #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */ display: inline; padding: 0; margin: 0; border: none; } #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent { border: 1px solid green; } #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */ font-size: 1.2em; padding: 0.1em 0 0.2em 17px; background: #FFFACD url(images/sub-dot.gif) no-repeat left; } #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item { color: #bb2a2a !important; border: none !important; } .current_page_item ul li a { color: #000 !important; border: none !important; } #sidebar ul li.current_page_parent ul li a, .current_page_parent a { border: none !important; } #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover { color: #bb2a2a; border: none !important; }
Using "View Formatted Source" in FF I'm finding that the color defined in ".current_page_item ul li a" is over-ruled by "#sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item". As you can perhaps tell, the current_page_item class is set on the list item that matches the current page, and if the current page is within a sub-section (i.e. it has a parent), current_page_parent will be set to the parent list item. This gives me a navigation such as: > Home >> Directors If we're on the Home page (as in example code above), I want that to have the red colored text, but Directors to be black. If Directors is the current page, I want that to be red, and Home to be black. Basically anything that isn't the current page should be black... At the moment (because .current_page_item ul li a doesn't seem to work) I'm getting red text for Home and Directors when on the Home page... I want Directors to be left black in this situation. N.B. It's more complicated than above because I also want to do some styling with borders on the top level list items (well, the a element within), but if someone can point out where I'm going wrong with the above I think I should be able to sort the rest out... Thanks in advance - please let me know if you need more details! I'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. Just like the title says, the child is wider than the parent, and i want it automatically centered, so t hat the centers of both divs are inline with each other. I tried the Code: margin 0px auto; which works if the child is smaller, but it doesn't seem to work in this case, any other ideas? First off, every time I come back to try to institute CSS more in my site, the more I hate it. That said, my problem: I have a DIV box that stretches 100% across my screen. Inside of it I need two more DIVs, 'A' aligned to the left and 'B' aligned to the right. I need to be able to add another DIV (C) to the right of A under certain circumstances. The first problem comes into play that you can't just lay a DIV down without a stupid linebreak. I need to use DIVs and not SPANs because both B and C have multiple lines. I also can't do absolute locations because the page is PHP-generated and the items don't have a consistant location on the page, except as being under the same parent DIV. Now I've read around and it seems I want to use floats, and IE supports this to some degree. FF, however, seems to completely remove the children from the parent when a float is used-- despite literature stating that it should remain in the parent. This messes up my entire display as it then begins covering up other content. Question #1: Is there ANY way to avoid display corruption from the line break forced on by block elements, other than putting everything into a table? It would help many facets of my site greatly if I could create self-contained DIV objects which can be placed right after each other like images. And it would solve this problem as well. Question #2: Why would floating children be escaping the parent when w3c and w3schools, among others, all say it shouldn't? If my situation is confusing I can make up a diagram upon request. Thanks- Dave 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 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. 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? 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 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'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? Can CSS select the first word in a Div? If so how? Example: first word in a pharagraph. 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. I have a large data sheet with individual td IDs, numbered 1 to 49 (first 3 shown for reference). <td id="data_cell_1"> <td id="data_cell_2"> <td id="data_cell_3"> I have been trying to apply a style to all of them (No I don't want to use a class, because they override the id's don't they? Or could I apply both a class and id to an element?) td[rel~="data_cell_"]:hover{background: #87F0FF;} td#[rel~="data_cell_"]:hover{background: #87F0FF;} td[id~="data_cell_"]:hover{background: #87F0FF;} td#[id~="data_cell_"]:hover{background: #87F0FF;} None of those worked. Isn't there a way to select all ID's based on partial information? |
|||||||