<div> too large in FF

Sir Osis of Liver · June 08, 2013, 06:14:33 PM

The following code correctly creates a 600x300 div in IE, but it's 655x365 in FF. The contents (all text) look pretty much the same.

Why the difference?

Code Select



<div style="font-family: arial; color: black; font-size: 20px; background-color: #F0F4F7; border: 3px #c0c0c0 solid; padding: 25px 25px 30px 25px; height: 300px; width: 600px;">

It's here if you'd like to try it.

Antes · June 08, 2013, 06:54:43 PM

Tested on;

Opera 15 > 600x300
IE10 > 600x300
FF24 > 600x300

Bit odd to ask but can you do Ctrl+F5 ?

Chen Zhen · June 08, 2013, 07:02:14 PM

Krash,

Is your IE version older that IE9? Firefox adds the padding values to the overall height/width but older versions of IE do not.

MrPhil · June 08, 2013, 09:00:32 PM

Yes, different browser families (and sometimes different versions within a family) follow different rules for counting padding, border, and even margin towards "height" and "width", as well as the various JS *Height and *Width values. If you increase, say, padding, some browsers increase the overall footprint and others reduce some values to maintain a constant size. It's the Wild, Wild West out there in browser land.

Ricky. · June 09, 2013, 03:56:08 AM

I guess it is something related padding applied to container element, it is like if you apply padding to an element, it will increase its size which is your case, to work around this problem, create one more div inside container div and then give padding to that div and things will be the way you want.

I hope I explained it properly

Sir Osis of Liver · June 09, 2013, 10:50:05 PM

Ok, I wrapped the div in a second div as Ricky suggested, and now it looks pretty much the same in all browsers, but the height attribute is ignored - it's always 320px, no matter what I set it for.

Here's the code:

Code Select



echo '
<html>
<head>
<title>Random Pick</title>
</head>
<body style="background-color: #E7EAEF;" onLoad="focus()">

<div style="width: 600px; height: 300px;">
<div style="font-family: arial; color: black; font-size: 20px; background-color: #F0F4F7; border: 3px #c0c0c0 solid; padding: 25px 25px 30px 25px;">

<p style="font-size: 25px; font-weight: bold; color: blue; text-align: center; text-decoration: underline;">Random Pick</p>

<p style="color: black; margin-top: 35px;">Finds all members with active subscriptions, shuffles them, and picks a random member.</p>

	<ul>
		<li style="margin: 40px 0 20px 0;">You currently have <span style="color: blue; font-weight: bold;">', $count ,'</span> active subscribers.</li>
		
		<li>The random pick is member <span style="color: blue; font-weight: bold;">#', $id ,'  ', $members[0]["member_name"],'</span></li>
	</ul>

</div>
</div>

</body>
</html>';

If I remove the content, the div shrinks to around 600x30, height is ignored.

Chen Zhen · June 10, 2013, 04:44:43 PM

Krash,

Attempt moving some of those attributes to the first div

ie.

Code Select


<div style="width:600px;height:300px;border: 3px #c0c0c0 solid;background-color: #F0F4F7;overflow:hidden;">
<div style="font-family: arial; color: black; font-size: 20px; padding: 25px 25px 30px 25px;">

.. you could actually move all of the first child div attributes with the exception of the padding to the parent div if you want.

Sir Osis of Liver · June 10, 2013, 11:10:40 PM

I'll give that a try. It's actually useable as is - all browsers are displaying the same height, which seems to be determined by the text and spacing in the inner div. I'm loading it into a popup, preferably without scrollbars, so it needs to be consistent. Safari makes the popup height larger than specified, but the div is ok and it doesn't look too bad.

It's really pretty stoopid that after all these years, there's still no standardization in browsers rendering code. A huge time waster.

MrPhil · June 11, 2013, 10:03:18 AM

Quote from: Krash. on June 10, 2013, 11:10:40 PM
It's really pretty stoopid that after all these years, there's still no standardization in browsers rendering code. A huge time waster.

Amen, brother!

Everyone's got a different rendering engine, and everyone's worried about breaking legacy HTML site code. Just look at all the grief that MS took when they tried to move towards "industry standard" behavior. Of course, if every browser behaved exactly the same way, and only the skin and user interface varied a bit, would there still be a market for more than one browser?

Ricky. · June 12, 2013, 01:46:40 AM

{offtopic}
Yes, there will be market for more than one browser, the browser which is fast, light on system and quick to adopt new standards..
Have you noticed, Chrome has surpassed firefox and soon it will be ahead of IE too.. it is because its from Google but other major thing is that its now one of the most stable and quick browser.

I do not remember if ever chrome crashed but IE, Opera and FF crashes so often ..

News:

<div> too large in FF

MrPhil

MrPhil