I don't like Microsoft, IE, and my CSS code doesn't always work. Wah.

[Subway]

Oh, I can do it as well, no problem, but some designs where you have to do pixel perfect floats to achive a specific effect, things can break in IE.

Some examples of IE bugs: http://www.positioniseverything.net/explorer.html

Here is a very simple example: http://www.positioniseverything.net/...der-chaos.html

Really simple CSS, but IE isn't able to render it correctly.

Fredi

[EVPohovich]

The only time something breaks in IE is when you code something improperly, it's that simple.

[hanratty21]

So let me get this straight Subby. You don't like IE, right?

[Subway]

The only time something breaks in IE is when you code something improperly, it's that simple.

Improperly? Is this improperly:

.demo-outer {
    border: 3px dashed black;
    padding: 8px;
}
.demo-inner {
    border: 3px solid black;
    padding: 0 8px 8px 8px;
}
.demo1 {
    border: 1px solid black;
    margin-top: 8px;
}
.demo2 {
    border: 1px solid blue;
    margin-top: -1px;
}
.demo-outer p {
    margin-bottom: 0;
}

<div class="demo-outer">
  <div class="demo-inner">
    <div class="demo1">
      This is a &lt;div&gt; with a border and a positive top margin.
    </div>
    <div class="demo2">
      This is a &lt;div&gt; with a border and a negative top margin.
    </div>
    <div class="demo1">
      This is a &lt;div&gt; with a border and a positive top margin.
    </div>
    <div class="demo2">
      This is a &lt;div&gt; with a border and a negative top margin.
    </div>
  </div>
  <p>This is a &lt;p&gt; that does <strong>not</strong> have a border.</p>
</div>

http://www.positioniseverything.net/...der-chaos.html

That's all very simple and valid CSS code that works in all browsers except IE.

Fredi

[gerbick]

Is that Firefox 0.8 mentioned? How old is that code? And that's what the article and myself would call a "bug". CSS Tricks are just that... a trick. That's a bug. Other ways to accomplish that very same thing in all browsers.

Congrats on finding one example that supports that you've not looked for other methods that will actually work.

[Subway]

Only one? Here are more: http://www.positioniseverything.net/explorer.html

Here are a few more not mentioned on that page: http://www.sitepoint.com/article/top-ten-css-tricks

And I'm sure you know how to use Google to find even more.

And yes, if you know the bugs you can avoid them in most cases (not all), but if you create difficult designs with pure CSS, you automatically run into them once in a while.

Fredi

[EVPohovich]

It's a good thing I don't create difficult designs

This baby works in ALL browsers, no hacks.

body {background:#769A03 url(images/NEW/bg-main.png) repeat-x 0 0;color:#FFF;font-family:Arial, Helvetica, sans-serif;font-size:12px;text-align:center;margin:0;padding:0;}
p {margin-top:0;}
img {border:0;}
form {margin:0;padding:0;}
select {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#036;width:275px;background:#e1f0b4;border:1px solid #CCC;}
table tr .thlabel {background:#DC9855 url(images/NEW/bg-label-th.gif) no-repeat;}
table tr th {color:#000;background:#DC9855;height:23px;vertical-align:top;padding:10px 5px 0 0;text-align:center;text-transform:uppercase;text-decoration:underline;}
table tr th img {display:block;float:right;border:0;margin:-10px -5px 0 0;line-height:0;font-size:0;}
table tr .label {color:#000;text-align:right;background:#FFF url(images/NEW/bg-label.gif) no-repeat;height:23px;vertical-align:top;padding:10px 5px 0 0;}
table tr .label img {display:block;float:left;border:0;margin-top:-10px;line-height:0;font-size:0;overflow:hidden;}
table tr .text {text-align:left;background:#e1f0b4 url(images/NEW/white_1x1.gif) repeat-x 100% 0;padding:5px 5px 4px 5px;color:#F00;font-weight:bold;}
table tr .text img {display:block;float:right;border:0;margin:-5px;line-height:0;font-size:0;overflow:hidden;}
table tr .textb {text-align:left;background:#036 url(images/NEW/bg-text-rt.gif) no-repeat 100% 0;width:8px;overflow:hidden;}

#small {height:8px;}

.frantextarea {width:312px;}
.frantextfield {width:312px;}
.franselect {width:317px;font-family:Verdana, Arial, Helvetica, sans-serif;border:1px solid #CCC;margin:auto;}

#bh-rt {text-align:right;font-weight:bold;margin: 0 20px 0 0;font-size:14px;}
#bh-b {color:#769A03;}
#bh-h {color:#eb6f1d;}
#bh-c {color:#666;}

#members {margin:1px 5px 3px 645px;height:16px;font-size:10px;font-family:Verdana, Arial, Helvetica, sans-serif;}
.membersbox {height:13px;width:75px;font-family:Tahoma, Arial, Helvetica, sans-serif;font-size:10px;background:#FFF;border-bottom:1px solid #CCC;border-right:1px solid #CCC;border-top:1px solid #000;border-left:1px solid #000;}

#search {padding:0 20px 0 20px;margin:20px 0px 10px 0px;font-size:11px;font-family:Verdana, Arial, Helvetica, sans-serif;color:#333;width:180px;text-align:left;}
#topsearches {padding-top:12px;}
#topsearches a {color:#444;}
#topsearches a:hover {color:#036;}
.search_button {float:right;padding:3px 5px 0 0;}
.searchbox {height:15px;width:175px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;background:#FFF;border-bottom:1px solid #CCC;border-right:1px solid #CCC;border-top:1px solid #555;border-left:1px solid #555;}


#header {width:980px;margin:auto;}
#header-lft {width:380px;height:124px;background:#769A03 url(images/NEW/bg-header-lft.png) no-repeat 0 0;margin:0;float:left;padding:0 0 0 0;}
#header-lft a {display:block;overflow:hidden;width:244px;height:62px;background:url(images/NEW/logo-on-green.png) no-repeat 0 0;text-indent:-9999px;margin:24px 0 0 20px;float:left;}
#header-center {width:380px;height:124px;background:#769A03 url(images/NEW/bg-header-center.png) no-repeat 0 0;;text-indent:-9999px;float:left;}
#header-rt {float:left;width:220px;height:124px;background:#769A03 url(images/NEW/bg-header-rt.png) no-repeat 0 0;margin:auto;}

#content-index {width:980px;margin:auto;background:#fff url(images/NEW/bg-content-index.png) repeat-y 0 0;clear:both;}
#content-main {width:980px;margin:auto;background:#fff url(images/NEW/bg-content-main.png) repeat-y 0 0;clear:both;}

#column-lft {float:left;width:380px;background:#fff;color:#333;text-align:left;margin-left:-760px;}
#column-lft-top {background:#FFF url(images/NEW/bg-lft-white.png) repeat-y 100% 0;margin:0;padding:0px 20px 10px 20px;width:340px;}
#column-lft .cat {font-family:Tahoma, Arial, Helvetica, sans-serif;font-size:26px;text-transform:uppercase;color:#769A03;line-height:.8;letter-spacing:-1px;margin:0;padding:0;font-weight:bold;}
#column-lft-green-head {width:380px;height:34px;background:#e1f0b4 url(images/NEW/bg-lft-green-header.png) no-repeat 0 0;}
#column-lft-green {width:340px;background:#e1f0b4 url(images/NEW/bg-lft-green.png) repeat-y 100% 0;margin:0;padding:0px 20px 10px 20px;}
#column-lft h2, #column-center h3 {font-family:Tahoma, Arial, Helvetica, sans-serif;text-transform:uppercase;margin-bottom:0;}
#column-lft-green h2, #column-center h3 {font-family:Tahoma, Arial, Helvetica, sans-serif;text-transform:uppercase;margin:0;}
#column-lft h2 {color:#039;font-size:20px;text-transform:none;font-weight:normal;line-height:120%;margin-bottom:.2em;}
#column-lft h3 {color:#C60;text-transform:none;margin-bottom:0;}

#column-center {width:340px;padding:10px 20px 10px 20px;float:left;margin-left:380px;color:#333;display:inline;line-height:150%;text-align:left;}
* html #column-center {overflow:hidden;}
#column-center .cat {font-family:Tahoma, Arial, Helvetica, sans-serif;font-size:26px;text-transform:uppercase;color:#769A03;line-height:.8;letter-spacing:-1px;margin:0;padding:0;font-weight:bold;}
#column-center .cat2 {font-family:Tahoma, Arial, Helvetica, sans-serif;font-size:26px;text-transform:uppercase;color:#C60;line-height:.8;letter-spacing:-1px;margin:0;padding:0;font-weight:bold;}
#column-center a:link {color:#036;}
#column-center a:visited {color:#333;}
#column-center a:hover {color:#000;}
#column-center h2, #column-center h3 {font-family:Tahoma, Arial, Helvetica, sans-serif;text-transform:uppercase;margin-bottom:0;}
#column-center h2 {color:#036;font-size:20px;text-transform:none;font-weight:normal;line-height:120%;margin-bottom:.2em;}
#column-center h3 {color:#C60;text-transform:none;margin-bottom:0;}

#column-rt {float:right;width:180px;padding:0px 20px 10px 20px;background:#e1f0b4 url(images/NEW/bg-rt.png) repeat-y 0 0;color:#333;text-align:left;}
#column-rt .cat {font-family:Tahoma, Arial, Helvetica, sans-serif;font-size:26px;text-transform:uppercase;color:#C60;line-height:.8;letter-spacing:-1px;margin:0;padding:0;font-weight:bold;}
#nav {float:left; width:120px;}
#keys {float:right; width:40px;clear:none;text-align:center;}
#column-rt h3 {text-transform:uppercase;margin:0;font-weight:normal;color:#039;border-bottom:1px dotted #666;font-size:11px;}
#column-rt h2 {font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:15px;text-transform:uppercase;color:#C60;font-weight:normal;margin:0;border-bottom:1px dotted #999;}
#column-rt h2 {border-bottom:1px dotted #357;padding:0 0 3px;}
#column-rt a {color:#039;}
#column-rt a:hover {color:#000;}
#column-rt p {font-size:11px;padding:2px;}
#column-rt ul {margin:0 0 1em;padding:0;list-style:none;font-size:12px;}
#column-rt li {border-bottom:1px dotted #357;clear:left;}
#column-rt li a {display:block;text-decoration:none;padding:4px 2px;}
#column-rt li a:hover {background-color:#c60;color:#FFF;}

#column-main {float:left;width:720px;background:#FFF;margin:0;padding:0px 20px 10px 20px;text-align:left;}
* html #column-main {overflow:hidden;}
#column-main .cat {font-family:Tahoma, Arial, Helvetica, sans-serif;font-size:26px;text-transform:uppercase;color:#769A03;line-height:.8;letter-spacing:-1px;margin:0;padding:0;font-weight:bold;}
#column-main .cat2 {font-family:Tahoma, Arial, Helvetica, sans-serif;font-size:26px;text-transform:uppercase;color:#C60;line-height:.8;letter-spacing:-1px;margin:0;padding:0;font-weight:bold;}
#column-main a:link {color:#036;}
#column-main a:visited {color:#333;}
#column-main a:hover {color:#000;}
#column-main h2, #column-center h3 {font-family:Tahoma, Arial, Helvetica, sans-serif;text-transform:uppercase;margin-bottom:0;}
#column-main h2 {color:#036;font-size:20px;text-transform:none;font-weight:normal;line-height:120%;margin-bottom:.2em;}
#column-main h3 {color:#C60;text-transform:none;margin-bottom:0;}
#column-main-bottom {width:760px;background:#e1f0b4 url(images/NEW/bg-main-bottom.png) repeat-x 0 0;height:30px;margin:-30px -40px -10px -20px;}

#line {border-bottom:1px dotted #357;margin:5px 0 10px 0;clear:left;}

h1 {font-family:Tahoma, Arial, Helvetica, sans-serif;font-size:26px;text-transform:uppercase;color:#000;line-height:.9;letter-spacing:-1px;margin:0 0 .5em;padding:0;}

#footer {width:946px;height:45px;margin:auto;background:url(images/NEW/bg-footer.png) no-repeat 0 0;color:#859f2d;font-size:11px;clear:both;padding:30px 17px 5px 17px;}
#copyright {font-size:9px;color:C1E25F;margin:-25px 0 20px 160px;}

Just face it, it's the way you code that creates problems... just admit it.

[gerbick]

You're mad about CSS Tricks.

Write pure CSS and you won't have to resort to tricks; nor worry about getting stung by when a trick that works in one DOM doesn't in the other. Valid CSS works everywhere. Tricks do not.

Even within the same family of browsers and rendering engines.

I'm sure you know how to use Google to find out even more

[hanratty21]

oh, snap.

[Subway]

You're mad about CSS Tricks.

Since when is using tricks wrong? If your trick is valid CSS, it should be rendered correctly ... as it does in every other browser!

Fredi

[gerbick]

Tricks are good... when they work. You're upset that a trick doesn't work. It's not about validity any more. It's about making code do something it's not supposed to do.

Thusly, it's named a trick.

I can remember that Netscape 3.3 Gold had a trick that would allow you to shrink the visual representation of a jpg down to one pixel. That way, you could load images behind the scene while the user was viewing the front page.

Did it work in IE 3.0? No.

But it worked in Netscape... and even for the people still using Mosaic. The moral of this story that you'll invariably not understand... tricks always don't work across the board. It's a method of making software do something that it's not meant to do, but conceptually should do. Valid CSS follows the "structure" of order... this leads to this, which leads to this, then the borders are drawn. If you keep insisting on being valid, yet it doesn't work - such as you take a 1-2-3 step process with tags to render placement and a border around text, yet you figure out that with valid tags you can create a 1-3-2 process and create a rounded border (this is just an example) then you're now out of order but still valid. But that's a trick.

You've just been stung using a trick when you could just have used better code.

It happens every day dude.

[Subway]

It happens every day dude.

Corruption happens every day, too. Does that validate corruption? Of course not! Breaking the law happens every day, does that validate crimes? Of course not!

If there are limits to how you're allowed to use CSS, than those limits have to be defined somewhere! Why should you have to guess or use trial and error? Programming, scripting and writing markup is not like a spoken language, it has well defined rules that exactly describe what and how you can do something. And if you follow those exact rules and something still doesn't work, than that's a bug! If you tell me that using tricks is wrong, than you have to exactly define what is a trick and what not. Programming isn't magic, either you follow the rules and it should work, or you don't follow the rules and you should'nt wonder if something doesn't work.

It's not your job to guess where the limits of a rule are, those limits have to be exactly defined and if they're not, than that's the fault of the company that implemented the rules. Now of course the rules of CSS are exactly defined and honestly, they aren't that complicated. And the "tricks" I used aren't anything out of order, nothing that bends those rules. Nothing that shouldn't work. Nothing complex at all. And you know what? Firefox, Opera, Safari? They never had problems with those "tricks", what's not surprising, really as all I did was follow some very basic rules, rules that are well documented for many years now. Nothing that only a genius could come up with. Actually, I would say I'm by far not the only one that expected those "tricks" to work, I'm absolutely sure many had the same negative reactions when they tested those "tricks" in IE and found out that following rules doesn't guarantee you anything when it comes to IE. Working with IE is often trial and error and seeing that as the most normal thing will never remove this hurdle. But you know what? All the negative reactions because of those bugs, they actually made MS fix most of them in IE7 and I thank them for that. Sadly it will take probably a few years till enough users have switched to IE7 (or one of the other browsers that respect the rules) so I can ignore IE 5.5 and IE 6.

Fredi

[gerbick]

You seriously will not concede.

Allow me to state this even where you will understand and perhaps agree. If not, so what. I'll say my piece.

Anybody ignorant enough to argue that a trick, a hack, or something similar should always work in all instances of interpreted code is either gleefully ignorant, lacking real-world experience, or thinks that everything should work the way they think.

It doesn't work that way. Not at all.

You're upset about a trick that you want to work, but doesn't work. Either be happy that you can steer your clients to a better option, or you learn the other methods; some listed above.

And if that doesn't work for you, write your own DOM and/or keep complaining here about how a trick that works in one instance doesn't work in all instances and see how you're continued to be regarded.

Don't deflect my point any further about things like corruption and other things that don't matter in this situation; don't dilute what I'm saying with rants about how it "should" work when honestly you've not taken the time to understand the nuances (I haven't either for that matter) of the IE5/6/7 DOM and it's support of the languages and how it interprets code.

You're arguing about something you either have to fall into lockstep fully behind, or fall prey to caveats and pitfalls continuously.

Adapt, overcome... or get left behind. Adopt, learn... or complain and point fingers when you can't overcome. Learn how to do things in the expected manner... or just blame Microsoft continuously.

You've done the latter. You're smart enough to all of the above. You choose not to do anything else but complain ad nauseum about a program/company that has the lion's share (the majority) of the computing world.

In your support; I'm not happy how IE treated DHTML. I'm not happy how Safari handles some Ajax. I'm not happy with the inconsistency of CSS interpretation of all of the browsers.

I just find a way to do what I want within the limited frameworks allowed to me, don't rely on tricks that might cause me too much frustration, and I'm patiently waiting on CSS3... and Flash "Next".

Tricks are for kids... don't fall into those pitfalls so damn easily Fredi. You're much too damn smart to be upset to find further justification to continue using "tricks" when a more proper way exist.

I'm done. Continue without me on this subject. You won't see what I say... just find another tangent to pull me into; I refuse.

[Subway]

I'm not happy with the inconsistency of CSS interpretation of all of the browsers.

Thread closed.

Fredi

[EVPohovich]

First off, let me thank you, Subway, for hijacking my thread with another one of your "I can only see my point and the truth doesn't matter" ideas...

For someone who is Swiss, you sure don't avoid conflict and confrontation.

I showed you an example of my code, that is fairly complex, that proves that, if you write code correctly, no hacks, tricks, or the like are needed. All you want to do is argue, again, anti your national creedo...

I suggested that you do some research onto proper coding of CSS and you absolutely refuse to do so, instead stating, again, that browsers don't all do the same thing.....WHICH, IS INCORRECT, unless you want to hack or trick up your code. It is really that simple, it's the hacks and tricks that make things not work in all browsers. Seriously, do the research into proper CSS code...

Lastly, your days of being a mod here at Flash Kit are long gone. Don't act like you still have mod privileges. Honestly, that will piss me off more than the fact that you won't see the plain and real truth.

------------

If anyone would like to carry on with the original question raised in this thread, please do...

[ihoss.com]

I'm sorry if I'm too late to join this discussion and if I'm forcing it even further off track.

CSS was not designed for web application, its designed for laying out text, tables and images. Any modern design is pushing CSS beyond what it was designed for. You can't argue against that.

Now I'm not against pushing systems to their limits; I enjoy making games in Flash (which is an animation tool) and using CSS and unordered lists to make menus. But when I do these things I'm fully aware that I can't blame the tool for not working. Flash is not designed to run a 3D engine, so I don't blame it when it won't work. And when I realize there is no way to style a CSS page the way I wanted to, I take a step back and design it simpler, waiting for a better tool.

About IE6; it was designed long before the web standard became standard. Remember that Netscape used layers, which was even more wrong. The program is 7 years old for Gods sake! Don't blame it for not doing what three other browsers hardly manage to do 7 years later. If following the standard should be so easy, then how come even Apple can't do it?

As Gerbick said; it's not a trick if the program is designed to perform it. A dog is not designed to roll over when you tell it to, it's designed to eat you. But you don't expect it to have a serious conversation with you, because you know that is way beyond its limits. You got it to do something cool, but you know you can't get it to talk!

It's the same with CSS; its fairly easy to use lists as tabbed menus, but the effect involving pixel-perfect floating is way beyond what CSS was designed to do. I agree it would be cool, but so would talking to mans best friend. Instead we have to settle with throwing sticks to CSS.

[gerbick]

Thread closed.

Not by you. You're just too damn dense to see that you're using a CSS TRICK and upset about it to the point of joining in some rant against a company that's more prevalent than you'd like.

I'd suggest never snipping and pasting portions of my post ever again just to support your skewed, myopic view of the world, but I know that it doesn't help.

Especially when you're so damn smart you're incredibly ignorant that you're using a method that should not be used in any properly locked down CSS DOM.

Enjoy your bliss.

[Subway]

I will post an example sometimes next week. The "trick" I'm using is as I already mentioned not a hack, it's just some mildly creative use of a very basic feature of CSS. Nothing special.

Fredi

[gerbick]

...just some mildly creative use of a very basic feature of CSS....

Which in regular English would be a "trick".

[Subway]

Than Microsoft should write onto their homepage in big fat letters: "Caution: Don't be creative with our products!"

Fredi