HTML Forum

**numbenator** · 04-01-2005, 08:45 AM

Hi all,

frustration frustration frustration

Ive got a conteainer cell that has a background color.

with in the container cell I have 2 other divs,1 floats left, the other right.

The left div as text in it and can vary in height.

The right div has an image in it that is only of height 10px.

In IE, the background shows fine. No problems.
However, in firefox, the background shows fine in the left div but in the right div, it only extends to the height of the image and the remainder below is white.

Code:

<style>

.sNavLink           { font-size:.7em; }
A.sNavLink:visited  { color:#000000; font-size:.7em; padding-bottom:2px;color:#000000;font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration:none; } 
A.sNavLink:link     { color:#000000; text-decoration:none; }
A.sNavLink:hover    { color:#0033ff; text-decoration:underline; }
A.sNavLink:active   { color:#000000; text-decoration:none; }

</style>
</head>

<body>
<div style="clear:both">    </div>
<div style="height:20px;width:160px;background-color:#cccccc;border-bottom:2px solid #ffffff">
<div style=" background:inherit ;width:10px;float:right;padding-top:1px;height:inherit">
  <img src="images/arrow.gif" alt="Kingston University News" width="10" height="10" /> </div>
<div style="padding-left:2px;border-bottom:inherit;background:inherit ;text-align:left;width:148px;float:left">
   <a href="#" class="sNavLink">Applied Engineering <br /> Research Centre Agency 
      contest</a>
</div>
</div>
</body>
</html>

Any help on this would be much appreciated as this is most annoying. Its not even like i havce set a backlground color on either of the child divs.

cheers for you time.

Steve

**Visarts** · 04-01-2005, 11:20 PM

instead of using <div style=""> have you ever thought about using classes? so, <div class="">
and then putting everything up in the stylesheet. This would certainly help

**pitbull82** · 04-02-2005, 05:31 AM

Quote:

Originally Posted by Visarts

instead of using <div style="">This would certainly help

In fact, it wouldn't...

As you have the fixed width of the main div - 160px (it's the easier case), you create
an IMAGE which is 160px width and the height can be minimal - even 1 px; Then you give the colour of the image in this case #cccccc; and then you add the rule, that the background of the div "container" is the image...

And that's all.

And please notice, that it's not Firefox or other browsers' problem. It's IE problem in fact that it misinterprets the CSS. This problem will maybe be solved in CSS 3.0 but at the moment sometimes you have to use those "tricks" to achieve your goals...

**numbenator** · 04-02-2005, 12:08 PM

ok cheers for that. I will mess and see what happens.

(incidently, pitball is right, it doesnt make any difference if styles in classes.. In fact, here, they are, I just showed like did for the forum)

cheers for all your time.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!