Solved

Div height in Firefox

Posted on 2007-11-24
4
4,310 Views
Last Modified: 2009-02-13
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
Comment
Question by:mircea_a
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 30

Accepted Solution

by:
Steggs earned 250 total points
ID: 20342561
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
 
LVL 29

Assisted Solution

by:Göran Andersson
Göran Andersson earned 250 total points
ID: 20342672
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
 
LVL 1

Expert Comment

by:Computer101
ID: 20558533
Forced accept.

Computer101
EE Admin
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question