|
Posted by Remy on 01/30/07 17:51
I have Header Panel with a starting image and then a background image
and some text.
I would like to have everything on one line inside the 28px block. The
background should start AFTER the image.
Depending on if I have the End text, I either have everything on 2
lines or the background does not fill up the panelHeader div. It also
looks different on IE and Firefox....
This is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled</title>
<style type="text/css">
..panelHeader
{
height:28px;
width:100%;
display: block;
}
..panelHeaderBgStartImg
{
position: relative;
display: inline;
float: left;
}
..panelHeaderContent
{
position: relative;
display: inline;
height:100%;
float: left;
padding-top:6px;
background-image: url(bg_panel_grey.png);
background-repeat:repeat-x;
}
</style>
</head>
<body>
<table>
<tr>
<td style="width:300px">
<div class="panelHeader">
<img width="10" height="28" alt=""
src="bg_panel_grey_start.png"
class="panelHeaderBgStartImg"/>
<div
class="panelHeaderContent">
<div style="float:left;display:
inline;">Start</div>
<div style="float:right;display: inline;">End</
div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Navigation:
[Reply to this message]
|