Everything is Relative
-
One of my recent projects involved a simple lightbox that overlaid the client's main site.
Integration with their site was always going to involve much patient dialogue, since we weren't using an iframe.
Our lightbox was not being placed at the bottom of the body tag (as we had requested), so when fixing an issue, I encountered a css rule which caused me to laugh out loud:
div {position: relative;}
So to recap:
- Client knew they would be getting an overlaid lightbox. Balance of probability makes the lightbox absolutely positioned to overlay the site.
- Client designed their site so that every div is relative by default, so should an absolute element be appended as a child, it would appear in a place relative to the containing element, rather than the browser window.
Naturally, they put lightbox inside some element wherever. The containing element was relative. The lightbox appeared in a weird location, squashed.
Ultimately it was easy to workaround, but it's unusual to see a single line of code (CSS at that) capable of giving me such amusement.
-
I encountered a css rule which caused me to laugh out loud
Whenever I have to write CSS, I tend to break out into maniacal laughter after some time.
-
I'm not artistic enough to care about CSS that much, but knowing about how heavily it relies on inheritance, having a rule like this on a tag and not a class/ID is definitely going to lead to some pain.
-
Needs more
!important
.
-
The obvious solution is to convert all the div's into spans using jQuery and regular expressions.
Then all you need is
span { display: block; }
and you're done!
-
I expected that to be a big WTF, but in that case it made perfect sense.
-
Except that javascript doesn't solve validation problems, and using regular expressions on html is always a bad idea....
-
Well, it got the job done in 4 lines of code, so it wasn't such a bad idea.
-
haha (i hope?)
-
-
He forgot to mention styling by IDs too.
-
He forgot to mention styling by IDs too.
What's wrong with styling by id? If you've already got an id for a unique element, why add an extra class?
-
What's wrong with styling by id?
IMO, nothing, but start from here if you want to figure out what we're talking about.
-
Give @Lucas a fifth of brandy and he will tell you.
-
Ah, I missed that thread - that's some funny shit. Extra points for irrational dogma.
-
In his defense, he had a horrible day at work, went to the pub, then got on here with a head full of booze. There was an apology a few days later, not that anyone needed one. We have all been there before.
-
kind of makes me want to do this in my next site:
`<header id="main-unique-and-exclusive-one-and-only-single-site-header-there-will-never-be-two-of-these" class="header">
</header>`
-
Lame, I use generated random 32 length strings for my IDs.
-
I see this is turning into the bad ideas thread.
-
html>body:first-child>div:first-child+div>h1:first-child>span:first-child { color: blue; }
-
The containing element was relative.
From memory
position: relative
fixed a lot of IE6 rendering bugs. But I know it did trigger some others so it would never have been a good idea to put it onto adiv
!
-
It looks like you need some cssQuery there.
-
Yeah it was the legendary hasLayout bug. Though with a separate script for IE < 8 you could apply zoom: 1 onto block elements and it effectively did the same.