|
CSS - Pseudo Classes In-line?
Is it possible to inline a :hover... something like this:
<a href="loc" style="color: blue;" style:hover="color: red;">Click here</a> Now that in particular doesn't work, but can you do something like that by editing the style=""? (I know it's best to just have a separate css file. I'm just wondering if it can be done) Similar TutorialsI've run into a situation that I've never encountered before. I want to add em dashes to the content of my pseudo-classes, but apparently it isn't working. I'm using regular hyphens for now, like so: Code: #secondary h2:before {content: "- "}
#secondary h2:after {content: " -"}
I've tried the hex and dec values for the em dash, and those don't work either. Is there something easy that I'm missing, or is this a limitation of these pseudo-classes? Thanks for your time. Hi, I can't seem to get this to work, I was wondering if anyone else has done it. I'm trying to get a :hover and :active pseudo-class to work in Explorer. I got something like this: Code:
<!--Base INPUT style def. All input classes inherit these attributes
though none use this style directly.-->
INPUT
{
background-color: #ffffff;
color: #000000;
etc...
}
<!--Specific class, inherits from base and applies specific traits-->
INPUT.underBlack1
{
border-style: solid;
border-color: #000000;
border-bottom-width: 1px;
border-top-width: 0px;
etc...
}
<!--Pseudo-class: highlights on hover-->
<!--(Doesn't work)-->
INPUT:hover
{
background-color: #fdfddf;
}
<!--Another try at a pseudo-class: also doesn't work-->
INPUT.underBlack1:hover
{
background-color: #fdfddf;
}
Do elements other than anchors and such not behave well with pseudo classes? I can't seem to get any kind of css pseudo-class behavior out of input elements in MSIE 6, WinXP. -Mike Hi, I have a series of images that act as hyperlinks to other pages. I want the image border to initially be set to none, but when I rollover the image I want it to turn white, 1px wide. Tried doing this with normal link styles, but it ain't workin. So how do you do this? Thanks mM Hi, Tried using Pseudo Elements to set style property for first character (first-letter) and first line (first-line) inside an element. Every thing works fine when we set such styles on div or table elements, but failed on anchor tags Working on Code: <style>
div:first-letter{font-weight: bold;}
</style>
<div>
Pseudo Div<br>
Line Two<br>
Line Three<br>
</div>
Failed On Code: <style>
a:first-letter{font-weight: bold;}
</style>
<a href="">
Pseudo Div<br>
Line Two<br>
Line Three<br>
</a>
Can anyone give me the solution for this. Thanks in advance! Hello everyone. I would like to make a layout that fills the entire window but not more. The content of the page i want to display in a container that is always on a certain distance from the window border. I came up with this code which works perfectly in FF but not in IE. html4strict Code: Original - html4strict Code <html> <head> <title>layouttest</title> <style type="text/css"> body { margin: 0px; } table { empty-cells: show; } #container { position: absolute; top: 38px; bottom: 27px; left: 161px; right: 19px; overflow: auto; background: maroon; } </style> </head> <body> <table cellspacing="0" cellpadding="0" style="height: 100%; width: 100%;"> <tr> <td style="width:142px;height:100%;" bgcolor="green"></td> <td style="height:100%;" bgcolor="blue"><table width="100%" height="100%" cellspacing="0"> <tr><td colspan="3" style="height:37px"></td></tr> <tr> <td style="width:16px;"></td> <td bgcolor="red" valign="top" style="overflow: hidden;"><div id="container"> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf adsf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs fusf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf sdufs <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx sdaufsdf <br />adasfjasdhasdfhjsdfjsdfsdbfzuasudfx<br /> </div></td> <td style="width:16px;"></td> </tr> <tr><td colspan="3" style="height:26px"></td></tr> </table></td> </tr> </table> </body> </html> <html> I have looked through various threads here and found a lot of ideas for making it work in IE but it never did. So if you could help me with this i would be very thanksful. thx - HoB I've got a form that I'm trying to lay out. I've prepared examples. http://www.dollardns.net/devshed/example1.html This is approximately what the form should look like. But I don't like how I managed to pull it off. I've explicitly declared a height for the middle row in my form. I want this to be automatic based on the contents. http://www.dollardns.net/devshed/example2.html But this is what happens if I take out the explicit height. The float lefts for the inner "box"es confuse the parent div into thinking it has no content. So the height collapses, and chaos results. http://www.dollardns.net/devshed/example3.html I've also tried making the "box"es use a display of "inline". But that doesn't work possibly cause inline elements are not supposed to contain block elements. Any recommendations? Does anybody know how to simulate the :after pseudo-element for msiepc? I want to add a small image icon on at the end of a regular anchor tag which MUST stay as an inline element and therefore can't use a background image to accomplish this (as this doesn't work over multiple lines in ie.) More specifically. Does anybody know a reliable cross-browser way of adding a small image (such as an arrow) to the end of an <a> tag that wraps over multiple lines? Cheers dudes 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 I took an example from w3.org (shown below) and it doesn't work. From http://www.w3.org/TR/css3-content/ Quote: 4.2.2. Inserting multiple '::before' and '::after' pseudo-elements In contrast with the previous section, the selector '::before(2)' represents a pseudo-element before another, both of which are contained at the start of an element. For example, the following rules: div { content: 'A' } div::before { content: 'B'; } div::before(2) { content: 'C'; } ...would result in the following rendering objects: ,-----------------------. | ,---. ,---. | | | C | | B | A | | `---' `---' | `-----------------------' The '::before' selector is exactly equivalent to '::before(1)'. A pseudo-element only exists if all the elements and pseudo-elements leading up to it exist. For instance, in the following example, only one pseudo-element is generated, the first one: div { content: 'A' } div::before { content: 'B'; } div::before(2) { content: inhibit; } div::before(3) { content: 'C'; } It would result in the following rendering objects: ,-----------------------. | ,---. | | | B | A | | `---' | `-----------------------' So my code is 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<style type="text/css" media="screen">
div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: 'C'; }
</style>
</head>
<body>
<div>Test Div</div>
</body>
</html>
And the output is "BTest Div". Firefox error console comes up with Quote: Warning: Function token for non-function pseudo-class or pseudo-element, or the other way around, when reading 'before'. Ruleset ignored due to bad selector. Line: 10 I get a similar error when I validate it with W3.org using CSS level 3 Quote: 10 div Parse Error div::before(2) { content: 'C'; } I just find it odd because I copied the example off of their site and then when I validate it the code comes back as invalid. Any ideas? If i have the following html: PHP Code: <div id="centre"> <h2>Header</h2> <p>Lorem ipsum appareat definiebas has eu. Eam consul ancillae ex.</p> <p> Sumo percipit instructior te mei. Est diceret convenire periculis ad, id vix facilisis sadipscing.</p> <p>Ei per aeque petentium tincidunt, posse inimicus ad sit.</p> </div> I want to select the first letter within the first <p> element, I've tried to do it using double pseudo-elements: PHP Code: div#centre p:first-child:first-letter { etc. } But this obviously won't work, because the <p> ain't first. I realise that i could do it very simply by just giving the first paragraph a class, but the use pretty much requires contextual selection, It seems the equivalent of second:child (which is what i want) will be available in css3, Even ideas would be great, Cheers I have another problem with IE for Windows: I have several links which should not appear as links but should inherate the colors (grey or black) and decoration (none) from their parents ... works fine every where except MSIE for windows (where the usual red and blue - but no underline - appear) the relevant styles: <style type="text/css"> a:link { text-decoration: none; color: inherit; } a:visited { text-decoration: none; color: inherit; } </style> the relevant html: <h3 style="padding: 0; margin: 0.25em;color:#000000; ">Some <a href="http://www.theDanceGypsy.com/danceFinder.shtml" target="viewFrame">Dance Events</a> near you:</h3> <ul class="newsList"> <li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-26:6-4" target="viewFrame"><span class ="unconfirmed">6/25: Bernardston~ <cite>Eastern Squares</cite> </span></a></li> <li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-30:6-4" target="viewFrame">6/26: Brattleboro~ <cite>Paneurhythmy</cite> </a></li> anyone have any idea for a workaround? Thanx Hey guys. I'm still learning css so excuse some crude styles. I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it. It doesn't do that in firefox or opera so I don't know whats' going on. Heres my CSS: Code: body {
text-align: center;
height: 100%;
background-image: url(images/bg_title.gif);
}
img {
border: none;
}
#wrapper {
width: 780px;
height: 100%;
margin: 0 auto;
text-align: left;
position: relative;
background-color: #FFFF7D;
color: #000000;
border: solid 2px #0000ff;
}
#header {
width: 780px;
height: 143px;
margin-bottom: 3px;
}
#headerImage {
width:200px;
float: left;
margin-right: 2px;
}
#headerImage img {
margin: 0px;
}
#headerLogo {
width: 577px;
float: left;
margin: 0px;
}
#headerLogo img {
margin: 0px;
}
#navagation {
width: 204px;
margin-bottom: 1px;
float: left;
margin-right: 1px;
}
.navIcon {
float: left;
margin-right: 2px;
margin-bottom: 1px;
padding: 0px;
}
.navButton {
float: left;
margin-bottom:1px;
padding: 0px;
}
a.navButton:link {
border: none;
}
a.navButton:visited {
border: none;
}
a.navButton:hover {
border: 1px solid #000000;
}
#mainContentArea {
float: left;
width: 570px;
height: 711px;
border: solid 1px #000000;
background-color: #ffffff;
margin-bottom: 3px;
}
#footer {
height: 1px;
margin-top: -1px;
clear: both;
overflow: hidden;
}
Thanks in advance! -Tim 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? Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Using the following example: 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. ok here is the question. i have done two websites, i have tested them out in multiple browsers and all seemed fine. When i test them in IE the text runs into to image. I am using div classes to control the image. Any insight on why this is happening would be greatly appreciated and hints or solutions would be more then welcomed. I am banging my head against a will trying to figure this out. Thankyou All I've been trying to clean up my code and in the past I never seemed to make use of predefined html element tags like the H1-H6...and instead I just find that I just make a new class but I was wondering if there is anything wrong with using the H-tags in place of a few classes? Obviously it would have to make logical sense to use, but I'm wondering if there has been any changes in how browsers use those tags in the past few years as I wouldn't want to be using an outdated, soon to be phased out element. Hi people, critique this piece of code for a yellowheader and a blue id and tell me what the problem is. It seems both end up as black <style type="text/css"> h3.Big Bird{color:yellow;}/*Class Font#CookieM{color:blue;}/*Id*/ </style> <h3 class="BigBird">Big Bird</h3> <font Id="CookieM">Cookie Monster</Id> Hope to hear from you soon. kaz |
|||||||