Em's, %'s and pixels in Opera

I seam to be having problems with Opera, not sure why though. It’s typically got to do with the
fonts. In the past I used pixels to define the font-sizes, but I now use percentages and em’s as it’s
more consistent against browsers. As much as I believed this was true, it appears that Opera creates a
bloated version of the site, creating an undesired affect.

The trouble is I set the entire site with %'s and em’s. It now seams that I will have to go back and convert everything to pixels to solve this rendering issue.

Has anybody else come across this with Opera.

I never encountered a problem with font sizes in Opera. Do you have a link we can check?

I have the opposite effect: I use Gnome on Linux, and I set my desktop fonts to much larger than default. Firefox goes along with this, and also enlarges fonts. However Opera (and Chrome) are consistently small (and are consistent with all the Windows machines at work), meaning they aren’t picking up anything from the system.

Epiphany is the browser who, when using em’s to size stuff, gets everything so horribly wrong, boxes don’t fit anywhere, body text is microscopic while button text is 5 times too big. Both when it was Gecko and now that it’s webkit. I blame Gnome.

Sure I have a link, this is one of my sites with the same problem, but because this is for me it’s not really that big of an issue. In either case once I finished with the site I am working on I will have to fix this also, the problem is mutual - example of problem

I am not going to go through the site and convert everything to pixels, they seem to work better, particularly as I am going to have to give a cross-browser report to the client.

The funny thing is that I am sure I cross-browser checked that site before launching it. I did do something to my fonts on my Windows machine. I changed the dpi a while back to allow for crisper text, but if this was the problem then surely I would have a similar problem on other designed websites.

The difference I see between the two (Firefox/Linux and Opera/Linux) is the headers are a touch larger and fatter in Firefox (likely for reasons I mentioned above), tho body text appears to be the same, and the menu height is different. In Opera, slightly smaller, just smaller enough to create an orange line peeking through underneath the menu. I have to do 2 ctrl-- in Firefox to show orange, and then it shows more than Opera.


Titles on links, ew. Awesome design though.

Well, at my side the *****ly Pear site looks identical in Opera, Chrome and Firefox (Win XP). Are you sure it isn’t some setting on your computer that causes your problem?

Edit: WTF autocensor???

Yeah it leaves in boobs and shitake mushrooms but you can’t say p rickly. Forum retardation, a source of endless fun. :slight_smile:

lol… I knew about this problem before. My skype starts with ***** too, and so does my email account, so you can imagine the problem. You even get it censoring on messages and so forth. I gave up after a while.

Well, at my side the *****ly Pear site looks identical in Opera, Chrome and Firefox (Win XP). Are you sure it isn’t some setting on your computer that causes your problem?

I am using another machine now to the machine I developed it on. I developed it on my laptop and I am 1000% sure I did cross-browser checking. I am fairly sure I did not launch the site without checking it on all the browsers. Maybe it is my computer’s settings, but if this is the case why I am not having the same problem with other website.

The screen looks completely screwed on my computer. Here are the screenshots - Index of /screenshot.

Like I mention, I did do something to the computer settings. I did change the DPI back and it did not do anything. Another reasoning behind this might be my version of Opera. I go the following information for Opera:




Windows XP

Plug-in not loaded

I am not too sure what the problem is, but I am fairly sure I did not have this problem on my laptop (laptop has gone for servicing). So I am unsure what to do. I will try to check it on another machine to see the results, but even if this problem is a locally it still has to be solved.

Strange, i downloaded a new version of Opera and it solved the issue. In terms of fonts and sizes, is it still safe to use em and %'s?

It should be…
looking at your screenshot, the top problem is clearly font enlargement. If I do just one CTRL++ in Firefox, I get that exact same header, because Contact wraps out of its fixed-width container. Only way to stop that really is to build even more flexibly. %-width containers and letting so many as possible elements just sit at 100% width when possible.

For now, you could make it look better with enlarged text by making the ul enclose its floats. So forget the height (or keep it in as a minimum, min-height) and try overflow: hidden or if you like clearfixes then try that. At least then when Contact wraps down, the whole menu box is still black.

Similarly, for the bottom, overflow: auto is creating scrollbars. I’d have the outermost container do clearing (bt-wrp) instead of the first child, and then again either overflow:hidden to enclose floats or if that actually hides stuff, clearfix.

There are caveats using em though. Like I mentioned, Epiphany browser just pukes on them for some reason. And this means users will get a more radical difference in appearance if they change their desktop settings. While this should be a Good Thing (the site matches the user’s preferences), most developers don’t like large differences between machines if they can help it.

When doing some forms recently, I actually made design decisions based on the fact that my Firefox made those forms line up completely differently than Opera or Chrome (who both kept stuff small). My desktop settings also hit applications, meaning all my form inputs and buttons grow too.

When I press Ctrl ++ I just get an enlarged version of the site.

I got a similar problem with % too. Since I’ve reinstalled the browser the problem is solved, but it is very worrying as I should be in-control on how the web-page appears. I know this sounds silly, but what do professionals do with fonts.

I saw somewhere on a site use in this:

body {font-size:100%}

.classname {font-size:0.9em}

Would this make the font sizes full proof. I am working on a site now and I don’t want to disappoint the clients.

What you do is what I do (100% font size on the body, then anyone who does need to be smaller (or bigger) is set so).

When I press Ctrl ++ I just get an enlarged version of the site.

Because you’re not doing text-enlarge. You’re doing zoom.
Your Opera was mimicking text-enlarge, which tells me somewhere it had had larger fonts set somewhere (since otherwise Opera can only zoom).

To be honest I’m seeing a lot of issues with the code for this site – on the CSS side you have no fallback font families declared (so linsux is getting a serif default font), you aren’t explicity stating a line-height or size on body (probably meaning you’re declaring it a bunch of times you don’t have to later), though the real heart of the problem is the use of fixed height images behind dynamic fonts – completely buggering your layout here. (As a large font/120dpi user, I expect things bigger by default which FF doesn’t do automatically)

It’s made worse by the use of images that aren’t even designed for internet deployment… Much of the so-called “but I can do it in Photoshop” phenomenon.


for example being the same size by itself I’d allow for HTML+CSS+IMAGES+SCRIPTS on a page. You could probably cut that to a quarter that size by a technique known as pre-compositing instead of the fat bloated wasteful alpha .png

This though:

Being what I like to call a “non-viable design element” – Fixed height background box that is part of why using dynamic fonts breaks – since it will NEVER line up with the content right and be broken SOMEWHERE unless you make everything around it px based. You can see this on the broken menu on large font/120dpi systems – if you are going to stick buttons inside a fixed width container and run them right to the edges, you’re going to NEED to declare those in PX, or center them with the width fixed – or it’s going to break.

WORSE is the bloody typekit which is where your REAL layout problems stem. Here’s a tip, if something wants you to include a single 768k stylesheet, tell them where to stick it!!! Not familiar with that one, but 99.999% certain “well there’s your problem”. Goofy old-fashioned chicanery font embedding is a waste of bandwidth and results in unreliable font sizing cross browser. Throw that away and use something a wee bit more reliable like say… font-squirrel.

The markup is no winner either suffering horribly from a case of “not every ejaculation deserves a name” – which is to say endless pointless DIV and classes, who’s placement doesn’t even make sense. The HTML is still fairly lean, but I’d be pitching most of your markup in the trash – especially with the use of cryptic ID’s and classnames, quite often on elements that again, shouldn’t even need classes or ID’s.

take div#links-wrp – UL is a perfectly good block level container, what does it need the div around it for? You’ve got a single fixed width layout, what gives with the four div before you even get to the first actual content element – a presentational image that really doesn’t even belong in the markup… are all those H2 really subsections of the H1, or did you just choose the tag based on it’s default appearance or some black-hat SEO nonsense? That mascot image certainly isn’t content, “what we do” and “who we are” aren’t subsections of “Search Engine Optimization” so why are those h3?

Even your keywords meta doesn’t make sense and you’re missing media attributes on your sheet embeds…

If I was coding that same layout, the markup would probably look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

	content="text/html; charset=utf-8"


	content="A fun loving web design company that adds character and unique shape to web design, SEO, Social Media, Corporate Identity, and web education throughout Cyprus."



	*****ly Pear Media: Shaping Appearances


<div id="pageWrapper">

		<a href="\\">
			*****lyPear<br />
			<b><!-- image replacement --></b>

	<ul id="mainMenu">
		<li class="active"><a href="index.htm">Homepage</a></li>
		<li><a href="about_us.htm"><span>a</span>bout us</a></li>
		<li><a href="web_design_brief_history.htm"><span>w</span>eb <span>d</span>esign</a></li>
		<li><a href="marketing_seo.htm"><span>m</span>arketing</a></li>
		<li><a href="corporate_identity.htm"><span>C</span>orporate <span>I</span>dentity</a></li>
		<li><a href="school.htm"><span>s</span>chool</a></li>
		<li><a href="contact.php"><span>c</span>ontact</a></li>

	<div id="content">

		<hr />

		<div class="pearDudeBox">
			<h2><span>W</span>eb <span>D</span>esign with <span>C</span>haracter</h2>
			<div class="pearDude"></div>
				*****ly Pear Media is a fun-loving web design company with a character that aims to improve the world of web design in Cyprus. We cover aspects of SEO, SMO, and corporate identity/branding as well as web design and development. Our support and quality far exceeds anything found on the island.
				We hope that you will choose *****ly Pear Media as your one-stop shop for Internet and graphic needs. <a href="about_us.htm">Read more about *****ly Pear Media...</a>
		<!-- .pearDudeBox --></div>

		<hr />

		<div class="subSection odd">
			<h2>User Experience (UX)</h2>
				Our company takes the needs of your visitors into consideration, ensuring that your website will be easy to follow and navigate. We also look into HCI <em>(Human Computer Interaction)</em> elements of the site to fine tune our methods to suit your individual needs. Our primary research helps us find the most appropriate method of performing your tasks.
		<!-- .subSection --></div>

		<hr />

		<div class="subSection">
			<h2>Coding Standards</h2>
				Our sites are coded with World Wide Web Consortium (W3C) standards and cross-browser checked with several browsers. This helps us be sure that every element of your web site will look the same on every web browser, whether it is being used on a Windows system or a Mac. Without this cross-checking there are likely to be changes between browser versions.	Our methods eliminate much of these issues.
		<!-- .subSection --></div>

		<hr />

		<div class="subSection odd">
			<h2>Content Writing</h2>
				Content is the substance of your website. It is essential that your content is web readable. Most of your visitors will spend a limited time on your website. It is important that they locate the information quickly so that they do not go elsewhere to find what they need.
			<a href="web_design_bespoke_solutions.htm#copywriting" class="readMore">
				Read more about our copy writing services...
		<!-- .subSection --></div>

		<hr />

		<div class="subSection">
			<h2>Search Engine Optimization</h2>
				Here at *****ly Pear Media, we print exceptional products using cost effective solutions with no compromise on quality. Our complete customizable printing solutions attract businesses, like yours, who want their company to stand out from the crowd.
			<a href="marketing_seo.htm" class="readMore">
				Read more about our SEO services...
		<!-- .subSection --></div>

		<hr />

	<!-- #content --></div>

	<div id="footer">

		<div id="whatWeDo">
			<h2>What we do</h2>
				<li><a href="web_design_brief_history.htm">Web Design</a></li>
				<li><a href="marketing_advertising.htm">Online Advertising</a></li>
				<li><a href="corporate_identity.htm">Corporate Branding</a></li>
				<li><a href="marketing_seo.htm">Marketing</a></li>
				<li><a href="school.htm">Training</a></li>
		<!-- #whatWeDo --></div>

		<div id="whoWeAre">
			<h2>Who we are:</h2>
				<li><a href="about_us.htm">About us</a></li>
				<li><a href="contact.php">Contact</a></li>
		<!-- #whoWeAre --></div>

		<ul class="socialLinks">

			<li class="blinkList">
				<a href="http://blinklist.com/users/*****lypearmedia">
					BlinkList <span><!-- image replacement --></span>

			<li class="delicious">
				<a href="http://www.delicious.com/*****lypearmedia">
					Delicious <span><!-- image replacement --></span>

			<li class="designFloat">
				<a href="http://www.designfloat.com/user/profile/*****lypearmedia">
					Design Float <span><!-- image replacement --></span>

			<li class="digg">
				<a href="http://digg.com/*****lypmedia">
					Digg <span><!-- image replacement --></span>

			<li class="dzone">
				<a href="http://www.dzone.com/links/users/profile/859077.html">
					DZone <span><!-- image replacement --></span>

			<li class="flickr">
				<a href="http://www.flickr.com/photos/55170420@N05/">
					Flickr <span><!-- image replacement --></span>

			<li class="mixx">
				<a href="http://www.mixx.com/users/*****lypearmedia">
					Mixx <span><!-- image replacement --></span>

			<li class="reddit">
				<a href="#">
					Reddit <span><!-- image replacement --></span>

			<li class="stumble">
				<a href="http://www.stumbleupon.com/stumbler/*****lypearmedia/">
					StumbleUpon <span><!-- image replacement --></span>

			<li class="technorati">
				<a href="http://technorati.com/people/*****lypearmedia">
					Technorati <span><!-- image replacement --></span>

		<div class="subSection">
			<div>*****lyPear Media ....... web design with character</div>
			For more information call <span></span>
		<!-- .subSection --></div>

		<ul class="footerMenu">
			<li><a href="faq.htm">FAQ</a></li>
			<li><a href="careers.htm">CAREERS</a></li>
			<li><a href="offers.htm">OFFERS</a></li>

			Copyright All Rights Reserved to <a href="#">*****yPear Media</a>, please refer to the <a href="#">Privacy Policy</a>

	<!-- #footer --></div>

<!-- #pageWrapper --></div>


Which throws away about a quarter of your markup.

If I have time later I’ll toss together the CSS I’d use with that and re-master the images so you can see that yes, that layout doesn’t need

though MANY of it’s layout concepts REQUIRE the use of PX fonts – the trick is to limit their use as much as possible and to not make content areas that don’t expand to fit.

Since my Firefox blocks Typekit and @font-face, I wonder why my screenshots in it look the same as Sega’s Opera screenshots?
(looks like Trebuchet MS)

I think that 478k typekit nightmare is being used just for Palatino Linotype – which on those sub-headings IMHO look like ***. The main heading and footer headings are indeed trebuchet MS, and most of the body text is arial.

In any case, here’s my rewrite:
*****ly Pear Media: Shaping Appearances

Took more than a few liberties on the design. As always the directory for it:
Index of /for_others/sega

… is wide open for easy access to the files I used to build it. ALSO as always I have pretty much discarded all of the original files and done a total re-optimization, taking the original 1186K (834k compressed) in 23 files, and dropped it down to 118k (108k compressed) in 10 files. While that 478k fontkit thing is a hefty part of that reduction, don’t dismiss the 280k of images that got pitched in the trash despite no real changes to the appearance on that front.

I trimmed the width to 976px so it’s at least 1024 friendly. (1024 is NOT 1024 friendly once a scrollbar or browser chrome is on the screen!)

I modified the menu so that “stripe” think lined up – though really that’s not cutting it as the contrast with the orange makes it invisble. I’d REALLY look at discarding that menu style for something more practical. Gave it some text-shadow just to pimp it out a bit.

You’ll notice the heading image is now a single file without any need for alpha transparency. You had this odd “line” of color change that looked like a rendering error or something messing up the transparency… the dark box that was having issues was similarly afflicted – I kind of assumed that pattern was NOT intentional and got rid of them… though I did add a slight gradient to the heading.

… and pulled the one you had off of body because it was striping badly on the 18 bit displays that claim to be 24 bit… and was even striping on real 24 bit due to the narrow “style” of the gradient.

I got rid of using a image as the background to that box with the “peardude” as that was just not lining up with the text. Fixed height image behind content paragraphs == FAIL. ALWAYS. Instead I used CSS3 for the corners and shadow (IE8- don’t get that style, oh well) and apo’d a dummy div to position the ‘dude’… so as to avoid an extra wrapper I also apo the h2 into a padding I set on Content. You may want to use a class trigger for that padding if the sub-pages aren’t similarly styled. Rather than even trying to set a height, I instead just added enough padding that at 96dpi it lines up decent. I wouldn’t even TRY to make that pixel perfect across all browsers given the range of font renderers and sizes. The peardude image for that section being switched to “close enough” anti-aliasing with single color transparency instead of even trying to use alpha.

The floated boxes below that aren’t too fancy, though I did add a wrapping DIV for the second pair back it so that no matter what the content, the two anchors at the bottom will line up. those are also APO’d into some extra bottom padding. Better solution than fixing the height (which again is ALWAYS /FAIL/).

I also swapped their headers to the SAME font instead of trying to struggle with getting Palatino in there. the multiple different heading fonts seemed inconsistent anyways – and inconsistencies are bad design.

The top of the footer area I pulled a cute ‘trick’ with floats to line those two sections up – the opposing justification on their text making them not only fit well, but IMHO look better. I made the links be the same arial/helvetica/sans as the body text for consistency – basically I dropped the whole layout to TWO fonts. That’s more than enough.

I added hover states to the footer that not only makes the image light up, it also shows the text when hovered for people like myself who didn’t recognize most of them – thankfully you had this nice big empty spot in the footer for that text.

Both the footer background and the [url=http://www.cutcodedown.com/for_others/sega/images/socialMenu.jpg]social links getting pre-composited jpegs – no alpha needed!!!

The footer retains much the same styling you had on the original, I just built it using a wee bit different an approach.

The page also has graceful degradation when images are disabled, looks fine CSS disabled, and requires NO javascript assistance all the way back to IE6. Sure, IE8- users get a degraded experience (no round corners or shadows – OOOH) but the page is actually usable all the way back to IE 5.5. (there are minor layout issues, but you can still use it all the way back to there).

It DOES resort to px fonts in a number of spots where there’s really no choice – using %/em would break the layout in those spots – but the actual useful content on the page and most of the h2 are dynamic… and that’s where using %/em is important. Menu font gets bigger you get a broken menu. That APO H2 gets bigger it screws up the whole layout… same for the hover states in the footer, the content of the footer, etc, etc, etc…

Like anything else, it’s about the right tool for the right job.

This one was fun to do because despite being a simple layout, there were a number of things that took a bit of thinking to pull off… It was also an EXCELLENT example of what I mean by scripting for nothing, hundreds of K of images doing tens of K’s job, excess wrappers for nothing in the markup, and faulty site-building methodologies.

As it is, there’s still stuff I’d fix like the fixed width (semi-fluid for the win), that footer image being way too big still, etc, etc…

So… Hope this helps. Any questions fire away.

Off Topic:

BTW, that has to be the funniest auto-censor I’ve seen in a while