I truly hate browser inconsistencies

Bonesnap

This is sort of a rant but also a question of guidance.

So I've been working on a personal project for most of this weekend, going about my merry way, satisfied with my progress. I notice an issue in IE9 but I barely bat an eye since I can address it through conditional CSS. I finally have my menu down pat, with the font selected and widths, margins, and padding all worked out. It looks great in all browsers (except the minor issue in IE9 I just mentioned). I restart my computer to complete a Windows update and start working on my project again. I reopen Firefox to look at the project and... what the hell is that? Why is the menu spilling over to the next line? It wasn't doing that for the last couple of hours. I quickly review my CSS to make sure I didn't somehow change something. Nothing appears to be different. I check my site in the other browsers and it looks fine. Even renders correctly in IE7 and 8.

I go to another computer with Firefox installed and bring the site up, and it looks fine. That's weird. Next I check it on my laptop and it's displaying the problem. That's... even more weird. I go back to the second computer and completely clear the cache and history... and the problem shows up. What is going on?

I play around with monitor resolutions, window sizes, and even tried disabling some of my add-ons, but nothing seems to fix it. The menu simply doesn't fit on Firefox.

After doing a lot of alt-tabbing between Firefox and Chrome, I notice there are small subtleties between the way Firefox and Chrome render the font. It seems as though Firefox gives the font a little extra... girth, for lack of a better word. Very small and subtle, but enough to throw the menu out of whack.

So what am I supposed to do? I spent hours going through hundreds of fonts and making sure the menu was the size I wanted it. I'm really not inclined to go back and redo it. So I am left with browser sniffing, which makes me upset for obvious reasons. I now have some jQuery code to check if the browser is Firefox, and if it is, make some slight CSS adjustments.

if($.browser.mozilla)
{
	$(window).load(function()
	{
		$('ul.menu li a').css('padding', '19px 27px 15px 28px').first().css('padding-left', '30px');
	});
}

It fits, and it works, except there's a tiny amount of space on the right of the rightmost menu item when it's hovered over. Here are a few images:

http://imgur.com/a/vcOqS

What should I do in this situation? I mean, it works now, with the browser sniffing, but who knows how reliable that will be. I've never encountered an issue like this before, and I have used many custom fonts from Google Web Fonts in the past, and to be honest I'm just really frustrated because it was going so smoothly and now it doesn't work in one of the most popular browsers. If it was in IE7 or something I wouldn't care too much.

Any suggestions?

Bonesnap

UPDATE

So after some more investigation, I've discovered that Firefox adds an additional pixel to the width and height of the links (turns out this was the problem with IE9 as well, except it wasn't adding to the height). I was able to fix the height issue relatively easily by actually setting a line-height value, but my main issue was with the width.

I figured out a solution but I'm not sure if it's more unorthodox than browser sniffing or not. Basically I had to explicitly set a width for each link, taking into account the padding. I had to do a little more with the last link because it's two words. The menu will eventually be a WordPress menu that I was hoping to be dynamic, but to be honest I don't see myself changing it too often. The rightmost link also fits as it should without the tiny little gap.

I'm going to stick with this solution over the browser sniffing because it seems less likely to fail and I have more control over it.

Thanks for reading my rant, and to perhaps turn this into something interactive, anyone else have some weird/annoying/etc. cross-browser issues they'd like to share?

Derokorian

Lets see - I created all the styles per the designers screen shots and we had a 600 line stylesheet (with brackets on their own lines) and it looked beautiful in Chrome. Then to get it working in FF, IE6+ and Safari (on Mac) we now have a 1750 line stylesheet and the additional 1150 lines took about 4 times longer to write than the original styles. Basically I think EVERYONE should dump whatever they are using and go to Chrome because it is so easy to design client side for.

And let's not talk about getting JS to work cross browser please.

cretaceous

Are those css drop shadows? Looks like it - I noticed they were browser inconsistent when I used them.
I wouldn't add fixed padding to text and expect it to be 100% consistent - I always try and build in breakability on text size especially in navs - what happens if someone resizes text in the browser?
..cough, splutter.. <tables> might fix it ;-)

But there can't be a gap of less than a pixel - it's not possible to show anything less than a pixel (but you know that).
I refuse to use conditional css ! - apart from the odd one liner like the star hack (and similar) for IE

I still build in FF and at the end test in IE and Chrome and usually it's good to go
(had an annoying thing in Safari recently with images not allowing text to wrap)
But it's part of the job and there to drive us all mad.

paulnaj

After a particularly massive rant I had about IE, a colleague mentioned that without browser inconsistencies a lot of web dev would be a whole lot easier to automate, and thus there'd be a lot less work about.

Maybe we should thankful, heh heh!

dalecosp

paulnaj;11010809 wrote:
After a particularly massive rant I had about IE, a colleague mentioned that without browser inconsistencies a lot of web dev would be a whole lot easier to automate, and thus there'd be a lot less work about.

Maybe we should thankful, heh heh!

Sounds rather a tad sci-fi to me. Of course, I'm over 40 ... the iPhone seems kinda sci-fi sometimes.

Computers programming themselves? What's your take on that? Got any scholarly linkage?

cretaceous

automate?
wordpress does a lot of automating.. it's enough for many

tbh I'd rather debug html than debug WP when users add x, y and z plugins, with themes that don't support them, and wonder why it no longer works properly.. while not remembering what they've actually done..

paulnaj

I thought my 'heh, heh' suggested that my tongue was at least slightly in my cheek - next time I'll make it a bit more obvious.

Weedpacket

cretaceous;11010779 wrote:
..cough, splutter.. <tables> might fix it ;-)

Not entirely beyond the realms of possibility...

display:table;
display:table-row;
display:table-cell;

http://www.w3.org/TR/CSS21/tables.html#table-display

Easy enough to forget with IE being so slow to support them.

Bonesnap

Derokorian;11010691 wrote:
Lets see - I created all the styles per the designers screen shots and we had a 600 line stylesheet (with brackets on their own lines) and it looked beautiful in Chrome. Then to get it working in FF, IE6+ and Safari (on Mac) we now have a 1750 line stylesheet and the additional 1150 lines took about 4 times longer to write than the original styles. Basically I think EVERYONE should dump whatever they are using and go to Chrome because it is so easy to design client side for.

Geez, what were you doing in your CSS? Were you doing some crazy CSS3 transitions and transformations or something? Nine times out of ten everything works for me across browsers in a single go minus IE7 and sometimes IE8.

Derokorian;11010691 wrote:
And let's not talk about getting JS to work cross browser please.

jQuery isn't infallible, but it eliminates 99% of cross-browser issues for me.

Also I find Firefox to be much more agreeable than Chrome. I don't know, I just prefer Gecko to Webkit. I also find that Gecko/Firefox seems to be the only browser that's capable of displaying fonts without making them look terrible. I view my site in anything but Firefox and all the fonts look jagged and ugly. I view it in Firefox and they're smooth and look amazing. Actually, IE9 makes them look pretty good, too, but not quite as good since it doesn't support text-shadow.

cretaceous;11010779 wrote:
Are those css drop shadows? Looks like it - I noticed they were browser inconsistent when I used them.

Yeah there are two slight box-shadows on the <ul>, but they don't affect the width or size (it was one of the first things I removed).

cretaceous;11010779 wrote:
I wouldn't add fixed padding to text and expect it to be 100% consistent - I always try and build in breakability on text size especially in navs - what happens if someone resizes text in the browser?

It depends on the design, but in navigation menus I tend to give the <a> tags display:block and some padding because then you only have to hove over the menu item rather than the menu link, and I find it's nicer not only for looks, but also a little nicer for useability.

As for people changing their font size... not my problem. If they want to deliberately change the defaults of their browser they can't expect everything to work for them, and it's my understanding that the browser's font and size only kick in if the website hasn't chosen one. For example I changed my default of Times New Roman and 14px to Segoe UI and 16px, but it only takes effect if the site I am viewing doesn't have a font set.

We had a client complain before that when he zoomed in all the images on his website looked blurry. :glare:

cretaceous;11010779 wrote:
..cough, splutter.. <tables> might fix it ;-)

:glare:

cretaceous;11010779 wrote:
But there can't be a gap of less than a pixel - it's not possible to show anything less than a pixel (but you know that).

Yeah it confused me. If I increased it by one pixel, it would spill over. If I decreased it by one pixel there would be a gap. I unno.

cretaceous;11010779 wrote:
I refuse to use conditional css ! - apart from the odd one liner like the star hack (and similar) for IE

To be honest most of my conditional CSS is to fix stuff with IE7 and occasionally with IE8. I just put in the  in the HTML and link to a specific style sheet. It doesn't break standards and only IE browsers care about them. Most of the stuff is relevant to drop down menus.

cretaceous;11010779 wrote:
I still build in FF and at the end test in IE and Chrome and usually it's good to go
(had an annoying thing in Safari recently with images not allowing text to wrap)
But it's part of the job and there to drive us all mad.

Yeah I prefer developing in Firefox, too. I test as I go in all the browsers just in case I run into something funky along the way and have to go back and change a bunch of stuff to get it working.

paulnaj;11010809 wrote:
After a particularly massive rant I had about IE, a colleague mentioned that without browser inconsistencies a lot of web dev would be a whole lot easier to automate, and thus there'd be a lot less work about.

Maybe we should thankful, heh heh!

My boss says pretty much the same thing. 🙁

cretaceous;11010821 wrote:
automate?
wordpress does a lot of automating.. it's enough for many

tbh I'd rather debug html than debug WP when users add x, y and z plugins, with themes that don't support them, and wonder why it no longer works properly.. while not remembering what they've actually done..

I work with WordPress nearly everyday so debugging it has become second nature to me. The good thing is though we don't usually have to dive into a plugin to fix something, though I have had to make minor adjustments in their source code a few times. We also usually code our own custom plugins to get work done.

Derokorian

Bonesnap;11010901 wrote:
Geez, what were you doing in your CSS? Were you doing some crazy CSS3 transitions and transformations or something? Nine times out of ten everything works for me across browsers in a single go minus IE7 and sometimes IE8.

Buttons with gradient background, rounded corners and drop shadow text. Turns out IE8 and below will have square buttons, IE9 randomly mangles everything and we haven't figured out a cause yet. FF doesn't like background images with relative paths. Needed to use html comment conditionals to override the filter property in IE9 so the gradients would work in IE9, because apparently in IE9 filter no longer works but background: gradient or one of the other properties I have set does lol. Basically to get the gradients working right in IE6+, FF, Chrome, Opera, and Safari (on mac, rest on windows) we have a total of 9 properties set to get one visual effect that's consistent.

Bonesnap;11010901 wrote:
jQuery isn't infallible, but it eliminates 99% of cross-browser issues for me.

I love jQuery and I've become the go to guy for all our needs. However there's still problems when you say things like "Our application supports IE6+" mainly many events and dynamically added / created events don't play nice. Thank god for VirtualBox I can text true IE6-8 with different VB setups, because the IE9 emulation of 7 and 8 doesn't represent how 7 and 8 actually behave. So M$ can't emulation their own software in its own environment.

Bonesnap;11010901 wrote:
Also I find Firefox to be much more agreeable than Chrome.

I dunno I like chrome a lot better than firefox. Maybe its just me, but I feel like ever since Google pulled funding to Mozilla that FF has gone downhill. That and I feel like the development tools are better in chrome, but that's my personal experience.

Bonesnap

Derokorian;11010919 wrote:
Buttons with gradient background, rounded corners and drop shadow text. Turns out IE8 and below will have square buttons, IE9 randomly mangles everything and we haven't figured out a cause yet. FF doesn't like background images with relative paths. Needed to use html comment conditionals to override the filter property in IE9 so the gradients would work in IE9, because apparently in IE9 filter no longer works but background: gradient or one of the other properties I have set does lol. Basically to get the gradients working right in IE6+, FF, Chrome, Opera, and Safari (on mac, rest on windows) we have a total of 9 properties set to get one visual effect that's consistent.

Yeah pretty much any CSS3 property won't render correctly in IE8 or under. Having to create websites from designs on a weekly basis I've started to keep a mental catalogue of which browser can do what. To compound the issue, IE9's support for HTML5 and CSS3 is terrible, despite what Microsoft tells you. The biggest thing I think it's missing: text-shadow (though apparently it's supported in IE10).

Do you not have a designer where you work? A nicely created background image with a gradient can save you a lot of trouble. 🙂 Otherwise, yeah, you have to stack half a dozen or more vendor-specific properties to get the effect you want across browsers.

Derokorian;11010919 wrote:
I love jQuery and I've become the go to guy for all our needs. However there's still problems when you say things like "Our application supports IE6+" mainly many events and dynamically added / created events don't play nice. Thank god for VirtualBox I can text true IE6-8 with different VB setups, because the IE9 emulation of 7 and 8 doesn't represent how 7 and 8 actually behave. So M$ can't emulation their own software in its own environment.

I do the same thing with VirtualBox. What version of jQuery are you using? As of 1.7 they've consolidated all their event handling into two easy to use functions: .on() and .off(), and they work beautifully on dynamically created elements.

Derokorian;11010919 wrote:
I dunno I like chrome a lot better than firefox. Maybe its just me, but I feel like ever since Google pulled funding to Mozilla that FF has gone downhill. That and I feel like the development tools are better in chrome, but that's my personal experience.

Google is funding Mozilla until the end of 2014, but I find there to be more weird things with Chrome than Firefox, even though Chrome truly does have the best standards support. I guess in the end it doesn't really matter as long as you're testing your websites in both.

Derokorian

We have a designer, but she doesn't know html / css at all. I could make the gradients myself in Photoshop if I really wanted but I don't really want to. I've become the "UI Guy" as I am the most comfortable taking a mock-up and turning it into an actual layout. Our designer doesn't seem to understand the technology behind a website because the images we do get I am re-creating on my own, because she doesn't give high enough resolution or, for example, she'll give 2 sizes but one is a direct scale down/up of the other. So while one is exactly 2 px wide, the other ends up having fractional measurements for its width making it not compatible with the layout without reworking. I've tried explaining that even numbers are necessary but it falls on deaf ears.

We generally use .live and .die for certain events, like click, we have to do .die('click').live('click',function..... and this has alleviated a lot of problems.

We currently have a problem with page generation such that there is no website wide template but rather templates for sections, each section with many templates sometimes. The biggest problem I've tried to point out is that changes to the UI require changes in dozens maybe even hundreds of files. As a result, we currently have 4 versions of jQuery in use, and 2 versions of the UI. I recently put together a 4 page document for our Chief Architect about changes/improvements I'd like to make to the application, including things like a header / footer include, more well organized css (its a total mess), and general standardization. We recently ran into a problem with our generated pages and the includes for scripts being out of order, so for example the jquery ui was included before jquery which is bad news. To resolve it I used SSI and created a .htm just to include the scripts and styles in the right order.

bradgrafelman

Derokorian;11010919 wrote:
So M$ can't emulation their own software in its own environment.

I'm hoping that doesn't surprise anyone. Heck, they have enough trouble getting their software to work as-is, let alone having it perfectly emulate it's previous imperfections. 😉

Bonesnap;11010925 wrote:
A nicely created background image with a gradient can save you a lot of trouble.

It can also do the exact opposite. What happens when two weeks down the line, your customer/boss decides that color scheme is just blah and tells you to change everything to a shade of green rather than blue? Better fire up (photo editing application) again and hope you saved all of your templates - if not, you'll have the fun task of re-doing all that work you did before. If you had stuck with CSS/HTML, however, you'd probably just change a hex value or two and be done with it.

cretaceous

Derokorian;11010935 wrote:
...the images we do get I am re-creating on my own, because she doesn't give high enough resolution or, for example, she'll give 2 sizes but one is a direct scale down/up of the other...

That person should be informed by the manager that preparing graphics exactly as you need is a key part of the job.
Alternatively take that part of the job away from her and have someone else do them, from her first stage visuals.
No point doing things twice.
Tell the manager that and see what he thinks when he sees you doing the graphics, when the perpson paid to do it can't.

Should be easy to educate her - often people are just stubborn e.g. 'I am a designer, I don't do graphic prep' (subtext 'I'm creative'), that's a pile of bull of course.

It also seems either the chief architect or team manager isn't on top of things!

(just for my curiosity: what sort of company is it? design and advertising? marketing with a web sideline? or strictly web site builds ?)

dalecosp

Derokorian;11010919 wrote:
Turns out IE8 and below will have square buttons, IE9 randomly mangles everything and we haven't figured out a cause yet

Hmm...

<meta http-equiv="X-UA-Compatible" content="IE=EDGE; IE=9; IE=8; IE=7" />

Just wondering ... 🙂

Bonesnap

bradgrafelman;11010945 wrote:
It can also do the exact opposite. What happens when two weeks down the line, your customer/boss decides that color scheme is just blah and tells you to change everything to a shade of green rather than blue? Better fire up (photo editing application) again and hope you saved all of your templates - if not, you'll have the fun task of re-doing all that work you did before. If you had stuck with CSS/HTML, however, you'd probably just change a hex value or two and be done with it.

I suppose it depends on the situation. We have the client approve the design before we start coding. If they come back later with a change like that (and they do), we tell them it will cost extra since they approved the design. Sometimes they complain, sometimes not. Using a background image ensures cross-browser compatibility and doesn't require you to pile on vendor-specific CSS that will invalidate your style sheet.

And I imagine that a good designer would save all their templates and PSD files not only because of potential changes in the future but also to reuse images, techniques, etc. We save all our PSDs of all the websites we have ever made.

Really though I guess it's a case-by-case consideration.

NogDog

Nothing should be preventing you from saving all your graphics in your version control system -- except inertia. 🙂

Derokorian

Bonesnap;11011201 wrote:
And I imagine that a good designer would save all their templates and PSD files not only because of potential changes in the future but also to reuse images, techniques, etc. We save all our PSDs of all the websites we have ever made.[Emphasis added]

Yeah but not everyone gets to work with a good designer. There are NO psd's on our svn and the only images she ever shares are jpg and png... and low res at that. Edit: Also she doesn't share them on svn but as an attachment to an email, and than I have to include them in svn and upload them on my own. shakes fist

Bonesnap

Derokorian;11011229 wrote:
Yeah but not everyone gets to work with a good designer. There are NO psd's on our svn and the only images she ever shares are jpg and png... and low res at that. Edit: Also she doesn't share them on svn but as an attachment to an email, and than I have to include them in svn and upload them on my own. shakes fist

Damn, that sucks. My designer is literally 10 feet from me. Makes communicating and other things very easy.