CSS - Test Your CSS Skills Number 35 - inline-block

[noonnope]

Well done to both and thanks for taking part.

thanks for a good word of appreciation

[kohoutek]

We have correct solutions for the inline-block quiz from Maleika (kohoutek) and from noonnope.

and cheers, noonnope.

[Rayzur]

Good job Maleika and noonope

If you are not sure WHY this works we will be explaining it at the end of the quiz.

[noonnope]

Paul -- if you add opacity or borders to test for overlap, do those submissions work?

will this answer your question?

[noonnope]

Good job Maleika and noonope

If you are not sure WHY this works we will be explaining it at the end of the quiz.

that's a good one! it makes me feel like a lottery winner! oh, tu, per accidens fortuna!

cheers Maleika!

[deathshadow60]

@noonnope -- No actually, that doesn't answer my question because you resized it smaller, so I can't tell if those are 2px or 3px or the 4px they are supposed to be between the elements... much less you didn't test other font-faces/styles.

Make a second one and set it to bold, and don't resize the image smaller. try it at each increment of font-size 1px at a time from 10px to 16px -- see what happens to the border.

But then the only solution I can think of given all the other restrictions is either negative margin or letter-spacing, and again those aren't a correct answer to the question... so unless there's some magical -webkit property I'm unaware of...

[Paul O'B]

Regarding the File input quiz I will say this once more:

It's just for fun and is not a workable or usable solution.

Some of you have asked "what's the point then?" and if that's the way you feel then please don't take part in the quiz and spoil it for others who like to play around and learn something on the way.

All these quizzes are mainly based on the same concept of finding different ways to manipulate css and it's by this very practice that we learn how to use them in the real world.

It's quite difficult to find new and challenging ideas which is why the quizzes are a little convoluted because otherwise you could just use "google" to find all known solutions to common problems.

[noonnope]

@noonnope -- No actually[...]

make a css for li's as you see fit to test, for me to apply, please. and i will post only a part of the screen, at 1:1.

[deathshadow60]

Oh, thought I'd also point out something you might not notice right away -- the problem with word-spacing in gecko 1.9+



@noonnope - PM inbound.

[Paul O'B]

We have another correct solution for quiz1 (inline-block) from dresden_phoenix. Well done - give yourself a pat on the back and thanks for having another go.

[deathshadow60]

Rayzur told me the answer, and it doesn't work here on Chrome Windows or Safari Mac, but it does work Safari windows and Chrome Mac...

Which is why I wasn't able to find it, I was testing Chrome/Win7 where the method in question doesn't work.

Same codebase, latest versions of each browser gives me this:

http://www.cutcodedown.com/for_other...sSaffyWin7.png

JOY. Trying to see if some other element trigger can fix it. NOW I'm REALLY pissed, as that was one of the first things I tried and it didn't work here!

[Rayzur]

I knew something must had been wrong Jason. I'll admit I am running WinXP and that is what all my testing was done with.

I know Maleika is running a Mac, I assume that is what she tested with before submitting her entry.

Could it be a problem with your virtual box?

[deathshadow60]

Could it be a problem with your virtual box?

That might explain the OSX test, since that's where I'm using VirtualBox... Doesn't explain the native copy of chrome I'm running on the host OR the VB copy I just installed trying to track it down. Since I have a 7 install for "7 on 7" with small fonts, it was easy enough to install Chrome there to see if maybe the host OS or my system metric was at fault. It ALSO appears to break in XP in a VM, but I went over to my netbook which is on same version of Win7 -- and it works there.

Which has me wondering if maybe it's a processor level difference or something weird like that. Rounding error or difference on the i7 870 compared to other processors?

Eh, wouldn't be the first time -- I've had allegedly identical machines with identical XP installs with the same versions of IE7 give me different appearances; Often seems I'm cursed like that... Either that or M$ is just toying with our minds by giving us different versions based on the registration key.

-- edit --

Actually, they're NOT identical OS versions between the netbook and desktop. They're both ultimate x64, but the workstation is VLE while the netbook is "System Builders".

Uhg, do I want to try installing OSX under virtualBox on a netbook for testing?

-- edit edit --

-webkit-line-clamp:1;

on .nav fixes the solution to this challenge not working in Chrome/Win and Saffy/Mac here. Damned if I know why - I just started going down the list of proprietary properties and throwing them at it.

[kohoutek]

Works flawlessly on ALL browsers on the Mac, including Safari and Chrome (OS X 10.6 running natively).

Edit: Also tested in Win7 and it works both, on Safari/Win7 as Chrome/Win7 (running on Parallels VE).

[Paul O'B]

Hi, I have another correct entry for quiz 1 from Rafael (Raffles) but more importantly Rafael has also solved my quiz2 correctly

Well done Rafael and good work.

Anyone else close to solving quiz2 yet?

[kohoutek]

I haven't started with quiz 2 yet.

When will the quiz end?

[noonnope]

count me out for the second part. but i do want to read about it

[Paul O'B]

I haven't started with quiz 2 yet.

When will the quiz end?

I'll finish the quiz when everyone gets bored with it

I'll leave it for a few more days yet but if there are no more entries or interest has waned then I'll post answers earlier.

[kohoutek]

Ok, thanks. I'll try the 2nd quiz now.

[Raffles]

The solution to quiz 1 is pretty great and I didn't expect it to be so simple (though it was the result of trial-and-error testing!). The best thing is it can easily be used in the wild.

[RyanReese]

Ah just saw this up..shall have a test in a bit after I get some work done

[RyanReese]

Thought of a possible (though not entirely sure on how good it is) entry..seems too easy

Sent in the idea to Paul

[Paul O'B]

Hi Ryan, thanks for the entry but keep trying as we are looking for an all purpose fix rather than just making it fit for a one-off case.

Keep trying though

[Paul O'B]

I have another correct solution from EricWatson for quiz 1 - well done Eric

I'll post the solutions on Sunday.

[Paul O'B]

Remon (Scalliolxtx) has also given me the correct solution to quiz 1. Well done Remon

I only have one correct answer for quiz 2 though.