I'm doing some customizations to a shopify theme for a client, and I've included a simple snippet that is just a grid of three images with a description beneath each one. The containing div of each image/description set is floated.
It renders perfectly fine on every browser except IE, which is adding some several hundred pixels of space beneath the grid. When I comment out the images, and leave everything else, the space disappears. I've tried all sorts of things, and am really at a loss on this one.
Here's my code (I took out img src and hrefs to keep it clean):
<style>
.homePageGrid {
margin-top: 125px;
margin-bottom: 125px;
}
.homePageImageGrid {
float: left;
width: 33%;
box-sizing: border-box;
padding-left: 2%;
padding-right: 2%;
}
.homePageImageGrid img {
border-radius: 10px 10px 0px 0px;
width: 100%;
}
</style>
<div class="homePageGrid">
<div class="homePageImageGrid">
<img src = "#" width = "100%">
<div class = "homePageImageLinkBox">
Cook with xx
</div>
</div>
<div class="homePageImageGrid">
<img src = "#" width = "100%">
<div class = "homePageImageLinkBox">
Shop with xx
</div>
</div>
<div class="homePageImageGrid">
<img src = "#" width = "100%">
<div class = "homePageImageLinkBox">
Give with xx
</div>
</div>
<div style = "clear:both"></div>
</div>
I've inspected the website HTML Code and find out why there is huge vertical space. Its happened because in body element display:flex property are added which I don't think is required there.
Remove display:flex property from the body element and it will perfectly work in IE as well.
Related
I have a mostly responsive Wordpress website with some images aligned either left or right. I want to remove the float property of these aligned images when they occupy a percentage of the screen (about %50) as it's causing issues with how the text is displayed (one word next to an image, then followed by the rest of the paragraph).
When I remove the float property I get exactly the behaviour I want from the website, but I don't know how to set it so it only triggers under these conditions.
Below is the CSS for the affected images.
img {
display: inline-block;
max-width: 100%;
}
.align-right {
float: right;
}
You should use javascript to calculate the width of window and compare to width of image.
function myFunction() {
var img = document.getElementById("Image");
var div = document.getElementById("myDiv");
if (img.offsetWidth > window.innerWidth / 2) {
div.style.cssFloat = "none";
}
else {
div.style.cssFloat = "right";
}
}
img {
display: inline-block;
max-width: 100%;
width: 400px;
background-color: lightgrey;
height: 200px;
}
<body onresize="myFunction()" onload="myFunction()">
<div>
<img id="Image" src="" alt="Image" />
<div id="myDiv" style="background-color: lightgrey;">
Hello This is Div.
</div>
</div>
</body>
Show the result in full page for your better results.
i have 2 images.My constraint is that I have to put a new div after the end of the 1st image.But they come on different lines.I googled a lot and found that float:left does the trick
I am already using it,but still they are coming in different lines.I dont know where I am going wrong.
Jsfiddle
span.tab {
padding: 0 50px; /* Or desired space*/
}
.span.tab {
display: inline-block;
float:left;
}
#div23 {
display: inline-block;
float: left;
}
#topdiv1 {
display: inline-block;
float: left;
}
#topdiv3 {
display: inline-block;
float:left;
}
html
<br />
<div id='topdiv1'><div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
<div id='div23'>
<span class="tab"></span>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div> </div>
Please help.
You don't apply the float to the parent container. You apply the float to the child elements:
#topdiv3 > * {
float:left;
}
http://jsfiddle.net/samliew/b9TWE/1/
If you want to remove the space between the images, remove the span.
http://jsfiddle.net/b9TWE/2/ this fixes it, you just need to have the <a> containing the first image to float
#topdiv3 > a{
float: left;
}
More on how floats work (great article)
By floating the first <a> containing the image you remove it from the regular document flow. the <div> containing the seconds image will resume the normal flow and position itself next to the <a>
Your topdiv3 must be closed before div div23.
<div id='topdiv1'>
<div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
</div>
<div id='div23'>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div>
</div>
</div>
http://jsfiddle.net/arunu/8gvvr/
I've tested it on firefox and it worked the way you did.
But anyway, your html markup is a little bit confuse, doesn´t it?
I've trying to do something that I'm sure is simple, but I can't do it.
All I want to do is have an image and then some text after that image, and be able to control accurately the amount of space between the image and the text.
Here's my code:
<div class="wrap"><div style="width:189px;""position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189">
</div>
In my style sheet, wrap has these attributes:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
I want my text to look like this directly below the image:
Username
Age
Location
Currently, I just add loads of break tags to control where I have the text, but that's messy and there must be a better way.
Thanks in advance for any help.
<div class="wrap">
<div style="width:189px;position:relative;float:left;top:5px;">
<img src="30000000_1.jpg" style="position:absolute" width="189" />
</div>
<br clear="all" />
<div id="bottomText">
Username
<br /><br />
Age
<br /><br />
Location
</div>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: white;
color: black;
padding: 10px;
margin: auto;
}
#bottomText{
margin-top: 10px;
}
Change margin-top: 10px to the desired distance.
Change bottomText to a class rather than an id, if you plan on having more than one.
(Note: I removed your "" from the second div because I'm not sure why that was there.
Check this solution jsfiddle. Personally I will not use inline style, because it becomes more messy. I have used <ul> for the text. This can give you better control over the position of the text.
Just use an Unordered List for the text since it is a list. ul are "block level elements" so they will self-clear. And definitely use an external stylesheet vs. inline styles. External is much cleaner and easier to work with and make changes to. Example: http://jsfiddle.net/codeview/Fk3EK/
HTML:
<div class="wrap">
<img src="30000000_1.jpg">
<ul>
<li>Username</li>
<li>Age</li>
<li>Location</li>
<ul>
</div>
CSS:
.wrap {
/*text-align: left;*/
width: 1100px;
height: 870px;
background-color: yellow;
color: black;
padding: 10px;
margin: auto;
}
ul { list-style-type:none; }
li { padding:5px 0; }
I can't get it to work. Probably because you guys can't see the other code I have going on. But maybe I was approaching the problem in the wrong way.
Here's my code before I started fiddling with css positioning:
<br><br>
<div class="imgleft">
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<span style="font-weight: bolder;font-size: 12px;"></br><br><br></br>
<font color="green"> User69 </font> <img src="online01.gif" alt="" border="0" style="float:center"><br>
Location:
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">document.write(geoip_region_name());</script></span>
</script></br>
<br><br>
The problem is, the images have a set width, but vary in height, so sometimes I'll use 8 break tags, other times 7, but the exact distance beneath each image (where the text goes) is different. And it looks bad.
There are 3 images on the page, so it goes image, text (well, there's an image as well, flashing gif) below image, then another image with text below it, and so on. From top to bottom on the left of the page.
Here are the relevant bits from my css:
.imgleft {
float: left;
width: 120px;
}
.imgleft img {
clear: both;
width: 175px;
padding-bottom: 0px;
}
I'm certain I'm making this way more complicated than it needs to be! Sorry.
I've put a link to my code in the comments to the first answer, if someone could take a look. Thanks.
Firstly, I would like to say that I have tested if my link to my .css works, the background is made into a black color.
This is a ASP.NET Mvc test application which I am making, and I am having difficulty positioning some of my elements which are nested in div boxes. I have come to the conclusion that my div boxes nested within the topmostheader box is ignoring my .css code.
Here is my entire css file, called custom1.css
#topmostheader
{
background: none repeat scroll 0% 0% rgb(0, 0, 0);
height: 90px;
text-align: center;
}
#topmostheader.inner
{
width: 1280px;
margin: 0 auto;
text-align: left;
background-color: Red;
}
#topmostheader.app-name
{
font-size: 14px;
float: left;
line-height: 90px;
color: rgb(119,119,119);
margin: 0px 20px 0px 0px;
}
#topmostheader.xxx-logo
{
margin: 0px;
height: 90px;
float: right;
}
and here is my div box layout.
<div id="topmostheader">
<div class="inner" >
<div class="app-name">
Lunch Application
</div>
<div class="xxx-logo">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
The desired result is not produced: the app-name, inner and acceleration logo divboxes are all dead-center in the screen, where the app-name must be in the left side, and the logo in the right.
I have tested the following code (Which produced the desired result, in an undesired manner - I may reuse this code multiple times which are in the .css file)
<div id="topmostheader">
<div class="inner" >
<div class="app-name" style="float:left">
Lunch Application
</div>
<div class="xxx-logo" style="float:right">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
What am I doing wrong? Why are my div boxes not "floating" when I use the .css file?
To target the correct divs you need a space between the id and class name in your CSS rules: (e.g. change #topmostheader.app-name to #topmostheader .app-name)
You’re missing a space between your ID selectors and your class selectors.
#topmostheader.inner means “select the element with an id of topmostheader and a class of inner”.
You want #topmostheader .inner, which means “select elements with a class of inner that are descendants of the element with an id of topmostheader“
you need to put a space between the id #topmostheader and the class e.g. .acceleration-logo otherwise the browser assumes you are applying style to div with id #topmostheader and class .acceleration-logo not a child of class .acceleration-logo with parent of #topmostheader
For example I have a 200px div containing three buttons, the text is only minimal so the buttons don't fill the horizontal space available. Is it possible to..
Make the last button stretch to occupy all the remaining space?
The First button to stretch to fill the remaining space pushing the last two buttons along?
The middle button to stretch to fill the remaining space pushing the last button along?
I've realised that the real issue is buttons won't stretch until you give them an explicit width (ie, width:100%). You still need the table-cells though to constrain that 100% to a 'what will fit' model. You could just set 33% on each button but that won't work if your buttons are being added dynamically (unless you calculate the percentages on the server).
METHOD 1 (doesn't work): Buttons don't expand to fit the row (ie, display:table-cell appears to be ignored).
<div style="display:table;width:200px">
<div style="display:table-row">
<button style="display:table-cell">1</button>
<button style="display:table-cell">2</button>
<button style="display:table-cell">3</button>
</div>
</div>
For IE prior to IE8 you'll need to feed a real table or a compatibility script like IE8-js. The basic concept is easy enough though:
<!--[if ie lt 8]>
<script><!--pseudo-code, not real js-->
for (el in getElementsByTagName('button')) {
if el.style.find('display:table-cell') {
el.innerHTML = '<td><button>'+el.innerHTML+'</button></td>'
}
}
</script>
<![endif]-->
METHOD 2 (works): Hmmm.. Well for whatever reason the display:table-cell style does not work on button elements. I was able to do it with some extra markup though.
<div style="display:table;width:500px;">
<div style="display:table-row">
<div style="display:table-cell"> <button style="width:100%">1938274</button> </div>
<div style="display:table-cell"> <button style="width:100%">2</button> </div>
<div style="display:table-cell"> <button style="width:100%">3</button> </div>
</div>
</div>
I admit it ain't pretty but it will ensure all of the horizontal space is filled. It can be cleaned up a bit by using classes like in this demo I put together. Still, when combined with IE's shortcomings this is probably a case where I'd say ignore the purists and just use a table:
<style>table button {width:100%}</style>
<table style="width:500px;">
<tr> <td><button>1938274</button> <td> <button>2</button> <td> <button>3</button> </tr>
</table>
Similar to Roberts:
HTML
<div id="container">
<button id="one">One</button><button id="two">Two</button><button id="three">Three</button>
</div>
CSS
div#container {
border: solid 1px;
width: 200px;
}
div#container button {
width: 33%;
}
div#container button:last-child {
width: 34%;
}
That doesn't allow for a fluid layout: #container width must be known, then you do the math.
To allow for a fluid layout you need to hop into the world of absolute positioning:
div#container {
border: solid 1px;
width: 50%; /* resize your browser window to see results */
position: relative;
}
div#container button {
position: absolute;
width: 50px;
}
button#one {
top: 0;
left: 0;
}
button#two {
top: 0;
left: 55px;
}
button#three {
width: auto !important; /* get rid of the 50px width defined earlier */
top: 0;
left: 110px;
right: 0px;
}
Watch out for the height of #container. It's gone since all it's children in this example are absolutely positioned--you can see that from the border.
Can't you just set the widths like so...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test css button stretch</title>
<style>
#btn_container
{
width: 200px;
}
#btn_container button
{
width: 20%;
}
#btn_container button.stretch
{
width: 58%;
}
</style>
</head>
<body>
<div id="btn_container">
<p>last button stretch...</p>
<button type="button">eat</button>
<button type="button">drink</button>
<button class="stretch" type="button">sleep</button>
<br>
<p>first button stretch...</p>
<button class="stretch" type="button">eat</button>
<button type="button">drink</button>
<button type="button">sleep</button>
<br>
<p>middle button stretch...</p>
<button type="button">eat</button>
<button class="stretch" type="button">drink</button>
<button type="button">sleep</button>
</div>
</body>
</html>
This seems to get the desired effect, is fluid (if the div button container's width is changed or set to a %), and works in IE, Firefox and Opera.
edit: removed the redundant btn class; bumped up the width % for the stretch class; added the doctype. Left the types on, could technically haved removed for just an example, but meh.
#rpflo: the types are in there because my buttons in this example are not submit buttons. If these were part of a form and were submitting, I'd have left them off since the default is type=submit. (W3C HTML BUTTON)