CODEWITHSUNDEEP
htmlcss
ParoX
ParoX

Reputation: 5933

IE and Div heights

Site in question:

http://www.sedulity.tk/

Site using Chrome 19 dev:

enter image description here

Site using IE9:

enter image description here

as you can see on the homepage using IE it seems like it not recognizing the height of the DIV of each picture, whereas on chrome and firefox there is no issue.

I think this is probably my fault, won't blame IE for it...but I can't figure it out :|

Upvotes: 1

Views: 61

Answers (3)

The Alpha
The Alpha

Reputation: 146191

In your css folder there is a css file ie7style.css and it's being used for ie (I've tested in ie8) and it has a class (.item-image) that is

.item-image{
    height:142px;
}

Try to fix it or just remove it.

Css file: http://www.sedulity.tk/wp-content/themes/DeepFocus/css/ie7style.css

See in this developer Tool screenshot I've removed the css entry height:142px from class (.item-image) from file ie7style.css

enter image description here

After that (without .item-image{height:142px} in file ie7style.css) see the page in ie8

enter image description here

Upvotes: 2

Joseph
Joseph

Reputation: 119837

you might wanna check this article for a cross-browser inline-block that doesn't overlap. your case is most likely caused by the "baseline", where the next set of elements base their tops on the last elements' baseline (which would be somewhere in the middle of the element).

Upvotes: 0

Richard Andrew Lee
Richard Andrew Lee

Reputation: 1177

enter image description hereTry adding a height to the .item

CSS

#portfolio-items .item {
    height:500px;
}

Upvotes: 0

Related Questions