Re: [WSG] Dodging CSS Hacks Tutorial
[EMAIL PROTECTED] blurted out:
Hey, this is my first attempt at making up a tutorial. By all means correct me
on anything that's wrong :) ... this goes out to all you CSS Hack gripers on
here heh. Enjoy.
http://web.theward.net/dodgingcsshacks.html
You might want to make sample pages for each of the examples.
Your method 2 doesn't work in Firebird 0.7 (I'm waiting on extensions
before I move to Firefox), and probably not in any of the browsers with
working box models.
Plus it is flawed in and of itself, since neither of the boxes are
floating, so they just stack vertically. And you left off the # in the
background color of the second box.
You can compensate a bit by adding negative margin to offset the border
+ padding, but that makes the IE version shrink to the left.
Alteratively, you can not set the width of the second box at all, which
results in a 50/50 split in IE, and one that is off by either 10 or 20
pixels (I don't have the eye to tell) in Firebird.
Here's the CSS (for just the boxes) for that strategy:
#box_a {
width: 50%;
padding: 10px;
background: #eee;
float: left;
}
#box_b {
background: #bbb;
padding: 10px;
}
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] Dodging CSS Hacks Tutorial
Ryan Christie blurted out: Box A's background becomes the border when you make a 5px margin on Box B ... I believe I used the word appear... It's sort of faking a border, if you will. When built you'll see what I mean (and why it can only be solid) If the background for box A is an image (say a checkerboard pattern that repeats both ways), then the border won't be solid. * The discussion list for http://webstandardsgroup.org/ *
[WSG] Dodging CSS Hacks Tutorial
Hey, this is my first attempt at making up a tutorial. By all means correct me on anything that's wrong :) ... this goes out to all you CSS Hack gripers on here heh. Enjoy. http://web.theward.net/dodgingcsshacks.html --Ryan Christie http://www.theward.net * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Dodging CSS Hacks Tutorial
http://web.theward.net/dodgingcsshacks.html Technically, Trident has got little (or nothing?) to do with CSS parsing. I found a post from liorean at css-d explaining this: Just as a note, Trident is the rendering engine of ie/w. It is not the XML, the HTML/tagsoup or the CSS parsing engine; nor is it the scripting engine or external parsing system. It is the rendering engine, outsourcing the parsing and foreign object handling to other systems or engines. It seems that Trident has been roughtly the same since ie4, with the changes taking place mostly in the other engines, Trident only changing when really required to, in order to be able to render what it is handed from the others. Further info about Trident is way beyond my skills and, perhaps, beyond the goal of what you're trying to say with your web page :] - I just found it interesting and it could help in correcting erroneous info/rumors about what Trident is/is not. cheers, /Anton -- What your body lacks, your head compensates. * The discussion list for http://webstandardsgroup.org/ *
re: [WSG] Dodging CSS Hacks Tutorial
Replace padding: 1em 0; with padding: 0 1em; :)
Original Message:
From: russ weakley [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
Subject: re: [WSG] Dodging CSS Hacks Tutorial
Date: Fri 13 Feb 2004 07:56:24 +1100
Hi Ryan,
Excellent article! Can I suggest a couple of small points:
Within the section Method One: Don't use padding and borders, this seems a bit of a
sweeping statement :
Please note, your code WILL be more lengthy
There are times when this method is much longer in CSS code and other times when it
isn't - it really depends on specific examples. In your example, the code is much
longer, but it might be better to make a less definitive statement like:
Please note, your code COULD be more lengthy
There are also a couple of other methods of getting around the box model problem.
Like any method they have weaknesses, but should be mentioned:
1. Double nested divs. You apply no padding to the outer div, and padding to the
inner div - without setting a width. This is not a very semantically correct option
(due to extra divs), but it has been widely used.
HTML
div class=outer
div class=inner/div
/div
CSS
.outer { width: 200px; }
.inner { padding: 1em 0; }
2. Padding the content. This is similar to Method 1 but needs to be explained as it
is a simple and powerful option. It involves applying padding to content within the
div, rather than the div itself - this is a very common solution to the problem, and
can be achieved using one CSS rule set like:
#container p, #container h1, #container h2 { padding: 1em 0; }
It may also be worth outlining the pro's and con's of each method so that users can
chose one which is more semantically correct, or possibly easier to execute.
Be warned, I slapped together the code samples above in both examples and they
haven't been tested on anything. :)
Anyway, a great article and a great idea!
Russ
Hey, this is my first attempt at making up a tutorial. By all means correct me
on anything that's wrong :) ... this goes out to all you CSS Hack gripers on
here heh. Enjoy.
http://web.theward.net/dodgingcsshacks.html
--Ryan Christie
http://www.theward.net
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] Dodging CSS Hacks Tutorial
Box A's background becomes the border when you make a 5px margin on Box B ... I believe I used the word appear... It's sort of faking a border, if you will. When built you'll see what I mean (and why it can only be solid) Robert Moser wrote: [EMAIL PROTECTED] blurted out: Thank you for the feedbacks, keep them coming :) In your Method 1 CSS sample, the explanation mentions a 5px red border, but there is no border attribute anywhere in the sample. Perhaps the margin: 5px; in the #box_b selector was supposed to be border? -- --- Ryan Christie [EMAIL PROTECTED] http://www.theward.net --- * The discussion list for http://webstandardsgroup.org/ *
