This is a list of hacks so you understand which hack to use and what for. Since CSS is great and what I would call the best thing to hit the web's creative side since it was invented, I regard this as an imprtant subject.
The CSS I want is:
h1 {
font-size : 2em;
color : #000
}
but some browsers display this wrong. (This is just for an example purpose, all browsers mentioned display this pretty much the same.)
Okay first off, the favourite browser of them all.
Internet Explorer.
We have a situation where we want Internet Explorer 6 and less to ignore any CSS we put because it incorrectly displays the size of the text too big.
html>body h1 {
font-size : 2em;
color : #000
}
Internet Explorer 5.
Intenet Explorer 6 has a problem with the text being too small. Internet Explorer 5 gets the size right so we only want Internet Explorer 6 (IE6) and other browsers like gecko to parse the size. Anything after the voice family hack is ignored by IE 5
h1 {
font-size : 2em;
color : #000
voice-family : "\"}\"";
voice-family : inherit;
font-size : 2.2em;
color : #000
}
Opera.
Opera decides it is one of these days where it feels like being gay and not doing what we want it to do.
/* IE only */
h1 {
font-size : 2em;
color : #000
}
/* opera only */
html>body h1 {
font-size : 2.2em;
color : #111
}
/* gecko only */
head:first-child+body h1[title="title here"] {
font-size : 2em;
color : #000
}
We only want new browsers to display the <h1> content.
@media screen {
h1 {
font-size : 2em;
color : #000
}
}
We only want Internet Explorer 6 to display the <h1> content like this.
h1 {
behaviour : url('foo.htc');
}
in the foo.htc file we would include javascript to modify the <h1> content look.
We want to display a background image for every browser apart from the Mac IE browser.
h1 {
background : url("foo.jpg");
}
Notice the quotes around the foo.jpg which hide the file from Mac IE browsers.Now figure out how to teach an idiot like me how to use the layout features of CSS and I'll send you a cookie!! (see other thread in this section from myself)You are not the only idiot around here, I do not have a clue what you mean.
I'm talking about using <div> vs. <table>... although, I'm starting to think I'm better off with tables... they seem to work over all the browsers!!At the moment the only uses for tables are to display tabular data or multi-column layout webpages.
Really though, CSS is better because you can swap the whole of a page look in click, information is easier to find thanks to tables not getting in the way.
CSS is faster, the only reason some people think CSS is slower is because the browser is slow at handling the CSS.
CSS provides quick access to changing the style of every page in seconds.
I cannot lie about me not using tables, I still use tables because they are more backwards compat, when browser programmers catch up with the latest standards I will use layers only for layout.
At the moment, I recommend using a combination of CSS, layers and tables.I agree that CSS "seems" to be the way to go... but have a look at this page (<!-- m --><a class="postlink" href="http://www.ambianceweddingdesign.com/redonesite/index2.asp">http://www.ambianceweddingdesign.com/re ... index2.asp</a><!-- m -->) and explain to me how using CSS is better. Granted, I'm doing something obviously wrong, but it seems I can do everything with tables so much easier. You may have to enter the parent URL first, then tack on the /redonesite/index2.asp. Also compare that to index.asp off the same root and see how it looks with tables.You must be doing something wrong. I am getting an error from your Active****yProcessorjust go to <!-- m --><a class="postlink" href="http://www.ambianceweddingdesign.com">http://www.ambianceweddingdesign.com</a><!-- m --> and then once the page is loaded, add /redonesite/index2.asp and it should workTables may seem easier, but in the long run they aren't. Most people don't see the need to switch, since they aren't looking to do this professionaly or anything. But, if you really think using tables is easier, I think you should check this out (<!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m -->) and sift through several of the different layouts. All those were done by just changing the stylesheet. None of the (X)HTML markup was touched.
Can tables do that?I love Zen Garden, it was a great idea by Dave to make that.
I check there quite a lot but Dave's site does not have to worry about multi-columned layouts were as erm... we kinda do
.
Edited:
Yeah tables can do that as long as you only define the id and class attributes and not the colspan and things.I tell you what right, take out all the CSS from the page, clean up your markup then go to <!-- m --><a class="postlink" href="http://80.4.61.47/chat.php">http://80.4.61.47/chat.php</a><!-- m --> and I will gladly assist you on the layout for your website.
The CSS I want is:
h1 {
font-size : 2em;
color : #000
}
but some browsers display this wrong. (This is just for an example purpose, all browsers mentioned display this pretty much the same.)
Okay first off, the favourite browser of them all.
Internet Explorer.
We have a situation where we want Internet Explorer 6 and less to ignore any CSS we put because it incorrectly displays the size of the text too big.
html>body h1 {
font-size : 2em;
color : #000
}
Internet Explorer 5.
Intenet Explorer 6 has a problem with the text being too small. Internet Explorer 5 gets the size right so we only want Internet Explorer 6 (IE6) and other browsers like gecko to parse the size. Anything after the voice family hack is ignored by IE 5
h1 {
font-size : 2em;
color : #000
voice-family : "\"}\"";
voice-family : inherit;
font-size : 2.2em;
color : #000
}
Opera.
Opera decides it is one of these days where it feels like being gay and not doing what we want it to do.
/* IE only */
h1 {
font-size : 2em;
color : #000
}
/* opera only */
html>body h1 {
font-size : 2.2em;
color : #111
}
/* gecko only */
head:first-child+body h1[title="title here"] {
font-size : 2em;
color : #000
}
We only want new browsers to display the <h1> content.
@media screen {
h1 {
font-size : 2em;
color : #000
}
}
We only want Internet Explorer 6 to display the <h1> content like this.
h1 {
behaviour : url('foo.htc');
}
in the foo.htc file we would include javascript to modify the <h1> content look.
We want to display a background image for every browser apart from the Mac IE browser.
h1 {
background : url("foo.jpg");
}
Notice the quotes around the foo.jpg which hide the file from Mac IE browsers.Now figure out how to teach an idiot like me how to use the layout features of CSS and I'll send you a cookie!! (see other thread in this section from myself)You are not the only idiot around here, I do not have a clue what you mean.
I'm talking about using <div> vs. <table>... although, I'm starting to think I'm better off with tables... they seem to work over all the browsers!!At the moment the only uses for tables are to display tabular data or multi-column layout webpages.Really though, CSS is better because you can swap the whole of a page look in click, information is easier to find thanks to tables not getting in the way.
CSS is faster, the only reason some people think CSS is slower is because the browser is slow at handling the CSS.
CSS provides quick access to changing the style of every page in seconds.
I cannot lie about me not using tables, I still use tables because they are more backwards compat, when browser programmers catch up with the latest standards I will use layers only for layout.
At the moment, I recommend using a combination of CSS, layers and tables.I agree that CSS "seems" to be the way to go... but have a look at this page (<!-- m --><a class="postlink" href="http://www.ambianceweddingdesign.com/redonesite/index2.asp">http://www.ambianceweddingdesign.com/re ... index2.asp</a><!-- m -->) and explain to me how using CSS is better. Granted, I'm doing something obviously wrong, but it seems I can do everything with tables so much easier. You may have to enter the parent URL first, then tack on the /redonesite/index2.asp. Also compare that to index.asp off the same root and see how it looks with tables.You must be doing something wrong. I am getting an error from your Active****yProcessorjust go to <!-- m --><a class="postlink" href="http://www.ambianceweddingdesign.com">http://www.ambianceweddingdesign.com</a><!-- m --> and then once the page is loaded, add /redonesite/index2.asp and it should workTables may seem easier, but in the long run they aren't. Most people don't see the need to switch, since they aren't looking to do this professionaly or anything. But, if you really think using tables is easier, I think you should check this out (<!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m -->) and sift through several of the different layouts. All those were done by just changing the stylesheet. None of the (X)HTML markup was touched.
Can tables do that?I love Zen Garden, it was a great idea by Dave to make that.
I check there quite a lot but Dave's site does not have to worry about multi-columned layouts were as erm... we kinda do
.Edited:
Yeah tables can do that as long as you only define the id and class attributes and not the colspan and things.I tell you what right, take out all the CSS from the page, clean up your markup then go to <!-- m --><a class="postlink" href="http://80.4.61.47/chat.php">http://80.4.61.47/chat.php</a><!-- m --> and I will gladly assist you on the layout for your website.