Cross-browser compatibility issues. Can you guess which browser?

HTML & CSS
1

Hi there,

I’m working on a site which needs to look good across the board up to and including IE7. Joy!

I’ve put up a test page here:
http://www.mikes-lab.com/mikes-lab/personaltrainerleon.com/

I’m a Mac user, and have (just about) got everything looking good across the major Mac browsers (Safari, Chrome, FF & Opera). The only issue there is the textbox at the bottom of the page. (Looks good in Chrome, but I can’t seem to get it the same across the others). It’s not a major issue, but if you have any ideas I’d be grateful to hear them.

Anyways, when I was (reasonably) happy with the standards compliant browsers, I decided to take on IE7. After fixing a few bugs, there’s one that remains, and I have no idea what to do about it. If you look on the home page, there is a <section> tag with an id of “welcome”. The “book-now” <div> should line up with the bottom of the image. But its about 5px lower. There’s no margin or padding on the image, so I’m not sure why the <section> is not wrapping to the height of the image.

Also, I’m using the @font-face declaration to serve the fonts from the server. IE7 doesn’t load the fonts, but just renders them in Times New Roman.

I don’t have access to all IE builds, but I’ve been using Adobe’s BrowserLab to check out the page in IE8 and 9, but the css file is, for some reason, not loading. Can anyone check this out for me, and let me know if its an issue with BrowserLab, or with my css file?

Many thanks in advance,
Mike

2

Can I ask you…Why does it need to be pixel perfect? As far as I can tell this 5px lower does nothing to hinder the design or function. Also your doctype is all messed up. You should check that.

What you need to do is get a copy of Windows and test IE while you are developing your web sites. Using Adobe’s BrowserLab just will not do. Microsoft provides several Virtual machine images that can be concerted to VMware or other vendors: https://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=11575

3

Hi logic_earth, thanks for your reply.

I have a crappy old Windows laptop, which has a copy of IE7 on it. That is what I am currently using to test this page.

And why does it have to be pixel perfect? Because it looks better that way. Most websites, magazine layout, poster design, in fact any graphic design is normally formatted to some sort of grid. Its a question of design. I’m not looking acceptable or passable, I want my page to look the way I have designed it.

I’m sure there will be a reasonable explanation for this bug, and a workaround somewhere out there. I think its worth my time finding it.

Best,
Mike

4

Then you should stop right now, stop trying to be a web designer. The web is not print, alright. You need to get away from the methodology of pixel perfect that is PRINT DESIGN. The web does not allow for pixel perfection and you need to really stop trying to control it in that way.

I’m sure there will be a reasonable explanation for this bug, and a workaround somewhere out there. I think its worth my time finding it.

Your doctype is all wrong. It is suppose to be “<doctype html>” but you have “<doctype>”

5

Thanks for your reply.

I’m sorry to have bothered you.

M

6

I know…I sound harsh…But really the moment you learn the web is completely different to print design, that there is no pixel perfection. That much easier it will be for you to actually design sites. Unlike paper once it is printed it is completely fixed a user cannot change it, on the web this is not so. Different browsers rendering differently but also users can change various aspects on how a site may or may not render. Changing the font size is one classic example.

7

I understand what you are saying.

I still think it’s worth my time investigating this issue. I mean, IE is notorious for its bugs and quirks. And it may well pop up again. I understand that different browsers render differently, I’m just looking for a better solution than what I have now.

The book-now div has position:absolute; bottom:0; the welcome section has position:realtive; It should line up regardless of font-size or font-family.

If it’s not a bug (which it must be as far as I’m concerned, since there’s no reason for the added space), then I’ll either leave it as it is, or use a hack to sort out the issue.

M

8

Hi,

The extra 10px at the bottom of the element in IE7 is a well known bug and is the margin of the last paragraph in that section which pushes beyond the floated image when it shouldn’t.

You can add a class to the last p element to counter the bug.

Here’s a demo showing it working


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.outer {
	border:1px solid #000;
	width:500px;
	overflow:hidden
}
p { margin:0 0 10px; }
p.last { margin:0 }
.fl {
	float:left;
	width:200px;
	height:200px;
	background:red;
}
</style>
</head>

<body>
<div class="outer">
		<div class="fl">Float</div>
		<p>test test test test test test test test test test </p>
		<p class="last">test test test test test test test test test test </p>
</div>
</body>
</html>

There is no need to use empty clearer divs these days. Just use overflow:hidden on the parent when you don;t need visible overflow or use the revised clearfix method (google it - or see the CSS faq at the top of the forum).

It also looks like your CSS @charset is wrong as it should be:


@charset "utf-8";

No css is showing in IE8 or 9 and I’m guessing its to do with your font face rules. You should use the font-squirrel font-face generator and use the code that it gives you because all the debugging [URL=“http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/”]has been done for you.

9

Hi Paul, thanks for your very informative and succinct reply.

I had a feeling it was something to do with a margin somewhere!

As for the font-squirrel generator, I’ve been trying to use that bloody thing for the last 3 days. I click upload fonts, select the TTF fonts I want, and… NOTHING. Like nothing happens at all. I’ve tried it on several browsers. I’m wondering if there’s an issue with it at the moment.

Anyway, thanks again,
Mike

10

For your textbox and input you will need to set heights to match them up and I would float them to kill the white space gap rather than use relative position.

This is additional code not a replacement and should follow your original:



#callback form{float:right}
#callback input#go,
#callback input#tel{
float:left;
left:0;
}
#callback input#go{height:25px}
#callback input#tel{height:21px}

However there is no guarantee with form elements as all browsers have special styles applied to them that you can’t always control.

11

It seems to be working for me. I just uploaded your syncopate.ttf file and it produced the kit for me.


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 11, 2012 */

@font-face {
    font-family: 'syncopatebold';
    src: url('syncopate-bold-webfont.eot');
    src: url('syncopate-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('syncopate-bold-webfont.woff') format('woff'),
         url('syncopate-bold-webfont.ttf') format('truetype'),
         url('syncopate-bold-webfont.svg#syncopatebold') format('svg');
    font-weight: normal;
    font-style: normal;

}
12

Thanks Paul,

If I go to the font squirrel generator, I click upload fonts, and then in the dialogue box I choose a ttf font, (like syncopate), and the dialogue closes, then nothing. There’s no continue button, and the message ‘You have not uploaded any fonts’ remains. That’s using Chrome 21 on a Mac OS X Mountain Lion.

With FF 9, Opera 11 and Safari 6, I don’t even get the upload fonts button.

I’m presuming you are using a different browser, or something wholly more sinister is afoot…

Regards,
Mike

13

UPDATE

I’ve managed to find a very good alternative to font squirrel:

CodeAndMore @font-face made simple tool

I can see the light at the end of the tunnel. Btw, I’ve found Adobe BrowserLab to be a very useful tool, and renders pages very well actually.

Best,
Mike

14

FINAL UPDATE

Sorry to bump my post, but I’d just like to let you know that I’m done.

It’s looking good on Chrome, Opera, FF, Safari, and IE6-9! Thanks for your fantastic help Paul. And thanks for pointing me towards the Micro Clearfix method. This is a link to the article which I used to help me implement it: A new micro clearfix hack - Nicolas Gallagher

The font squirrel generator is still a mystery. I think I’ll see if I can get in touch with them regarding that.

Once again, many thanks,
Mike

15

You may find a clue on the problem page so check if any of these apply to you.

Especially this one:

D. Upload button missing - Flash is either not installed or not working properly on your computer

16

I’m guessing that flash probably isn’t installed correctly on my copy of Safari, FF and Opera, but that’s not the problem with Chrome. I’m guessing it’s an I/O issue, which, as they say, is normally always due to a firewall. I’m not able to change firewall settings, but the CodeAndMore site did me proud, so it all good in the hood.

Cheers!