CSS - Test Your CSS Skills Number 11

[Centauri]

I got one in that works in FF & IE, but a little off in Opera (close though) - interesting ...

[Centauri]

Got Opera sorted now.

[Paul O'B]

Hi Thanks for the entries so far.

I have some new entries from:

EricWatson, ro0bear, Aguroy2 and Centauri

Some are good and some are close (I have replied to each via PM).

[YuriKolovsky]

ok, now i got it working in ie6
and nothing else...

im getting more curious every minute, wanting to see the solution that works in the 3 main browsers and has no hacks or conditional comments.

[molona]

I have a solution that seems to work in FF, but I am not satisfied at all. What I say that it seems to work in FF I mean if I leave my browser at full screen, the viewport is bigger than the screen, and it looks like it isn't centered, although it is... this is more obvious when you resize it to be smaller. And, to my surprise, it doesn't work in Opera

It had to be Erik who proposed this... mentors! they can't be trusted

[AutisticCuckoo]

im getting more curious every minute, wanting to see the solution that works in the 3 main browsers and has no hacks or conditional comments.

Me too. I can get it perfect in Opera or Firefox, but I can't get the red X exactly centred, vertically, in both at the same time.

Since I'm using GNU/Linux, I don't have access to IE, Safari or Chrome, but I have no doubt that there'll be problems in those as well. Especially IE.

[YuriKolovsky]

don't worry about safari and chrome.
it seems to fail miserably in them.

edit: lol happy 9999th post AutisticCuckoo.
and when you post a reply, happy 10000th post ^^

[molona]

I am glad to know that I am not the only one

[Centauri]

im getting more curious every minute, wanting to see the solution that works in the 3 main browsers and has no hacks or conditional comments.

Actually, the solution I came up that satisfied the above didn't comply to one of Paul's original conditions ......

[AutisticCuckoo]

edit: lol happy 9999th post AutisticCuckoo.
and when you post a reply, happy 10000th post ^^

Thank you! Right now I'm only 13,357 posts behind Paul. If someone would only tie him to a chair I'll catch up with him in about five years.

[Paul O'B]

Me too. I can get it perfect in Opera or Firefox, but I can't get the red X exactly centred, vertically, in both at the same time.

Since I'm using GNU/Linux, I don't have access to IE, Safari or Chrome, but I have no doubt that there'll be problems in those as well. Especially IE.

Congratulations on your 10,000th post Tommy

To all of those still trying this I should point out that Firefox and IE together are no problem to get the same and I think that possibly Firefox and Opera will be possible at the same time but not all three.

Safari, is probably impossible because of a nasty bug unless of course someone can think of a different way.

[Paul O'B]

Raffles has sent in a nice version for Opera Well Done.

[Paul O'B]

Roobear has a solution that works reasonably well in opera and firefox - well done;

Erik now has a solution that works in FF, Opera and Safari3!!.

I have a solution that works in IE6, IE7, FF3 and Opera10 but unfortunately needs one little hack for IE .

[YuriKolovsky]

Erik now has a solution that works in FF, Opera and Safari3!!.

: O !!!!!!! <--[amazed/shocked face]

I have a solution that works in IE6, IE7, FF3 and Opera10 but unfortunately needs one little hack for IE .

eagerly awaiting to see it, and wishing to see a version that works in IE6, IE7, FF3 Opera10 and Safari3, hacks or no hacks.

p.s. its amazing how very differently every browser renders the CSS in THIS specific quiz.

[Paul O'B]

p.s. its amazing how very differently every browser renders the CSS in THIS specific quiz.

Yes, there are few specific bugs that make this awkward.

Firstly opera is calculating the top percentage relative positioning offsets based on the height plus borders which is why it's always a number of pixels adrift.

Safari will not move an element with top or bottom positioning when based on percentages so another completely different method needs to be used.

IE and Firefox seem to treat things mostly the same although IE6 can be awkward with some aspects.

[aguroyz]

Any clue, on how I can have a line across x... )

[seosean]

This is pretty interesting, I can't wait to see what people came up with. I just found out about this and was working on something my self.

[Stormrider]

I think I know how to get the line, but I've not really paid much attention to it - been away all weekend, and struggling to find time!

[YuriKolovsky]

i think i find the solution for all the browsers, as i have been pushing work out of the way for long enough.

in my case, the line in the middle was the first thing i did.

:: hehehehehe



edit:
now i know how paul feels when he releases these quizzes.
hehehehehe

[RyanReese]

Just need the vertical alignment and then I will have IE6/7, FF3, Opera 10, and Safari 3 working...(assuming no bugs happen).

[markbrown4]

Thanks for posting these quizzes guys, It really helps to think outside of the square doing these types of challenges.

I think I've found a solution for FF, Opera and Safari that qualifies.

[Paul O'B]

Thanks Mark, although your entry almost falls into the category of finding a loophole it was a good effort all the same

[markbrown4]

Everything should be made as simple as possible, but not one bit simpler.

It's hard to tell when you find a loophole with these the correct solutions are usually pretty pretzel shaped. I thought it might appeal to the following:
2) Simplest Solution
3) Most innovative Solution

[Paul O'B]

It's hard to tell when you find a loophole with these

Sometimes they are the more interesting answers

Unless anyone is still working on this quiz I will probably post the solutions I've received on Wednesday as the thread seems to have quietened down now.

(We have another great little quiz to follow which I will probably post when this one is finished.)

[YuriKolovsky]

(We have another great little quiz to follow which I will probably post when this one is finished.)

when will i ever get time to work...

xD