I'm trying to show an image when another image is hovered on. All works fine with Safari, but with Chrome and Firefox, the effect works and the image placeholder can be seen, but they fail to load the image. I have searched elsewhere and found topics to do with visibility:hidden etc, but none that deal with this issue cross-browser.
Here's the HTML:
<div class="profile-picture-wrap">
<a class="propic">
<img src="../images/propicsmall.jpg" width="142" height="194">
<span><img src="../images/profilepic.jpg" width="290" height="186" /></span></a>
</div>
And here's the CSS:
.propic span{
position:absolute;
padding: 5px;
top: 10px;
left: 10px;
display: none;
color: black;
text-decoration: none;
}
.profile-picture-wrap:hover .propic span{
display: block;
position:absolute;
top: -3px;
right: 900px;
left: 640px;
}
Really appreciate any help, thanks.
I tried out your sample code ... and it appears to work fine in Chrome, after one small edit.
I had to change your paths from ../images/image.jpg to images/image.jpg
Have you used the developer tools in Chrome to see if the resource (image) was loading properly?
I added z-index to .propic span css & change the left & right of span after hover to see it properly in jsfiddle window.
Check it here: http://jsfiddle.net/UH54X/1/
I am not sure that it will help you. I think you want like this only.
Turns out the images were .tiff files that had been renamed to .jpg. Chrome & Firefox don't seem to like this, and refused to recognise them as retrievable files.
Related
OK, so I have this website I maintain, uses WordPress, etc. One of the things the blog has is a little flag/ribbon thing in the upper-right corner that has three logos for the site's associated Twitter, Facebook and RSS feeds.
I want it to be an all-CSS hyperlink so I'm doing the HTML this way:
<div id="headerflag">
<a class="headerflagfacebook" href="http://www.facebook.com/(client's facebook link)"></a>
<a class="headerflagtwitter" href="http://twitter.com/(client's twitter link)"></a>
<a class="headerflagrss" href="http://feeds2.feedburner.com/(client's rss link)"></a>
</div>
and the CSS looks something like this
#headerflag
{
width: 151px;
height: 40px;
position: relative;
left: 708px;
top: 20px;
z-index: 3;
background-image:url('images/flag.png');
}
a.headerflagfacebook, a.headerflagfacebook:hover
{
width: 13px;
height: 26px;
position: absolute;
left: 36px;
top: 7px;
z-index: 4;
background-image:url('images/flag-facebook.png');
display: block;
}
(repeat for the other two with slightly different positioning offsets, image names, etc.)
And until very recently, it worked everywhere just fine, even in the WebKit-based Safari.
But now it's broken in Chrome:
The hovering works:
But the non-hover state is broken. I'm not completely sure, but I think the background image is being used again (that might explain the little triangles that disappear on hover - they're from the triangular notch on the right?).
I'd say this is a bug but I'm not sure and it still renders this way even in the Canary build.
Does anyone know why this suddenly broke in Chrome? Is it a bug? Or am I doing something wrong?
You should be using sprites.
Take a look at this tutorial. http://iamchristill.com/html/the-right-way-to-make-rollover-buttons/
Works across browsers.
I have this problem:
As you can see that my popup is not hiding the two buttons which are displayed on the page on IE9 but works fine on Mozilla. I have this on my CSS styles on that toggle button:
.Test.toggle-button {
background-image: url("../../../images/expand16.gif");
background-position: left top;
background-repeat: no-repeat;
float: left;
height: 30px;
margin-left: 10px;
padding-left: 18px;
white-space: nowrap;
width: 20%;
}
This is how my HTML looks like:
<div class="pay-instruction-labels">
<div class="pay-instruction-title">
Payment Instructions:
</div>
<span class="current-details toggle-button">Current</span>
<span class="prior-years-details toggle-button">Prior Years</span>
<div class="pay-instruction-fields">
What is going wrong here?
Could be a z-index issue. Can you try giving your popup container element position:relative and a z-index:9999 ?
This might be a native rendering issue: IE9 uses Windows buttons; these are rendered by Windows outside of the normal HTML renderer.
Try to replace the buttons with something that just looks like a button (for example a link that is styled with an image).
It was a position: relative fault. Fixed it, it worked. Thanks everyone :)
I have been searching for an answer for a good hour without luck so It may be OK to ask my silly question:
I am trying to overlay a legend over a map. The map is generated with openlayers and lives in a div called map. the legend is an html table but could be a picture as well and lives in another div called legend.
hence the HTML
<body>
<div id="map"></div>
<div id="legend"></div>
</body>
and the CSS
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
font-family: Arial;
font-size: 9px;
text-decoration: none;
text-align: left;
}
html, body {
background-color: red;
}
#map{
position:relative;
}
#legend{
position:absolute;
top: 1%;
left: 100px;
}
This works just fine in Firefox, Safari and Chrome, but not in IE8.
In IE8 the legend is shown in its place, the red page background is behind but the map div has disappeared. Note that IE still loads the map tiles etc but seems to be putting them either behind the background or somewhere not on the screen...
If you have any suggestions, greatly appreciated!
Without the whole HTML page, it can be hard to give you a correct answer, to know what's exactly going on. Though you can use conditional IE tags to make your design work in Internet Explorer. More information here.
You will find that most IE8 quirks can be fixed by changing the positioning by a few pixels, position type, the display: value, or making elements at display:none;.
Firebug is your friend.
I am having problems placing a logo in my header. The header is in a span of 257px. It "appears" to place fine in Firefox/Chrome/Safari on both Mac and PC. With IE 8/9 it "appears" the problem exits. The twist here is that it actually works in IE and not the other browsers. I really need at least 21px for the padding-top.
With the CSS below, IE is actually correctly rendering it but all the other browsers are adding close to 20px in the padding-top.
The CSS as it stands now, after many different iterations is.
.img {
display: block;
padding: 1px 0 21px 8px;
width: 200px;
height: 40px;
}
Any help tracking this down would be appreciated.
how about using absolute positioning withing a relative positioned span/div?
say for example:
<div style="position:relative;">
<img src="..." style="position: absolute; top: 21px">
</div>
this would place the image 21px from the top of the parent div.
to illustrate it better. i made a jsfiddle
http://jsfiddle.net/RD26R/
Dear all, is there a way to scroll, as in relatively shift the contents of, an element without using javascript, and only using CSS?
If that matters, the element in question has overflow:hidden and white-space: nowrap to make it 'hide' some parts of its content. The element is normally scrollable with javascript, but needs to be properly shifted upon initial rendering (and without further interactive scrolling, of course) in case javascript is disabled.
No, there is no way to scroll items on a page (unless it's an iframe with the hash portion of the url included, in which case the browser will control the initial positioning of the scroll, not css or html) using only CSS and HTML.
No. Not with CSS directly.
You could simulate it, by wrapping the contents with a div and giving it a margin-top value for the amount of scrolling you want.
(remember to remove it/set it to 0 with javascript when it is enabled)
update
A cool idea is what Jamie, mentions in his answer, if it fits your requirements.
update 2
Here is another solution i created out of Jamie's idea, that needs no frames.
Put an anchor <a name="anchor_name">..</a> at the place you want the scrolling to be and use a
<meta http-equiv="refresh" content="2;url=#anchor_name_here">
to auto-scroll there. (the meta element should go in the head though for (x)html conformance)
example at http://www.jsfiddle.net/gaby/f3CVY/5/
works great in all browsers i tested it (IE, Chrome, FF, Opera, Safari)
There is also another method - which is quite hacky - but it works without a reload.
The solution I've created works in the following browsers:
Firefox 4+
Safari 5+
Chrome 6+
Opera 11+
IE 10+
Android 2.3+
It's really a bit hacky, so see whether you would use it or not. :)
A little explanation
I used the HTML5 attribute autofocs on an <input>-field. As this will focus the input, it has to get it into the viewport. Therefor it will scroll to the given position. To get rid of the highlighted outline and to not see the input at all, you have to set some styles. But this still forced Safari to have one blinking pixel, so I did the trick with the span, that acts like an overlay. Note that you can't simply use display: none as this won't trigger the autofocus (only tested this in Safari).
Demo
Try before buy
The demo will run in Safari and Chrome only. IE and Firefox seem to not fire autofocus in an <iframe>.
CSS
div.outer {
height: 100px;
width: 100px;
overflow: auto;
}
div.inner {
position: relative;
height: 500px;
width: 500px;
}
div.inner > input {
width: 1px;
height:1px;
position: absolute;
z-index: 0;
top: 300px;
left: 200px;
border:0;
outline:0;
}
div.inner > span {
width: 1px;
height:1px;
position: absolute;
z-index: 1;
top: 300px;
left: 200px;
background: white;
}
HTML
<div class="outer">
<div class="inner">
<input type="text" autofocus></input>
<span></span>
</div>
</div>