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!
 
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.
 
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