I'm trying to put an (hover) image on top of its parent div. I use an older version of www.cssplay.co.uk/menu/magnify.html, though a bit modified to my needs.
I found a way to achieve what I want earlier in a previous site => http://www.keurslagergeertenkristel.be/. In the center you'll see a picture containing a black/white photograph at left and some pink/bordeaux tints and some text. If you hover with cursor, the picture will enlarge so you can see it properly (I know there might be an issues with small screen resolutions, but thats not the problem right now)
I'm trying to do the same thing again in a new site I'm building, but I can't get it to work :s The image always stays in its parent div.
You can check out here => http://www.vermeulenklasseslager.be/NEW/.
The CSS for the images for both websites is identical, so it must be something with the parent div I guess, but I can't see it.
I tried a lot of variations, using display:block, position:relative (for parent div), overflow:hidden and auto, adding extra divs or spans, adding z-index...
UPDATE: I JUST DISCOVERED THE PROBLEM ONLY HAPPENS IN IE11. (wich makes I understand even less why, because the first website works in all browsers)
I think the solution to that is:
position : fixed
in ie 10/11 it crops the large image because of a border-radius property on the content div. The solution is to remove overflow:hidden and clear this container with standard clearfix:
#content:before,
#content:after {
content: "";
display: table;
}
#content:after {
clear: both;
}
#content {
zoom: 1;
}
Related
As the title suggests, I have two stacking <div>s.
They are placed in an absolutely positioned container that covers the whole page. Basically, those 2 <div>s, taken together, should also cover the whole space of the containier.
Another important aspect is that these <div>s have dynamic content. The bottom one can have a lot of content, so an overflow: auto rule is required. The top one can also have dynamic content, but it's not really expected to grow out of control. Thus, I don't want to cut the overflow.
The main question is: How can the top one affect the other one's height without the risk of overlapping? (I prefer a CSS only solution, or something that wouldn't imply JS pixel values computations)
Here are two images that describe the best what I'm trying to achieve:
"initial state"
a state with some more data in the top div
Here is also a JSfiddle for convenience: http://jsfiddle.net/60qan4t6/
This is the kind of situation that display:flex handles extremely well. Update to your fiddle:
http://jsfiddle.net/60qan4t6/1/
Note, I quickly wrote this, so it's missing browser prefixes to support some browsers, but the fiddle should work in Chrome just fine.
Be sure to see check browser support for flexbox here:
http://caniuse.com/#feat=flexbox
If it's acceptable to set height to div's you can use such an example
.top-area {
background: red;
overflow: hidden;
height: 40%;
}
.bottom-area {
overflow: auto;
height: 60%;
}
http://jsfiddle.net/xqh2vw2g/
I'm getting little desperate here. I have this page with the contain sized background images and since it's responsive design, there are relatively sized and positioned bubbles around the layout containing images and headings (try to resize the browser window to see why is everything positioned and sized that way). Image is visible by default, heading is visible on hover/touch. Headings should be centered vertically and horizontally, that's why I am using display table on the parent element and display table-cell on the heading itself. The problem is that the IE (9 to 11) reproduces the heading next to the parent, height is a-ok; the width however, is not. Every other browser works fine. I am out of ideas how to fix this and my knowledge of browser behavior is obviously not such vast as yours. Any clues how to fix this?
Live code can be found here: http://klient.triakis.cz/sa/products.html
Looks like IE interprets the image as the first cell column, thus pushing the label to the right as a second column.
Seems to work if you give the img absolute position:
.products li a img {
position: absolute;
z-index: -1;
}
Issue
I need to vertically center the order_form div (light gray) and keep it on the very right side of each of the product boxes on our website. The div's height is non-fixed, and can occasionally fill most of its allowed vertical space (which is 160px because of the product image). The picture div vertical-aligns perfectly. I made an example out of one product box and simplified it as much as possible while leaving its html intact.
Here's a jsfiddle displaying the problem (sorry for the lack of images!)
I realize there are a lot of posts on this topic; I've read many of them. I've tried everything I could think of, and everything I have found in all the articles, solved questions, even every little clue I've found over the past three+ hours. Nothing has worked.
I'm completely lost on how to solve this, and I'm sorely tempted to change the picture and order_form divs to a table just for the sake of aligning ._.
Help?
Several things I've tried:
display: table-cell; vertical-align:middle; on the order_form div, and adding display:table to its parent.
The above with display:table on an added wrapper div instead.
adding a wrapper div and using margin + negative margin.
display:table-cell; vertical-align:middle; and adding a wrapper div with left:160px; display:table. The wrapper div's width is never correct, breaking the order_form.
vertical-align:middle on the order_form and having height equal to line-height on its container
several other approaches i do not remember
saying please.
Asides
I need this to be functional on somewhat older browsers (ex: IE8), without using any javascript.
Background info: I've recently started working on our site and, among other things, I've since converted all the product boxes from tables to divs and cleaned up the css a bit. The problem is the tables, being tables, handled the aligning really well...
Also: The next step is to convert the buttons from images to prettyful css links so they scale nicely along with the text (and ditch the table there, too). Don't dock me points for what I haven't touched yet!
If I understand the question rightly, one option would be to set div.order_form to display: table; height: 160px; and then create a div inside that (wrapping around all its content) and give that inner div display: table-cell. That still requires the use of the absolute positioning, which isn't ideal, but it does work.
If you want this on old browsers too..
wanna use some jquery scripts?
The height will auto adjust depending on your order_form height.
See DEMO on jsfiddle http://jsfiddle.net/kdNnw/
JQUERY
$(document).ready(function() {
// get dynamic height of order_form and calsulate margin-top css
var ver_top = ( 160 - $('.order_form').height()) / 2;
$('.order_form').css( "margin-top", ver_top+'px' );
});
I have a container with a height of 100% so the height will be dynamically changed to text inside the container.
anyway, the container have a background with a custom image (using background-image).
now, when I create a < div id=blabla" > with { float:left; width: 100px; height:100%; }, the background which defined in my container doesnt show on the div.
but if I remove the float:left, the background does shows up
any ideas what the problem could be ?
To fix this, add the following as you mention to the container element.
overflow: hidden;
If you are still seeing this issue in IE6/7, you will need to enforce hasLayout, this is done by adding this to the container element.
zoom: 1;
Hope the IE6/7 addition helps you out.
It's a little unclear from your question but I'm assuming the floated div is a separate div inside of the container div? By default a floated item is not "contained" by the container. This is just the way floats are supposed to behave. If you put "overflow:auto;" on the container div then you will generally get the behavior you desire, but read a more thorough discussion of the topic here: http://www.ejeliot.com/blog/59
I made it.
The solution was to add
overflow:hidden;
to the container div.
I can't for the live of me figure out how to get one element in my layout to be placed properly in IE 7. You can see the page here:
http://www.iancreates.com/debbie/contact/
Works fine in Firefox, but if you look in IE 7, you'll see the sidebar is beneath the body content. I've tried everything I could think of (floating both divs, changing width and margin/padding to account for IE box model) but to no avail.
Here's the relevant CSS:
.content-left {
width:670px;
height:auto;
margin:0 30px 0 10px;
padding:0;
float:left;
}
.content-right {
width:240px;
height:auto;
margin:0;
padding:0;
float:left;
}
I appreciate the help!
This is a classic IE problem, combined with a slightly impractical page layout.
You have set your peace-main div to have the width 100%, so there is no room for the right content beside it. In standards compliant browsers however, the div doesn't have any height (as it only contains floating elements), so it's not a problem that the right content ends up below it. In IE7 the div is expanded to contain it's content, i.e. the left content div, so it gets a height, and as the right content goes below it, it ends up below the left content also.
Just remove width: 100%; from the peace-main style.
Posting the CSS code would be helpful. Try using "position".
one thing you could do is set your peace-main to float 'left' and only have a width of 700px (so there is enough room for the sidebar)
then the sidebar should also have it's float set to 'right'
but i would actually suggest you try one of these methods :
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
#Guffa's answer is correct in my estimation. I think that your page may have validation errors also that are causing it to be parsed incorrectly. Looking at your markup, it looks like you had wanted div.content-right and div.content-left to be in the same container div, however they aren't, leading the the problem as #Guffa pointed out.
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png
If they were in the same container however, as I think you intended, then this problem would be solved as well. Try and fix this extra div closing tag, see what that does:
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg