I’m just having a play around with some CSS code and was wondering if there was a way of changing the colour of the inner line on a border-style "double? Alternatively is there a CSS3 solution which can give the same effect?
For an example of what I mean please see http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=double which demonstrates a double border style. Ideally I would like control over the colour of the white line so that I can have the border wrapped around an element and have a darker inner line with the outer being the same colour as the background colour for the element itself.
Hopefully I’ve explained that clearly - it is nearly 4am!
Ah ha! Thanks for your input Ralph. In the meantime I was playing around with the double and hitting a dead-end but managed to come up with the following. Not exactly advanced but it’s a nice little challenge to get over
<div style=" background-color:grey; padding:5px; width:600px;">
<div style="background-color:grey; padding:10px; border:2px solid black; color:white;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis interdum lobortis. Nam nibh neque, lobortis nec dapibus non, malesuada ut sapien. Nam nibh odio, tincidunt quis volutpat nec, interdum ac ipsum. Sed tortor purus, ultricies non molestie adipiscing, imperdiet eget lorem. Nam ornare pellentesque condimentum. Phasellus ipsum diam, bibendum elementum tincidunt in, vestibulum ut lorem.
</div>
</div>
Yeah, I don’t know if it’s worth getting any more sophisticated than that. I don’t know about modern browsers, but I gave up on double borders etc. a long time ago, as they didn’t work in a lot of browsers anyway.
Just for fun, I tried it with CSS alone, but I doubt this is very bulletproof. (It works in my Mac browsers, but I don’t even want to know what it does in IE):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {border: 2px solid black; padding: 10px; position: relative; width: 600px; margin: 100px auto; background: gray; color: white;}
div:before {content: ""; width: 100%; height: 100%; position: absolute; padding: 3px; border: 2px solid gray; top: -5px; left: -5px; z-index: -1;}
</style>
</head>
<body>
<div>Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. <a href="#">Some text</a> in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. </div>
</body>
</html>
-moz- allows for border-colors (note the ‘s’) you can list multiple colors each applies to 1px of the width of the border from the inside out. Of course that is a proprietary attribute so it’s kinda a tease.
If you dont mind relying on CSS3 properties you can use box-shadow to simulate extra borders ( remember tho that they DONT affect the calculated dimensions the way a ‘real’ border would)…
If you are happy not to have a gap between each line, another option is to comping border with outline:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {[COLOR="#FF0000"]border: 2px solid black[/COLOR]; [COLOR="#0000CD"]outline: 2px solid gray[/COLOR]; padding: 10px; position: relative; width: 600px; margin: 100px auto;}
</style>
</head>
<body>
<div>Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. <a href="#">Some text</a> in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. </div>
</body>
</html>
Thanks dresden! Though to be honest I was hoping for a cross-browser solution which works in older browsers too. Always worth keeping in the code bank for future use mind
Ah fantastic ralph! Certainly cuts down on the code and works in IE, Chrome etc. I did try your other solution but neither Chrome nor IE played ball and treated it like a “double”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {
border: 2px solid black;
padding: 10px;
position: relative;
width: 600px;
margin: 100px auto;
background: gray;
color: white;
zoom:expression(
runtimeStyle.zoom=1,
insertAdjacentHTML('beforeEnd','<span class="after"></span>')
);
}
div:before,.after {
content: "";
position: absolute;
padding: 3px;
border: 2px solid gray;
top: -5px;
left: -5px;
bottom:-5px;
right:-5px;
z-index: -1;
}
</style>
</head>
<body>
<div>Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. <a href="#">Some text</a> in here. Some text in here. Some text in here. Some text in here. Some text in here. Some text in here. </div>
</body>
</html>
It’s Ralph’s original code with an expression for ie6 and 7.
I use it a lot for supporting IE6 and 7 as it allows me to use :after and :before without using extra mark up. It just appends a span into the mark up with a class that you can target (it’s an old DS trick).
I don’t really care if IE6/7 users have javascript disabled as I only use :after and :before for enhancements anyway - not that I care for IE6 at all these days and only care slightly for IE7
Likewise, I’d never seen that before. (What’s a “DS trick”?) Is that a purely CSS solution, or does it not work with JS off? In my mind, I’ve officially written off IE6 and 7, but it’s still interesting to know about this.
I use it a lot for supporting IE6 and 7 as it allows me to use :after and :before without using extra mark up. It just appends a span into the mark up with a class that you can target (it’s an old DS trick).
yup , I too find this technique invaluable as well. I usually add it in to my ie.css files. I am careful when selecting anything that might nest tho.
It was from one of Deathshadow’s posts but is also used elsewhere on the web.
Is that a purely CSS solution, or does it not work with JS off? In my mind, I’ve officially written off IE6 and 7, but it’s still interesting to know about this.
No expressions only work when JS is enabled but does anyone apart form developers know how to turn off js easily in old IE versions? Expressions can slow pages down in IE but this is once only expression and expressions are only supported in ie7 and under anyway.
Hehe, I have a lot of code snippets by “DS”, so that’s the first thing I thought of, but assumed you meant something else. (I have even more snippets by “pmob”, BTW. :eyebrow: )
does anyone apart form developers know how to turn off js easily in old IE versions?
One would expect not, although I sometimes hear that workplaces have JS disabled on their computers for security reasons. Not sure if that still happens these days.
(I have even more snippets by “pmob”, BTW. :eyebrow: )