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).
Related
Bit of a confusing one, the color attribute is respected on the desktop version of Safari but not on mobile.
I tested it on an iPhone 5 (iOS version 9.2.1).
Sample code (first span will appear black on safari mobile):
<html>
<head>
<style>
span { color: white; }
</style>
</head>
<body>
<span>✖</span>
<span>×</span>
<span>×</span>
</body>
</html>
and JSFiddle link: https://jsfiddle.net/9t3v8846/
Adding !important didn't do anything. Any ideas what might be causing this?
If any poor people come across this.. the way to fix this is to add a variation selector after the entity like so:
<span>✖︎</span>
Essentially what is going on under the covers is that the browser decides how to render the HTML entities.
Safari on iOS prefers to use Emoji-like rendering where possible so it ignores the CSS attribute. The variation selector used above specifies that we want to use text-like rendering causing Safari to now respect any color attributes applied to it.
If you are using less try this
#baseColor: #ffffff;
body {
color: rgba(red(#baseColor), green(#baseColor), blue(#baseColor), 1);
color:#baseColor
}
I'm running into a really weird issue in IE (specifically tested in IE 11 & edge mode on Windows 7). IE seems to add extra padding/height to the list-items in the nested <ul>. Screenshots and tests below. If someone could point me the right direction of how to fix this, that would be great, I've tried a few different things and don't know what's going wrong.
I have a nested <ul>, like so:
HTML
<ul>
<li class='static'>Example Menu Item</li>
<li class='static'>
Another Example
<ul class='dynamic'>
<li class='dynamic'>Dropdown Menu Item</li>
</ul>
</li>
</ul>
CSS
ul.dynamic
{
z-index: 10000;
list-style-type: none;
padding: 0;
margin: 0;
background: #ccc;
min-width: 200px;
}
li.dynamic
{
display: block;
white-space: nowrap;
/* Fix for bug in IE10/11/Edge */
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
The list-style-image setting, if you're wondering, is a fix for a previous bug I found in IE wherein regardless of the list-style or list-style-type setting, the submenu would still have the list "dots" next to it. That encoded data is the smallest possible transparent image.
Tests
I've tried a lot of different things, from setting both the <ul> and the <li> to fixed height, box-sizing: (content-box|border-box), white-space: nowrap, and/or padding: 0; margin: 0;, with no tangible results.
Strangely, if I set basically anything differently in the IE inspector, including changing existing values on the <li>, when the repaint occurs, the <li>'s suddenly snap back to the right height. However, if I put any of those changes in my stylesheet and reload, the same problem occurs.
Furthermore, this problem isn't specific to my machine. I've had a few others (also, Windows 7, IE11) test it and run into the exact same problem. It's also specific to IE. The menu looks fine in every other (up-to-date) browser, but when I run it in 11 or 11's compat modes for IE10 and 9, I see the same issue.
I also cannot created a reduced test case in JSFiddle (or similar), as I cannot replicate this bug in JSFiddle, which is the strangest part. That would also imply that my CSS has more affecting it than I think, but the only things that I did not include in the CSS above are a few styles that only add color & a border-bottom, and some inline styles that are set by javascript to set its top, left, and position correctly as a dropdown menu.
Notes
My doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And I am not setting any meta tag that would force IE into an older compat mode.
Finally, these <ul> menus aren't hardcoded, they are generated by the ASP.NET <asp:Menu> element with RenderingMode="List" and IncludeStyleBlock="false".
Screenshots
Chrome
Internet Explorer 11 (no-compat mode)
Above is a shot of the <li> in question with the inspector highlighting it, showing no padding or margin making up this
Thanks for taking the time to read all this! If you have any pointers or suggestions, I would be happy to hear it!
Figured out my issue, shoutout to #ns1234 for helping me out with this.
Turns out there is a bug in IE related to the combination of dynamically modifying content, and using position: relative.
Note that position: relative does not trigger hasLayout, which leads
to some rendering errors, mostly disappearing or misplaced content.
Inconsistencies might be encountered by page reload, window sizing and
scrolling, selecting. With this property, IE offsets the element, but
seems to forget to send a “redraw” to its layout child elements (as a
layout element would have sent correctly in the signal chain of redraw
events).
In essence, either don't use position: relative, or also add an overflow value, like overflow: hidden, to your element, to fix this.
I fixed it by adding overflow: hidden to my sub-menu <ul>, which caused IE to correctly repaint the <li>s I was having trouble with.
This CSS works for me:
overflow: hidden;
height: auto;
So I can get IE8 to use :after quite easily:
<!DOCTYPE html>
<html>
<style type="text/css">
a.styled:after
{
content:" HAHA! Business.";
color:red;
font-size:12pt;
}
</style>
<body>
Here's some text and stuff. Here's a link.
</body>
</html>
If I put that in a text document and open it in IE, it displays what it should: "Here's a link" is followed by "HAHA! Business," in red. When I try putting the exact same code into a SharePoint Content Editor web part, it works on every browser I've tried EXCEPT for Internet Explorer. With IE, nothing is displayed after the link when I use :after, but any other sort of styling works fine. What gives?
IE does not support :after prior to IE 8, and even with IE 8 it does not work without a doctype. You can check out this chart of css selectors and their support for more information as well.
Since you mentioned using IE8, I cannot find any reason why it should not work. There could possibly be some other content in your sharepoint web part that could be causing issues.
You may also be interested in how-do-you-work-around-ie-not-supporting-after or why-is-sharepoint-dispalying-my-html-and-css-content-improperly, two similar questions found here on stackoverflow.
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>
Given IE6, an UL-LI list and a background image for the UL container.
<style>
ul {background-image: url(images/bgr.png);}
</style>
...
<ul>
<li>...</li>
...
</ul>
When I load the page, the background is randomly loaded, some parts are visible, some are not. Moreover, it changes on runtime when I'm scrolling on the page. When I scroll out the UL list and scroll back, different parts of the background will be visible, depends on the speed of scrolling.
Do you have any idea? Thanks in advance.
IE6 struggles when it comes to using .png files full stop. There are various suggestions for fixes, but unless you have a specific reason for using a .png file (for instance transparency) I would suggest using a different file format. I've worked around it before by detecting when I have an early version of IE and substituting a .jpg for the .png file I wanted to use, so that most users with up to date browsers get a .png background but IE users get a .jpg.
I've encountered similar problem some time ago (but it was simple background-color, without image) and if I remember correctly, adding position:relative to parent element solved this. So something like this:
<div style="position:relative">
<ul>
<li>...</li>
</ul>
</div>
Does li float or something?
Try putting...
ul
{
zoom:1;
overflow:hidden;
display:block;
}
height:1%;
You can use this to fix