luft efter billede
Jeg har en boks med tekst og billede - og farvet bar foroven.I venstre og højre side af denne bar skal der være en grafikstump der angiver et rundt hjørne.
Mit problem er, at jeg ikke forstår hvorfor det ikke fungerer optimalt ... hvis jeg dropper bredde-angivelsen i CSS'en på de runde hjørner
ser det fint ud i IE 7.0 .. men firefox dropper hjørnerne helt.
Sætter jeg bredde på virker det i firefox, men så flipper det i IE 7.0 i højresiden.
Jeg kan se at der ligesom er luft til højre for billede og tekst, som jeg ikke kan komme af med ... 3 pixels for at være helt præcis,
og det er det det højre hjørne fylder.
Hvad går mon galt??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<!-- OrangeBox start -->
<style>
.barOrangeLeftCorner {
background-image: url('orangeleftcorner.gif');
background-repeat: no-repeat;
width:3px;
}
.barOrange {
background-image: url('orangemidt.gif');
background-repeat: repeat-x;
height:20px;
padding-left:3px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color:#ffffff;
}
.barOrangeRightCorner {
background-image: url('orangerightcorner.gif');
background-repeat: no-repeat;
width:3px;
}
.right .sectionintro {
font-family: Trebuchet MS,Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #c97b00;
}
.right .section {
font-family: Trebuchet MS,Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
color: #8c8c8c;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="barOrangeLeftCorner"></td>
<td class="barOrange sectionheader">Her er overskrift</td>
<td class="barOrangeRightCorner"></td>
</tr>
<tr>
<td colspan="3" style="padding-top: 7px;" class="right" valign="top">
<div class="sectionintro">Her staar tekst</div>
<div class="section">Her staar mere tekst</div>
<img src="test.gif" alt="" border="0" width="146" height="70">
<a href=""></a>
</td>
</tr>
</tbody></table><!-- OrangeBox end -->
</body>
</html>
