The height of my div is not the same in IE and firefox
I am having trouble with handling the vertical alignment of a div within another div in IE.
My html code is as follows :
<div class="header">
<div id="mainMenu">
<!--Here goes my main menu-->
</div>
</div>
My styles are as follows :
#mainMenu
{
/*background-color: #FFF;*/
font-family: fantasy, cursive, Serif;
font-size:16px;
/*border-bottom:1px solid #000000;*/
height:125px;
position:relative;
}
.header {
top: 0px;
color:#FFA500;
z-index:1000;
height:120px;
padding:8px 2px 8px 15px;
overflow:hidden;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radiu开发者_运维百科s:0 0 10px 10px;
border-radius:0 0 10px 10px;
-moz-box-shadow:0 1px 3px #777;
-webkit-box-shadow:0 2px 3px #777;
box-shadow:0 2px 3px #777;
background: url("../images/plusoneurls_resize.png") repeat scroll 0 0 transparent;
}
Now in firefox , my main items are showing at the bottom when I mahe the height attribute to 120px (100%) for the style attached to #mainMenu , but it's not working in IE.
I even tried by giving top:100% , in firefox it shows fine ,but in IE , it's overflowing into the main content.
How to devise a workaround for this?
Check that you're not in Quirks mode.
If you don't have a valid <!DOCTYPE> declaration at the top of your HTML code, IE will drop into Quirks mode. This mode changes a number of aspects of CSS, and tends to have a fairly dramatic effects on heights and widths of elements.
Quirks mode is a legacy feature, which should never be used any more, so you should always make sure you have a valid doctype. you haven't provided enough of your code for me to know whether you've got one or not, but if not, you need to add one.
If you're not sure what doctype to use, simply use the HTML5 doctype, like so:
<!DOCTYPE html>
Put this at the very top of your HTML code (first line, before the <html> tag or anything).
Use a CSS reset. YUI provides a good one.
#mainMenu
{
position: absolute;
bottom: 0;
left: 0;
}
.header
{
position: relative;
}
How (Not) To Vertically Center Content
Would definitely recommend using CSS, but they also illustrate and example using Tables
Make sure the zoom level is set to 100% on both browsers. (Ctrl+0)
加载中,请稍侯......
精彩评论