CODEWITHSUNDEEP
htmlcssfirefoxstyles
AKKAweb
AKKAweb

Reputation: 3807

Firefox: Width in % issue

I cant figure out why the following would work on Internet Explorer and Chrome, but not Firefox. It basically has not effect on Firefox:

<fieldset style="width:30%;">

Thanks,

Upvotes: 0

Views: 797

Answers (2)

AKKAweb
AKKAweb

Reputation: 3807

Although I had concentrated into this problem for days, I just figured out that the problem was not on the <fieldset> tag, but on the <label> tag that is within it.

Basically, I styled the <label> tag as such and the issue went away.

<fieldset style="width:29%;float:left">         
    <label style="width:96%">Imagem</label>
    <?php echo $this->Form->input('main_image', array('type' => 'file','label'=>FALSE,'style'=>'120px')); ?>
</fieldset>

enter image description here

Now for this specific case, the <label> tag and its content is forced to fit within 96% of the size of <fieldset> not matter what it is, and since <fieldset> is floating left, anymore <fieldset> that floats left and whose width is less that the difference of this and 100% will fit on the same level, which was my goal.

Apparently, Firefox wasnt forcing the <label> tag to obey its parent, the <fieldset> tag. Instead it was forcing <fieldset> to fit around <label>. Perhaps <label> is style somewhere in my css that I dont know.

Thanks to all who tried to help.

Upvotes: 1

The Alpha
The Alpha

Reputation: 146201

When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.”

That means if your parent container's width has not been set explicitly, i.e. width:400px then it should not work as expected (different browsers behave differently), because values set in Percentage of a child element first calculates the dimension of the parent container and then the child element apply it's dimension, say width.

You can read this.

Also you can use css reset to make the css consistent for all browsers.

Upvotes: 0

Related Questions