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 13 of 13
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy unwanted image borders in MSIE/Win

    I am having trouble with unwanted borders showing up around my buttons in MSIE/Win. I made oval buttons which are GIF files, and used them as links. in MSIE/OS X, there is no problem, nor is there a problem in Safari. However, when I look at my pages in MSIE/Win, there are big, rectangular, blue obnoxious squares around my groovy oval buttons. What is the best way to eliminate these using CSS? Thanks for your help!

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    a img {border:none;}

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    was having same problem...

    kept getting violations because I was using the deprecated border="0"

    This helps so much!

    Thanks!


  • #4
    New Coder
    Join Date
    May 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Thanks so much!!! And I'm glad this question helped somebody else too...

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy border gone, but grey box still there

    I just checked my website on windows-the obnoxious blue border is indeed gone (and I am glad!) . however, there is a grey area around the oval button, I am presuming this is the remainder of the rectangular image. I thought that by making my oval buttons a GIF on a transparent backround that this would not happen.

    http://www.scsr.nevada.edu/~karkowc/

    again, on any of my macs, this isn't a problem. grrrr. Why does this happen only in MSIE/Win?

    thanks again!

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're using PNG, IE6 has no support for transparant PNG's. That's why you're seeing the cyan background.
    CATdude about IE6: "All your box-model are belong to us"

  • #7
    New Coder
    Join Date
    May 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    ah hah!- this makes sense. Having said that, what should I do? thanks again.

    rooster

  • #8
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    I think you might get away with saving it as a JPG or GIF, however isn't there a bit of JS code which can be used to overome that lack of PNG support?

    I'm sure I've seen it somewhere

  • #9
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or you could use this to emulate IE PNG Transparency

    Code:
    // Universal transparent-PNG enabler for MSIE/Win 5.5+
    // http://dsandler.org
    // From original code: http://www.youngpup.net/?request=/snippets/sleight.xml
    // and background-image code: http://www.allinthehead.com/retro/69
    // also:
    //  * use sizingMethod=crop to avoid scaling PNGs (who would do such a thing?)
    //  * only do this once, to make it compatible with CSS rollovers
    
    if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
    window.attachEvent("onload", enableAlphaImages);
    }
    
    function enableAlphaImages(){
    var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
    var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
    if (itsAllGood) {
    for (var i=0; i<document.all.length; i++){
    var obj = document.all[i];
    var bg = obj.currentStyle.backgroundImage;
    var img = document.images[i];
    if (bg && bg.match(/\.png/i) != null) {
    var img = bg.substring(5,bg.length-2);
    var offset = obj.style["background-position"];
    obj.style.filter =
    "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
    obj.style.backgroundImage = "url('/images/spacer.gif')";
    obj.style["background-position"] = offset; // reapply
    } else if (img && img.src.match(/\.png$/i) != null) {
    var src = img.src;
    img.style.width = img.width + "px";
    img.style.height = img.height + "px";
    img.style.filter =
    "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
    img.src = "/images/spacer.gif";
    }
    
    }
    }
    }
    (Thanks BradyJ )

    Gary

  • #10
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Gary, now I can use that funky firefox png in IE

    save as .js and put in the head?
    CATdude about IE6: "All your box-model are belong to us"

  • #11
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Given that it's such a basic image on a flat background, there's very little point in using PNG24 and going to the effort of adding js to make the alpha transparency work in MSIE/Win.
    PNG24 can be a great format, but there's no benefit in using for the buttons on your page. Being so basic, you could more easily use either a solid GIF, a GIF with transparency or a PNG8, either solid of with transparency.

    For future reference, there are plenty of tutorials available online on how to make transparent gifs. (The process is pretty much identical in Photoshop for creating PNG8 images.)

    I took a minute to grab and adjust your button images (and logos) and resaved them as PNG8 with transparency. You can swap them in and you won't need to change anything else. You also won't need to add the alpha transparency javascript as browser support for the more basic PNG8 is fine in all major (and most minor) browsers.

    http://www.bposters.fsnet.co.uk/foru...ton-images.zip

    The same can/should be done with the Firefox logo.

    -

    Incidentally, there are a few issues with your css…

    Code:
    color: FFFFCC;
    Hex colours require a preceding #.
    e.g.
    color: #ffffcc;

    Code:
    border-style: "none"
    No quotes around these values.

    e.g.
    border-style: none;

    Code:
    .menulink a:link{text-decoration: underline; color: 000066;}
    …
    .menulink a:visited{text-decoration: underline; color; FFFFCC:}
    .menulink a:visited selector repeated.
    Remove one, being sure to maintain the :link, :visited, :hover, :active order of the declarations.
    Last edited by Bill Posters; 05-25-2005 at 08:00 AM.

  • #12
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just to toss it out there:
    http://www.skyzyx.com/scripts/sleight.php

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #13
    New Coder
    Join Date
    May 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Hey, thanks for all of the help! as you can probably tell by now, I am quite new to all of this, but trying hard to learn as much as possible. You'll probably get more questions from me! I hope that one day I'll know enough to help others. till then, mucha 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
    •