Div height in IE

Forum Moderators: not2easy

Message Too Old, No Replies

Div height in IE

andrewsmd

5:55 pm on Dec 13, 2010 (gmt 0)

Has anyone else seen this issue? If so, is there a work around it? I have a div in IE that needs to be 7px high. If I set the height to 7px and give it a border, the div is clearly not 7px. It actually doesn't change height until I make it bigger than 20px. Does anyone have a solution for this? IE 8 is where I have found this by the way.

Fotiman

6:12 pm on Dec 13, 2010 (gmt 0)

Did you try setting overflow:hidden?

andrewsmd

6:28 pm on Dec 13, 2010 (gmt 0)

I hadn't tried that but it didn't work. It's not an overflow issue. All I have is a brown bar that I want at the very top of the page. This image is 7px tall and I repeat it horizontally. IE won't make the div smaller than 20px though. This isn't the first time I've ran into this. The last time I just made my image 20px tall. This isn't an option here though.

Fotiman

6:50 pm on Dec 13, 2010 (gmt 0)

I put together a simple test case, and it's not behaving as you describe:


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#testTarget {
  height: 3px;
  border: 1px solid black;
}
</style>
<title>Test</title>
</head>
<body>
<div id="testTarget"></div>
</body>
</html>

In this example, the height ends up being 3px. IE8, WinXP.

andrewsmd

7:34 pm on Dec 13, 2010 (gmt 0)

Here is my html that reproduces the error.
<div id="wrapper">
<div id="top">
</div>
<div id="header">
<div id="headerLeft">
<a href="default.aspx" style="border: none; text-align: left; float: left;">
<img style="border: none;" src="topLogo.jpg" alt="Jordan Cochran DDS"></a>
</div>
<div id="headerRight" style="vertical-align: top;">
</div>
<div id="menu" class="menuDiv">
<div id="menuLeft" class="menuLeftDiv"></div>
<div id="menuRight" class="menuRightDiv">
</div>
</div>
</div>
</div>

and here is the css

body{
margin: 0 0 0 0;
padding: 0 0 0 0;
background-image: url("images/grey.jpg");
background-repeat: repeat;
}
form{
margin: 0 0 0 0;
}
#wrapper{

background-repeat: repeat-y;
text-align: center;

}
#top{
background-image: url("images/topBrown.jpg");
background-repeat: repeat-x;
width: 100%;
height: 7px;

}
#header{
margin-left: auto;
margin-right: auto;
width: 989px;
text-align: left;

}
#headerLeft{
width: 326px;
height: 121px;
display: inline;
float: left;
}
#headerRight{
display: inline;
float: right;
width: 663px;
height: 121px;
background-image: url("images/headerRight.jpg");
background-repeat: no-repeat;

}

The issue I have is with the headerLeft and Right divs. They have a gap below the top div.

andrewsmd

7:36 pm on Dec 13, 2010 (gmt 0)

Never mind. I did get overflow hidden to make it work. Thanks.

Div height in IE

andrewsmd

Fotiman

andrewsmd

Fotiman

andrewsmd

andrewsmd

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week