I have a WordPress site in which we are replacing menu links with a background image. Here is an example of the css for one of the menu items.
#menu-item-3039{
width:30px;
height:20px;
border:none;
padding-right:0;
}
#menu-item-3039 a{
visibility:hidden;
}
#menu-item-3039 a::before{
visibility:visible;
display:block;
width:20px;
height:20px;
content:"";
background-size:20px 20px;
}
#menu-item-3039 a::before {
background-image:url("/wp-content/uploads/2015/05/moodle-icon.png");
}
Is there something very obviously wrong or missing to work with IE11?
It works just great in chrome and firefox, but does not work at all in IE11. I'm not very experienced with IE cross browser support, so it's likely that anything will help.
Thanks!
IE11 is inheriting the visibility from the a to their ::before.
I'd recomend you not to use that rule and use:
overflow: hidden;
text-indent: -1000px;
height: 20px;
display: block;
instead. This way you are hidding the text (what I think that is what you really want to do) and not affecting the background.
Related
I'm running into a bug in Microsoft Edge where <a> tags are unclickable. I've managed to distill it to the simplest example here:
a {
visibility: hidden;
display: inline-block;
}
a::after {
visibility: visible;
content: "more";
}
<span>
go!
</span>
If anyone has any ideas, I'd really appreciate it. Thanks!
Disclaimer: I'm using IE11 here, but it has the same problem you describe for Edge, so I hope this solution will work there too.
It's a bit of a hack though; if better solutions come up, I'll gladly delete this one.
a {
display: inline-block;
overflow:visible;
color:white; /* note: use current background color */
position:relative;
}
a::after {
color:black; /* note: use current foregound color */
content: "more";
position:absolute; left:0; top:0;
}
<span>
go!
</span>
I have this CSS code with an inline-block. Can anyone tell me how to make it work in Internet Explorer 6 and 7. Any ideas? Maybe I'm doing something wrong? Thank you!
#signup {
color:#FFF;
border-bottom:solid 1px #444;
text-transform:uppercase;
text-align:center;
}
#signup #left {
display: inline-block
}
#signup #right {
background-image:url(images/signup.jpg);
border-left: solid 1px #000;
border-right: solid 1px #000;
display: inline-block;
padding:1% 2%
width:16%;
}
#signup #right a { font-size:100%; font-weight:bold }
#signup #right p { font-size:90%; font-weight:bold }
#signup a:hover { color:#FFF; text-decoration:underline }
In IE6/IE7, display: inline-block only works on elements that are naturally inline (such as spans).
To make it work on other elements such as divs, you need this:
#yourElement {
display: inline-block;
*display: inline;
zoom: 1;
}
*display: inline uses a "safe" CSS hack to apply to only IE7 and lower.
For IE6/7, zoom: 1 provides hasLayout. Having "layout" is a prerequisite for display: inline-block to always work.
It is possible to apply this workaround while keeping valid CSS, but it's not really worth thinking about, particularly if you're already using any vendor prefixed properties.
Read this for more information about display: inline-block (but forget about -moz-inline-stack, that was only required for the now ancient Firefox 2).
*display:inline works fine as IE7 hack. But, you can add zoom:1 to the code as *background:#fff; *display:inline; zoom:1. Here, you can put your background color code. Sometime, you will not see the layout on the screen, say, for example, list-items will not appear on screen. Then, in such cases this works great and appear as it does in other browsers.
I recently finished a website in wordpress and modified a template a bit.
Now my customer wants a element before a text-links, so i tried adding a :before as shown
a:before {
content:url('triangle.png');
width:3px;
height:5px;
margin: 5px;
}
what it does, works great so far:
But my problem is that I have image links on my site as well, and it crashes my layout.
Is it possible to apply the a:before only for the links in the textarea ?
have you tried following:
a:before > img {
content:"";
width:3px; /*maybe these styles are also not necessary for your layout*/
height:5px; /* then you can set them al to 0 */
margin: 5px;
}
I have an A tag button with Span inside to hold icons. It works well in all browsers. WHen I apply float:right to shift Span to the right side it also works fine in all browsers (Firefox, IE8+, etc.) except IE7 (I know... but I need to fix it).
<span> </span>Link
So, IE7 works fine when SPAN is floated left. However, once it is floated right it stretches the A tag container 100%.
I do not wish to change the structure of HTML, i.e. insert another span to handle IE7 only or move SPAN right of text, but I do want to fix it with CSS though what I tried did not work well for me yet.
Test case: http://jsfiddle.net/QeQSQ/1/ (IE7 works OK when SPAN is on left side)
Test case: http://jsfiddle.net/QeQSQ/2/ (IE7 does NOT work because SPAN is on right side and container is stretching)
Position it absolutely instead (example):
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
position:relative;
padding-right:1em;
}
a span{
position:absolute;
right:0;
display:block;
height:14px;
width:15px;
}
Or, another [better] solution would be to add the character via :before and :after pseudo-elements (example):
Link
Link
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
}
a.site:before {
content:"» ";
}
a.account:after {
content:" »";
}
Note: This doesn't work in IE7 at all (no additional text appears), but it also doesn't introduce any bugs.
remove the float:left and instead give the span display inline-block with an ie7 workaround:
a{
display:inline-block;
border:1px solid red;
height:auto;
width:auto;
padding:5px;
}
a span{
display:inline-block;
zoom:1;
*display: inline;
height:14px;
width:15px;
}
updated fiddle here: http://jsfiddle.net/QeQSQ/5/
also an article about the ie7 inline-block workaround: http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
This is really strange. I've got this site where I have a list menu with a simple :hover effect on each item in the menu.
http://w3box.com/mat/
In Firefox it works just fine. But i IE7 atleast there's a lag. I haven't tested it in IE8 but my guess is that it's there as well.
Now, I've been trying out veriations to the code to see what might cause the issue. And I've seen alot of posts about similar scenarios. But none of them seemed to apply to my case.
So just now I noticed that in my css stylesheet, I've got this:
li:hover {
background-image: url(img/TopLine.png);
Height:29px;
}
Strange enough, if I remove the height specifications, there is no lag! What could be causing this? Could it be layers of padding and margins to the parent li class? Or the parent class above that one?
This is the code of these items. The rest of the css you can under /main.css of the site
#header {
padding-right:7%;
height: 57px;
background-image:url(img/TopLine.png); }
.header a {
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none; }
.header li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;
padding-left: 23px;
padding-right: 23px;
height:23px; }
li:hover {
background-image: url(img/TopLine.png);
Height:29px; }
Any ideas on how I can improve this?
I'm not really getting any lag. The first time there is a slight delay though - this is most likely because the background image is loading.
You'd be better off setting a background on the list item proper then changing the background position on hover. (There are plenty of questions on SO about this.)