I'm working on a web design and I've done some really cool CSS stuff. The only problem? IE doesn't support the CSS standard very well (barely at all) so I can't use it. I understand their motivation, and it makes sense from a business stand point. But it sucks for me (and those users who would have seen my design) because I can't do the cool shit.

Standards Compliance NOW!

really? i have been using extensive CSS on quite a few web-projects and they all worked just fine with IE ...

what are you trying to do?
Andy

I usually find that it's the other way around...
A lot of things that work for MSIE won't work in Netscrape etc.

Centering vertically and horizontally. The stuff I've been reading pretty much sums up, "if it's cool in CSS, IE doesn't support it". I'll put my shit up so you can look.

what's "IE" ?

what's "CSS" ?

IE = Internet Explorer

CSS = Cascading Style Sheets (design and layout for web pages)

http://homepage.mac.com/markd/pm/CSStest.html

Looks good in my camino.

I never got excited about CSS anyway... I use it for table effects & things, but since IE can't handle much I never got too deep.

why don't you just do it with tables... works in every browser and a lot less complicated

Well I was trying to make it so there were two roll overs ( each half) but the full image changed on the roll over.

CSS is supposed to make things a lot less of a kludge. I could do it in table. But it's so dumb. I guess my hangup is trying to do things efficiently and intelligently. Tables are so brute force.

looked fine on my Mac using Safari..

I built it on a mac using Safari. Just noticed that the latest FireFox builds have the same issues as IE. Interesting.

Here's a book that may be helpful (and in my opinion should be required reading for all web designers):

Designing with Web Standards by Jeffrey Zeldman
New Riders Press
ISBN 0-7375-1201-8

This is the guy who started the Web Standards Project a few years ago and is the driving force behind the "A List Apart" web resource for web designers. He really knows his stuff and how to apply CSS and XHTML in the real world where standards compliance is not all that it should be. This book is worth it's weight in gold.

Looks good in netscape. Has a box around it in IE, and the text is below the color area in Opera...

-Kevin

I was really excited about what I could potentially do with CSS. But I'm not going to spend a shitload of time on this project just to be cross browser compliant. I'll just start over with plain old HTML.

This is why I stopped working with computers.

for the mouse-over, just use a DIV tag and javascript, for the placement of the links, use tables.

why make it harder than it has to be ???
Andy

This is simple? I must be missing something. This is what I was hoping to do:

1. When you mouse over the yellow area, the whole image (white area) will swap to image_left.
   
2. When you mouse over the purple area, the whole image will swap to image_right.
   

Notice the image is not split down the center. It's one image. Not two.

I used the most basic WYSIWYG composer program.
Fast, simple, easy.

Everyone is happy. No complaints.

Believe me, people who are shopping for tile or car resto don't care about computer hoopie doopie at all.


KT

what do you mean by image left and image right ???

Andy

What CSS can do is pretty awesome, but as was mentioned above, IE in particular, and even some of the others have really dropped the ball on making the browsers read it right. In fact, it looks like Microsoft won't play any game unless they write the rules themselves.

If you're talking about one static page, you have to still use tables unless you want to spend 4 times as much time to get the same thing. But if you're designing a site, you should probably spend the time to get CSS implemented as it makes future alterations and updates far, FAR easier. Firefox and Mozilla and Netscape and Opera, et all are probably more likely to eventually fall in step with the standards, but I seriously doubt IE will ever be completely compliant.

Not because they can't. Just because they won't.

http://www.csszengarden.com/ has some really neat examples of how CSS can be used to great effect to change the layout and appearance of a webpage by simply changing the CSS, without even touching the index file.

There would be two different roll over images. So...

image_left


image_right


When your cursor is over the yellow you see image_left. When your cursor is over the purple you see image_right. When your cursor is not in either you see the image as shown in my screenshot.

No complaints, but how many compliments?

Everything I do is to the Nth degree. I'm the guy setting tile under the dishwasher. There's no fixing me. Plus... I love figuring this shit out. Up to a point

The compliments come in the form of being booked with big dollar jobs all year long.

I get more work off my blah yellow page ad than WWW has generated.

The website is just to get the client thinking, to look at options.

I try to take the client to existing jobs so they can run there hands all over the work.

Computers will never replace me.

A simple photo gallery goes a long way, why distract?

KT

Ever thought of using a little Flash to get the job done?

Yeah. I don't think I'm going to go that route. I think sites that have a flash intro are cheesy (I always click Skip Intro). I like how quickly this would load. I'll probably just scrap the design and come up with something that work within the constraints of an MS world.

Now you're talking

The design is real simple to do with a very simple table and very little java script
I can do it for you if you like, when I get home to night, it's not much work
You're making a simple thing waaaaay to complicated

Here ya go....

Plain 'n simple

Thanks Jeroen. Except....

That's not what I was trying to do. I thought about that but decided against it. The idea was to have the whole image be at 100% opacity and then have the "non-rolled-over" parts go down to 50% opacity while the "rolled-over" part stays at 100%. Kind of a backwards roll over.

Here's what I settled for: http://www.paintandmetal.com/
That should work in all browsers sufficently. Icons should appear behind the text as you roll over, but might not in IE.

Cool website Mark, I had to use my imagination a little more than I expected, though.

KT

Heh. You told me to go simple. Here's what you should see on the front page when you roll over.

I'll follow along

KT

Rich at TEM Machine Shop want's me to do his now too.

How do I always get sucked back into doing these things?

Nope... aint working



Easy... change the sequence of the images

Works great in Firefox. IE can't make heads or tails of it.

Both ideas looked cool, but the first one didn't work in Firefox or IE.

There's a neat CSS program out there called TopStyle Pro that I've been using for the last couple of years. It's basically a CSS editor, and it will validate your style sheet against several different browsers. If you are targeting a specific browser, you can tell it which one and it will hide the CSS options that aren't available for it. Don't know if it's available for Macs, though.

I don't do a lot of web design, but CSS is still a lot easier than doing something in brute force then going back to change it later. I leave all the heavy duty web design to web designers and just do the behind the scenes programming. That way I only bang my head on the wall half as much.

Good luck on your design.