CSS - IE/Firefox problem - element height

hello,

i am experiencing a little problem w/ regards to IE & Firefox
compatibility (works as expected in firefox, doesnt in IE).

i have a container-div element, which contains 1 image, and 2 nested
div elements. the problem is, in IE the height of the container-div is
extended -- it makes itself as high as *all* elements w/i in, rather
than the fixed-height i have assigned in px.

easier to show. here is a dummied-down demo of the problem:

http://www.semi-suave.com/temp/temp.html
http://www.semi-suave.com/temp/css/profile.css


and here is an image of what IE is doing to my height:

http://www.semi-suave.com/temp/the_problem.jpg


.....can anyone help me figure this out? i want the container-div (the
baby-blue box) to be only "130px", as its defined in mh "profile.css"
file. how do i stop it from auto-sizing itself to the height of all its
nested content!??


thanks!
matt

matt@mailinator.com

change the css for your pictures as follows

#Profile img {
display:inline;
}

You won't need the positioning any more.

Same for #Basics & #Ratings...if you still need them.

<> wrote in message
news: oups.com...
> hello,
>
> i am experiencing a little problem w/ regards to IE & Firefox
> compatibility (works as expected in firefox, doesnt in IE).
>
> i have a container-div element, which contains 1 image, and 2 nested
> div elements. the problem is, in IE the height of the container-div is
> extended -- it makes itself as high as *all* elements w/i in, rather
> than the fixed-height i have assigned in px.
>
> easier to show. here is a dummied-down demo of the problem:
>
> http://www.semi-suave.com/temp/temp.html
> http://www.semi-suave.com/temp/css/profile.css
>
>
> and here is an image of what IE is doing to my height:
>
> http://www.semi-suave.com/temp/the_problem.jpg
>
>
> ....can anyone help me figure this out? i want the container-div (the
> baby-blue box) to be only "130px", as its defined in mh "profile.css"
> file. how do i stop it from auto-sizing itself to the height of all its
> nested content!??
>
>
> thanks!
> matt
>

<> wrote in message
news: oups.com...
> hello,
>
> i am experiencing a little problem w/ regards to IE & Firefox
> compatibility (works as expected in firefox, doesnt in IE).
>
> i have a container-div element, which contains 1 image, and 2 nested
> div elements. the problem is, in IE the height of the container-div is
> extended -- it makes itself as high as *all* elements w/i in, rather
> than the fixed-height i have assigned in px.
>
> easier to show. here is a dummied-down demo of the problem:
>
> http://www.semi-suave.com/temp/temp.html
> http://www.semi-suave.com/temp/css/profile.css
>
>
> and here is an image of what IE is doing to my height:
>
> http://www.semi-suave.com/temp/the_problem.jpg
>
>
> ....can anyone help me figure this out? i want the container-div (the
> baby-blue box) to be only "130px", as its defined in mh "profile.css"
> file. how do i stop it from auto-sizing itself to the height of all its
> nested content!??
>
>
> thanks!
> matt
>
I came up against this and was told IE has a broken overflow behaviour - a
div in IE extends itself to encompass the contents of the div, it shouldn't
do this!
David

> change the css for your pictures as follows
> ...
> You won't need the positioning any more.

ah...excellent! thank you. also, setting the parent element's
"overflow:hidden;" helps tighten things up as well.

one step closer to eliminating tables.

the more you know.


thanks,
matt