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;
}
Related
Generally speaking, HTML layout is flow-based. Each element gets positioned after the one before it, either to the right of it or beneath it. There are plenty of exceptions, of course, that you can get by playing with styles, but even then, if you change the order of something, most things "flow" around it and make room for it.
But occasionally I see things that behave very differently, such as pages coming up with "dialog boxes" that float in the middle of the screen, that aren't constrained by the dimensions of the div they're parented by and don't displace other layout elements around them.
I'm trying to figure out a way to do something similar, but not quite the same. I've got a table that I'm using to display a grid (yes, actually using tables correctly) and I'd like to place an image on top of one of the grid cells. I can't put it in the cell, because it's larger than the cell and I don't want to stretch my grid out, but I want it to always display at the same position relative to the grid, even if the browser window scrolls or is resized.
I figure there has to be some way that I can do this. If I put an ID or Class on one of the <TD> cells, how do I create an <Image> that is not part of the <TD> or even the <TABLE> that it belongs to, but will always position itself over the top of that <TD> cell without displacing anything or affecting its layout?
To expand on both CJGreen and Napolux's suggestions, you can still place the image in the table cell, but position it absolutely.
[Edit] Since defining the position of table cells is supposedly illegal (therefore ignored by Firefox), you can wrap the content of each <td> in a <div> element (preferably with JS so you don't have to make massive changes) and then set the <div> position to relative:
CSS:
table td > div {
position: relative;
}
table td > div img {
position: absolute;
z-index: 999;
}
JS:
$(document).ready(function() {
$("td").wrapInner('<div />');
});
See the (updated) fiddle here - http://jsfiddle.net/teddyrised/qyu3g/
If you use
table {position:relative;}
then you can use:
table img {
position:absolute;
top: #px;
left: #px;
}
This will offset the image to a particular location within the containing table and take it out of the flow of the rest of the table around it.
If I understand it correctly you need to use offset properties together with position:absolute.
The absolute position takes your image out of the flow, the offset can give you the position of the element you want to overlay (the TD in your question).
Having the offset (px from left and top of the page for the TD) you can the move the image to the correct position.
Look here: http://jsfiddle.net/jrUsM/
jQuery documentation explains it very well.
I have the weirdest issue that I haven't been able to find a solution for. I have a table where one of the cells has its contents wrapped in a relatively positioned div element (essentially I'm showing a "progress bar" in a cell, so its a div with another div inside (that expands its width to the % completed), and a span inside that showing the value).
The table is inside a div that has its overflow-y set to auto, and a max-height of 400px.
In FF, Chrome, and IE8 and 9 it looks/works great, but in IE7, the cells with those progress bar divs continue to show their content and don't ever scroll with the rest of the table contents.
This JSFiddle http://jsfiddle.net/ujV4M/1/ shows what I'm talking about if you view it in IE7.
Edited: Add position:relative to the element containing the table
I removed the relative position, as I've known IE7 to cause issues with scrollable content areas with regards to elements that aren't statically positioned, and I added margin-left to the text:
http://jsfiddle.net/3H6eG/
Obviously my solution avoids the issue rather than solves it, but it looks like it works as it should. Or do you need relative positioning for a specific reason?
Adam
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/
I want to achieve something like this:
A) Is an square image, say 65x65.
B) This icon is another image which
need to be floated inside A.
C) The minimum length of the row is
the height of A. The maximum depends
of the length of the text
description.
Usually when I have floating images like A and B, I would put my container position as relative, and obsolute for the floating image, and that will do it, but I'm a little lost with the text here.
This is just going to be used on webkit browsers, if that is of any use.
If the image size is fixed and unlikely to change in the future, then I'd recommend applying position absolute to the image (what you're saying). I'm guessing your problem is that if the text is too short, the height of the image would exceed the height of the container. This is easily fixable with min-height:
.module {
min-height: 65px; /*your image height*/
}
You can view a demo here:
http://jsfiddle.net/RkeJJ/
This should work all the way down to IE7.
If your image size is variable, then I'd recommend display: table/table-row/table-cell, but this will work only on IE8+ and the rest of the modern browsers.
Me debes una caña! ;)
You know the width of image A (the large image). The title goes in a h1 for example, and the text in a p (or div), so set these two elements to have a left margin greater than the width of image A.
You can then float image A to the left and position the icon B over the image using absolute positioning.
Finally, I would have a wrapper div with overflow: auto to have a border (if needed) and to allow for a bottom margin to provide white space between the following element.
Partial answer: see my code snippet at http://jsfiddle.net/audetwebdesign/Nam52/
You just need to add the date element after the title.
I have a block element (DIV) who stretches across an entire page. It contains multiple floated DIVs of variable width. This element can live on many web pages (anyone can put it on their website). In FF on all sites it is rendered correctly and the floated DIVs are only as wide as their inner contents. In IE, it works sometimes- but on other sites it does not, and instead it stretches each floated DIV to the width of it's parent, which it should not be. Attached is an image to further exemplify (red DIV is container, black DIVs are floated).
http://img8.imageshack.us/img8/4734/screenrrl.jpg
(Image is Photoshopped, not an actual HTML render)
Found it! The issue is that I was using a single DIV to clear all elements inside the parent. Certain rendering modes in IE have a problem with this. Instead I replaced it by adding a clearfix class to the parent!
you can use this clearfix for ul (I suppose it is used on the screenshot):
#list { overflow: hidden; zoom: 1; }
instead of "clear: both;".