553819 - Layout not sized correctly using em

Status: RESOLVED WORKSFORME

(Firefox :: General, defect)

Description

[Matt]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1036 Safari/532.5
Build Identifier: Unknown, will update

using the following css the layout does not display properly in FireFox 3.6 on PowerPC Mac 10.4.11 (no screen shot), and in FireFox  on x86 Mac 10.5. (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; de; rv:1.9.2) Gecko/20100115 Firefox/3.6) (screen shot provided)  The problem does not exist on FireFox 3.6 in Windows7 (screen shot provided), Vista (no screen shot), or XP (screen shot provided), or in Safari (screen shot provided), or Opera (no screen shot) on Mac OS X

CSS:
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background:#FFFFFF;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}

.twoColElsLtHdr #container { 
	width: 60em;  /* this width will create a container that will fit in an 960px browser window if text is left at browser default font sizes */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

END CSS: this css is a standard output in Adobe Dreamweaver 9.0 using two column elastic left sidebar, with header and footer.  I changed the width from an 800px to a 960px (60em).  I have also tried using 960px as the width, which is what I am leaving this as for now (until I hear back from my testers).  I have not yet heard back as to whether this "work around" fixes the issue, but in any case it is not my desired solution.  Once I hear back I will change it back to em so that it may be viewed for the purpose of squashing this bug.

Screen Shots (names should be descriptive enough):
http://i894.photobucket.com/albums/ac145/KCL_PHOTOS/Chrome-Win7.png
http://i894.photobucket.com/albums/ac145/KCL_PHOTOS/FireFox-Mac105.png
http://i894.photobucket.com/albums/ac145/KCL_PHOTOS/FireFox-Win7.png
http://i894.photobucket.com/albums/ac145/KCL_PHOTOS/FireFox-winXP.jpg
http://i894.photobucket.com/albums/ac145/KCL_PHOTOS/IE-Win7.png
http://i894.photobucket.com/albums/ac145/KCL_PHOTOS/Safari-Mac105.png

Reproducible: Always

Steps to Reproduce:
1. Open FireFox in Mac OS X (Tiger or Leopard)
2. Goto http://kclhome.com
Actual Results:  
Container Size of page is not reaching the size defined causing the top navigation menu to not properly appear.

Expected Results:  
The page should be as seen in FireFox on Windows.

This may be bumped to "Minor" when I hear back if the 960px work around fixes the problem.

Comment 1

[Matt]

Update, 
Using 960px in place of 60em had the same result.  The issue is not related to em but something else.

I have also received more feedback from other users and this is completely isolated to FireFox on Mac Machines.

Comment 2

[Tyler Downer [He/Him]]

Reporter, are you still seeing this issue with Firefox 3.6.13 or later in safe mode or a fresh profile? If not, please close. These links can help you in your testing.
http://support.mozilla.com/kb/Safe+Mode
http://support.mozilla.com/kb/Managing+profiles
Also, ensure you update all your plugins (Flash, Reader, java, quicktime, etc) to the latest version available on the vendor's website.

Comment 3

[Matt]

I can't be sure if the issue still exists.  I switched the menu to using images for the buttons with text and that resolved it.

I will mark this as resolved.