IE Div height printing problem 1

acent · May 29, 2009

Greetings,

I have tried to find a solution to this on both this forum and my good buddy google, but haven't found the solution yet.

I have a rounded corder div setup

Code:

<div class="white_black1"></div>
<div class="white_black2"></div>
<div class="white_black3"></div>
<div class="white_black5" style="border-bottom: 1px solid black;"></div>

and the CSS

Code:

.white_black1, .white_black2, .white_black3, .white_black5, .white_blackc {
  height: 1px;
  background-color: #FFFFFF;
  border-left: 1px solid black;
  border-right: 1px solid black;
  overflow: hidden;
}
.white_black1 {
  margin: 0 1px;
}
.white_black2 {
  margin: 0 2px;
}
.white_black3 {
  margin: 0 3px;
}
.white_black5 {
  background-color: #000000;
  margin: 0 5px;
}
#content .white_blackc {
  padding-left: 20px;
  padding-right: 20px;
}
.white_blackc {
  height: auto;
  padding-left: 5px;
  padding-right: 5px;
  overflow: visible;
}

Printing in FF is a carbon copy of the screen. IE however, does not correctly size the height of the DIV. They are much taller. The screen looks identical in FF and IE. At this point, I, and the boss, only care about IE7 as that is what the users have.

My doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and I am working with .NET 2.0.
Any ideas?

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws

Vragabond · May 29, 2009

Try setting font-size of the divs to 0. Sometimes IE likes to make sure the container is big enough to hold the text, even if it has no text inside.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

BillyRayPreachersSon · May 30, 2009

Perhaps I've missed something, but how on earth does the code you've posted give anything remotely resembling rounded corners?

Also, you are declaring rules for a class 'white_blackc' and ID 'content' which never appear the markup you've given us.

Are you giving us the whole picture here, or just some cut-down test harness with half the bits missing?

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

IE Div height printing problem 1

acent

Technical User

Vragabond

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor