I have a list of anchor links that have associated :hover attributes - really simple. The CSS works fine in IE7 and all other browsers, but not in IE8.
.header-nav ul li a:hover {
border-bottom: 1px dotted #fff;
}
I tried changing my doctype declaration from HTML5 to HTML4 strict and nothing changed - any ideas?
Thanks!
EDIT: associated HTML:
<ul>
<li>Getting Started
</li><li>Refill
</li><li>Status
</li><li>Services
</li><li>Conditions</li>
</ul>
Regular CSS:
.header-nav ul {
list-style-type:none;
margin:0;
padding-left:25px;
position: absolute;
top: 10px;
*top: 15px;
left: 0;
}
.header-nav ul li {
display: inline-block;
zoom: 1; *display: inline; /* Fix for IE7 */
padding: 0 40px;
}
.header-nav ul li a {
text-decoration: none;
line-height: 23px;
font-size: 18px;
position: relative;
top: 7px;
*top: 2px; /* IE7 */
color: #fff;
}
Again, to be clear, this works in IE7 but NOT in IE8, which is the confusing part...
This issue was due to the position:relative on the .header-nav ul li a tag... I have no idea why IE8 couldn't handle this (and IE7 could!). My fix was to simulate the relative positioning by just making the line-height attribute larger (and adding a *line-height to account for differences in the IE7 rendering).
If anyone has any insight on why this issue was caused I'd love to hear it!
Hope this helps future confused front-end devs that are stuck accounting for older versions of IE...
I has this issue in IE8, and the above solution did not work.
In the end the reason the above did not work is something to do with the fact that I am using datatables and I am using ajax to get the data asynchronously. The hover works fine if I switch the table to using static data, but does not work with ajax.
I am guessing its something to do with IE not being able to apply styles to dynamically added row or something.
It works fine in Chrome...!
Below a 100% working solution.
.navigation li ul { opacity: 0; visibility: hidden; filter: alpha(opacity=0); // for ie8 and lower }
.navigation li:hover ul{ opacity: 1 !important; visibility: visible; filter: none !important; }
you can add following line to the top of your html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Related
I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much.
Edit: it seems to be working fine on Firefox 37.
The answer below is still relevant, but the style related issues from mid 2013 are resolved.
IE support isn't mentioned here but edits/answers regarding it are welcome.
demo
The HTML:
<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>
The CSS:
input[type=checkbox] {
appearance: none;
background: transparent;
position: relative;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
left: 0;
content: '';
text-align: center;
background: #aaa;
display: block;
pointer-events: none;
opacity: 1;
color: black;
border: 3px solid black;
}
input[type=checkbox] + label {
line-height: 48px;
margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
content: '';
background: #32cd32;
opacity: .3;
}
input[type=checkbox]:checked::after {
content: '\2713';
background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
width: 48px;
height: 48px;
font-size: 46px;
line-height: 48px;
vertical-align: middle;
border-radius: 50%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen.
What do I need to change to have it look the same on Firefox as it does on Chrome?
Desired:
Not desired:
You can enable custom styles for checkbox specifically for mozilla browser by adding this property and it worked for me.
-moz-appearance:initial
I managed to fix it as much as seems possible (I'd still love a better solution, if one exists). I switched all of the selectors from
input[type=checkbox]::after
to
input[type=checkbox] + label::after
Downside:
requires a label
But:
HTML requires input elements to have a label
Conclusion:
only bad for invalid HTML
doesnt technically need a LABEL, but does need control over the mark up to ensure there is a target-able sibling immediately after the checkbox.
i.e.
input[type=checkbox] + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
input[type=checkbox]:checked + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
<input type="checkbox"></input>
<span class="targetMe"></span>
target the span using the sibling selector and :after elements as above.
Might as well put in a label tho at this point... :P
The problem is that :after and ::after technically create an element as the last child of the element the pseudoselector is applied to. Firefox doesn't like to create children inside of its checkboxes. This is actually part of a bigger topic which is replaced elements.
You will see the same issue with the :before and ::before pseudoelements not working on checkboxes because they would create elements as a first child element within the element being selected.
I have a web site (http://www.interactstaging.net/clients/tozzi/) with drop down menus which works perfectly under Firefox and Chrome but not IE10.
An example HTML code for menu part looks like:
<div class="navi"><em class="hover"></em><span>Home</span></div>
and CSS for that part:
.navi a span {
position: relative;
display: block;
padding: 0 7px;
line-height: 28px;
z-index: 100;
height: 45px; }
Any clue why that CSS is not working under IE10?
Thanks
Try this CSS rule:
.sf-menu li {
background-color: #fff;
}
What in this CSS doesn't work in IE8 & IE7?
nav {
position: fixed;
top:60px;
left:30px;
color:black;
float:left;
}
nav div#button {
width:205px;
height:50px;
text-align: center;
padding-top: 5px;
margin-bottom:10px;
font-size: 23px;
}
nav a {
color: #000000;
text-decoration: none;
}
nav div#button:active {
width:250px;
height:65px;
}
nav div#button.home {
background-color: #79b22c;
}
nav div#button.links {
background-color: #3b50cc;
}
nav div#button.aanbod {
background-color: #BA3BCC;
}
nav div#button.forum {
background-color: #1CAEB2;
}
nav div#button.contact {
background-color: #daa520;
}
It works fine in IE9 & IE10. But IE8 & IE7 displays no-styled text.
I have tested with browserstack.
Who can help me please?
<nav> and other HTML5 elements were defined after IE 7 and IE 8 were released, so the browsers aren't aware of how to handle them.
They can, however, be instructed to handle them. And, the html5shiv can help with this:
Include the HTML5 shiv at the top of your <head> in a conditional comment after any stylesheets.
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
Try using:
<!DOCTYPE html>
Also you don't need:
div#menu You need #menu
At the top of your code
Delete color and just use background
Position: fixed not work in ie7. Use should use expression() for this in css and position absolute.
I made a new website and my problem is that the menu is ok in FF and other browsers, but not in IE.
The problem is, it wont list the list elements, no hover , no color, and not inline.
here is the code
nav {
margin-top: 15px;
}
nav ul {
position: relative;
left: 297px;
}
nav li {
float: left;
padding: 0 20px;
font-size: 12px;
line-height: 65px;
background: url(images/line.png) no-repeat right 10px;
height: 72px;
text-transform: uppercase;
}
nav li a {
color: #656464;
text-decoration: none;
display: block;
}
nav li:hover {
background: url(images/hover.png) repeat-x 0 35px;
color: #242424;
}
could please someone could give me a hint?
nav is an HTML5 element; old IEs will not recognize it and thus won't apply your styles.
To make IE recognize HTML5 markup, place the HTML5 shiv on your page, then declare a rule for nav and any other HTML5 elements you use, giving them a display: block style, just above the CSS that you have now.
<nav> is fine to use on a page, but you will run into problems with it when you try and style it as many browsers simply skip the tag if they don't understand it.
Wrap the <nav> tag in a wrapper div and style that instead, and strip away any styling from the semantic tags so they are naked.
I have some CSS that doesn't behave correctly with IE8. It works fine with FF3, but in IE8 there are white boxes in between the list items and the whole thing is buggy.
here is the css in question
#golist {
width:900px;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
#listing {
list-style:none;
margin:0;
padding:0;
}
#listing li {
float:left;
display:block;
width:128px;
background:#fff;
border:1px solid #000000;
height:96px;
}
#listing li a {
border:none;
}
#listing p {
margin-bottom:0;
}
/* ---- show-hide elements ---- */
#listing li .show{
display:block;
width:128px;
height:96px;
}
#listing li .hide {
color:#121212;
text-align: left;
height: 0;
overflow: hidden;
background-image:url(bghover.png);
}
#listing li:hover .hide, #listing li.over .hide {
cursor: pointer;
height: 96px;
width:128px;
text-align:center;
}
#listing li:hover .show, #listing li.over .show {
height: 0;
overflow: hidden;
}
#listing li a, #listing li a:visited, #listing li a:active {
color:#121212;
font-size:12px;
text-decoration:none;
}
#listing li a:hover {
color:#121212;
text-decoration:none;
}
And here is the code itself:
<div id=golist>
<ul id=listing>
<li class=show>
<a href=#>
<img src=images/image.jpg height=96px width=128px border=0>
</a>
<div class=hide>
<a href=link.html>Link</a>
<p>Some info</p>
</div>
</li>
</ul>
</div>
The idea is to have a 128x96 box with an image. On mouseover, a layer pops up over it with some text.
Here you can found about this: http://webdesign.about.com/od/internetexplorer/a/aa082906.htm
This is a part of the article:
It's actually really easy to hide styles from IE 6 but make them visible to standards compliant browsers. Use child selectors.
In one design I built, I created a two column layout that required margins and padding. This meant that I was hitting the box model differences when I viewed the page in IE 6. My first CSS style sheet for Firefox included a line like this:
div#nav { width: 150px; margin-left: 20px; }
This made the page line up perfectly in Firefox and Safari, but in IE the nav column was pushed over to the right too far.
So, I converted the line to use child selectors. The #nav div is a child of the body tag, so I changed the line to read:
body > div#nav { width: 150px; margin-left: 20px; }
Of course, doing this made the #nav div lose all it's properties in IE, so I needed to add in some IE styles to get IE 6 looking okay. I added this line to the CSS:
#nav { width: 150px; margin-left: 10px; }
The placement of this line of CSS is important if my page is still to look good in Firefox and Safari. The IE line needs to come first. Firefox and Safari will read that line and then it will be over-ridden by the body > div#nav selector lower in the document. IE 6 will read the first line and set the styles. It will then ignore the child selector, as it doesn't recognize them. When IE 7 comes along, it will act like Firefox and Safari.
By designing for a standards-compliant browser first, and then modifying your CSS to support IE's quirks, you spend a lot less time fiddling with the design and a lot more time actually designing.
Start by clearing all of the default padding and margins in your css file using:
* { padding: 0; margin: 0 }
Then you'll have to adjust your code accordingly as every browser adds its own padding and margins to all attributes.
Once you get it to the point where you're happy with it in Firefox and Safari, use conditional statements to pull in the appropriate IE stylesheet:
<!--[if IE 6]><link href="css/CSSName_IE6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="css/CSSName_IE7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="css/CSSName_IE8.css" rel="stylesheet" type="text/css"><![endif]-->
In your stylesheets only override what needs overriding:
Master CSS
.iframestyle { float: left; margin-right: 3px; width: 305px; }
IE 6
.iframestyle { width: 309px; height: 263px; }
IE 7
.iframestyle { width: 309px; margin-top: 0px; }
IE 8
.iframestyle { width: 305px; margin-top: 0px; }
(For whatever reason IE 8 may need a redeclaration of width.)