SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fancy double border solution?

    Hi there,

    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/play...&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!

    Cheers,

    Shoxt3r

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The easy way to do it is to have an outer container with the first border and 1px padding and an inner container with the second border.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    <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>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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):

    Code:
    <!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>

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    -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)...

    .bord {height:500px; width: 500px; border:1px solid #000; box-shadow: inset 0 0 0 1px red, inset 0 0 0 2px yellow, inset 0 0 0 3px green,inset 0 0 0 4px pink }


    hope that helps

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    If you are happy not to have a gap between each line, another option is to comping border with outline:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    div {border: 2px solid black; outline: 2px solid gray; 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>

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    -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)...

    .bord {height:500px; width: 500px; border:1px solid #000; box-shadow: inset 0 0 0 1px red, inset 0 0 0 2px yellow, inset 0 0 0 3px green,inset 0 0 0 4px pink }


    hope that helps
    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


    Quote Originally Posted by ralph.m View Post
    If you are happy not to have a gap between each line, another option is to comping border with outline:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    div {border: 2px solid black; outline: 2px solid gray; 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>
    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".

    Thanks for all the help guys!

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,526
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    One more based on your original <div> and <p> tags just for fun:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <!--
    http://www.sitepoint.com/forums/showthread.php?972368-Fancy-double-border-solution
    Thread: Fancy double border solution?
    2013.02.08 22:54
    Shoxt3r
    -->
    <head>
        <meta charset="utf-8">
        <style media="all">
    div {
        display:table;
        outline:3px solid #000;
        border:3px solid #f00;
        border-spacing:6px;
        background-color:#fe0;
        width:500px;
        margin:40px auto;
    }
    p {
        outline:3px solid #89f;
        border:3px solid #faf;
        background-color:#ffa;
        padding:6px 9px;
        margin:0px;
    }
        </style>
    </head>
    <body>
    
    <div>
        <p>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.</p>
    </div>
    
    </body>
    </html>

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    And one more for clean markup

    Code:
    <!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.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Code:
    zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('beforeEnd','<span class="after"></span>')


  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Off Topic:

    Code:
    zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('beforeEnd','<span class="after"></span>')

    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

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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
    Haha amen to that. Interesting seeing that code in the CSS, not seen that before...

    Thanks for all the suggestions guys, really appreciate it and certainly gives me a range of options!

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Likewise, I'd never seen that before. (What's a "DS trick"?)
    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.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It was from one of Deathshadow's post
    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. )

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •