in IE 9 related to the browser's zoom function.
In the code below,i have a set of div (class='box', 200pixels wide)) all floating inside a large parent div(class='scrollarea',5.000 pixels wide). The visible portion of the page is controlled by the top most div (class='content',400px wide).
When user selects a link a different div is displayed (using anchor tags).
The issue occurs when you have selected the option "Scroll to div 2" and then you try to zoom out the IE browser window (lets say to 70%) The inside divs are repositioned during the zooming and the initial position is lost. Please notice that this only occurs in IE.
Is there a way to fix this?
.content
{
background-color: Yellow;
width: 400px;
overflow: scroll;
}
.scrollarea
{
width: 5000px;
}
.box
{
width: 200px;
margin-right: 200px;
background-color: gray;
float: left;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Scroll to div 1 Scroll to div 2 <a href="#area3">
Scroll to div 3</a> Scroll to div 4
<br />
<br />
<div class="content">
<div class="scrollarea">
<div id="area1" class="box">
DIV 1
<br />
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area2" class="box">
DIV 2
<br />
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area3" class="box">
DIV 3
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area4" class="box">
DIV 4
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
<head><!--[if IE]>
<meta HTTP-EQUIV="REFRESH" content="0; url=crap.html">
<![endif]-->
</head>
no needs to be IE <= 9 today
Related
I have an image and a text side by side (image to left, text to the right).
Any idea on how to get the image height to resize according to text paragraphe height (and width staying proportional to height) instead of wrapping text around the image.
This is as far as I was able to go :
<div style="display: table; width: 100%;">
<div style="display: table-cell;">
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff" style="width:auto; height:auto;">
</div>
<div style="display: table-cell; vertical-align: top;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
Maybe a flex solution like this :
Go full width and resize the screen, it's working but there is some bugs when the image start growing faster (so we may limit this with media query or max-height)
.container {
display: flex;
width: 100%;
}
.container>div:nth-child(1) {
flex:0;
width: fit-content;
}
.container>div:nth-child(2) {
flex: 1;
}
img {
width: auto;
height: 100%;
max-height:500px; /* Limit the height to avoid bugs when the image get bigger */
}
<div class="container">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="container">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation u
</p>
</div>
</div>
<div class="container">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
Here's what you're asking for:
Image changes height according to paragraph height. Which means...
Image changes width, which means...
Paragraph re-flows in remaining space, most likely resulting in new height, which means...
You're back to step 1.
Given the above, there are two possible scenarios:
You're lucky and at some point 3. won't result in paragraph changing height, hence not triggering 1. => your script stops.
You're not so lucky and 3. always triggers 1. alternating between 2 image heights / paragraph reflows. The page dances/flickers before you and it's blocked rendering until it crashes the browser.
Additionally, in some cases the image will get enlarged way above its natural size, which should be avoided.
With the reserve it's really not a good idea to use this in a production environment, here is what you asked for. To my surprise, at least for the image + paragraph you use in your example, it doesn't crash the browser. But I'm pretty sure there are sizes at which it would. Feel free to test it out:
function bestFit(el) {
let image = $('img', el),
paragraph = $('p', el);
if (image.width() < paragraph.width() / 1.5) {
image.css({
height: paragraph.height() + 'px',
width: 'auto'
});
if (image.height() !== paragraph.height()) {
bestFit(this);
}
} else {
image.css({
width: image.closest('.best-fit').width() * .4 + 'px',
height: 'auto'
});
}
}
function resizeImages() {
$('.best-fit').each(function(){bestFit(this)});
}
$(window).on('load resize', resizeImages);
.best-fit {
display: flex;
position: relative;
}
.best-fit img {
padding: 1em 0;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="best-fit">
<div>
<img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff" style="width:auto; height:auto;">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
Edit: I've added a small tweak to not allow image to get above 40% of total width.
I have a jsfiddle here - http://jsfiddle.net/bva700wx/5/
It's a really simple bootstrap layout.
It's 2 row's that contain cols with an image and one with text.
The text and the image can vary in height.
I need the height of both columns to be the same.
If the text is taller I need the image col to the same height
If the image col is taller I need the text col to be the same height.
I then need the vertically center the image and the text.
I thought this would be easy with display: table; and display: tabel-cell;
Any see what I doing wrong
<div class="container">
<div class="row">
<div class="col-sm-3 box text-center">
<img src="http://placehold.it/100x50" />
</div>
<div class="col-md-9 box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-3 box text-center">
<img src="http://placehold.it/100x150" />
</div>
<div class="col-md-9 box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
Floating interferes with vertical alignment. I modified your fiddle to give you a working example.
I have a grid with one div taking up around 30% and the other 70%. In the 30% div, I have 4 images stacked vertically. In the 70% div I have content. How could I dynamically resize and crop the 4 images equally so they equal the height of the 70% content div. I know I could resize the images manually, but I'd like them to auto-adjust if content is added or removed. Also, the design is responsive. Here is a jsfiddle:
http://jsfiddle.net/fETtm/
Here is my HTML:
<section>
<div id="inner-content" class="wrap">
<aside class="fourcol first">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
</aside>
<article class="eightcol">
<h3>H3 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</section>
Thank you for any help.
overflow: hidden will cut anything outside the element it is applied (here .wrap your container).
Demo: http://jsfiddle.net/fETtm/1/
By removing your images from the flow (position: absolute), only the right column is still in the flow and will define the size of its container. Now any bit of image that is outside this box won't be displayed.
As the left column was removed from the flow, your text now occupies the whole width of its container so it needs padding-left (same value as the width of your images).
HTML: same as yours
CSS:
.wrap {
position: relative;
overflow: hidden;
outline: 1px dashed purple;
max-width: 1140px;
width: 96%;
margin: 0 auto;
}
.fourcol {
width: 31.491712705%;
position: absolute;
}
.eightcol {
width: 65.74585634900001%;
position: relative;
float: left;
margin-left: 2.762430939%;
padding-left: 31.491712705%;
}
.first {
margin-left: 0;
}
i m having an issue with IE 9 related to the browser's zoom function.
In the code below,i have a set of divs (class='box', 200pixels wide)) all floating inside a large parent div(class='scrollarea',5.000 pixels wide).
The visible portion of the page is controlled by the top most div (class='content',400px wide).
When user selects a link a different div is displayed (using anchor tags).
The issue occurs when you have selected the option "Scroll to div 2" and then you try to zoom out the IE browser window (lets say to 70%)
The inside divs are repositioned during the zooming and the initial position is lost.
Please notice that this behaviour only occurs in IE.
I ve tried to set the distances using percentages instead of pixels , again with no result.
Is there a way to fix this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.content
{
background-color: Yellow;
width: 400px;
overflow: scroll;
}
.scrollarea
{
width: 5000px;
}
.box
{
width: 200px;
margin-right: 200px;
background-color: gray;
float: left;
}
</style>
</head>
<body>
Scroll to div 1 Scroll to div 2 <a href="#area3">
Scroll to div 3</a> Scroll to div 4
<br />
<br />
<div class="content">
<div class="scrollarea">
<div id="area1" class="box">
DIV 1
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area2" class="box">
DIV 2
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area3" class="box">
DIV 3
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
<div id="area4" class="box">
DIV 4
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
(Apologies for the title. The problem is much more easily demonstrated than named.)
I have two elements: a content container (#content) and an ads container (#ads). The content container will be on every page of a site. The ads will be on some pages and are of a fixed width.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
#container {
width: 800px;
border: 1px solid blue;
}
#ads {
float: right;
border: 1px solid lime;
}
.ad {
width: 100px;
height: 100px;
background: gray;
}
#content {
overflow: hidden;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<ul id="ads">
<li class="ad">Buy Coke</li>
<li class="ad">No, Buy Pepsi!</li>
<li class="ad">Coke bought more ad space</li>
</ul>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
(Alright, I admit that this isn't really my code, but the content/ads simplification makes my question a lot more straightforward.)
What I have here is basically a perfect setup in that it allows for the #ads list to be removed, and the #content to naturally reflow to take up its space. Furthermore, I have not specified the width of #content anywhere in the stylesheet. This offers an extra degree of flexibility: the layout can be used with a container of any width.
But I'm a perfectionist; I don't want the ads to come before the content in source order.
My question: is there a way to accomplish this layout that satisfies the following requirements:
#ads follows #content in the source
Removing #ads from the source results in #content taking up the entire width of its parent (#container) without CSS changes
The width of #content is not explicitly written into the CSS (i.e. The only change needed to make the page wider is to modify #container's width)
if you're not scared of css3 (basically meaning, you don't have to bother about ie) this is indeed possible:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{display:-moz-box; -moz-box-orient:horizontal; width:500px; background:yellow;}
.content{-moz-box-flex:1; background:red;}
.ads{background:blue; width:100px;}
</style>
</head>
<body>
<p>with ads:</p>
<div class="container">
<div class="content">content</div>
<div class="ads">ads</div>
</div>
<p>without ads:</p>
<div class="container">
<div class="content">content</div>
</div>
</body>
</html>
this is firefox only, be sure to apply the corresponding vendor prefixes (-webkit-, -o-) for other browsers. to make this work in ie though there will be some javascript to write.
requirements 1 & 3 are contradicting each other. if you want that #ads follows #content in the source and not provide width to #content then ads will be shown below the content and not in the right.since #content doesn't have width it will occupy full width of container. I think you need to give away with requirement 1.The way it is done now is absolutely fine.