1–10

Browser Compatibility

From: ANT_THOMAS27 Jun 2012 21:30
To: ALL1 of 10
39649.1

Since I'm currently designing a site that is actually going be out in the real world and isn't mine, browser compatibility kinda matters.

 

Currently things look the same in IE9 and FF13. But there's a huge difference in Chrome 19. In the order of about 30pixels in some columned divs.

 

Not sure which of those is actually right, I need to do some adding up of margins, padding, widths and whatnot to decide which browser I'm annoyed at.

 

Anyone know of a reasonable guide to get this right?

 

Is it possible to define an attribute to be one size in one browser and something else in another? Is that even the right way to do it?

Reply
0/0
From: ANT_THOMAS27 Jun 2012 21:35
To: ANT_THOMAS 2 of 10
39649.2 In reply to 39649.1
Or maybe it was your code, idiot.
Reply
0/0
From: Matt27 Jun 2012 22:07
To: ANT_THOMAS 3 of 10
39649.3 In reply to 39649.1
Web Development Rule #1: Your site doesn't have to look exactly the same in every browser.
Reply
0/0
From: ANT_THOMAS27 Jun 2012 22:09
To: Matt 4 of 10
39649.4 In reply to 39649.3
Very true, but it's best not to look odd and uneven in one.
Reply
0/0
From: af (CAER)27 Jun 2012 22:13
To: ANT_THOMAS 5 of 10
39649.5 In reply to 39649.1
When things start getting really annoying to get right in all browsers, I sometimes find it helps to start again rather than fix the complex mess that you've grown. Not necessarily the entire page/site, just specific parts of it.

Perhaps build something approximating the design you want, then re-do it using as few HTML elements and CSS rules as possible.
Reply
0/0
From: ANT_THOMAS27 Jun 2012 22:19
To: af (CAER) 6 of 10
39649.6 In reply to 39649.5

That's pretty much what I've done now.

 

I've also started using PHP includes for large/complex content sections. Meaning the layout and design is easy to visualise in the code and the content lives in the included file meaning it's not getting in the way whilst I'm getting confused about what divs are open and shut!

Reply
0/0
From: af (CAER)27 Jun 2012 22:23
To: ANT_THOMAS 7 of 10
39649.7 In reply to 39649.6
You might also want to look into Mustache or some other client-side templating thing. I like Mustache cos it's really simple, but others like Handlebars are good too if you want a bit more power.

Depends how you're gonna make the site really - for instance, the WoW Pet Database site I did makes heavy use of client-side templating because it's all on the one page (if you add the class 'logged_in' to the body element you can see some more stuff like the Edit/New box etc. although you won't be able to apply any changes).
EDITED: 27 Jun 2012 22:24 by CAER
Reply
0/0
From: Peter (BOUGHTONP)27 Jun 2012 22:56
To: ANT_THOMAS 8 of 10
39649.8 In reply to 39649.1
quote:
...in one browser and something else in another? Is that even the right way to do it?

No, not least because you don't know what's going to happen with the next release of that browser, and you don't want to constantly be faffing around with the rate Google and Mozilla are incrementing their versions these days.


quote:
Anyone know of a reasonable guide to get this right?

Make sure the very first line begins with "<!doctype html>" - that is, no blank lines, no spaces, nothing before those fifteen characters, and no other alternative set of characters (some other versions also work, but not all, and there's no benefit to being more verbose than necessary).

That doesn't actually solve anything, it just makes sure you're working from a constant base (i.e. the browsers are [attempting to] obey the standards, rather than doing their own things).

Understanding how margin and padding are applied/combined helps, and that when you're setting "width" you're controlling the width of the content of that element (not of the element itself).
EDITED: 28 Jun 2012 10:59 by BOUGHTONP
Reply
0/0
From: af (CAER)28 Jun 2012 10:07
To: Peter (BOUGHTONP) 9 of 10
39649.9 In reply to 39649.8
Isn't it <!doctype html> ?

quote:
Understanding how margin and padding are applied/combined helps, and that when you're setting "width" you're controlling the width of the content of that element (not of the element itself).


code:
* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


Often makes life easier. Obviously can be applied more specifically if needed. This thing is an example of where border-box can really simplify the HTML.
EDITED: 28 Jun 2012 10:10 by CAER
Reply
0/0
From: Peter (BOUGHTONP)28 Jun 2012 11:05
To: af (CAER) 10 of 10
39649.10 In reply to 39649.9
Oh, didn't realise that was actually supported now.

(dance)
Reply
0/0