CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 75

height css not working in IE and firefox

So the problem is the object tag. it simply refuses to scale heightwise. chrome works perfect. IE and firefox it stays the default height. I am having a really hard time finding cross-browser code. From what I have found from other threads and sites is that the parent container needs to have a height set. so that is why you see height settings on html and body and the <div id="calendar">. Although I understand the theory it still doesn't work.

side note: the reason for the inline css is cause that's where i do my css testing. and i didn't make a fiddle because the object is like 80+ files and i don't know how to use jsfiddle that well and kinda feel like that isn't going to be able to get the calendar in there.

<!DOCTYPE html>
<html style="height: 100%" >
<body style="height: 100%" >
    <form >
    <div id="calendar" style="height: 70%">
        <object data="calendar.php" width="50%" style="height: 100%"/>
    </div>
    </form>
</body>
</html>

Upvotes: 0

Views: 2111

Answers (2)

Sparky
Sparky

Reputation: 98738

Your code was also broken in Safari, but my solution seems to have fixed that.

This version validates:

http://jsfiddle.net/zu9cL/

Maybe it will work for you. Generally, Explorer hates invalid code.

I believe you had two root problems.

  • used 50% within width attribute and improperly closed <object> tag (invalid HTML)

  • failure to define height on parent element <form>

I used no inline CSS in my demo but feel free to put your CSS back "inline" if you wish, it will still work.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <form>
            <div id="calendar">
                <object data="calendar.php"></object>
            </div>
        </form>
    </body>
</html>

CSS:

html, body, form {
    height: 100%;
}
#calendar {
    height: 70%;
}
object {
    height: 100%;
    width: 50%;
}

It all works the same with CSS placed "inline".

jsFiddle Demo

HTML:

<!DOCTYPE html>
<html style="height: 100%;">
    <head>
        <title></title>
    </head>
    <body style="height: 100%;">
        <form style="height: 100%;">
            <div id="calendar" style="height: 70%;">
                <object data="calendar.php" style="height: 100%; width: 50%;"></object>
            </div>
        </form>
    </body>
</html>

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

So the problem is the object tag so where's the tag? And for the question you asked why you need this 

html, body {
   height: 100%;
   width: 100%;
}

is because when you use height: 70%; for child element than the question arises 70% of what? So when you define height to parent in % it defines 70% of 100%

Upvotes: 1

Related Questions