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.
Related
I have an ul with varying-length li's, but a fixed width. I also have some icons in the li.
<ul>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
<li><span class="icon"></span>Short text</li>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
</ul>
The li's have the text-overflow property set to text-overflow:ellipsis;.
But the clipped text that would have been overflowing blocks elements behind it (.icon) from registering the cursor hovering
my CSS:
.icon {
height:18px;
width:18px;
float:right; /*there is a good reason for this, don't complain ;) */
cursor:pointer;
background:url(icons.png);
background-position:-72px -72px;
}
.icon:hover {
background-position:-90px -72px;
}
li {
text-overflow:ellipsis;
height:20px;
overflow:hidden;
white-space:nowrap;
list-style-type:none;
width:150px;
}
Check my jsfiddle, it explains it a hell of a lot better than I do :p
http://jsfiddle.net/eXXTG/
The overflowing text hidden by text-overflow:ellipses stops the dom from registering the cursor hovering above things that are behind the text (or where the text would be).
Any ideas on fixing this?
Cheeers
You can add
position: relative
to the .icon class
Just add display block to icon class:
.icon {
height:18px;
width:18px;
background:url(http://www.darkroomart.com/dewolfe/css/images/dw-icons.png);
float:right;
/*there is a good reason for this, don't complain ;) */
cursor:pointer;
background-position:-72px -72px;
display: block;
}
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.
i am trying to make a CSS menu for my webpage for school. I have been developing my site on a Mac and have got it working just the way i want it. I have tested it in safari, firefox and chrome as well as firefox on windows, all of these work fine, i hover over the links menu and it drops down.
css for menu
#menu
{
position:relative;
top:-83px;
left:60%;
font-size:30px;
width:250px;
}
#menu ul
{
position:absolute;
list-style-type:none;
background-image:url('../images/linkBG.png');
background-repeat:no-repeat;
background-position: 38px 0px;
width:250px;
}
#menu li ul
{
display:none;
list-style-type:none;
background-image:url('../images/menuBG.png');
background-repeat:repeat-y;
font-size:20px;
}
#menu a:link {color:rgb(255,0,0);}
#menu a:visited {color:rgb(255,255,0);}
#menu a:hover {color:rgb(255,0,255)}
#menu a:active {color:rgb(255,255,255);}
#menu li:hover > ul
{
display: block;
}
#menu li ul li
{
padding-left:0px;
padding-top:10px;
padding-bottom:10px;
}
When trying it on IE (ver6 and ver8) the links menu repositions it self (moves up about 50px and overlaps the heading), the background image gets moved across to the right by about 30px, and the menu no longer drops down when the mouse hovers over the text. I have heard of IE being a pain to develop for but this is just stupid. I have seen one solution that involved a bit of script to work around the issue but i cannot use script as this is for an assignment (which will be marked on a windows machine so there are high odds of it hitting IE). Along with the faulty menu is a table that i am centering using margin-left:auto and margin-right:auto once again it works fine in all browsers except IE. Is there any way i can get around this? is there an alternative to hover that will work on all browsers.
thanks.
html code for menu
<div id="menu">
<ul>
<li>Links Menu
<ul>
<li>Details</li><!--This may be #details-->
<li>Home town</li>
<li>My Course</li>
<li>Books, Music and Films</li>
<li>Timetable </li>
<li>Search</li>
</ul>
</li>
</ul>
</div>
Take a look at the margins and padding on your menu and the header above it. IE sometimes misinterprets them when objects bordering each other have both margins and padding. If you're able to replace your margins with more padding or different positioning, that might fix it.
Otherwise, the easiest way might to use IE conditional statements to give Explorer different versions of your CSS classes. I doubt they'd be considered script, but I don't honestly know. Example:
<!--[if IE]>
#menu {
/* different positioning for IE only */
top: ____;
left: ____;
}
<![endif]-->
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.
I'm really frustrated with this one. A few weeks ago I got it working in both firefox and ie just fine. Went back today to do some testing and found a problem with the display in firefox and I've been searching the code but can't find anything. I could use a few tips from anyone willing, I'm sure I'm looking at the wrong things. I upgraded my firefox version but I imagine my code is broke, not firefox. I'm assuming the problem is somewhere in my css file, but I'm not sure.
Here's what I've confirmed so far. There don't seem to be conflicts in other css files with < ul >'s or < li >'s that may be overriding settings. The other confirmation is that This works fine in Internet Explorer...therefore I must be an idiot, because its usually been the other way around (working in FF, but failing in IE).
Here's How it looks in IE (Notice the position of the folder icon right next to the text):
alt text http://www.redsandstech.com/ie_works.jpg
Here's how it looks in FF (Notice the folder icon is not being pushed down with its corresponding text).
alt text http://www.redsandstech.com/ff_broken.jpg
Here's the Unordered List:
<ul id="nav">
<li><a>Utah</a></li>
<ul>
<li><a>ParkCity</a>
<ul>
<li><a>Com1</a></li>
<ul>
<li class="folder_closed"><a>Timber</a></li>
<div>SQUARE CONTAINER IS INSIDE THIS DIV</div>
</ul>
</ul>
</ul>
</ul>
Here's the CSS that is used for the whole menu:
/* MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
ul#nav div{
overflow: hidden;
}
#nav li>a:hover {
cursor: pointer;
}
#nav li > ul{
/* This will hide any element with an id of "nav" and an "li" that has a direct child that is a "ul" */
display:none;
margin-left:0px;
margin-right:0px;
padding-left:15px;
padding-right:0px;
text-indent:15px;
}
#nav li {
list-style-type:none;
list-style-image: none;
}
#nav > li{
vertical-align: top;
left:0px;
text-align:left;
clear: both;
margin:0px;
margin-right:0px;
padding-right:0px;
}
.menu_parent{
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.menu_parent_minimized{
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.folder_closed{
position:relative;
background-image: url(../images/folder_closed12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
.folder_open{
position:relative;
background-image: url(../images/folder_open12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
</ul>
You have encountered one of the greatest and most frustrating CSS differences between IE and other browsers.
My advice is to use a reset stylesheet, and to style tree icons as backgroundImages of their containers.
For example, one of your tree items might be
<div class="folder">This is a folder</div>
and have the following CSS:
.folder {
background-image: url(someImage.png);
background-repeat: no-repeat;
background-position: 0 0; /* or wherever you like */
text-indent: 20; /*enough room for a 16x16 icon with a little space to the right */
}
}
I do this kind of thing always using DIVs, not UL>LI combinations. YMMV. You can do the same thing with UL>LI, but I don't like the differences in where the bullets are placed, etc., and if you use a reset stylesheet anyway, you are simply converting the LI containers to something resembling a DIV anyway.
Your markup has some errors, so it is up to the browser how to generate the DOM.
ul can only have li as child, not div or another ul. Fix the markup, and see what happens.
I've been having problems with firefox when I use overflow:hidden on my lists. Try taking out overflow:hidden and see if that changes things.
For my issue, if I use overflow hidden then it causes my ordered lists to not show their A.,B.,C. or 1., 2., 3. etc... (turns it into an unordered list, with no bullets)
Didn't test but this may have to do with the fact that FF uses margin to set the bullet marks while IE uses padding. Or is it the other way around? Forgot.