• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4313
  • Last Modified:

Div height in Firefox

Hello experts,

I have a simple div that has some PHP generated text inside and a predefined height in CSS.

Sometimes the text inside the div is larger than the div and in IE the div automatically adjuts the height so that the extra text fits in. But this doesn't happen in Firefox. Is there any way I could have the same behaviour in Firefox?

Here is the css for the div:
#daycell #date {
      border: 1px solid #000000;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #FFFFFF;
      height: 30px;
      line-height: normal;
      text-align: center;
      background-color: #666666;
      margin-bottom: 4px;
}

And the div is something like:

<div id="date">
<?=$random_day_quote?>
</div>

Many thanks,
M
0
mircea_a
Asked:
mircea_a
2 Solutions
 
Mark StegglesWeb DeveloperCommented:
Hello,

Yes. IE treats 'height' like 'min-height'... so if you set a height of 30px... IE will let the div grow with the content when it exceeds 30px. Firefox will not let the div grow if the content exceeds 30px because it treats height as height.

So, you want to use height for IE and min-height for Firefox and others. We use height:auto !important to override the height:30px for Firefox and others. IE does not recognise !important. Try this:

#daycell #date {
      border: 1px solid #000000;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #FFFFFF;
min-height:30px
height:auto !important;
      height: 30px;
      line-height: normal;
      text-align: center;
      background-color: #666666;
      margin-bottom: 4px;
}
0
 
Göran AnderssonCommented:
There is a rendering error in IE that makes it behave that way. It makes the element grow according to the content, eventhough you have specified the size. Firefox handles this correctly, and honours the specified size.

If you don't specify any height on the element, it will adjust itself according to it's contents. You can for example use padding if you want extra space above and below the text.

#date {
      border: 1px solid #000;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #fff;
      padding: 5px 0;
      line-height: normal;
      text-align: center;
      background-color: #666;
      margin-bottom: 4px;
}
0
 
Computer101Commented:
Forced accept.

Computer101
EE Admin
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now