|
skrile -> Div heights in containers/Firefox (1/8/2007 15:48:13)
|
Ugh...this is one of those little CSS things that bug the c&^p out of me but I can never seem to resolve. For some reason, the code below results in a .centerOn section that is slightly taller then the left and right sections (in Firefox only, IE renders it OK - I know, I know, IE is probably doing it wrong). Anyone have any thoughts on how I can force all three heights to be the same?
I'm using this design to draw flexible width tabs on a page where the left and right div sections hold a no-repeated picture, while the middle section holds a picture where that is x-repeated.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tab Tester</title>
<style type="text/css">
.leftOn
{
background-image: url(img/cssPics/tabOn_1_left.gif);
background-repeat: no-repeat;
background-position: left top;
width: 6px;
height: 25px;
background-color: #909090;
float: left;
}
.centerOn {
background-image: url('img/cssPics/tabOn_1_center.gif');
background-repeat: repeat-x;
background-position: center top;
text-align: center;
height: 25px;
background-color: #909090;
float: left;
padding-top: 4px;
}
.centerOn a {
color: #000000;
}
.rightOn {
background-image: url('img/cssPics/tabOn_1_right.gif');
background-repeat: no-repeat;
background-position: right top;
width: 7px;
height: 25px;
background-color: #909090;
float: left;
}
</style>
</head>
<body>
<div style="height: 25px;">
<div class="leftOn"></div>
<div class="centerOn">sometext</div>
<div class="rightOn"></div>
</div>
</body>
</html>
I've simplified the css a bit to remove all reference to pictures and it still behaves oddly:
.leftOn
{
width: 6px;
height: 25px;
float: left;
border: solid 1px blue;
}
.centerOn {
text-align: center;
height: 25px;
float: left;
padding-top: 4px;
border: solid 1px blue;
}
.rightOn {
width: 7px;
height: 25px;
float: left;
border: solid 1px blue;
}
|
|
|
|
