Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Borders colors

  1. #1
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Borders colors

    Hi,

    How can I show a 2-different border colors to a LI? I'm aware of -moz-border-*-colors, but I need IE6+IE7 support.
    Of course, I want to keep my HTML semantic as possible.

    Any ideas?
    Thanks a lot.

  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    border-top:1px solid red;
    border-bottom:1px solid blue; for example? or do you want the border of one side (for example bottom) to be 2 colors? i didn't know this was possible

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You could use a background-image and place whatever you want bordered inside it's own div with this background image.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    You can surround the list item (li) element's content with a div element, set the height of that div to 100%, and apply the border of the inner color to it. The border of the outer color would, of course, be applied to the list item element itself.

    Edit: Scratch the 100% height part. That would cause the borders to overlap.
    Last edited by Arbitrator; 02-28-2007 at 06:13 PM. Reason: See post.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    what about a SPAN surrounding the text in the LI and giving it a border?

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by croatiankid View Post
    what about a SPAN surrounding the text in the LI and giving it a border?
    Depending upon the content of the list item elements, using a span element might be invalid. Since span is inline-level, that also means that you may need to declare display: block to get flush borders; might as well use a div that has display: block by default.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As I thought - no "real CSS" for this.
    Thanks, I'll probably go with the DIV solution, like I thought at the beginning.


  •  

    Posting Permissions

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