[PhunkRabbit]

Everyone codes in a different way, personal style and preference makes a difference to how we all code our websites.

There are better and worse ways to do things, some people choose to do things to web standards and others dont.

I am interested in seeing just how vaired these styles can be. Ive had a couple of dissagreements with another member on the board because we both have very contrasting views on how to code CSS and the appropriate methods. While we are both right with our own merits it is an eye opener for me to see someone as passionate about things I wouldnt do as I am about things I do do!

I always use a CSS reset, not * { margin0; padding:0; } but a modified version of the eric meyer reset. When it comes to cross browser issues I have found the CSS reset prevents alot of these problems occuring from the start.

What is your opinion on CSS resets? Is the space they take up an issue for you? Do you find it better to just declare everything when you get to the element itself?

I am also a patron of the float, I will, unless absolutly necessary, always float aposed to position. I find again, it has less cross browser issues. They page also tends to degrade in a readble state more often than a positioned page. It also leaves your CSS file cleaner and less puffed out with code.

Dont get me wrong, there is a time and place for both, I am not saying I never use position or that it is wrong to however I do feel it is bad practice to use position for general site structure when a float does the job cleaner and more efficiently.

Do you prefur to position everything? Do you have issues with float? or maybe you just dont understand it?

I am hoping to spark a nice debate on this subject, please leave attitudes at the door

[drhowarddrfine]

Snook had this debate a couple years ago about CSS resets. The general problems with using them are 1) if you use them 'as is' you reset elements you don't use, 2) you zero elements and then turnaround and set them to something else. While they generally take up code space and download time, people forget they also take up processor time. The browser needs to run through every element, adjust according to the reset, then run through them again resetting to the new value. This may seem trivial in this day of faster computers but it is not when one is aware of the time this takes, especially when selectors are concerned.

Floats have their place but too many times they're used to position something in the left/right corner when that's the job for 'position'. Yes, float "works" a lot of times but so would 'position' without all the bugs and quirks of 'float', especially in IE, and positioning is far more flexible.

This post has been edited by drhowarddrfine: 31 August 2010 - 05:56 AM

[PhunkRabbit]

drhowarddrfine, on 31 August 2010 - 11:55 AM, said:

Snook had this debate a couple years ago about CSS resets. The general problems with using them are 1) if you use them 'as is' you reset elements you don't use, 2) you zero elements and then turnaround and set them to something else. While they generally take up code space and download time, people forget they also take up processor time. The browser needs to run through every element, adjust according to the reset, then run through them again resetting to the new value. This may seem trivial in this day of faster computers but it is not when one is aware of the time this takes, especially when selectors are concerned.

Floats have their place but too many times they're used to position something in the left/right corner when that's the job for 'position'. Yes, float "works" a lot of times but so would 'position' without all the bugs and quirks of 'float', especially in IE, and positioning is far more flexible.

It seems our opinion on the matter isnt as far apart as I first guessed.

I agree somewhat with what you are saying about resets, in the enviroment most of us work we should be using our own resets or modified versions of existing ones. I.E. modified to work on the elements you want it to not just zeroing everything. Hense why using the wildcard is bad. I am still slightly confused by your ongoing contradiction, allow me to explain,

Using position to stucture the whole page requires you to place attirbutes like top, left, bottom, right on most elements that have been positioned, this is going to take up large ammounts of space in your CSS file on a large site. Where as floating uses far less attributes.

However, you are arguing that resets are bad due to added extra code to the CSS file, please explain why it is ok to bulk your CSS with position relevant code but not with a reset, i must be missing your point somewhere.

Also, your point about position just backs up mine, for the most part, the example you have given is what I would deem as the correct use of position. Dont forget, I am specifically talking about the use of position to structure your whole layout as be bad, imo.

Thanks for the insight into your stance on it though

[drhowarddrfine]

PhunkRabbit, on 31 August 2010 - 06:27 AM, said:

It seems our opinion on the matter isnt as far apart as I first guessed.

I agree somewhat with what you are saying about resets, in the enviroment most of us work we should be using our own resets or modified versions of existing ones. I.E. modified to work on the elements you want it to not just zeroing everything.

Yes, that I agree with.

Quote

Using position to stucture the whole page requires you to place attirbutes like top, left, bottom, right on most elements that have been positioned, this is going to take up large ammounts of space in your CSS file on a large site. Where as floating uses far less attributes.

My point there is you might wind up setting properties anyway so why bother with the reset when you'll be setting it. That's my point about using CSS resets.

Floats, as I said, are used far too often without any thought given to problems they may cause. Want columns? Float left, float right. Done. So they say.

Quote

However, you are arguing that resets are bad due to added extra code to the CSS file, please explain why it is ok to bulk your CSS with position relevant code but not with a reset, i must be missing your point somewhere.

Not too much about the size but I have seen some mighty big resets. The new HTML5 Boilerplate is fairly large.

[PhunkRabbit]

Float right causes problems, cant remember the last time I used it for somthing other than an image floated in text.

Never had a cross browser issue using floated layouts, some complex too, other than the double margin bug in IE6 (browser issue not css issue).

[Jono20201]

PhunkRabbit, on 31 August 2010 - 01:42 PM, said:

Never had a cross browser issue using floated layouts, some complex too, other than the double margin bug in IE6 (browser issue not css issue).

What ever you do your going to have an IE6 problem..

[PhunkRabbit]

Jono20201, on 01 September 2010 - 09:18 AM, said:

PhunkRabbit, on 31 August 2010 - 01:42 PM, said:

Never had a cross browser issue using floated layouts, some complex too, other than the double margin bug in IE6 (browser issue not css issue).

What ever you do your going to have an IE6 problem..

Not at all. If you are coding cleanly and with no "junk" or un-needed nesting you will be surprised how little problems IE6 will give you.

All the sites I work with at my day job have to work in FF, IE 6 through 8, Chrome, Safari and Opera.
Example:

http://www.brierleyholt.co.uk/

Note, it looks the same in all browsers, it uses floats and symantic code. The IE6 style sheet is correcting the Double margin bug.

[drhowarddrfine]

PhunkRabbit, on 01 September 2010 - 04:53 AM, said:

Jono20201, on 01 September 2010 - 09:18 AM, said:

PhunkRabbit, on 31 August 2010 - 01:42 PM, said:

Never had a cross browser issue using floated layouts, some complex too, other than the double margin bug in IE6 (browser issue not css issue).

What ever you do your going to have an IE6 problem..

Not at all. If you are coding cleanly and with no "junk" or un-needed nesting you will be surprised how little problems IE6 will give you.

Absolutely false! There are tens, if not hundreds of sites, dedicated to hacking and fixing IE while there are NONE for ANY other browser. Getting a site to work correctly in ANY version of IE, much less IE6, almost always requires some effort. I track these things and find our customers get charged 30% to 50% more billable hours just for IE! In fact, I now put a 30% hourly premium on our contracts for those who want IE6 compatability and I get it.

For example, the site I'm currently working on works in all browsers EXCEPT we had to get a workaround because IE doesn't work with DOM events, so we had to write extra javascript. Then we had to create images for IE cause it doesn't work with SVG. Then we couldn't use canvas which forced us to hire a Flash developer we otherwise would not have needed.

IE is the worst browser on the planet and a royal pain in the buttocks.

[PhunkRabbit]

Well this thread was in specific reference to HTML and CSS, arguing that IE6 sucks for SVG and JS is not relvant to the current discussion.

IE6 has many issues yes, but my point is, when coding HTML and CSS it comes down to the coder as much as the browser.

[drhowarddrfine]

PhunkRabbit, on 01 September 2010 - 05:53 AM, said:

Well this thread was in specific reference to HTML and CSS, arguing that IE6 sucks for SVG and JS....

So does IE7 and IE8.

This post has been edited by drhowarddrfine: 01 September 2010 - 10:54 AM

[PhunkRabbit]

Anyone have anything constructive (and on topic) to add?

[Lemur]

If you want to start browser wars then go find one of the literally hundreds of them floating around not even more than a year back, this isn't one of them.

Considering float is a staple of the typical designing of sites it would be ignorant to say that something that works when used properly, and works well, is 'overused.'

Realistically the positioning element isn't a good idea considering the annoyance of making it a variable location whereas floats are far more dynamic in contrast. If we're talking position:relative within a float area then that would debatebly be more effective, but as far as basing an entire layout on it you spend far more time playing with positions than you would have with floats. Besides, if done correctly I can easily get it to work in IE6...

I'll try and keep this professional but personal opinions have their place in the workforce, and I'll be blunt to say no one cares what you think. If your boss says point and click, you do it or you find a new job. Evangelizing on new standards and the best and brightest will only work in California or other tech mechas, and even then good luck. Backwards and out of date? Of course it is, considering how much it would cost a company to do a mass upgrade to all of their facilities as well as the man hours involved. Unless an update is of critical importance (read: not because the web designer/developer throws a fit,) nothing will happen. It's life, you take it as you can.

[PhunkRabbit]

Nice to see another patron of the float.

Thanks for your input Lemur.

[RyanRobinson]

I fully agree with PhunkRabbit.

There can be no 'overuse' to the float. I swear by the float and if I do use position it's used accordingly and rarely. All my layouts are positioned using floats otherwise your relying on the browsers interpretation of the position attribute which differs from the many different browsers.

As for CSS resets, I do the same as you PhunkRabbit, * {margin:0, padding:0};. If I don't set this reset it can be real pain when working with <ul> and <li> I also set the border:0; for images that have A tags.

[PhunkRabbit]

RyanRobinson, on 01 September 2010 - 06:38 PM, said:

I fully agree with PhunkRabbit.

There can be no 'overuse' to the float. I swear by the float and if I do use position it's used accordingly and rarely. All my layouts are positioned using floats otherwise your relying on the browsers interpretation of the position attribute which differs from the many different browsers.

As for CSS resets, I do the same as you PhunkRabbit, * {margin:0, padding:0};. If I don't set this reset it can be real pain when working with <ul> and <li> I also set the border:0; for images that have A tags.

Thanks for the input, and once again its great to see somone appreciate the float.

With regards to the CSS reset, I stongly advise you dont use the wildard method (*), it will reset alot of elements that dont need it.

You should set out a list of elements you are deffinatly going to use and possibly going to use, reset those then set them to what you desire (thus setting them the same in all browsers). I use a modified version of the eric meyers css reset.