I thought I’d put up this short post because I was having problems with this last week.
For whatever reason, Firefox would not update automatically through its update channel and was still stuck on version 9.0. So, I figured why not just manually install it?
When trying to update it, as usual, I dragged it into the Applications folder and tried to replace my existing one. Only to get this message:
The operation can’t be completed because you don’t have permission to access some of the items.
I unlocked the Firefox.app file and made sure I had proper permissions, but still got that error. When I wanted to look up a solution, my Firefox had ceased to work!
After much searching, I finally found a thread on the Firefox support forums that provided the simple solution: delete the old app (just the .app, don’t use an app cleaner) then drag the new one in.
I would’ve reported it, but I can’t seem to reproduce the problem now… maybe they fixed it.
As a beginner coder, I generally assume that if something goes wrong it’s my code. While it’s true that a website needs to be coded in such a way that it’s interoperable, sometimes the problem originates in the browser. This may seem obvious to any web programmer, but it wasn’t to me, mostly because the assumption really is, “I’m not an expert, so the mistake must be something in my code.”
Font-size Chrome Bug
In my case, I was having issues with font sizes, and this is such a basic part of CSS that it never occurred to me that it was a browser issue. Lo and behold, it turns out the current version of Chrome (17.0.963.79) rounds font-sizes to the nearest whole number, and I was doing calculations based on Chrome. Because of this bug, the site I was formatting looked very different.
For example, say I have:
h2 { font-size: 1.2em; }
h3 { font-size: 1.17em; }
While these differences are so small you can barely tell in the example, you can imagine that on an entire website, it has a pretty big effect especially if it’s a base font size. In the end, I filed a Chrome bug report and it’s being looked at.
Sometimes it’s a Mystery
In our website’s book banner, there is a little styling trick in order to make it look nicer. What really got me was that it was using absolute positioning (which generally I avoid). However, if you make it relative, it no longer does what it’s supposed to.
Have something like this in the CSS:
span {
position: absolute;
top: 1em;
left: 1em;
border: 10px solid transparent;
border-right: 10px solid blue;
}
span+span {
position: relative;
left: 2em;
}
the HTML should then have an empty block: <span></span><span></span>
Result:
If you want to play with it, it’s on jsfiddle
So far, I haven’t found an answer, so I’ve simply recoded it to make it work in the new layout. Now the strange thing is that it works on MAC, but breaks using the same browsers on Windows.
