Best Practices for XHTML(Please post yours)

I agree, I think indenting and keeping things spaced is important when trying to organize your code.

 

This makes soooooo much sense, I totally agree. If your not out to improve your code or use it properly then you might as well not even bother. Show respect for good coding standards and good techniques and it will repay you 7 times over. Coding is like art...-hell, it is an art, every aspect, showing consistency of your own techniques, keeping things organized, doing your best to improve. Making code reusable and maintainable is important to your time later on, just think "will I come back to this code in a year and think it's any good? or will I have to rewrite it all". Like anything else you can make your code beautiful or make it look like shit(I know theres a lot of shit out there). I think one of the most important things is just being open to learn new ideas and to improve your techniques. Don't let and old techniques hinder you just because you've been using them for a long time.

Just remember, your work is a reflection of who you are

Just my thoughts

Respect

 

It's not about which browser is favored by whom. It's about creating good code. If you code for a buggy, non-compliant browser, eg. IE, you will write buggy, non-compliant code. Using a good rendering engine for your primary test bed means the code is much more likely to be good. Consider this simple issue:

.floatholder {
  background: url(some.png) repeat-y;
  width: 500px;
  }

.floater {
  float: left;
  width: 150px;
  }
========
<div class="floatholder">
  <p class="floater">
    Lots of text, running to several lines …
  </p>
</div>

Code (markup):

In IE, that will give you a 500px wide box with a background image running the height of the text running down the left side. In a compliant browser (and presumably IE8), there will be no visible background image—because you wouldn't have created a new block formatting context as required by the rules, that, or use something like Tony Aslett's clearfix to force the bottom of the div to clear the float.

Did you not read with any comprehension my comment? In no way did I suggest blowing off IE users—quite the opposite, in fact.

That's just silly.

gary

 

Most IE bugs (except those damn little ones that sneak up on you in the dark-- get eaten by a grue!) don't have to have defences ready at the get-go. Most of them only occur in X instance, and when you're good, you know the moment you think of writing something like that that you'll need to do x for IE6. When a weird one pops up, I first tread off to Teh Googlies, or check my known bookmarked IE6bugsites. Nothing there, play with the code. Nothing, or strange result? Off to the forums to beg the hooded and bearded gurus for help. Nothing there? I try rewriting to avoid what caused the bug in the first place if I can.

 

When I code my sites, I have all 3 browsers open, and everytime I do a major change, I check in the browsers. I primarily code for opera, than firefox, and finally IE, though im still trying to figure out a way to get IE6 and IE7 working at the same time.

I also only ever use one style sheet. I don't like to have more than one. More files means more load time. Like a big file would load faster than two smaller ones.

Valid Semantic Markup is part of all my codes. I might not be all that good at coding yet, and I still make some mistakes, but Validating your code does a lot, especially if you are trying to make sites browser compliant.

@kk5st: I've actually had that error yesterday i think. I was getting pissed off because this bg of the container wouldn't repeat with the text. I asked on here, and someone was very helpful by telling me to add an overflow:hidden; to my container, and that fixed it. Just thought i'd mention that.

 

AGAIN with the stupid clearfix rubbish. ASSUMING you are NOT in quirks mode, the reason it's extending in IE is you tripped haslayout with the width... that means the ONLY thing you need to fix that is to add overflow:hidden to .floatholder for everything else to wrap floats.

Not that I'd waste a class on that P either... ".floatholder p" would be sufficient.

 

http://tredosoft.com/Multiple_IE

you should also test against safari, which is now available in beta for windows - allegedly the next release for windows won't be beta.
http://www.apple.com/safari/

I do wish Safari had an option to suppress windows fonts and only use the Mac ones - that would be a huge boost to developers since Safari for windows brings with it apple's font rendering engine (and a hefty sized slice of the cocoa codebase with it)

 

Woot. It's nice to see IE6 again. TYVM. I actually do have safari installed, but i think it displays pretty much the same as Opera does for me, so I don't really bother with it. Is it much different?

Thanks Again,
Nick

 

That was the point! The width triggered a buggy response from IE. People who code against IE tend not to know that's incorrect behavior. I also mentioned that modern compliant browsers needed to have a new block formatting context—which is what {overflow:hidden;} will do. So will {overflow:auto;}, {display:table;}, {display:table-cell;} and {float:left||right;}.

Sometimes, though, there will be problems. For example, if the container has other content that might overflow, and the desired rendering is for it to be visible and not trigger scrollbars. That eliminates the use of the overflow property, and the table and table-cell display values cause the element to expand to contain all their contents—much like hasLayout in IE. Further, if the width is not specified, the table/table-cell elements shrink wrap their content, as does a float element. Then, a float container itself needs to be cleared or contained.

The beauty of the Aslett clearfix hack is that it creates a zero height clearing pseudo-element that pulls the bottom of the container down to the bottom of the float. Built in is the Campbell tripswitch hack (it formerly used the Holly hack), which guarantees IE's hasLayout for non-dimensioned boxes.

No one method will work for every case, but at least one will work for any given case. See enclosing float elements for a demo of these methods.

Tony's hack may not be used as much now as it once was, simply because we've learned a lot more about css and about IE's WAD bug, hasLayout. When he developed it, it was a godsend. It is still very useful, so, don't use it if you don't want, but it doesn't deserve your silly little off-base rants.

Oh, the class on the p was for clarity's sake. Don't get your shorts in a bunch, it's a demo.

gary

 

That's one of the ways to create a new block formatting context. If it were I that gave you that, I apologize for not explaining the why of it.

See my enclosing float elements demo.

cheers,

gary

 

Hey, you werent' the one who gave it to me, but you were the one who explained it to me in my thread. i found your post quiet helpful actually.

Thank you,
Nick

 

Well, gary, that page answered a question of mine-- how to make IE let the floats hang out : (

I know Paul said "Set overflow to auto or hidden" but I still don't quite get WHY that makes the container wrap the floats. You'd think it would consider the float an overflow, and would hide it. ????

 

It would if the containing box were given a height less than the height of the float element. Consider this case (for modern browsers):

#wrapper {
  height: 30px;
  border: 1px solid black;
  overflow: hidden;
  }

p {
  height: 50px;
  float: left;
  margin-left: 15px;
  border: 1px solid pink;
  }
=====  
<div id="wrapper">
  <p>some float material</p>
</div> 

Code (markup):

Try that, then make overflow: auto;

cheers,

gary

 

use CSS great experience!

 

I code all my sites for Safari since I'm on a Mac and then use my gaming desktop (with IE 6 and 7 standalones) to fix IE (FireFox hasn't needed to be "fixed" yet and I test it on my Mac and my Windows machine)

Since conditional statements let me load a stylesheet for any browser/version I tell it too, I can fix whatever small bugs plague IE.

 

...scrollbar hell!

This is good to know; I've been using overflow:hidden willy nilly like doctors toss around antibiotics and I'm sure somewhere I would've had a set height and done that and been like, wtf?