This CSS works perfectly in Firefox but not in IE8.
.toc {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:black 1px solid;
color:white;
max-height:50%;
max-width:25%;
overflow:auto;
padding:10px 10px 10px 0;
position:fixed;
right:20px;
top:40px;
}
.toc li { color:black; list-style-type:circle; margin:5px 0;}
Instead of a floating menu on the right side, IE8 renders the menu as first paragraph on top of the page. Where is my fault?
Update:
The relevant HTML:
<div class="toc">
<ul>
<li>DOCS</li>
<li>TODO</li>
<ul>
<li>Vorlagen</li>
<li>Taeglich</li>
<li>ADVARIS</li>
<li>CRM</li>
<li>QIS</li>
<li>SAP</li>
<li>Verschiedenes</li>
</ul>
<li>URLs</li>
<ul>
<li>Dev</li>
<li>NEWS</li>
<li>Vim</li>
</ul>
</ul>
</div>
Firefox-Screenshot
IE-Screenshot
Based of Gaby's provision, when I switch IE to render in Quirk's mode, then I believe I see your problem. Check your Doctype and other things that would through you into Quirk's mode, that's probably what is causing the issue.
Related
I have created a very basic hover css menu for a joomla site (I don't really want to get into jQuery if I can avoid it). It works fine in everything except IE (10,9...).
When you hover over the top level and move the move over the child menu the child menu persists in everything except IE.
How do I get IE to play ball?0
Here's the html:
<ul class="menu" id="mainMenu">
<li class="item-210"><a href="/index.php/home-2" >Home</a></li>
<li class="item-213 current active deeper parent"><a href="/index.php/xbus2" >xBus</a>
<ul>
<li class="item-214"><a href="/index.php/xbus2/vision" >Vision</a></li>
<li class="item-215"><a href="/index.php/xbus2/timetable" >Timetable</a></li>
<li class="item-217"><a href="/index.php/xbus2/xbus-mini" >xBus Mini</a></li>
<li class="item-218"><a href="/index.php/xbus2/xbus2" >xBus2</a></li>
</ul>
</li><li class="item-220 deeper parent"> etc ....
and here's the css
ul#mainMenu li {
position:relative;
}
ul#mainMenu ul {
position:absolute;
width:150px;
top:17px;
left:-9999px;
text-align:left;
background-color:#000;
z-index:5;
}
ul#mainMenu ul li {
display:block;
border-top:1px solid #999;
}
ul#mainMenu ul li:first-child {
border-top:none;
}
ul#mainMenu ul li a {
font-size:14px;
line-height:2em;
color:pink;
}
ul#mainMenu li:hover ul {
left:0px;
}
You should set the margin and padding to zero. IE has default value about this.
'ul#mainMenu ul {padding:0; margin: 0;}'
Make sure there is no margin between the elements which could be causing the issue. The IE dev tools will help with this.
Also, try applying a 1px transparent gif or png as the background of the child LI's - http://www.welovecss.com/showthread.php?s=4de6205bc9ac3ff2ead50464d123bcf4&t=6478&page=2
Hope it helps
I'm starting to use the :before pseudo element to display logos before anchor text in a list.
I've followed Nicolas Gallagher's instructions, but the background images are not displaying in IE8. Works in other browsers. Anyone see what I might be doing wrong?
I've posted the example here:
http://vervedesignstudios.com/gb/testBefore.html
Here is the markup:
Thanks in advance for your advice.
<style>
/* Pseudo-element cropping bit */
.iLst24 li a:before {
content:"";
float:left;
width:24px;
height:24px;
margin:0 6px 0 0;
background-image:url("images/HomeSprite.png");
}
.iLst24 .fb a:before {background-position:0 0;}
.iLst24 .tw a:before {background-position:0 -50px;}
.iLst24 .yt a:before {background-position:0 -100px;}
</style>
<div class="iLst24">
<ul>
<li class="fb">Facebook</li>
<li class="tw">Twitter</li>
<li class="yt">YouTube</li>
</ul>
</div>
IE8 has multiple issues with float and specific width/height values on tags. Try adding a "zoom:1" to trigger haslayout and see if that helps.
I am creating a rounded corners tabs, that works fine in IE9, Mozilla and Chrome, but not in IE7/IE8.
Here is the code:
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
</ul>
</div>
</div>
#navbar {}
#holder {
border-bottom:1px solid #000;
overflow:hidden;
}
#navbar #holder ul {
margin:0;
padding:0;
list-style:none;
margin-top:15px;
}
#navbar #holder ul li { }
#navbar #holder ul li a {
text-decoration:none;
float:left;
margin-right:5px;
border:1px solid #000;
padding:15px;
text-align:center;
width:90px;
border-bottom:none;
display:block;
behavior:url(border-radius.htc);
border-radius:5px 5px 0 0;
}
#navbar #holder ul li a:hover {
background:#C09;
color:#fff;
}
Can you please let me know the code so that it works for IE7/IE8 as well?
Use jquery corner , it will work on all major browser
http://jquery.malsup.com/corner/
You can even configure the corners the way you like!!
IE 7/8 do not support border-radius. I hear IE9 does though.
This site contains a hack for getting rounded borders in IE7/8 though: http://dimox.net/cross-browser-border-radius-rounded-corners/ . You'll need to download border-radius.htc and put the following code in your CSS:
.rounded-corners {
behavior: url(http://yoursite.com/border-radius.htc);
}
There are following solutions :
CSSPie (http://css3pie.com/ but its compressed js file is 40 KB in size)
There is another solution using htc file for IE
behavior: url(http://yoursite.com/border-radius.htc);
(almost 40 KB of size)
The guide can be found here http://dimox.net/cross-browser-border-radius-rounded-corners/
Another solution that I personally recommend is :
jquery.corner.js (http://jquery.malsup.com/corner/)
It's uncompressed js file is 10 KB in size.
border radius supported ie-7, ie-8, ie-9 via javascript check this tutorial how to show border radius in ie http://davidwalsh.name/css-rounded-corners
The Internet Explorer supports the CSS border-radius property natively not until version 9. For lower version of IE, check the jQuery plugin kvijayhari mentioned, jQuery Corner.
The Preview, What others are saying tabs are stacked and right-aligned (wrong).
They should be horizontal and left-aligned.
It's displayed correctly in firefox,IE8.
What's the reason for this?
URL: http://www.learncentral.org/resource/view/59896
UPDATE
Related html here:
<div class="ed_tabs">
<ul class="ui-tabs-nav">
<li class="selected ui-tabs-selected">Preview</li>
<li>What others are saying...(0)</li>
</ul>
</div>
css:
.ed_tabs {
border-bottom:3px solid #3F79C2;
float:left;
width:100%;
}
.ed_tabs ul {
float:left;
list-style:none outside none;
margin:0.5em 0 0;
padding:0 0 0 1em;
}
li {
float:left;
padding:0 1px 0 0;
}
Not sure why IE7 is working differently, but I see that your CSS rule for
.ed_tabs ul li a
does a float:right to the anchor (A). Try changing this to float: left instead.
I would like to have an ordered list that has the text on the left and an image for each li within it on the right of the li. So I floated the image to the right and it puts the image correctly on the right and text on the left, but the image is 14 pixels too low in IE and FF. Chrome does it right. This appears to me to be IE and FF putting the float outside or underneath each LI instead of inside where it should be (like Chrome). If I adjust the position -14px (up) for IE and FF, it works fine for them, but then Chrome is messed up. 14px is the height of each LI which is why that trick works.
I don't want a single browser hack unless absolutely needed (ie, do the -14px offset for IE/FF and tell Chrome to ignore it).
#top25list{
width:185px;
cursor:n-resize;
list-style:
decimal inside;
padding:0;
margin:0
}
#top25list li{
margin:0;
padding:0 3px;
background-color:#FFF;
border-top:1px solid #990100;
border-bottom:1px solid #990100
}
#top25list img{
border:none;
height:13px;
width:13px;
float:right
}
#top25list li:hover{
background-color:#990100;
color:#FFF
}
Nothing special about the li's:
<li id=##>Name <img src="/images/button-x.png" alt="Remove Name"></li>
See the first LI doesn't have the image for FF/IE because it's below (where it looks like it's for #2) and the #25 image is off the bottom of the list.
I want all 3 to look like the Chrome. There is some JavaScript producing the OL/LIs, and the class=removeTeam is just for jQuery actions. This list is within a jQuery sortable and I do have the list selection disabled with jQuery (.disableSelection();). I don't think this has anything to do with jQuery or JavaScript, just simple CSS.
It's a bug that IE and Firefox share. To work around it you must move image to be before any non-floated text in its line.
<li id=##>
<a href="#" rel="##" class="removeTeam">
<img src="/images/button-x.png" alt="Remove Name">
</a>
Name
</li>
If you can't change the HTML you could try positioning instead of floats.
#top25list li{
margin:0;
padding:0 3px 10px 3px; /* add padding-right to make room for the image */
background-color:#FFF;
border-top:1px solid #990100;
border-bottom:1px solid #990100;
position: relative; /* for img to have position */
}
#top25list img{
border:none;
height:13px;
width:13px;
position: absolute;
top: 0;
right: 0;
}
I haven't tested this, let me know if I'm wrong.
The list-style: inside is messing it up.
Below is the code that works. I moved the float to the #top25list a and moved the to before the name.
#top25list{
width:185px;
cursor:n-resize;
padding:0;
margin:0
}
#top25list li{
margin:0;
padding:0 3px;
background-color:#FFF;
border-top:1px solid #990100;
border-bottom:1px solid #990100
}
#top25list a{float:right;}
#top25list img{
border:none;
height:13px;
width:13px;
}
#top25list li:hover{
background-color:#990100;
color:#FFF
}
<ul id="top25list">
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
<li><img src="/images/button-x.png" alt="Remove Name">Name </li>
</ul>