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
  1. #1
    New Coder
    Join Date
    May 2005
    Location
    NY
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a tag over image+text but seperate styles?

    I have an "a href" tag over an image and text so I only have to change one URL.

    In the css I have "a" links set to a dashed border-bottom and a solid border-bottom on rollover. It seems to add a border to the bottom of the image aswell.. which also changes on rollover.

    Obviously my problem is, I only want the text to be bordered.

    You can see what I mean here:
    http://www.sneakyweaselstudios.com/newsws2/

    I've made it a text decoration rather than a border which doesn't do anything different.. except limit me from using dashes. :/

    I've tried giving the image a class and changing the style to something without borders or border-bottoms. I've giving all img tags no border-bottoms.

    I've tried a lot. Nothing changes.

    Please help, thank you..

    P.S... sorry about the positioning for IE users.. gotta fix that...ghey
    Scientology
    www.sneakyweaselstudios.com
    AIM: spoofm0nkey
    Yahoo: SpoOf_m0nKeY

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello spoofm0nkey,
    You must have fixed it?
    It seems to be working for me when I look at it with IE6, IE7 and FF2...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    May 2005
    Location
    NY
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't change anything. I've seen it in FF 2.0 and older versions... I've seen it in IE aswell

    I speak of the line under the image. You can see there's one under the image AND the text, I only want it under the text.
    Scientology
    www.sneakyweaselstudios.com
    AIM: spoofm0nkey
    Yahoo: SpoOf_m0nKeY

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Location
    MA, USA
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post
    There are two things I can think of. First, split the anchor to enclose the image and text separately; or second, a bit of trickery can be used. If you have the space to do so, you could position the image relative and move it down three pixels to cover the border.

    a.dashed img {
    position: relative;
    top: 3px;
    }

  • #5
    New Coder
    Join Date
    May 2005
    Location
    NY
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It works.. it's a problem for IE... but thanks for that sollution. Just kinda seems.. ehg. I shouldn't have to do it this way, I think I've seen a link and an image put together where only the link is underlined..
    Scientology
    www.sneakyweaselstudios.com
    AIM: spoofm0nkey
    Yahoo: SpoOf_m0nKeY

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Location
    MA, USA
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post
    Another way would be to not put the border on the anchor but on the text itself. So you would need to wrap the text in either a span or em or strong or use some other hook...

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    See if adding the following to your stylesheet helps:

    a img {border:none;}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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