I wondering if adding those hacks can make a site fail CSS2 validation.
Also it would be cool to know of an Opera hack.
I know there is a <!{if IE]> hack … something like that - I came back here hoping it was mentioned!
can you (or someone explain)
I am struggling with styling <hr/>
it keeps refusing absolute positioning
and breaking the page with huge gaps
on khtml its ok
Hi,
In ie you can’t reduce the margins of the hr for some reason. You should be able to place it where you want though. Here are various examples for you to play with.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
hr.newrule {
color: blue;
height: 10px;
border: 1px solid green;
background-color: blue;
}
hr.newrule2 {
height:1px;
border:none;
background:red;
color:red;
}
hr.newrule3 {
height:10px;
border:none;
background:red;
color:pink;
width:300px;
position:absolute;
left:100px;
top:300px;
}
.border {
border-top:1px solid red;
height:0px;
overflow:hidden;
}
</style>
</head>
<body>
<p>Horizontal Rule test 1 - 1px green border and 10px blue centre</p>
<hr class="newrule" />
<p>Horizontal Rule test 2 - 1px red centre line (no border)</p>
<hr class="newrule2" />
<hr class="newrule2" />
<hr class="newrule2" />
<hr class="newrule2" />
<hr class="newrule3" />
<hr class="newrule3" />
<p>Horizontal Rule test 3 - use div as top border</p>
<div class="border"></div>
<p>Note for hr mozilla uses background colour and ie uses foreground colour so both need to be specified.</p>
</body>
</html>
Hope that helps.
paul
hgilbert,
Paul put me on to this Opera hack. He said it wasn’t foolproof, but it worked where I wanted to use it.
@media all and (min-width: 0px){
SELECTOR/id/etc
{STUFF GOES HERE
}}
I hope this helps.
I like the ‘*’ hack. It seems the easiest solution, if you can remember to deal with lists seperately. I’m gonna give it a go the next time I have to use a CSS hack.
Btw…
OFF TOPIC: How do I use a custom avatar? I tried poking around the avatar section of my profile, but I couldn’t fine the ‘Custom’ option. Wassup with that?
[ot]
I think you have to be here a while - you know, like maybe after 25 posts or something, you can use a custom avatar.[/ot]
I use the *{margin:0; padding:0;} inclusion, but I don’t understand what your saying about lists. What would have to do in a list div to reset it to use bullets?
Paul O’B wrote (back in post #15 of this thread):
> A lot of people do use this technique and it saves a lot of headaches. You just need to remember that lists will not show their bullets when padding/margin is reduced and this throws a few people but is simple enough to fix.
I think he’s saying that you’d have to override the * {margin:0} in lists to allow them to show thier bullets.
yeah, but to what?
I would think 10 or 20px should do it. Try it out and see what you get. There should be a site that lists the default margins/padding for elements out there. Anyboby have a link handy?
Hi,
15 px is about right:
Heres a little test so you can see for yourself
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>list test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
.five{padding-left:5px}
.ten{padding-left:10px}
.fifteen{padding-left:15px}
.twenty{padding-left:20px}
.fivem{margin-left:5px}
.tenm{margin-left:10px}
.fifteenm{margin-left:15px}
.twentym{margin-left:20px}
</style>
</head>
<body>
<ul class="five">
<li>test 1 - 5px left padding</li>
</ul>
<ul class="ten">
<li>test 2 - 10px left padding</li>
</ul>
<ul class="fifteen">
<li>test 3 - 15px left padding</li>
</ul>
<ul class="twenty">
<li>test 4 - 20px left padding</li>
</ul>
<ul class="fivem">
<li>test 5 - 5px left margin</li>
</ul>
<ul class="tenm">
<li>test 6 - 10px left margin</li>
</ul>
<ul class="fifteenm">
<li>test 7 - 15px left margin</li>
</ul>
<ul class="twentym">
<li>test 8 - 20px left margin</li>
</ul>
</body>
</html>
Paul
Usually I just use the “!important” tag, IE ignores it and just uses the second style it picks up.
margin: 5px !important;
margin: 0px; /* IE */
If CSS has browser compatability issue then what is the use of W3C standards. W3C committe consists of professionals from all top companies which are making browsers.
Just use XHTML an program clean and you won’t use the important tag or other sideways.
I really like the article. Thanks!
raka10, the unfortunate fact is, even browser companies that helped set the standard don’t always follow them properly. Often for marketing reasons they have chosen to add their own flashy proprietary features at the expense of standards in the hope of luring developers to build specifically for their browser. This is at the core of the compatibility problems we have presently.
To avoid this situation in future, many developers (particularly a lot around here) now make a point of a building to the standard, and ignore their ‘one browser features’. In theory this encourages the browser makers to better support the standard in future.
The article is missing a very important trick: the usage of IE Win Conditional Comments to either load or specify stylesheets:
http://www.quirksmode.org/css/condcom.html
Futhermore, I’m in complete agreement with Peter-Paul Koch in the danger of using hacks in current browsers as stated in his two articles:
http://www.quirksmode.org/css/csshacks.html
http://digital-web.com/articles/keep_css_simple/
It also lacks an easy hack to use, the “underscore hack”
#somediv {witdh: 25px; _width: 20px;}
Thanks - this saved my ass. By the way Bjarne, not everyone uses internal stylesheets so if you’re working externally with your CSS, the conditional comments method isn’t going to work.
Another interesting “hack” is a JavaScript library called IE7,
http://dean.edwards.name/IE7/
With it you can trick IE5+ to work correctly with proper CSS2 and some CSS3… so instead of hacking your CSS code, you could now right proper CSS code only!