Generally when you say you've done your browser testing it will mostly take place on a PC, and at the very least, it will be IE*.
* No matter how much we developers or designers complain that IE isn't standards compliant, and Firefox is the way, the World still prefers IE (at time of writing!).
However, being that I've just started my company, I want to start on the right foot. That means I'll be aiming to support the Big Three Safari (I'm a Mac user - it's always going to come first!), Firefox and IE.
But then there's IE for the Mac. A notorious application that's usually the oddball of the bunch (oh - I guess there's Netscape 4.7 - but I'm not counting that fruitcake).
UK EVENTAttend ffconf.org 2024
The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!
£249+VAT - reserve your place today
I've designed the Left Logic web site to be as accessible as possible, to work without JavaScript, to read correctly without CSS and so on.
So when I compared my site between Safari (left) and Mac IE (right) here's what I saw:
Note the big ass gap in IE on the right, and note that the Safari view is exactly how Firefox and Win IE saw my site.
Here's the code for the container DIV that holds the main frame of content:
#content_frame {
position: relative;
width: 478px;
left: 199px;
background-color: #fff;
margin-bottom: 40px;
}
Mac IE had applied the left: 199px to all the containing DIVs, cascading the ID's style all the way down. I should have been styling just the container DIV and not all those within the DIV.I also realised that the ID should be styled to the specific DIV, so I would add DIV#content_frame. Not much changed.
Then, I found that if I ditch the left and replace it with a margin-left all would be well with the Big Three, and the runt of a half-brother: Mac IE.
Here's what the code should have been:
DIV#content_frame {
position: relative;
width: 478px;
margin-left: 199px;
background-color: #fff;
margin-bottom: 40px;
}