CSS sizing

elements different sizes in IE and Firefox

Page 1 of 1

5 Replies - 957 Views - Last Post: 22 April 2010 - 10:51 PM

#1 Guest_Ward*


Reputation:

CSS sizing

Posted 21 April 2010 - 09:52 PM

I am having a problem sizing and lining up elements using css. I have created a simple document with just two paragraphs, each paragraph sized using css. The code in the body of my document is simply:

<body>
<p class="leftbox"> Here is some text in the left box. </p>
<p class="rightbox"> Here is some text in the right box. </p>
</body>

The css for the document is:

.leftbox {float: left; border-style: solid; border-color: blue; border-width: 2px; width: 30%; height: 40%; margin-left: 10%; padding: 2%}
.rightbox {float: right; border-style: solid; border-color: blue; border-width: 2px; width: 30%; height: 40%; margin-right: 10%}

I tried inserting screenshots to show what the results look like in IE and Firefox, but this site doesn't seem to allow me to do it. So.... if you could see the screen shots you would see that in IE both boxes come out about 30% of the screen width, whereas in Firefox the boxes come out different widths (and heights). If I get rid of the 2% padding in the left box, both views will look okay, so it is the 2% padding that seems to be messing things up. It appears that Firefox is adding the padding to the overall size of the boxes, whereas IE does not. Since padding is inside the border, it appears that IE is doing what it is supposed to and Firefox is not. Also, 2% (the space between the text and the border) seems to be a whole lot more in Firefox than it is in IE! Does anyone know why these two browsers are doing different things and how I can get them to act consistently? (I haven’t yet tried any other browsers.) Am I correct that padding should not be adding to the overall size of the box?

Also, you will note that the top of the right box is lower in Firefox than is the top of the left box. (Not so in IE.) Does anyone know why it is doing this? (If I switch the order of the two paragraphs in the document, the situation will be reversed – the top of the right box will be higher.) How can I get the tops to be even in both browsers? (This problem persists even without the 2% padding.)

Finally, I have set the height at 40% and the width at only 30%, but the width is larger than the height (in both browsers)! I know that the width is 30% of the screen (or of the parent element, if there were one), but the height is 40% of what? Obviously, it is using a different scale for the height as for the width.

Is This A Good Question/Topic? 0

Replies To: CSS sizing

#2 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: CSS sizing

Posted 22 April 2010 - 03:24 AM

Could you post a link to a live example of the code to help understand the problem, thanks.
Was This Post Helpful? 0
  • +
  • -

#3 Arenlor  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 34
  • View blog
  • Posts: 389
  • Joined: 26-April 06

Re: CSS sizing

Posted 22 April 2010 - 06:41 AM

Actually it's Firefox which is doing it correctly. See http://www.w3schools...css_padding.asp for more. If you use a percent the padding will be that percent of the containing element. IE is infamous for not following CSS standards. IE6 is the worst current example, and Microsoft is trying to get people to upgrade. So are the German and French governments. So are the citizens of England (they want their government to stop using it.) Read up on http://www.webcredib...-explorer.shtml to find out about some crap you'll have to do to make IE work correctly.
Was This Post Helpful? 0
  • +
  • -

#4 Guest_Ward*


Reputation:

Re: CSS sizing

Posted 22 April 2010 - 02:53 PM

View Postrevolutionx, on 22 April 2010 - 02:24 AM, said:

Could you post a link to a live example of the code to help understand the problem, thanks.


The website I am working on is not up yet, but I posted the page at the website that I do have up:
http://www.wardricke.../alignprac.html

The css file is
http://www.wardricke...m/alignprac.css
Was This Post Helpful? 0

#5 Guest_Ward*


Reputation:

Re: CSS sizing

Posted 22 April 2010 - 03:21 PM

View PostArenlor, on 22 April 2010 - 05:41 AM, said:

Actually it's Firefox which is doing it correctly. See http://www.w3schools...css_padding.asp for more. If you use a percent the padding will be that percent of the containing element. IE is infamous for not following CSS standards. IE6 is the worst current example, and Microsoft is trying to get people to upgrade. So are the German and French governments. So are the citizens of England (they want their government to stop using it.) Read up on http://www.webcredib...-explorer.shtml to find out about some crap you'll have to do to make IE work correctly.


Thanks, Arenlor. I have to admit, though, that this is still a bit confusing. I looked at the second link that you provided, which explains how Firefox and IE interpret the box model. It still seems to me that IE is more correct. In the example provided, it is rather confusing to set the width to 30 when the element is actually 50 wide. The reason I drew the borders in my example is to be able to visibly see where the element actually lies on the page. I thought that anything outside the border (ie, the margin) would be outside the width of the element and anything inside the border (ie, the padding) would be inside the width of the element. I guess that assumption was wrong. (Apparently there is no way to draw an outline around the entire element so that one can see definitively where it is? I tried adding background color; it only adds color inside the border, to the content and padding, but not to the margins.) I will have to study this page some more and really digest this. Thanks again for the link.

Does anyone want to respond to the other two questions? (Uneven top alignment in Firefox, and the scale for determining heights.)
Was This Post Helpful? 0

#6 Guest_Ward*


Reputation:

Re: CSS sizing

Posted 22 April 2010 - 10:51 PM

View PostWard, on 22 April 2010 - 02:21 PM, said:

View PostArenlor, on 22 April 2010 - 05:41 AM, said:

Actually it's Firefox which is doing it correctly. See http://www.w3schools...css_padding.asp for more. If you use a percent the padding will be that percent of the containing element. IE is infamous for not following CSS standards. IE6 is the worst current example, and Microsoft is trying to get people to upgrade. So are the German and French governments. So are the citizens of England (they want their government to stop using it.) Read up on http://www.webcredib...-explorer.shtml to find out about some crap you'll have to do to make IE work correctly.


Thanks, Arenlor. I have to admit, though, that this is still a bit confusing. I looked at the second link that you provided, which explains how Firefox and IE interpret the box model. It still seems to me that IE is more correct. In the example provided, it is rather confusing to set the width to 30 when the element is actually 50 wide. The reason I drew the borders in my example is to be able to visibly see where the element actually lies on the page. I thought that anything outside the border (ie, the margin) would be outside the width of the element and anything inside the border (ie, the padding) would be inside the width of the element. I guess that assumption was wrong. (Apparently there is no way to draw an outline around the entire element so that one can see definitively where it is? I tried adding background color; it only adds color inside the border, to the content and padding, but not to the margins.) I will have to study this page some more and really digest this. Thanks again for the link.

Does anyone want to respond to the other two questions? (Uneven top alignment in Firefox, and the scale for determining heights.)


Well, sure enough, it works exactly as the link you gave says. I just have to remember that in IE the padding is part of the stated "width" and in Firefox (and apparently other browsers) it is not. The link is very informative and gives lots of good info. Thanks again.

I also figured out the vertical scale problem. The percentage is simply the percentage of the screen height (just as in the other direction it is the percentage of the screen width), or of the parent element. I guess I was being pretty dense on that one. (It would be nice, though, if the people who write books would explain these things.) So, anyway, it is indeed possible for 30% in one direction to be bigger than 50% in the other direction.

I haven't figured out why the tops don't align in Firefox, but I have discovered that if I put then all inside a <div>, or even put a <div> or a <p> preceding them, the tops will then align okay.
Was This Post Helpful? 0

Page 1 of 1