Below is my html structure
<div class="footerMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Feedback</li>
<li>Contact us</li>
</ul>
</div>
But
.footerMenu li:last-child { }
selector doesn't seem to work in IE8. But http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx tells that the pseudo-selector is suppported.Any help on this!
You read it wrong. It says that it's not supported in IE8:
If you were looking at :first-child, which does have support in IE7 and IE8, and thinking that the same applies to :last-child... surprise! It doesn't.
:first-child is a CSS2 selector, but :last-child was only introduced in CSS3, so since Microsoft was only aiming for CSS2.1 compliance with IE8, they likely didn't bother about :last-child until post-IE8.
If you know you will only have four li elements, then you should be able to use adjacent sibling selectors to reach the fourth li:
.footerMenu li:first-child + li + li + li
To build on the other guys answers, an alternative could be to use javascript to fill the gaps, selectivizr is a good example of adding last-child support.
http://selectivizr.com/
The link you provided shows that it isn't supported for IE8... IE9+ only. Googling last-child IE8 brings up a whole host of similar queries.
Where did you read that? :first-child is supported back to IE7, but :last-child is IE9 and later.
(Headers moved down for your convenience)
The other answers are correct that IE8 doesn't support last-child. However, to solve your particular problem, you could either a) manually add a class to the last <li> or b) as this is a menu, and these will presumably have links inside them, target the last link with an attribute selector, which does work in IE8. Something like
.footermenu a[href="contact.html"] { ... }
Try to use something like that:
.footerMenu li {background-color: expression(this.previousSibling==null?'red':'green');}
I know its old but...there is a simple way to do it:
Just in the li you want the change do this:
<li style="yourstyle;">...</li>
Related
i recently got into html & css and i don't know much . I got stuck while trying to use first-child selector on several paragraphed link tags . It is something like this :
<p>text</p>
<p>text<p>
<p>text<p>
So is it possible to use the first-child in this situation to make it affect only first paragraph ? If not what would be the best way to do it ?
(Sorry for my english..)
Thanks in advance !
You can use CSS3 to do this such as code below to do what you are wanting to do.
p a {
color: red;
}
p:first-child a{
color: blue;
}
This will however, mean that it will only work in modern browsers that support CSS3 such as IE9+, Chrome, Safari and Firefox
Example of this working : http://embed.plnkr.co/67O3p6EBS1xmJ8w8m1e1/preview
This question already has answers here:
first-child and last-child with IE8
(3 answers)
Closed 8 years ago.
I've got to compare my website in both Firefox and IE8. There is one difference that I just can't understand why it's doing it.
I believe that the problem is because of this line of code
ul.dropdown > li:last-child {width: 50px;}
Does anyone know why this may not be working? Does IE8 not like angle brackets/ :last-child in CSS
:last-child is only supported in IE >=9
The last-child selector is not available in IE8 and earlier versions.
You can, however, support these early browsers with a little jQuery magic:
$("ul.dropdown li:last-child").addClass("last-child");
and then in css you can do this:
ul.dropdown li.last-child,
ul.dropdown li:last-child {
/* Your CSS styling here */
}
Just know that the styling will only apply after jQuery gets a chance to apply the class to the last child. It is good practice to use this technique with the original selector.
For more info on the last-child selector, you can visit this useful page:
http://www.w3schools.com/cssref/sel_last-child.asp
As far as I know children aren't supported in IE8 and below. COULD be wrong.
Easy fix would just be
<li class="last">List Item</li>
.last {width: 50px;}
In Internet Explorer (I've tested in all v6 - v9) the border on the sub-menu does not at first appear when you hover over the text. The second time you hover it will display. It works fine in Firefox and Chrome - i.e. it always displays the border. I've put an example page up on my site.
IE (on hover):
FF/Chrome (on hover):
There's nothing fancy here, some css, onmouseover/onmouseout Javascript to set style.display = block/none. I've followed some of the ideas in this answer to a similar question.
I've stripped it down to the minimum to try and find the problem, but still no luck.
The sub-menu ul element has display:none set on it. It seems that IE doesn't bother drawing the border until it has display:block set, and doesn't draw it initially when Javascript is used to display the element.
<html>
<head>
<title></title>
<style type="text/css">
ul, li {padding:0; margin:0; border:0;}
ul#hover_menu_list,
ul#hover_menu_list ul {list-style-type:none;}
ul#hover_menu_list li {float:left;position:relative;display:inline;}
ul#hover_menu_list li ul {border:1px solid #000;display:none;position:absolute;left:0px;top:20px;width:170px;}
ul#hover_menu_list li ul li {display:block; clear:left; float:left;width:140px;}
</style>
</head>
<body>
<ul id="hover_menu_list" onmouseout="document.getElementById('menu1').style.display='none';" onmouseover="document.getElementById('menu1').style.display='block';">
<li>
Menu
<ul id="menu1">
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
</ul>
</body>
</html>
UPDATE: The problem was indeed a doctype issue. Adding in either a transitional or strict doctype fixes the problem. The linked page has been updated with the fix.
As mentioned in the comment, it looks like you are missing a doctype.
Oldie but goodie:
http://www.alistapart.com/articles/doctype/
As I posted in the comments to the original question, the example on your page that you link definitely doesn't have a doctype listed at all in the code. I'd recommend adding a doctype, and it should correct your issue.
I've created your example on jsfiddle here and tested it on IE6-IE9, and it seems to work fine: http://jsfiddle.net/fordlover49/FpCEW
They include a valid doctype with all of their pages, and it appears work fine.
That said, you can use the pseudo :hover item in the css, however :hover doesn't work consistently in the older versions of IE, so that may not be an option without adding some additional code to add in support for it (maybe modernizer supports this).
So i have some html:
<a class='clicktext'>...read more!</a>
and i want to give it a :hover animation, as so:
.clicktext{
}
.clicktext:hover{
text-decoration:underline;
}
.clicktext:active{
text-decoration:none;
}
Suffice to say, it does not work in Mozilla Firefox 5, even though it works perfectly well in Chrome and Safari. However, if i change it to
a{
}
a:hover{
text-decoration:underline;
}
a:active{
text-decoration:none;
}
It works perfectly fine in Mozilla Firefox 5! I have not managed to find anything regarding this online.
I could, of course, just change my styles to apply to the a rather than the .clicktext. The problem with that is that it would screw up my conventions, which is (as far as possible) apply all the styles to classes rather than to the tag names. After all, I have many other tags for which i do not want this underline-on-hover thing to appear.
Has anyone bumped into this, and perhaps found a nice solution?
edit: these also do not work
.clicktext a:hover{...}
a .clicktext:hover{...}
I had these kind of problems with Firefox and solved it by adding the tag name to class name:
for example I had this which worked in Chrome but not in Firefox:
.content .sidebar:hover{
background-color: red;
}
and fixed it by making it more specific like this:
div.content div.sidebar:hover{
background-color: red;
}
http://jsfiddle.net/rE8xU/
I do not see the issue, when moused over it does include an underline.
A possible cause of this issue is the level of importance that the class has.
Such as styles that are set by their identification tag will take over any class styles and so forth.
http://htmlhelp.com/reference/css/structure.html
check out cascading order
Lastly, make sure that the css file is properly linked and or embedded
you can use firefox to check as well.
You need to add href="#" to your . the :hover meta tag needs the link to have the href property set.
use <p></p> tag if you are not hyperlinking the text.
<p class='clicktext'>...read more!</p>
then for styling the text.
p.clicktext {
color: #ccc;
}
p.clicktext:hover {
text-decoration:underline;
}
Hope i Helped ;)
There's a big chance that you have a conflict somewhere in your CSS, because the jsfiddle with this exact code works fine in Firefox 5. You might want to check for ID-selectors with the hover-pseudoclass that could possibly overrule this line of styling. Inspect it with firebug to see what css is inherited.
You might be getting this problem for
1: not specifying the class which is clicktext in your case, or.
2: object a is associated with some other class not compatible with clicktext class!
I am saying this because my website
is running perfectly without any problem, in both Chrome and Firefox!
I am using hover to produce an overlay effect! This is what I am doing:
.container{
//your specifications
}
.image{
//your specifications
}
.text{
//your specifications
}
.container:hover .text{
//your specifications
}
I also think that the answer marked as "correct answer" is not correct.
I had same problem, was just not working on Firefox, quick close and restart app and was working again.
Daniel
I have been asked to fix up some CSS that another worker in our company created. The code contains the following:
div#bwrap {
position: absolute; bottom:35px; left:120px; right: 60px; height:10px;
} body>div#bwrap {position:fixed;}
and:
div#mwrap {
margin-left:0;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:16px;padding: 85px 60px 35px 240px;
font-family: Segoe UI,Tahoma,Verdana,Arial,sans-serif;
} body > div#mwrap { height: 500px; margin-left:0; }
I understand this code is for older browsers but does anyone know which ones it fixes problems for. If for example it is for IE6 or earlier then our company no longer uses that browser.
Do I still need the:
body>div#bwrap {position:fixed;}
and
voice-family: "\"}\"";
voice-family:inherit;
IE6 doesn't support the > selector, so the references to body>div#bwrap won't work in IE6.
Since they are effectively identical to the main selectors above them div#bwrap, this implies that the bits inside the body>div#bwrap are overrides for browsers other than IE6.
In the first example, IE6 would produce an element positioned absolute, whereas all other browsers would position it fixed. If you are no longer supporting IE6, you can therefore move that style into the main div#bwrap selector and remove the body>div#bwrap one.
You can find out more about supported CSS selectors in various browsers here: http://quirksmode.org/css/contents.html
The voice-family bit is a hack which tells the hacked browser to ignore the rest of the styles in the selector. It is also IE6-specific, so if again if you're dropping IE6 support, you can drop the hack. You can find out more about this hack here: http://tantek.com/CSS/Examples/boxmodelhack.html
The second example also has a matching > selector, which you need to treat in the same way as the first example, although the margin-left is specified in both anyway (since they're using this method of separating IE6, I don't know why they bothered with the voice-family hack as well).
The voice-family/box model hack is definitely for old browsers (like IE5, old). More info on that can be found here.
The positioning thing I'm not sure about. Here's some information that might pertain to it. Specifically, the "IE >= 6" portion, where it mentions a hack and notes that it breaks position: absolute;. Without context, and given the format, I'd assume it's an older one, though, too. I'd say comment it out and check IE7/8 to see if it affects it. I think IE8 has developer tools (like Firefox's Firebug plugin), I'm not sure about IE7, though, but you can check them, too, if they're available.
My comment may be redundant but here are my points to take into account:
div#bwrap (You usually don't need the 'div' bit, it's cleaner to omit it.)
The voice-family part is, as mentioned, a really old hack and should be removed
If you're explicitly not supporting IE6 you may not need the child selector ">" at all
Position fixed doesn't work some webkit browsers like Mobile Safari
If you do need to support IE6 then the child selector is your best friend:
#bwrap { ... all browsers - including ie6 ... }
html > body #bwrap { ... modern override: Firefox, safari, opera, ie7+ ... }
Only implement the 'modern override' if you really really need to fix it in IE6.