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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    190
    Thanks
    12
    Thanked 2 Times in 2 Posts

    boardered image that is linked: removing unwanted border

    I've got images on a site i'm working on that i've created a border around to allow some separation from content and I also use it as a way to caption the photos. Many of the photos on the site are linked to other photo's or other pages.

    In IE, both borders are showing up, and I can't seem to figure out how to not get that to happen...

    css
    Code:
    .imgfloatright { border:solid 1px #999; float:right; 
    width:325px; padding-bottom:2px; text-align:center; 
    color:#666; font-size:small; margin-left:5px;}
    HTML
    Code:
    <span class="imgfloatright"><a href="carbon-wheels.html">
    <img src="images/carbon-tubulars.jpg" alt="PSIMET Custom Carbon Fiber 
    50mm deep tubular wheelset" /></a><br />
    PSIMET's Custom 50mm Deep Carbon Clincher wheelset</span>
    Last edited by tspek; 10-27-2009 at 08:39 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Try this:
    Code:
    .imgfloatright a {border:0;}
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    190
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Rowsdower! View Post
    Try this:
    Code:
    .imgfloatright a {border:0;}
    That doesn't seem to do it.

    I've tried getting at what you are getting at, i presumed my syntax was wrong.

  • #4
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    Quote Originally Posted by tspek View Post
    I've got images on a site i'm working on that i've created a border around to allow some separation from content and I also use it as a way to caption the photos.

    In IE, both borders are showing up, and I can't seem to figure out how to not get that to happen...
    The above two statements are contradicting. first statement says, you added a border to separate the image from contents and second one says you don't want a border.

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    190
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by jolly_nikki View Post
    The above two statements are contradicting. first statement says, you added a border to separate the image from contents and second one says you don't want a border.
    Right, thus the dilemma.

    The other thing I tried was to simply add the rules for .imgfloatright to a linked image. Maybe I had the syntax wrong though?

    if .imgfloatright = a.imgfloatright wouldn't that give me what I want? Or would it look like something else?

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Well with the code snippets we've seen my CSS should have done the trick. If it didn't work then the problem could be conflicting CSS, a missing or incorrect DTD, or any number of other things.

    Can we have a link to the live test page?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Regular Coder
    Join Date
    Oct 2009
    Posts
    190
    Thanks
    12
    Thanked 2 Times in 2 Posts

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I'm seeing the same border appearances between FF3 and IE7 so I'm not sure if I'm solving the right issue, but how about this:
    Code:
    .imgfloatright a img {border:0;}
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    tspek (11-02-2009)

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by tspek View Post
    Right, thus the dilemma.

    The other thing I tried was to simply add the rules for .imgfloatright to a linked image. Maybe I had the syntax wrong though?

    if .imgfloatright = a.imgfloatright wouldn't that give me what I want? Or would it look like something else?
    Yep, the syntax is wrong there for what you were trying. The "a.imgfloatright" would be for link <a> tag which actually had the class of "imgfloatright" which yours does not have (as far as I can see). So this part of your CSS:
    Code:
    a.imgfloatright, a.imgfloatright:link, a.imgfloatright:visited, a.imgfloatright:active {border:solid 1px #999;}
    That particular style rule should have no bearing on anything in your page at all.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    Regular Coder
    Join Date
    Oct 2009
    Posts
    190
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Rowsdower! View Post
    I'm seeing the same border appearances between FF3 and IE7 so I'm not sure if I'm solving the right issue, but how about this:
    Code:
    .imgfloatright a img {border:0;}
    That's what we're looking for.

    Thanks.


  •  

    Posting Permissions

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