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;}
Related
I have the following css code working in Firefox/Chrome but not in IE8
input[type='text']
{
float: right;
width: 170px;
}
If I remove the attribute selector, it works in IE but it applies to all the inputs, which I dont want.
input
{
float: right;
width: 170px;
}
I thought attribute selectors were supported in IE8, so I don't know what the problem is.
It is not a matter of the code inside the input, from the moment I use the attribute selector, that css rule will not work whatever code is inside.
EDIT: Css rules for input[type="button"] and input[type="submit"] DO work, but for input[type="text"] DO NOT work. I'm really confused right now.
IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.
According to http://reference.sitepoint.com/css/css3attributeselectors#compatibilitysection
attribute selectors are quite buggy in IE8
You might want to try just using classes on those input fields you want to select
Go to this Question
Used to jquery
As like this
$('input[type="text"]').css({float: 'right'});
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>
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).
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.
#parent div { float:right; }
#parent > div { float:right; }
Most importantly:firefox and IE
No. Some browsers don't support CSS at all (lynx for example).
The glib answer aside, among browsers you probably care about, the child selector is not supported in Internet Explorer 6.
See this chart:
#parent > div is supported by ALL browsers EXCEPT IE6.
See Quir}{smode's master compatibility table for answers to all these types of questions.
Click here for the CSS Compatibility table