Firefox doesn't like %?

firefox percent change px

[Dabrowski]

Hmmmm,

Another interesting point about FireFox, if I specify width/height as a % in my CSS, then I use ...getComputedStyle..., it comes back in px?

This is causing me a problem as I'm using some JS on % based things.

Anyone else found this or know a work around?

[SuzyUK]

not sure I'm understanding the question, I would expect the "computed" style of values to come back in pixels?

perhaps this more a JS question, can you elaborate more about what you're trying to achieve perhaps there's another way to do it

[Dabrowski]

ok,

I'm writing some JS to correct the width of DIV elements that have a % measurement.

For example, you have a container DIV, and inside it is a DIV width 100% padding 10px. This would extend the boundaries of the container DIV and in most cases push it off the edge of the screen causing scrolling.

In IE obj.currentStyle.height reports x%, as in the CSS, but FF's computedStyle returns a PX value, so my script doesn't alter the element. It assumes as you've assigned a fixed width you know how big the element is.

Does FF have a way of reading the CSS value then rather than the computed value?

I've got it all working brilliantly in IE with strict doctype, just a couple of minor issues with FF.

[Dabrowski]

Any takers?

Any ideas SuzyUK?

[SuzyUK]

nope.. I'm no good on JS technicalities -

I'm failing with the the CSS side of this as it's a box model issue I presume but I can't see the reasoning behind it - I just don't see why you would need to manipulate the box model like this :o - but that's likely because I'm tired.. so feel free to explain more.

For example, you have a container DIV, and inside it is a DIV width 100% padding 10px. This would extend the boundaries of the container DIV and in most cases push it off the edge of the screen causing scrolling.

In that case I don't see that the internal div actually needs a width on it as it will be default to 100% wide including the padding - so no manipulation would be needed - (IE might need 'layout' but that's a different story) and allowing for the fact the internal div is not 100% wide but say 96% wide, wouldn't centering the internal div do the job? if not setting 2% left/right padding on the external div and letting the internal one default again should achieve the same thing?

Suzy

[edited by: SuzyUK at 10:22 pm (utc) on April 2, 2007]

[Dabrowski]

Need I say....fluid layouts?

As far as I'm concerned a %age is an unknown size, so can't specify a counter-%age to get around it.

I prefer IE's quirks mode, whereby the width also encompasses the padding/margin/border, that way 100% is 100%, not 100% +spacing.

I'm writing JS to 'fix' the box model. This will allow:
a) TABLEs with TRs of remaining height
b) %age widths/heights without content expanding

I believe this will solve a lot of peoples layouts, as half the threads on here are regarding these 2 issues.

I also posted this in the JS section, no luck yet!

Thx for help tho.

[Setek]

Need I say....fluid layouts?

I think we're all with the understanding you're after fluid layouts, the reason SuzyUK is confused is your application of fluid layout.

In that case I don't see that the internal div actually needs a width on it as it will be default to 100% wide including the padding - so no manipulation would be needed

Yes, perfectly so SuzyUK—it's a

div

, it is block-level, you shouldn't need to specify a width to it at all, just padding—and it should work fine. Unless, Dabrowski:

• You have specified it to float;
  
• It is absolutely positioned; or
  
• You have changed the display type to inline.

All of the above will essentially change your parent container from being inherently fluid to only taking up as much space as it requires. This, obviously, would mean you require a set width.

Firefox is perfectly fine with percentages. Computed style means exactly that: I want to find the end result. The end result isn't in percentages, it's already been computed, it's a set value. Resize the window and compute the style again, that set value will now be computed to accommodate.

I prefer IE's quirks mode, whereby the width also encompasses the padding/margin/border, that way 100% is 100%, not 100% +spacing.

I'm writing JS to 'fix' the box model.

There already is a way to fix the box model :) Make sure IE is not running in quirks mode. You can then not have any javascript, and you could even do it without pushing different property values to IE 6 & 7.

div#container { width: 90%;
padding: 5%; }

:)

[Dabrowski]

Thanks for the info Setek, the problem comes really not from the width but the height. If a DIV's height behaved the same way as it's width I'm sure everything would be much easier.

And I used the term 'fix' in inverted commas as it is my own preference.

The reason I wanted to retrieve the % value rather than the px value is so I know which DIVs to alter the height of manually.

I was working on the theory that if you specified a %age, you'd want that to be the outer size, as the total would be unknown. Whereas if you specified 'px', the size would be set so leave it alone.

I already have code that works fine but you have to target it at a specific object, which I'm using at the moment, but I am trying to write generic code. Apart from this issue I've done it.

[Dabrowski]

P.S., I realise DIVs work like this by default for 100%, but it's my oppinion that they should obey *ONE* rule, and not change their behaviour dependant on width/height setting. It's almost like having to work with 2 box models!

[Dabrowski]

As there only a few elements I need to process, and nobody here or in the JS forum can provide a solution (which means there probably isn't one), I've changed the code to target elements with a specific classname.

Job done.