SitePoint Sponsor |
|
User Tag List
Results 26 to 45 of 45
Thread: Test your CSS skills
-
May 10, 2004, 16:57 #26
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
42 is my guess, maybe even 40.
-
May 10, 2004, 17:24 #27Off Topic:
I feel like a preschooler in this thread
-
May 10, 2004, 20:39 #28
- Join Date
- Jan 2004
- Location
- Kentucky, USA
- Posts
- 1,099
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by r937
Off Topic:
vgarcia: I would be a toddler then hehe. I'm only 19
Edit - Danson: It is entirely possible to complete a CSS-challenge without using divs, spans, tables, images, etc. A little bit of clever thinking and document manipulation will go far ^_^
-
May 11, 2004, 02:28 #29
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Off Topic:
Originally Posted by bryan
Originally Posted by megaman
).
I'm working on another test that doesn't use hacks so hopefully that will keep everyone happy
Paul
-
May 11, 2004, 05:56 #30
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Off Topic:
So is tha 50 or 52
-
May 11, 2004, 06:00 #31
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
next month, i turn 20,000!! what a nice round number!!
-
May 11, 2004, 06:16 #32
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by bryan
Originally Posted by rudy
-
May 11, 2004, 06:21 #33
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
well, let's see
it can't be years, it can't be months, it can't be weeks...
and 20,000 hours would make me just under 2 years old
so it's gotta be....? anyone? buehler?
-
May 11, 2004, 06:53 #34
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Off Topic:
Hmmm - let me see...
Its either 14 days old approx (20,000 minutes)
or could it be nearly 55 years old (20,000 days)
I wonder which one it is
Paul
-
May 13, 2004, 06:35 #35
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Well no-one apart form Nick (doctornick) has offered a solution to this (with or without hacks) so here's the answer.
This was the orignal page that only worked in mozilla browsers etc.
http://www.pmob.co.uk/temp/spointquizq.htm
Heres the solution that works both in ie6 and firefox as per the challenge.
http://www.pmob.co.uk/temp/spointquiza.htm
If you remember the original problem was that there didn't seem to be anyway to keep the element on the bottom of the window and keep it a set distance form the top.
I gave a big clue in the first post by saying that only the css needed changing plus one other thing in the head of the page. Nick was quick enough to spot that the only thing to make a difference to the page would be the doctype. As I stated that the page had to be valid xhtml the solution was to use the xml prologue to force ie into quirks mode.
What good is that? - I hear you say. Well if you remember that ie6 in quirks mode uses the broken box model which puts padding and borders inside the element and not added to it as per the standard.
This allows as to specify a 100% height for the body but to also set padding that still keeps the total height at 100%.
Code:* html body {height:100%;margin:0;padding:180px 0 20px 0}
The padding top on the body is set to 180px which makes the page start 180px from the top. This keeps the page 180px from the top and also resting on the bottom at all times.
The next step was to remove the header from the flow and place it absolutely otherwise the header would start at 180px from the top. The header is placed absolutely at the top of the page i.e. the body outside of the margins I set.
Code:* html #header {position:absolute;top:0;left:0;}
Code:html>body #content { position: absolute; overflow: auto; top: 180px; left: 20px; right: 20px; bottom: 20px; padding: 10px; background:#fff; } * html #content { height:100%; margin:20px; padding-bottom:20px; overflow:auto; position:relative; z-index:100; background:#fff; }
I hope you enjoyed it and sorry that it wasn't hack free but each version will actually work without hacks but not in both browsers at the same time unfortunately
.
Congratulations to Nick and keep a lookout for my next quiz which will be hack free (with any luck)
Paul
-
May 13, 2004, 07:30 #36
- Join Date
- Jan 2003
- Location
- Somewhere in Indiana
- Posts
- 3,082
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
uhhh, yea, I would have definitly not been able to figure that out
I am what you call a "css moron"
, but I do have my moments of brilliance.
-
May 20, 2004, 06:15 #37I am what you call a "css moron"Octal - All your base-8 belong to us
"Knowing is not enough, we must apply.
Willing is not enough, we must do." - Bruce Lee
-
May 23, 2004, 10:36 #38
- Join Date
- Feb 2004
- Location
- Oregon
- Posts
- 686
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
just an FYI,
I have seen mozilla read this
* html #header {position:absolute;top:0;left:0;}
you should include the tag you want it to be on then mozilla won't read it.
* html div#header {position:absolute;top:0;left:0;}
I know this cause I tried to z-index somethnig to a -1 in IE and mozilla read it and blanked the page out. and yes it was a z-index: -1 as mozilla hates that.success is not by chance, it is by choice.
-
May 23, 2004, 12:59 #39
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
[quote=sahajin]
I have seen mozilla read this
* html #header {position:absolute;top:0;left:0;}
[/code]
Not in any mozilla browser that I've ever tested - all will ignore it. Could you please post examples as this would be extremely interesting.
According to all sources i've seen IE is the only browser that incorrectly parses the * html (star selector hack).
For mozilla to parse this on odd occasions just wouldn't make sense. I feel you must have made some error somewhere. The universal selector on its own will be parsed by mozilla and other browsers as it is like a wild card that matches any element.
The reason mozilla doesn't parse * html is that there would need to be a parent of html in order for it to work. As we all know html is the root element which is why this combination fails in all browsers except IE.
Regarding negative z-indexes mozilla will put the element behind the body and if the body is not transparent then the element will not show. For this reason negative z-indexes are unpredicatable and should be used with caution.
In css2.1 the stacking rules have been changed so that an element can never be stacked below the background of its stacking context.
Paul
-
May 23, 2004, 13:15 #40
- Join Date
- Feb 2004
- Location
- Oregon
- Posts
- 686
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I totally agree with you. everything I read said the same, mozilla shouldn't read it. but wouldn't you know it now that I want it to happen I can't get it to do it. it must have been a combination of other things that I had. I swear all I changed was that hack and added the tag to it. then it stopped.
my appologies for steering everybody the wrong wayI'll be quiet now
success is not by chance, it is by choice.
-
May 23, 2004, 13:47 #41
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I'll be quiet nowTheres always the exception to the rule! A thing is only true until its proved false (or vice versa)
.
Paul
-
May 30, 2004, 07:08 #42
- Join Date
- May 2004
- Location
- Sweden
- Posts
- 31
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Woo, I guessed I learned all my CSS from W3C, making me total unaware of the different hacks you pro's are using. The star selector hack will become most useful, thanks alot. I think i stumbled over it sometimes before but never bothered to fully understand its advantages. It's a shame we need it, really.
Also, the child selector was new to me. Refering to html>body. What does it do? As I understand Moz will use it but not IE. Is it a hack or real CSS? What do other browsers like Opera think of this?
I know this is kind of off topic, hope you don't mind since competition on this thread is already finished.
Tudor
-
May 30, 2004, 08:01 #43
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Also, the child selector was new to me. Refering to html>body. What does it do? As I understand Moz will use it but not IE. Is it a hack or real CSS? What do other browsers like Opera think of this?
A > B will select any element B which is a child of element A. Any grandchildren will not be selected as they won't match.
My opinion of hacks is that you should do everything you can to avoid them but if you still need to use them then use them sparingly and use the well established ones that are unlikely to cause problems in the future.
See here for more information:
http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html
Hope that helps.
Paul
-
May 30, 2004, 08:51 #44
- Join Date
- May 2004
- Location
- Sweden
- Posts
- 31
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Very helpful indeed(unfortunately), thanks a lot =)
-
May 22, 2009, 13:46 #45
- Join Date
- May 2009
- Posts
- 25
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Wow, this is such a good idea. I've read books about PHP and mySQL and sat down at the computer clueless because I remember best what I do. I was hoping somebody somewhere would have something where I could code in CSS and am CORRECTED so I can learn more.
Bookmarks