Frustrated With CSS

[WobbleWobble]

I'm trying to design a web site completely with CSS. I've been trying to move from my old habits of tables to the "proper" way of CSS and am running into many problems with how different browsers render the site. These browsers include, IE, Firefox, Opera and even Dreamweaver's WYSIWIG.

My code is W3C compliant and I've been hacking away at menus/layouts for the last couple days with no success. I'm either going back to my old table layouts or I might create different style sheets for different browsers.

But man! Does anyone else share my frustration?

 

[Modeps]

Nope, not really. Most of the stuff is pretty straightforward and makes a lot of sense... but there are things that render incorrectly in IE. Hopefully you're not using tables.

Divs + CSS == Excellence

 

[igowerf]

With when you're doing tableless designs, you have to use the appropriate HTML tags in the correct places. Just placing everything in divs will mostly work, but it won't be as clean and organized as it could be. Using the proper tags will also help the site display properly in browsers that don't support very much CSS.

 

[WobbleWobble]

Most of the stuff I'm doing does work. It's mainly some position items that are throwing me off.

Yes, I'm using all DIVS and CSS.

 

[bchalker]

CSS : "Causing Sustained Stress" 😉

CSS will be a handful to deal with until ALL browsers are 100% CSS1 and 2 compliant...which is as likely as Bill Gates selling MS to Apple. A lot of us can relate. CSS is a wonderfully organized manner of structuring a site, but with all the hacks and workarounds needed, it becomes a chore to use often times 🙁 Not great for woo-ing designers to go from tables to DIVs...

Some support sites:
A List Apart
Zen Garden
MezzoBlue

 

[replicator]

CSS is good, but as the other poster said, it is difficult to use 100% CSS with no TABLE for layout until it is better supported across different browsers.

For tabular information, html tables are still king and have real purpose.

I share your frustration, especially when you need to use silly CSS hacks to get things to display the same on IE and Firefox. Until then, CSS won't be straightforward, unless you are just appealing to one particular browser.

Tables are still the best guarantee in having your pages display accurately across most browsers, and so I'll keep using them sparingly, especially for professional work. For all other styling and formatting, I use CSS.

 

[Panthro]

Download this patch to make a lot of the incompatibilities compatible with IE.

 

[screw3d]

Here are some hints:

1. Start developing and testing in Firefox or any other Gecko-based browsers because they have the most accurate CSS support.
2. If it looks fine in Firefox, then test it in other browsers, and selectively fix it for them by using code that only target these browsers (there is a whole bunch that uses *, parent-child selectors etc.. google for it). You can do it on the same style sheet or a seperate one.. I just do everything in one style sheet because it is easier for me to keep track of the values.
3. Make sure that your HTML is valid.. this is very important.
4. Make sure the browsers are rendering in standards mode by using the appropriate doctypes. Keep in mind that IE will render in quirks mode if there is an XML prologue above the doctype.
5. Do it part by part, then integrate everything later.

That's just my $0.02 though.. I'm not a CSS newbie, but I'm sure others have pretty good workflows too 🙂

Edit: and oh, I usually only test it on IE6 and Firefox, and if it works on Firefox, it should work on other newer browsers like Safari and Opera7+. Screw NN4 and IE5 😛

 

[igowerf]

Originally posted by: screw3d
Edit: and oh, I usually only test it on IE6 and Firefox, and if it works on Firefox, it should work on other newer browsers like Safari and Opera7+. Screw NN4 and IE5 😛

Actually, I've found that Firefox and Opera will render certain things differently.

 

[Barnaby W. Füi]

Ignore the zealots and just use tables. CSS isn't an all-or-nothing thing; you can still reap most of the benefits of styling without having to resort to outright hacks just so that your table-less layout is "pure."

 

[Transition]

Originally posted by: igowerf

Originally posted by: screw3d
Edit: and oh, I usually only test it on IE6 and Firefox, and if it works on Firefox, it should work on other newer browsers like Safari and Opera7+. Screw NN4 and IE5 😛

Actually, I've found that Firefox and Opera will render certain things differently.

Ditto on that.

I've worked on some projects, attempting to use CSS & DIV's exclusively for page layout. While the concept of CSS is absolutely fantastic, i *definitely* won't be going through any major headaches at this point in time with such spotty support and varying degrees of adherence to the true standards set forth.

Right now some of my sites i've worked on with another memeber of this forum are mixed w/ some CSS & DIV layout content and HTML.

For now i'll just go with what works, as the downsides to using tables far outweighs the headaches of trying to develop for a poorly adhered standard.

 

[gorcorps]

Originally posted by: igowerf

Originally posted by: screw3d
Edit: and oh, I usually only test it on IE6 and Firefox, and if it works on Firefox, it should work on other newer browsers like Safari and Opera7+. Screw NN4 and IE5 😛

Actually, I've found that Firefox and Opera will render certain things differently.

It can. Many pages look different w/ Firefox. I personally test w/ Netscape and IE 6.

PS: I originally came here thinking this thread was about Counter Strike... <smacks self in face>

 

[Zugzwang152]

Originally posted by: igowerf

Originally posted by: screw3d
Edit: and oh, I usually only test it on IE6 and Firefox, and if it works on Firefox, it should work on other newer browsers like Safari and Opera7+. Screw NN4 and IE5 😛

Actually, I've found that Firefox and Opera will render certain things differently.

IIRC, Opera doesn't use the Gecko rendering engine. Firefox, Netscape, Safari, and others do though.

I test on IE6, Firefox, Netscape 7, and the free version of Opera.

 

[SagaLore]

Nothing is wrong with tables - just do all your formatting in css.

When you have divs inside of divs inside of divs inside of divs just to accomplish the same thing that one table could do, all you're doing is recreating a table. 😕 If you have a top down design, or no more than 2 columns, then divs are prefered. :thumbsup:

One thing I have found out when it comes to IE and Firefox - they treat padding and margins differently. If something doesn't look right with padding, then try accomplishing the same thing with margins, and vice versa.

And just try to stick with CSS1 elements - I've read that IE doesn't support a lot of CSS2 stuff. (like min-height, min-width)

 

[SagaLore]

Originally posted by: BingBongWongFooey
Ignore the zealots and just use tables. CSS isn't an all-or-nothing thing; you can still reap most of the benefits of styling without having to resort to outright hacks just so that your table-less layout is "pure."

Yep.

If you look at the source on antisource.com, I use tables for the layout, but all of the formatting is implemented with a style sheet. I consider that pure. To accomplish a 3 column layout in css that works in all browsers, I would have to use a lot of hacks, and even then the last column would end up floating over the rest of the page if the window was sized too narrow.

 

[Rip the Jacker]

Originally posted by: BingBongWongFooey
Ignore the zealots and just use tables. CSS isn't an all-or-nothing thing; you can still reap most of the benefits of styling without having to resort to outright hacks just so that your table-less layout is "pure."

Agreed. Why the hassle of making a DIV with CSS and all the testing of the incompatible browsers instead of using a table? Tables are very powerful and most sites use them. They should not be ignored.