height css not working in IE and firefox
Question
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>
2 answers
solution1
1 ACCPTED 2012-12-11 18:11:12
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%
solution2
0 2012-12-11 19:43:19
Your code was also broken in Safari, but my solution seems to have fixed that.
This version validates:
Maybe it will work for you. Generally, Explorer hates invalid code.
I believe you had two root problems.
used
50%withinwidthattribute and improperly closed<object>tag (invalid HTML)failure to define
heighton 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".
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.