PDA

View Full Version : My CSS layout is perfect in Moz and Opera, but IE is going nuts.



AaronW
Aug 22nd, 2004, 04:42 PM
http://offtone.com/clients/churchfocus/index.php

Quite simply, IE is just going bonkers with multiple little oddities around the page. It's all valid, but IE just can't seem to handle it.

I'm wondering if anyone in here's willing to take a stab at a x-browser version of this? I'm going to write a seperate stylesheet for IE to chew on which involves dropping the top floaters out of the header and just laying them underneath... But that looks boring.

Note: Text resizing is very well handled right now in this version, and would certainly want to keep it that way. My guess is that the IE alt sheet is the best way to go, leaving the good browsers with the prettier version.

M1k3-+i3
Aug 22nd, 2004, 09:37 PM
I see nothing wrong mate.

Apart from your event calendar is stuck almost 5 years back.

ReadMe.txt
Aug 22nd, 2004, 10:48 PM
look down below the bottom right box, then across to the left. Try resizing the window for a better (worse) effect.

AaronW
Aug 23rd, 2004, 01:10 AM
Aye, and note the header image being thrown off course (that I can fix myself, I believe... I'll get on that now)

Antoniohawk
Aug 23rd, 2004, 02:59 AM
I don't have time to take a look at the code right now since I'm doing some homework. I did however think how cool it would look if the Saint Mary's tab and the Navigation tab had a lower opacity and you could see the image in the background. Just a suggestion. :)

AaronW
Aug 23rd, 2004, 03:13 AM
But, alas, IE isn't capable of such things.

And I think they'd clash with the other floater titles.

Antoniohawk
Aug 23rd, 2004, 04:03 AM
That's true, they might clash. You can however do it in IE. [http://www.domedia.org/oveklykken/css-transparency.php]

mindlessLemming
Aug 23rd, 2004, 05:03 AM
Sweet design Aaron :cool:

mcrilly
Aug 23rd, 2004, 11:39 AM
Give you a hint...

Minus margins (e.g. margin: -108px;) and IE don't mix.

AaronW
Aug 23rd, 2004, 12:45 PM
Antoniohawk:
Sure, but those methods would mean that the text inside my titles would get opacified (dibs on this word!) too. I _could_ wrap my <h2> and <h3> contents with spans and tell the spans to be 100% opaque, and the <h*> to be 75% or whatever, but I don't wanna add spans :P PNGs would work nicely, but IE doesn't support them (and that hack is buggy.)

mindlessLemming:
Thanks :D

mcrilly:
Perhaps, but alternative methods yielded even wierder results.

mcrilly
Aug 23rd, 2004, 02:01 PM
IE can be made to support PNG's. I'd suggest getting a hold of Eric Mayhors latest book, it has an excellent project in it covering his entry in to the CSS Zen Garden... which includes creatig a PNG flower (the one in the top right corner) that works in IE.

I can't rememebr it word for word, otherwise I'd tell you my self.

AaronW
Aug 23rd, 2004, 02:09 PM
That hook is what I was refering to when I said "That hack is buggy".

The hook doesn't allow you to position or repeat your background images. They're always top-left and always no-repeat.

mcrilly
Aug 23rd, 2004, 02:16 PM
Hmmm....

I'll look in to that for you and get to you on it via PM if you like? I'm sure in Eric's book he uses a PNG file and includes some sort of other file in the CSS to allow IE/Win to understand the Alpha channel on the PNG.

I'll PM you with my findings tomorrow.

AaronW
Aug 23rd, 2004, 02:32 PM
I've read (I think) all the possible methods for IE. Both inline, background, and the .htc file methods. The former two didn't work, and the latter didn't seem worth it.

mcrilly
Aug 23rd, 2004, 02:33 PM
That's it, .HTC!

Well if you've looked in to I'll let it be then.

ReadMe.txt
Aug 23rd, 2004, 03:04 PM
btw, opacity is inherited so that if you set the parent to 75% then th child to 100%, the child would be 100% of the parent's 75%.

And IE isn't too bad with -ve margins, it just tends to mess up the z-index a little bit.

What I'd like to know is why the header was 13px to the left?

AaronW
Aug 23rd, 2004, 08:54 PM
Alright, I've cornered it.

When I removed margin-right: 10px from the .floaters, all the weirdness went away. However, the weirdness only kicks in after 4px. 5px: IE goes nuts. 4px? It's cool with that.

Thing is, I'm not cool with 4px. Though maybe this'll shed some light on what's really happening here? Why 4px? Who knows. I'll keep playing.

AaronW
Aug 24th, 2004, 02:28 AM
http://offtone.com/clients/churchfocus/index.php

W00t!

Now onto the fun stuff!

For anyone wanting to know what the problem was, I'm affraid it's just one of those "IE only knows" things... What sparked it was when #content was touching a .floater. #content in IE was actually 10px too wide, so I shrunk it for IE-only and voila.

I'm going to make a new thread so people can browser check it. That'll be yet another headache party I'm sure.

]|V|[agnus
Aug 24th, 2004, 07:14 AM
I like the initial idea about the translucent top headings. If you don't want to figure out the .htc method, do this:



selector {background: url(images/translucent_tile.png)} /* good browsers */
* html selector {background: url(images/translucent_tile.gif)} /* IE */

AaronW
Aug 24th, 2004, 12:36 PM
I already use something like that for my top menu. Am just not sure I like the transparent headers.

I'll think about it.

AaronW
Aug 24th, 2004, 02:12 PM
Hmm. I guess it's not too bad.

Antoniohawk
Aug 24th, 2004, 02:40 PM
Your page has gone totally wacky in Win IE 5.5. I'm at school right now, but I could help you out later today.

AaronW
Aug 24th, 2004, 03:22 PM
IE5.5 just got fixed. Doesn't like margin: 0 auto for centering.

]|V|[agnus
Aug 24th, 2004, 04:39 PM
Hmm. I guess it's not too bad.

You mean much better? :D Looks sharp.

Antoniohawk
Aug 24th, 2004, 10:22 PM
I agree with ]|V|[agnus, it looks really nice. :thumbsup: