CSS width with IE7: inline-block not working even after hacks - html

I am trying to display a list of images with text on my webpage. But in IE7, it is displaying each image below the other and not next to other. Looks like it is because of lack of support of inline-block. I read some articles and added some things to my CSS, but still it is not working.
He is the HTML:
<div id="image_example">
<div class="accept">
<h4>Acceptable</h4>
<img width="84" height="150" src="some-image" alt="accept">
</div>
<div class="unaccept">
<h4>Unacceptable</h4>
<img width="112" height="150" src="some-image"">
</div>
<div class="unaccept">
<h4>Unacceptable</h4>
<img width="215" height="150" src="some-image">
</div>
<divclass="unaccept">
<h4>Unacceptable</h4>
<img width="165" height="150" alt="unaccept" src="some-image"">
</div>
</div>
My CSS looks like this::
.unaccept, .accept{
display: inline-block;
text-align: center;
margin: 0 0.75em;
zoom:1;//Added after reading other posts
*display:inline; //Added after reading other posts
}
I added the last two lines after reading a lot of articles/ pages about this problem. But still it is not working.
I tried adding:
*width:173px to the class accept, but then it is breaking when the image width is more, if I increase the width width of all accept classes(even where the image width is less is getting increased, so the page does not look good again).
Can someone please help me out? All I want is to display these images next to each other with their default widths.

IE7 only supports inline-block on elements that are inline by default.
Use float: left; instead, that works with following the standards, without any IE hacks:
.image_example { overflow: hidden; }
.unaccept, .accept {
float: left;
text-align: center;
margin: 0 0.75em;
}
Demo: http://jsfiddle.net/Guffa/xCREN/

Related

Div Spacing between Images

Dear Members of this amazing Forum
I recently started using Html again and for the love of God i can't figure out where the problem is.
I created 3 Div's, each with 1 image, 1 group of images, and 1 image again. (same problem if all are in the same div, with a rather basic Css)
.HeaderNav {
margin: 0;
padding: 0;
overflow: auto;
opacity: 1;
overflow-x: hidden;
overflow-y: hidden;
display: block;
}
And the Html to use it.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" class="HeaderNav" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_05.jpg" alt="" width="240" height="55" />
<img src="../Images/shang3_06.jpg" alt="" width="66" height="55" />
<img src="../Images/shang3_07.jpg" alt="" width="84" height="55" />
<img src="../Images/shang3_08.jpg" alt="" width="72" height="55" />
<img src="../Images/shang3_09.jpg" alt="" width="74" height="55" />
<img src="../Images/shang3_10.jpg" alt="" width="107" height="55" />
<img src="../Images/shang3_11.jpg" alt="" width="62" height="55" />
<img src="../Images/shang3_12.jpg" alt="" width="70" height="55" />
<img src="../Images/shang3_13.jpg" alt="" width="165" height="55" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_14.jpg" alt="" width="940" height="133" />
<br/>
</div>
What results in the image below, sadly i don't get where the little space is from. Or why it's not on top too. Somehow i'm really confused where this issue is from and i'd realy appreciate the help.
[2]: http://i.imgur.com/SIkB7Hs.png <-- this one schould be a bit more clear sorry about that
edit: if found a rather face-> wall way to fix it with margin-top. And just making a div class for everyline. What's probably not the best way to go.
Ok, a few things here.
For one, with questions like this, it helps people answering a LOT if you post your code in a JSFiddle, like this here (though the images don't show there because they're relative URLs).
Also, it seems if you float the images to the left you can get rid of the spacing:
.HeaderNav img {
float: left;
}
Just to note, I have no idea why the spacing existed in the first place. Another tip: you should use 'Inspect Element' in Chrome or Firebug in Firefox to take a look at elements and see padding, margins, etc. Usually that makes it obvious where whitespace is coming from, though in this case I found nothing. Floating to the left was just an idea that seemed to work.
Probably because your <img> are still being declared as inline-level elements. Use:
.HeaderNav img {
display: block;
}
Also, you should check if a margin or padding have been assigned to the image element. If you do, reset them.
Also, make sure your padding and margin are 0 for the html and body...
so, try this:
body, html {
margin: 0;
padding: 0;
}
HTML cannot be used on it's own; it has to have CSS working with it continuously.
A bit confusing question, I don't understand it all. But check this jsFiddle. Is this what you mean?
Also remove the HeaderNav class from the first image.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" />
</div>
The img element default display type like inline-block, because of the font-size, so the img element maybe have 3px space.
To solve this problem, you can use the code below:
.HeaderNav img {
display: block;
}
or
.HeaderNav img {
float: left;
}
They all will change the img elements display type, I recommend the first one.

Twitter Bootstrap Mediagrid/Thumbnails & empty space

I'm trying to make a movie manager to get me back working with rails again. I'm reading the movies from a database, and trying to present their covers in a responsive grid.
I'm new to using Twitter Bootstrap, and having some weird issues with weird spacing. All my images are the same height and width, so that shouldn't be an issue.
To see the issue, go here: http://jsfiddle.net/32AcT/ (Due to the responsive grid, you may have to make the view window bigger, so they're not all in a single column.) I'm simply doing:
<ul class="thumbnails">
<li>
<a href="#">
<div class="caption">2 Fast 2 Furious</div>
<img alt="2 Fast 2 Furious" class="thumbnail" height="111" src="http://cf2.imgobject.com/t/p/w500/4rDV8TgaILHRfX1IRgpysjkD9A0.jpg" width="74" />
</a>
</li>
...
</ul>
Here is an example of what it looks like (weird spacing highlighted with pink box):
I understand why the widths are off, due to the caption lengths being longer than the image's width (although I'd like to fix that somehow too). Why is this happening, and is there any good method to prevent it?
try this one i think it will solve your prblem
http://jsfiddle.net/32AcT/1/
.thumbnails > li { width:100px; }
.thumbnails .caption{ overflow :hidden; text-overflow:ellipsis; white-space:nowrap; }
.thumbnails img{ height:111px; width:74px}
main issue with bootstrap-combined.min.css line no 23 height:auto;
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
If I get the problem right, the caption is causing it. What would you say to a solution like this: http://jsfiddle.net/32AcT/4/
The difference from your solution is that the Caption is inside the thumbnail (seen in code 1) div and thus is limited in the width (seen in code 2). It could be that you have to play a round with the height of the div but I guess that would be the "best" solution for this.
Code 1:
<li class="span4">
<div class="thumbnail">
<img src="http://cf2.imgobject.com/t/p/w500/1ZjDmPKMUtout8hR77qmK1llgls.jpg">
<div class="caption">
<h3>Along Came a Spider</h3>
<p>Action Action</p>
</div>
</div>
</li>
Code 2:
.thumbnail{
height:650px!important;
}

How to align an image of any size from the centre, rather than the top/bottom/sides, using css

I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.
Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.
Thanks!
EDIT: Here's the layout http://pastebin.com/SisQHM4y
Hi you can do this pure css as like this
css
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 400px;
background:green;
}
HTML
<div class="wraptocenter"><img src="//?" alt="images" /></div>
Live demo http://jsfiddle.net/rohitazad/tvrMp/
More information about this http://www.brunildo.org/test/img_center.html
​
Perhaps something like this:
<style>
#blue { margin-left:auto;margin-right:auto; }
</style>
<div id="red">
<div id="blue">
<img src="?" id="myImg" />
</div>
</div>
EDIT
I see, so you wish to center the x-axis horizontally, not vertically. And that link is a little messy. Perhaps you could try to
<style>
.user-picture { margin-top: auto; margin-bottom: auto; }
</style>
<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
<div class="user-picture">
<a href="/users/diver1" title="View user profile." class="active">
<img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1's picture" title="Diver1's picture" />
</a>
</div>
</div>
I am still having a little bit of a hard time seeing where the overlap between areas is as suggested by the red and blue in the question. If there is no overlap with my suggestion then please let me know and perhaps we can try to use some variations with position: absolute;

CSS / HTML IE 7 problems

I am having trouble getting something working in IE 7, works fine in all other browsers, but if you take a look at http://jamessuske.com/thornwood2/ in IE 7 you will notice two gaps inbetween the topCotent and the contentArea and the other gap between contentArea and contentBottom.
No idea on how to fix this.
HTML CODE
<div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->
<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->
<div class="contentArea">
</div><!--contentArea-->
<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->
<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->
CSS CODE
.topContent{
width:1009px;
}
.leftContent{
float:left;
}
.contentArea{
background:#FFF;
width:912px;
min-height:494px;
float:left;
}
.rightContent{
float:right;
}
.bottomContent{
width:1009px;
}
Add height to the classes as shown below which will fix ur issue for IE7
.topContent{
width:1009px;
*height:37px;
}
.leftContent{
float:left;
*height:494px;
}
.rightContent{
float:right;
*height:494px;
}
The <img> element is an inline element. That means that it has a vertical-align property that, by default, is set to bottom. For some reason, this causes problems when you just have an <img> contained by a block-level element (like a <div>).
That's where your gaps are coming from: For some reason, IE adds a little bit of space to the bottom of the <div> elements that contain those images. (It's also doing this to your .bottomContent element; that's just harder to notice/not as big a deal.)
The fix is as simple as this:
.topContent img, .leftContent img, .contentArea img, .rightContent img {
display:block
}
(If, for whatever reason, you don't like/can't declare display:block, you could go with vertical-align:top instead.)

Two <img> without spacing

<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>HAHAHA</title>
<STYLE TYPE="text/css" media="screen">
*
{
padding: 0;
margin: 0;
}
body
{
padding: 0;
margin: 0;
}
#flexbox
{
//display: -webkit-box;
//-webkit-box-orient: horizontal;
//-webkit-box-align: stretch;
//width: auto;
}
</STYLE>
</head>
<BODY style="padding:0;margin:0;border:0;">
<!--<div id="flexbox">
<img src="1.jpg" width="100px" style="padding:0;margin:0;"/>
<img src="1.jpg" width="100px"/>
<img src="1.jpg" width="100px"/>
</div>-->
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
</BODY>
</html>
Why do these images always have a small space in between them, even if i have padding & margin set to 0 on body and all other elements in page?
OK this is the full unedited code.
EDIT: just found out its the line break between the two IMG.
SO... i cannot press enter between the two elements? lol... :)
i cannot press enterin between the two elements? lol... :)
Nothing distinguishes one type of white space from another in most parts of HTML.
You can, however, format your code such:
<img src="..." alt="..."
><img src="..." alt="...">
… to remove the space between the elements.
images are displayed inline by default, which is likely your issue. White-space characters in HTML are condensed, however they will still appear as a space if any exist between HTML elements.
The following HTML will render with a slight space between images.
<div class="images">
<img src="http://placehold.it/400x300" />
<img src="http://placehold.it/400x300" />
</div>
If you'd like to make them flush against each other, you could try floating the images:
img {
float: left;
}
Floating comes with its own issues if you're new to CSS.
An alternative is to adjust the markup to get rid of extra white-space characters. A common way to do this is called "fishy" syntax:
<div class="images"
><img src="http://placehold.it/400x300"
/><img src="http://placehold.it/400x300"
/></div>
The way it works is that the closing > character of each element is moved to just before the beginning < character such that there's no white-space within any HTML element as content. Instead, the white-spaces for indentation are within the HTML tags, where the white-space is ignored completely.
There was a w3c feature request for a new property on white-space, which could theoretically allow CSS to remove all spaces from an element. The orignal proposal was white-space: ignore; however I much prefer (and suggested) white-space: none;.
It appears, however, that updating white-space is not likely to happen, and instead the suggestion was to use flexbox to remove spaces appropriately:
extending off the original HTML example:
.images {
display: flex;
}
Of course, it will be some time before flexbox has enough cross-browser support to be useful in a commercial environment, so for the time being I recommend sticking with the fishy syntax.
There's a good trick to overcome this:
Place your images inside a <div> and then set
font-size:0px;
to the <div>.
You can continue keeping the elements on separate lines.
I believe this is also necessary if you are viewing in an older version of IE
img {
border:0
}
While I think the problem is coming from another point in your mark-up, and/or CSS, I would suggest ensuring that you've zeroed out both margin, padding and border for the img element:
img {
margin: 0;
padding: 0;
border-width: 0;
}
This should take care of the problem, but if not we may need to see your real html and css (or a live demo that reproduces the problem, at JS Bin, or JS Fiddle) to help you further.