PDA

View Full Version : Mac/Win display differences


RainForest
09-25-2012, 09:33 PM
Hello,

I've noticed that my website displays differently (wrong) when viewing on a Mac than on Windows, even though I'm using the same browser. Specifically, the main content window doesn't begin its display until after the left sidebar content ends.

I understand I'm never going to get different browsers to display exactly the same, and that there are just some things that I've got to live with, but is there a way to figure out what's causing the display discrepancy between Mac Firefox and Windows Firefox?

gentleone
09-25-2012, 09:39 PM
Do you have a link for us, RainForest?

RainForest
09-25-2012, 10:06 PM
You bet. http://ow.ly/dZs92

RainForest
09-25-2012, 10:12 PM
I'm trying to learn Firebug for troubleshooting these types of problems, but really stumbling around.

I think I'm on the right track, tho, because when I inspect the left sidebar (the header row is WAY too big), and turn off left float, the main content drops down to the end of the sidebar!

I don't however, have any idea (so far) how to go about finding WHY it's doing that...

gentleone
09-26-2012, 10:53 AM
Which Firefox displays wrong? On my Mac the content just starts where it's supposed to start (I think) ... right underneath the main navigation.

RainForest
09-26-2012, 04:02 PM
It has never displayed correctly on my home Mac - and truthfully, I don't look at the site often from home. It's been a problem with multiple versions of FF. I keep up with current versions - I think it's 15.0.1 now.

Last night I reviewed most of the pages in the site, and the only two I caught that didn't display correctly were the front page and the local utilities page, which also had main content begin after the end of the left column.

What started this all yesterday was that I tried to make a very small change to a page, and all kinds of things "broke" as a result, and it literally took me a couple of hours to straighten it all out. Note I didn't say "fix", because I had to restore the messy-coded pages. I suspect it comes down to messy coding. Sooo.....

I've decided to try a new tack on this issue. The front page of the site is a stand-alone - all other pages are built off a template. Today I'm going to build a brand new front page from scratch (no starter page), and try to make it neat and clean code-wise, because the existing front page is a few years old with many updates and is quite messy code-wise. Over the past few years I've learned a bit more about DW, and perhaps I can eliminate the issues by starting fresh.

Also, we bought DW 5.5 a few months ago, and this will be good practice for me to get comfortable with its new features.

So, no resolution at this time, but I'm working on it! Thanks, gentleone.

gentleone
09-26-2012, 04:42 PM
Yes, I was looking at the code and saw that it is not a good start to get a cross-browser compatible webpage.

If you develop according to web standards and use a CSS reset like normalize.css (http://necolas.github.com/normalize.css/), you won't have (much) issues in Chrome, Firefox, Safari and Opera on Mac and PC. You only have to deal with the IE's.... that's at least where 70% of my development time goes into.... fixing and hacking around for IE.

Good luck with your rebuild! :)

RainForest
09-26-2012, 04:57 PM
When I first built the page, I hadn't heard about standard resets, but was aware enough to use a general reset. These days I'm using this universal reset:

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: - none;
outline: 0;
padding: 0;
margin: 0;
}

Your normalize code looks very complicated indeed. Do you recommend that over the simpler version I'm using?

I've learned more about using class selectors, too, so I'm hoping the new page will be much less "busy" with extra styles.

Once I get the existing pages cleaned up, my next goal is to add design for different devices!

gentleone
09-26-2012, 05:21 PM
Using the universal selector (*) to reset browser defaults is quite an aggressive way of resetting. It will hurt performance on massive websites, but for small websites you won't notice much difference.

normalize.css preserve some useful browser defaults, fix already some little bugs for some older browsers and includes some useful css properties for mobile. It's well commented for you to know where everything is for.

RainForest
09-26-2012, 05:46 PM
Well, my site is pretty small and and doesn't really have any bells & whistles, and no HTML5.

I was advised in the past to use the universal reset kind of as an equalizing starting point for everyone, but I'm gathering from what you're saying that that may no longer be the best way to go. (Things change so fast around here!)

If I were to use normalize.css in all future documents, would that affect how I built my page - that is, would there be settings I no longer needed to specify? or would I continue to build my page ignoring normalize.css's presence?

gentleone
09-26-2012, 06:36 PM
Like I said it doesn't hurt small websites, so if you want to keep on using it... no props.

Things goes fast in our industry in general. What best practice was 5 years ago, can be now bad practice.

It all depends on the kind of layout and which tags and elements you use in the HTML. You probably can comment out or even delete some things in normalize.css that you don't use in your HTML, or even change some values that you're comfortable with or are better for your layout/content. It's all up to you. Don't see normalize.css as a holy grail... it's just a great starting point imo.

RainForest
09-26-2012, 06:54 PM
OK, gentleone. I'll be experimenting away! Thanks for your advice. :-)

gentleone
09-27-2012, 10:07 AM
OK, gentleone. I'll be experimenting away! Thanks for your advice. :-)
Good stuff and your welcome! ;)