Display 4 DIV's with images inside container

Thanks for the response, yes something like that.

Two pictures on top and two on the bottom, I was hoping to have maybe a fixed div or something for each image. So that then if the images are different sizes they can be resized to the div and centered etc.

Does that make sense? Or is this a pointless idea?

Thanks again!
 
Thanks again,

Yes thats looking pretty much like I meant one other thing. In IE the li elements all seem to display in a column, one on top of the other.

Not sure why, do you have any ideas?

Thanks :)
 
Tripnologist said:
Eeps! You're looking at it in IE6 and/or 7?

In those archaic browsers, inline-block only works on naturally inline elements. You'll need to feed them a hack.

http://jsfiddle.net/7DSJG/4/
Click to expand...

Thanks again for your response.

That is pretty good, I will include that anyway for browser comparability. But it is IE8 where I seem to be getting a problem.

Thanks again for all the help.
 
Ok I think I know what it is but I do not know the solution.

The li element does not work on IE8 with inline-block and img tag with max-width together.

When I change this to inline and width of 100% this works but affects firefox.

Anyone got any suggestions?

Thanks again :)

EDIT: Just to add they both work fine with width 100% on the img tag for both browsers in terms of resizing. The issue is definitely with display:inline-block not being supported or something.
 
Thanks again for the response.

I did read that page before actually, I do have a doctype declared and it doesn't see to make a difference.

What does work (kind of) is doing this:

IE8 will treat it as a block level element unless you use float.

.divInlineBlock
{
display: inline-block;
float: left;
}


Basically using float, but then that affects firefox.

Not really sure how to get around this.

Thanks again!
 
Well, there are a couple problems with using floats.

1. If the li on the right of each row is larger or smaller than the one on the left, it creates clearing problems as seen here.
http://jsfiddle.net/7DSJG/6/

You can fix it by clearing the first li on each row, which I have done by adding a class to the li's that need to be cleared.
(Alternatively, you can also use nth-child [ul li:nth-child(2n+3)], but it is not supported in IE8 or lower.)
http://jsfiddle.net/7DSJG/7/

2. You lose your vertical centering.
When we used inline-block, it gave us the ability to use vertical-align, but we can't do that with floats. There is no real easy way to accomplish this, mostly because we don't know what size the images will be. Read the following article for some ideas.
http://css-tricks.com/centering-in-the-unknown/


-----

It's hard for me to tell you what would be best, as I don't know the image size variations, their aspect ratios, or even what you're using this for.
Depending on the above, something as simple as min-height on the images would remove the need for vertical centering.
 
Thanks again for your detailed response, that's all very helpful.

Ultimately what I wanted was to display two images on the top and two directly below. I was using divs before so that the images could resize to them. But as I think we have established this isn't possible?

The reason for this was so I could have different sized images that would be resized regardless to the size of the div. This would also keep the centre positioning the same.

I'm really not sure what more can be done then. The use of ul and li tags that you created worked perfectly. Just these problems in IE8!

Thanks again for all of your time.
 
There has to be some kind of conflict bug there effecting IE8, as I use inline-block quite often and have never had a problem and as I said earlier, it was displaying fine for me in IE8 (using IE9 dev tools).

Just came across this article though, which taught me something I wasn't aware of. The whitespace in the html between two inline-block elements is not ignored by browsers. (Mentioned in the caveats section)
http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view

With that in mind, does this make any difference for you in IE8?
http://jsfiddle.net/7DSJG/10/

Edit: Here are two more possible fixes for you to check. (I can only check in IE9 dev tools here as I'm at home)
http://jsfiddle.net/7DSJG/11/
http://jsfiddle.net/7DSJG/12/
 
Last edited:
I had a similar problem once and it was due to IE going into compatibility mode due to running off a local server. Usually evident if there is a 1px black line around the entire page.

Maybe try to put this after your <!Doctype>

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Worth a mention anyway.
 
Tripnologist said:
There has to be some kind of conflict bug there effecting IE8, as I use inline-block quite often and have never had a problem and as I said earlier, it was displaying fine for me in IE8 (using IE9 dev tools).

Just came across this article though, which taught me something I wasn't aware of. The whitespace in the html between two inline-block elements is not ignored by browsers. (Mentioned in the caveats section)
http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view

With that in mind, does this make any difference for you in IE8?
http://jsfiddle.net/7DSJG/10/

Edit: Here are two more possible fixes for you to check. (I can only check in IE9 dev tools here as I'm at home)
http://jsfiddle.net/7DSJG/11/
http://jsfiddle.net/7DSJG/12/
Click to expand...

Thanks its sorted. I apprecaite all of the help once again :)

Stryda09 said:
I had a similar problem once and it was due to IE going into compatibility mode due to running off a local server. Usually evident if there is a 1px black line around the entire page.

Maybe try to put this after your <!Doctype>

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Worth a mention anyway.
Click to expand...

Thanks for the response but its now sorted anyway! :)
 
You must log in or register to reply here.
Back
Top Bottom