|
| |
|
|
skrile
Posts: 59
Joined: 1/28/2002
From: Novi MI USA
Status: offline
 |
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;
}
< Message edited by skrile -- 1/8/2007 15:59:32 >
_____________________________
Steve Krile
Ergonomist posing as web developer - or visa versa
|
|
|
|
skrile
Posts: 59
Joined: 1/28/2002
From: Novi MI USA
Status: offline
|
RE: Div heights in containers/Firefox - 1/8/2007 16:04:05
Ain't 'notin better 'n answerin' your own question. The issue was with the Center div style. Having the padding set to 4px was bumping everything down by 4 px for that div. Got rid of that and everything looks dandy.
_____________________________
Steve Krile
Ergonomist posing as web developer - or visa versa
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
