SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transparent borders and background images

    Is there a way I can make a border transparent but show the colour of the background image? I'm trying to have the links have no visible border normally, but a white dashed l and r border on hover. What currently happens is the background color of the top-menu shows through not the bevel image. Some code might help explain:

    PHP Code:
    CSS:

    #top-menu {
        
    background-color#ff6600;
        
    color#ffffff;  height: 25px;
        
    margin:0px 0px 10px 0px;
        
    border-bottom1px solid #000000;
        
    background-imageurl(../images/bevel.gif);
    }

    ul.top-menu {
        
    margin0;
        
    padding0;
        
    padding4px 3px 3px 10px;
    }
        
    ul.top-menu li {
        
    margin0;
        
    padding0px 0px 0px 0px;
        
    displayinline;
    }

    a:link.menu {
        
    color:#ffffff;
        
    border-left1px dashed transparent;
        
    border-right1px dashed transparent;
    }

    a:hover.menu {
        
    color:#ffffff;
        
    border-left1px dashed #ffffff;
        
    border-right1px dashed #ffffff;
    }


    XHTML:

    <
    div id="top-menu">
    <
    ul class="top-menu">
    <
    li><class="menu" href="news.php">News</a></li>
    <
    li><class="menu" href="guides.php">Guides</a></li>
    <
    li><class="menu" href="articles.php">Articles</a></li>
    <
    li><class="menu" href="photos.php">Photos</a></li>
    <
    li><class="menu" href="videos.php">Videos</a></li>
    <
    li><class="menu" href="phpBB2/index.php">Forums</a></li>
    <
    li><class="menu" href="routes.php">New Routes</a></li>
    <
    li><class="menu" href="aboutus.php">About Us</a></li>
    <
    li><class="menu" href="clothing.php">Clothing</a></li>
    </
    ul>
    </
    div
    Any ideas?

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think that you'll find anything that'll meet your needs in IE.
    Quote Originally Posted by [url=http://www.sitepointforums.com/member.php?userid=10239
    ucahg[/url] in this thread]border-style:hidden effectively sets the width of the border to 0, while border-style:none keeps space for the border but just doesn't render it.
    However that's not the case in my experience on IE6. The space isn't reserved and it results in the text jumping around on hover when the border is inserted.

    The only way I can see of guaranteeing what you want to happen is by hard-coding the "transparent" border to be the same as the background colour.
    i.e.
    PHP Code:
    CSS:
     
    a:link.menu 
    color:#ffffff; 
    border-left1px dashed #ff6600; 
    border-right1px dashed #ff6600; 

    Perhaps you could use Javascript to automatically set one to be the same as the other in case you change the stylesheet later on and forget.


    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah...sussed it. I made the links have a usual border on hover but otherwise have no border and just increase the padding by 1px. It's too easy to get stuck into one way of thinking with coding...

  4. #4
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mserms
    Ah...sussed it. I made the links have a usual border on hover but otherwise have no border and just increase the padding by 1px.
    D'oh! That's simple. Nice one.
    Quote Originally Posted by mserms
    It's too easy to get stuck into one way of thinking with coding... [img]images/smilies/smile.gif[/img]
    You're not wrong. Too many times have I spent hours trying to force a bit of code to work only to walk off for a coffee, sit back down and rewrite it in a different way to have it working in five minutes?


    Andy
    From the English nation to a US location.


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
  •