SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard TheRedDevil's Avatar
    Join Date
    Sep 2004
    Location
    Norway
    Posts
    1,198
    Mentioned
    4 Post(s)
    Tagged
    1 Thread(s)

    em size difference issues with opera vs ie/firefox

    I am setting up a layout with flexible width, the problem is that either the layout get divided in opera or ie/firefox.

    As long as 1em is set to 100% (equal to 16px) there is no problems, and opera, ie and firefox display the layout exactly the same.

    However the second I set a font size, for example 0.8em then opera and ie/firefox will start to calculate the em size different for the content covered by that font size. So even if em equal to 100% outside a specific div with the font size set to 0.8em, then everything inside that div is set to em equal to 80% and every width variable has to be calculated against that.

    Are there any hacks that can be easily applied to fix this, so I dont need to apply a hack on each width value, or would the simplest be to just serve a different css file for opera and ie/firefox?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For font-size, EMs are relative to the parent's font-size. For all other properties, EMs are relative to the current element's font-size. It's the way things are. It makes perfect sense to me.

    So, yes, you need to adjust the EMs if you change the font-size on the element.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard TheRedDevil's Avatar
    Join Date
    Sep 2004
    Location
    Norway
    Posts
    1,198
    Mentioned
    4 Post(s)
    Tagged
    1 Thread(s)
    The problem is not that you have to adjust the em according to the parent font size. But that em width is calculated differently in opera compared to ie/firefox when you specify a font width.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh. Sorry. I missed the significance of that. Could you show us an example?

    Which doctype are you using?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Wizard TheRedDevil's Avatar
    Join Date
    Sep 2004
    Location
    Norway
    Posts
    1,198
    Mentioned
    4 Post(s)
    Tagged
    1 Thread(s)
    When you set the font size to be 76% in the body, that means for internet explorer and firefox that each 0.1em equals to 0.92px while in opera it equals to 0.9px.

    This is not the biggest difference when you deal with small numbers, but when the number becomes bigger it becomes an issue. In my case I was setting the width of the site to 900px, which equal to 97.8em in ie/firefox and 100em in opera.

    The main problem was that in addition I was setting the width on menu items through styling the "a href" tag. This was where the problem started, as when I set the font size here to 1.4em in the "a href" style the calculations in opera and ie/firefox went wild, and either opera or ie/firefox looked ok but never both.

    I found out that if I put another span element inside the a href tag and put the font size on the span element, then everything worked out. Now it looks ok in all three browsers.

    The result is that the layout will be slightly smaller on opera, but I guess that is a fair trade off to be able to use one css file.

    The layout in question can be seen on these two locations:
    Fixed px width
    Flexible em width

    I am not certain how good a choice my solution is, but it was the only thing Ive managed to get working. If someone else has a better idea on how to tackle this problem please let me know.


    I have added two sections of code below, one with the menu and one with the css. Please note that this is the code which works, but the only difference on them is the span tags in the html code, and that the font size was moved from the a href class to the span class.

    Code HTML4STRICT:
    <div id="menu_header">
    			<ul id="header_menu">
    				<li><a class="left_menu" href=""><span class="spanning">Home</span></a></li>
    				<li><a class="center_menu" href=""><span class="spanning">Services</span></a></li>
    				<li><a class="center_menu" href=""><span class="spanning">Products</span></a></li>
    				<li><a class="center_menu" href=""><span class="spanning">Portfolio</span></a></li>
    				<li><a class="center_menu" href=""><span class="spanning">Tools</span></a></li>
    				<li><a class="center_menu" href=""><span class="spanning">About Us</span></a></li>
    				<li><a class="right_menu" href=""><span class="spanning">Contact Us</span></a></li>
    			</ul>
    		</div>

    Code CSS:
    #menu_header
    		{
    		position: relative;
    		height: 3.0em;/*27px; */
    		border-top: 1px solid #196ba2;
    		border-bottom: 1px solid #6abcd8; /*306983*/
    		background: url("./../Images/Menu_header2.gif") repeat-x bottom;
    		text-align: center;
    		}
     
    	html>body #menu_header
    		{
    		height: 2.95em; /*firefox fix, opera can use either 2.95 or 3.0 so its ok*/
    		}
     
    	#menu_header a.center_menu, #menu_header a:hover.center_menu
    		{
    		width: 13.7em; /*126px;*/
    		border-right: 1px solid #aad6e8; /*make dotted in opera*/
    		border-left: 1px solid #0a5274; /*make dotted in opera*/
    		}
     
    	#menu_header a.left_menu, #menu_header a:hover.left_menu
    		{
    		width: 13.95em; /*128px;*/
    		border-right: 1px solid #aad6e8; /*make dotted in opera*/
    		}
     
    	#menu_header a.right_menu, #menu_header a:hover.right_menu
    		{
    		width: 14.0em; /*128px;*/
    		border-left: 1px solid #0a5274; /*make dotted in opera*/
    		}
     
    	#menu_header a, #menu_header a:hover
    		{
    		float: left;
    		display: block;
    		height: 1.8em; /*17px;*/
    		padding: 0.4em 0 0.65em 0; /*4px 0 6px 0*/
    		text-decoration: none;
    		/*font size was here */
    		}
    	#menu_header a 
    		{
    		background: url("./../Images/Menu_header2.gif") repeat-x bottom; /*one 1px smaller*/
    		color: #fff;
    		}
     
    	#menu_header a:hover 
    		{
    		background: url("./../Images/Menu_high_header3.gif") repeat-x bottom; /*one 1px smaller*/
    		color: #2A4577;
    		cursor: pointer;
    		}
     
    .spanning 
    	{
    			font: bold 1.4em Verdana, Arial, sans-serif; 
    	}

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. I see. I haven't done a horizontal menu in an elastic layout before. Have you tried using display:table-cell on the <li>s? (You would need a workaround for IE.)

    Why put a class on the <span>s?

    Why make the "center_menu" class? Why can't you just make a rule for the <a>s and then override it with the classes for the left and right most ones?

    Another thing I noticed is that you included "px" units in the XHTML width attribute for an <img />. In X/HTML, if it's not a percentage, it shouldn't have units. In other words, units are a feature of CSS, not X/HTML.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I used an elastic centred list in an elastic container once. Kravvitz is right, you need display:table-cell (and display:inline-block for IE). I used a variation of this menu.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •