What am I whicking about ere
The deal is frustration, and I'll tell you why. My pages have been up and growing for a while now, and whilst I am proud of my achievements I am also consumed by the compulsive obsessive disorder that seems to infect the web designing fraternity of today.
I refer to Web Standards
and the growing intolerance of bloated code, don't get me wrong, I am indeed in favour and try to adhere to these standards. I think now as I have progressed the need for hacks has become necesssary, which gets my goat herders bottle of nightly tincture that I use to keep the cold out, because it was not long ago that I lived without those pesky foxes.
Thay are indeed here, and my gripe of the night is..
Clearfix..
Check out PIE where I first found the float clearing solution.
It works a dream, my setup is two floted columns on top of three floated columns, that in itself took some doing, originally, Yes I remember positioning everything:absolutely; But now we like it CSS is our buddy, I am trying to use the class clearfix.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
and the class for the background graphic, not working together as a shepard sheep configuration.
So I have clearfix which positions my three floated columns under my two floated colums,
nice, how we like it.
also have class="css" which defines the background colours,/graphic for this particular page.
Individually they both work, but when I combine them.. ie.
<div id="fluidtop" class="clearfix css">
the thing doesn't work.
Goooogling for the last 24hrs, and I can't find the solution, so I am left with, a different div id every time I want to change the background graphic on the page.
ie
<div id="fluidtop"> for one page
<div id="fluidtopcss"> for another
In itself this isn't a problem, until you check out the CSS
#fluidtop {
width: 759px;
background-image: url(pics/fluidtop.jpg);
font:small Verdana,Sans-serif; }
#fluidtopcss {
width: 759px;
background-image: url(pics/fluidtoppcss.jpg);
font:small Verdana,Sans-serif; }
You can imagine ten pages down the line, twenty.. More. So why won't the two class jobby work, make life much easier..
ie
#fluidtop {
width: 759px;
font:small Verdana,Sans-serif; }
.css { background-image: url(pics/fluidtopcss.jpg); }
So there you have it, If you know of a solution before I crack it contact me,
I'll link to ya, Now that is an insentive.
Hody Mody.
A tip from boogie jack | Slightly related
It's kind of obvious , but I had been using a whole load of <br> tags
to clear the image after only a couple of lines of text.
As I have done in this first example.
Now for the recommended method
Today is a good day to learn something new.
Now I take my CSS Batleth in hand and step boldly forward. Cheers Boogster.
Just add the code <p style="clear: left;"> Your text</p>