I have a pseudo-gallery set up to display thumbnails and display enlarged image when hovered on thumbnails. The enlarged image is positioned relative to its parent thumbnail.
This works in Google chrome and Mozilla Firefox but not in IE8.
I have done some research with no progress on the matter. In IE8, both thumbnail and enlarged image are displayed. Neither 'Visibility: Hidden', 'hover' nor 'absolute position' seem to work in IE8.
Would appreciate any help. the following is a snippet of code:
.main{
float:right;
display: block;
Background-color:transparent;
Margin: 20px 55px 20px 10px;
}
.main img{
display: block;
border:0;
}
.main:hover{
background-color:#ffffff;
position: relative;
visibility:visible;
z-index: 1400;
}
/*for bigger images*/
.main bigger {
width: 500px;
height: 500px;
position: absolute;
left: -2000px;
visibility: hidden;
overflow: hidden;
background-color:transparent;
border:0;
}
.main:hover img{
z-index: 1400;
position: relative;
}
.main:hover bigger{
z-index: 1500;
display:block;
width: 500px;
height: 500px;
top: -100px;
left: 200px;
overflow: visible;
visibility: visible;
background-color: transparent;
clear: none;
}
THANKS
/*for bigger images*/
.main bigger { width: 500px; height: 500px; position: absolute; left: -2000px; visibility: hidden; overflow: hidden; background-color:transparent; border:0; }
.main:hover img{ z-index: 1400; position: relative; }
.main:hover bigger{ z-index: 1500; display:block; width: 500px; height: 500px; top: -100px; left: 200px; overflow: visible; visibility: visible; background-color: transparent; clear: none; }
is bigger supposed to be an element or a class. if it's a class, it should be .bigger , right?
it looks like this: <a class="main" href="#"><img src="" /><bigger><img src="" /></bigger></a>
Don't do that.
The <bigger> element doesn't exist. You can't just make up your own elements, even in XHTML; not without creating a custom DTD anyway, which probably still wouldn't make it work in IE, since IE doesn't really support XHTML.
Chrome and Firefox are a bit more lenient in how they deal with unrecognized elements than IE8, which is why it works in those.
I would suggest you add a bigger class to the image instead: <img src="" class="bigger" /> and get rid of the <bigger> element.
Related
So I have an "in-development" website and I'm seeing a weird issue in Google Chrome (Edge/Internet Explorer is not showing this bug, but works as intended, which is a first!)
The two "Next" and "Previous" controls for cycling through the header images have a z-index of 666 and are floated left and right, but it seems that Google Chrome is not detecting a) the hover event, b) the click (as far as I can tell). I don't know if this is related to the menu at the bottom of the header...
Any help would be much appreciated!
CSS Code below:
#header #coverControls-prev,
#header #coverControls-next {
position: relative;
height: 100%;
width: 100px;
background-color: rgba(0,0,0,0.0);
opacity: 0.25;
text-align: center;
transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
z-index: 666;
}
#header #coverControls-prev:hover,
#header #coverControls-next:hover {
background-color: rgba(0,0,0,0.25);
opacity: 1;
}
#header #coverControls-prev {
float: left;
clear: none;
}
#header #coverControls-next {
float: right;
clear: none;
}
#header #coverControls-prev p,
#header #coverControls-next p {
display: block;
position: absolute;
top: 50%;
margin-top: -50%;
width: 100%;
font-size: 10vmin;
text-align: center;
z-index: 667;
}
#menu {
position: absolute;
bottom: 0;
left: 0;
display: block;
padding: 5px 2vw;
height: 3em;
width: 100vw;
background-color: rgba(255,255,255,0.5);
text-align: left;
white-space: nowrap;
overflow: hidden;
color: #000000;
z-index: 777;
}
Website in question: http://dev1.deliriousdreams.co.uk/
add this to your a tags in css. Your anchor tag needs a width and height. And display:block allows you to add width and height for an anchor tag.
width: 100px;
height: 100px;
display: block;
I have a series of floated divs with absolutely positioned images inside each one.
If this image is larger than the div width then it will appear cropped.
Although I have set overflow:visible to the floats and their parent div they still crop the image.
Here is a jsfiddle showing an example: http://jsfiddle.net/RkpAe/1/
CSS:
#main, #memorycontainer { height: 100%; width: 100%; overflow: visible; }
.memory { width: 250px; position: absolute; z-index: 98; width: 100px; height: 100px; overflow: visible; background: red;}
.memory { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 100; -webkit-border-radius: 50%; cursor: pointer; }
.memorytile { position: relative; z-index: 97; background: yellow; height: 300px; width: 200px; overflow: visible; float: left; margin: 0; padding: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
HTML:
<div id="main">
<div id="tile1" class="memorytile">
<div class="memory" style="top: 50px; left: 150px;">
Icon</div>
Background Image
</div>
<div id="tile2" class="memorytile"></div>
remove
position:relative;
from
.memorytile{}
this should fix the problem.
Both your memorytile divs are set to the same z-index but because tile2 is after tile1 it is treated as being above it. memory is within tile1 (which is now below tile2 and so you get the effect you are seeing.
Change the z-index of tile1 to be higher than tile2 and it will work.
I updated your fiddle: http://jsfiddle.net/RkpAe/2/
There is also a nice explanation of this on http://webdesign.tutsplus.com/
The output of this below code DIV #imagemiddle is not stretching till the browser full width, I want the top tool bar has to be fixed and the below div to be position: relative and not absolute or fixed.
HTML
<div id="topbar"></div>
<div id="imagemiddle"></div>
CSS
#topbar {
position: fixed;
display: inline-block;
top: 0px;
left: 0px;
background-color: #2D2D2A;
border-bottom: 2px solid rgba(0,0,0,0.2);
height: 42px;
width: 100%;
z-index: 5;
overflow-x: visible;
overflow-y: visible;
}
#imagemiddle {
position: relative;
display: inline-block;
top: 40px;
background-color: #4D4D4D;
border-bottom: 2px solid rgba(0,0,0,0.2);
height: 44px;
width: 100%;
z-index: 0;
overflow-x: visible;
overflow-y: visible;
background-color: "red"
}
A simple solution, you need add margin:0; to the body in your css.
body{ margin:0;}
DEMO
Your browser's default body margin is the problem:
body {margin: 0;}
http://jsfiddle.net/E8uNY/
Consider using a reset spreadsheet or creating a custom one to avoid cross-browser CSS inconsistencies.
Also, when using words for CSS colors (red), don't put them inside quotes.
background-color: red;
I'm centering a div inside another div using percentage margins. I do this because the parent div is going to change sizes based on browser size.
See this jsfiddle for a demo.
My CSS:
#test-wrap {
position: absolute;
width: 400px;
height: 250px;
background-color: pink;
}
.white-wrap {
position: absolute;
width: 50%;
height: 50%;
background-color: white;
left: 50%; margin-left: -25%;
top: 50%; margin-top: -25%;
}
This works fine in Safari, but in Chrome the child div is appearing higher than it should.
Perhaps there's a better way to achieve such a thing, that works on all browsers and doesn't rely on pixel margins? Any suggestions would be greatly appreciated!
You should use the attribute margin. So your CSS of white-wrap should be:
.white-wrap {
position: relative;
margin: 0 auto;
width: 50%;
height: 50%;
background-color: white;
}
This is my favorite way to accomplish this (works in all modern browsers and IE8+).
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
And here is a jsFiddle that mimics your example.
Try
#test-wrap {
display: table-cell;
width: 500px;
height: 500px;
background: gray;
vertical-align: middle;
text-align: center;
}
.white-wrap {
display: inline-block;
width: 200px;
height: 200px;
background: red;
}
You should set those properties too :
* {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
Once you defined a size for a DIV or anything else, the margin, padding and everything will be in the sizing and won't increase the size.
I'm trying to hide the overflow of a circular div. Its child div is hidden from view when outside the container area (good), but remains visible when only outside the radius area (bad)
.outer{
position:relative;
border-radius: 50%;
width: 200px;
height: 200px;
background:#dedede;
overflow: hidden;
}
.inner{
position: absolute;
top:150px;
left:150px;
width: 50px;
height: 50px;
background-color: red;
background:#98de45;
}
Overall I'd like to achieve the effect at http://buildinternet.com/project/mosaic/1.0 but using circles - is there a way to do this?
Fiddle:
http://jsfiddle.net/a9Feu/
Edit: This works fine in Firefox and IE 10, but not Chrome or Safari
Like this?
.outer{
position:static;
border-radius: 50%;
width: 200px;
height: 200px;
background:#dedede;
overflow: hidden;
}
.inner{
position: static;
top:150px;
left:150px;
width: 50px;
height: 50px;
background-color: red;
background:#98de45;
}
I hope this should work
http://jsfiddle.net/a9Feu/35/
.inner{
position: absolute;
**border-bottom-right-radius: 100% 110%;**
top:150px;
left:150px;
width: 38px;
height: 35px;
background-color: red;
background:#98de45;
}