I'm trying to turn Data Icons into navigation. The icons are clickable in Firefox and Chrome, but they are not clickable in Safari. Thanks for your help! Here's my mark-up:
<span data-icon="!" aria-hidden="true" class="close"></span>
The issue was CSS related. I needed to add a width and height to the li and then display:block and height/width: 100% in the span.
Related
Whenever I try to create 3D Buttons by nesting elements within an element... I have no problems in Google and Firefox... however in IE10... there seems to be a disconnect between the .parent:active and it's children...
Something like this:
<ul class="checkout">
<li id="creditcard">
<a href="#" class="a-btn">
<span class="a-btn-left">Proceed to Checkout</span>
<span class="a-btn-slide"><img class="slide-icons" src="icons.png" /></span>
<span class="a-btn-right">
<span class="arrow"></span>
<span class="cards"></span>
</span>
</a>
</li>
</ul>
Here is a JS fiddle: http://jsfiddle.net/H75jN/
All of the Transforms work in IE10... which makes me even more confused about why the :active function is not working.
Am I targeting the wrong class?
Replace <a> with <button>
Add extra CSS:
padding:0 0 5px 0; /* This is necessary for the Box shadow to work in Chrome */
border:0;
outline:0;
overflow:visible; /* Necessary for any images to overflow past button edges */
cursor:pointer;
background:none; /* This eliminates grey background in FF and IE */
box-sizing:content-box; /* By default, Chrome BUTTONS are border-box, this fixes it */
Finish!
JS Fiddle: http://jsfiddle.net/D8nJ6/1/
BAM!
In IE9, there's still an issue with the rounded-borders, but it has something to do with the Rounded-Border + Background-Gradient combination. Still looking for a fix.
Issue: Slideshow
Details: There's a frame (which is just a transparent PNG around the slideshow)
What I'm trying to do:
Make the frame over the image and caption background but make the link and nav-balls on top of the png.
It works like I want in other browsers except for IE. I read more on the z-index bug for IE but that didn't help. Any suggestions or help is VERY very much appreciated.
Issue resolved.
To make navigation dots clickable, apply styles:
display:block; position:relative; // to frame
z-index:1001; //to .nivo-controlNav
To learn more link i suggest:
1) delete all z-index property that applies to .nivo-caption
2) add shadow div with z-index: 87 /*(87 for example)*/ below frame
The issue for this is that IE don't follow the z-indexing of an image, no matter how small or big the z-index you put in your image, IE will still follow the hierarchy level of the elements. If you really want to use z-indexing of an image in IE, you can wrap the image inside a div and put the z-index on the div, this will follow the right z-indexing on all browsers including IE.
// will not follow in IE
<div>first div</div>
<img style="z-index: -1;" src="image.png" />
<div>my div</div>
// will follow in IE
<div>first div</div>
<div style="z-index: -1;"><img src="image.png" /></div>
<div>my div</div>
When I zoomed in on an XHTML document containing an SVG, it works correctly in FF and Opera, but in Safari and Chrome the width of svg document is changed by zooming in and out(increased and decreased), Is there any way to fix this problem?
in the top of your code you have used % and px together in width, which should be changed only to percent
<span style="border:solid red 1px;display: block; width:100%px;">
to
<span style="border:solid red 1px;display: block; width:100%;">
not sure if that's your problem here but it should be changed
has anyone got the bug on Opera (and others) but not IE6 (here everything is OK) when the block (DIV) has a background-image (no-repeat) does not appear if the block has negative margin? Something like this:
#slide_desc {height: 60px;margin-top: -84px;background: url('back/slide_desc.png') no-repeat;}
IE6, IE7 - OK
IE8, Opera, Firefox, Chrome, Safari - BUG
No background image no PNG hacks
Just this HTML:
<div id="slider"> <img src="img/slide.jpg" height="300" width="730" border="0" /> <div id="slide_desc"> Lorem ipsum </div> </div>
and this CSS
#slide_desc {margin-top: -84px;background: url('slide_desc.png') no-repeat;}
If I add position: relative - works in Opera but doesn't work in IE6
If I change to position: fixed - everything is great but I'm not sure it's perfect way to solve the problem.
Becase of scrolling this scrolls too.
Looks like you just need to give it a height and width or else it is only as big as the text in that div:
Here is a fiddle:
http://jsfiddle.net/VrEvA/
And another with the background in the original div:
http://jsfiddle.net/VrEvA/1/
I have embeded images as link in href tag, but the images are not working as link in ie7 although the same page is working fine in firefox and ie8. Can anyone help me out of it?
Here is the code
<a href="example.com">
<div class="banner_box_1">
<img src="images/facilities.jpg" width="156" height="70" alt="facilities" />
</div>
</a>
The css applied on image div
.banner_box_1{
width:156px;
height:70px;
float:left;
margin:5px 13px;
}
I think the problem is bcoz of css which is messing up in ie7
Images converted to base64 do not work in ie7, it's an ie7 bug :(
http://dean.edwards.name/weblog/2005/06/base64-ie/
Edit:
Can you even use <div> inside anchor ?