Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DOM Resizing Problem With FireFox 1

Status
Not open for further replies.

BoulderBum

Programmer
Jul 11, 2002
2,179
US
I have a webpage that looks great when it's originally renderred. In this page, I call a method which adds text to a span inside of a div by setting the span's innerHTML property.

In IE, everything looks fine after calling the function (as is usually the case). In FireFox, it doesn't work (as is usually the case). The problem is that while IE dynamically resizes the parent div appropriately, FireFox sticks with the original dimensions, and the new text overflows the div, and bleeds into lower elements.

Can someone tell me if there is a way around this quirk?



MCP, MCTS - .NET Framework 2.0 Web Applications
 
So, what you're saying is that you have a box somewhere and you restrict the size of that box to a certain value. However, as you start putting things in it, you want it to expand to hold whatever you put in?

In a real life example, a similar thing would be that you have a tiny little suitcase when empty, which keeps growing and growing when you put things inside until you put everything in. Because apparently the suitcase should never be full and things shouldn't be hanging out.

Well, I guess we've established that FF is more life-like than IE. So then, what to do?

1. Do not restrict dimensions of the box. As long as you do not restrict the height of the element, the element will grow height wise even if the width is set.
2. Use min-width and min-height to define the dimensions of the empty box, because those will act in the way you expect -- they will keep your box at minimum at that, but will grow with content.

If you need more specific suggestions, you will need to show us your code.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Your assumption made me double-check my style sheet to see if I had any heights set (I didn't think I did), and it turns out there were two inner "div" classes with heights set to 100%. Removing the height settings did the trick.

That said, I personally prefer the magic suitcase that is IE. [wink]

Cheers!

MCP, MCTS - .NET Framework 2.0 Web Applications
 
BoulderBum said:
That said, I personally prefer the magic suitcase that is IE.
Magic things can be quite nice, when they work for you. But when magic makes things not work the way you would want them to, you would prefer to get back to the old fashioned logic and predictable results. Even if it takes more effort.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top