#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    107
    Rep Power
    11

    CSS Image Borders Disappear only in IE Borwsers


    My Php Code is

    PHP Code:
    <a class="game_view_image" href="<?php the_permalink() ?>" rel="bookmark"  alt="<?php echo $post->post_title?>" >

    <img src="<?php myabp_print_thumbnail_url(); ?>" height="100" width="100" alt="<?php echo $post->post_title?>" />

    </a>
    and the css is

    Code:
    .game_view_image img{
    border-color: #cccfd3;
    border-style: solid;
    border-width: 6px !important;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin:2px;
    -webkit-box-shadow: 1px 1px 6px 0px #626364;
    -moz-box-shadow: 1px 1px 6px 0px #626364;
    box-shadow: 1px 1px 6px 0px #626364;
    }
    
    .game_view_image img:hover{
    -webkit-box-shadow: 1px 1px 8px 0px #7F6F792;
    -moz-box-shadow: 1px 1px 8px 0px #F6F792;
    box-shadow: 1px 1px 8px 0px #F6F792;
    }
    The design is exactly what i see at any FF browsers but when it comes to IE i see http://gaminima.com/images/gaminima.jpg some css borders disappears, i know IE does to fix the design into to browser but how can i avoid this?

    Whats more i have designed the site to fit any resolutions and LCD sizes.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Hi, I think this should help you out.
    Code:
    .game_view_image img
    {
    	margin:2px;
    	border: 6px solid #cccfd3 !important;
    	-moz-border-radius: 15px;
    	-webkit-border-radius: 15px;
    	border-radius: 15px;
    	-ms-border-radius: 10px;
    	-webkit-box-shadow: 1px 1px 6px 0px #626364;
    	-moz-box-shadow: 1px 1px 6px 0px #626364;
    	box-shadow: 1px 1px 6px 0px #626364; 
    }
    I cannot be sure because i am on WinXP and cannot install a version of IE past version 8 so I'm not sure on what it will look like in IE9+. After discussions on another forum it looks like it should work in IE though.

    Hope this helps you.

    Kind regards,

    NM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    107
    Rep Power
    11
    Originally Posted by Nanomech
    Hi, I think this should help you out.
    Code:
    .game_view_image img
    {
    	margin:2px;
    	border: 6px solid #cccfd3 !important;
    	-moz-border-radius: 15px;
    	-webkit-border-radius: 15px;
    	border-radius: 15px;
    	-ms-border-radius: 10px;
    	-webkit-box-shadow: 1px 1px 6px 0px #626364;
    	-moz-box-shadow: 1px 1px 6px 0px #626364;
    	box-shadow: 1px 1px 6px 0px #626364; 
    }
    I cannot be sure because i am on WinXP and cannot install a version of IE past version 8 so I'm not sure on what it will look like in IE9+. After discussions on another forum it looks like it should work in IE though.

    Hope this helps you.

    Kind regards,

    NM.
    thanks but it does not fix , i think its about quirks mode issue
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Which version of IE are you testing it in?

    Regards,

    NM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    107
    Rep Power
    11
    Originally Posted by Nanomech
    Which version of IE are you testing it in?

    Regards,

    NM.
    it is 9.0.11 and i hope only my browser because looks like it has no fix
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Nanomech, do you see what the images that lose the border have in common with each other that's different from the others?

    @dolay There is a fix. (I'll tell you later if Nanomech doesn't find it.)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    I'm not sure how to fix the problem, but IE 8 dev tools are showing me that every image which has not got a border, is being outputted as a <span> tag?

    Here is the code:

    Code:
    <span title="Portal 2D" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.gaminima.com/wp-content/thumbs/portal-2d.png', sizingMethod='scale'); WIDTH: 100px; DISPLAY: inline-block; HEIGHT: 100px; CURSOR: hand;"/>
    Can't figure it out. Tried re-creating his page with the code he provided and it works ok. (except hardcoding the images)

    Please tell me! This is going to bug me.

    Regards,

    NM.
    Last edited by Nanomech; December 5th, 2012 at 04:01 PM.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    The problem is that the PNG fix script that's being used replaces the <img> elements, even in versions of IE that don't need the fix (IE7 and newer). There are a few possible solutions. (1) You could remove the script. (2) You could follow the recommendation on how to use the script (in other words, hide it from browsers that don't need it with a conditional comment):
    Originally Posted by pngfix.js
    Use in <HEAD> with DEFER keyword wrapped in conditional comments:
    <!--[if lt IE 7]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
    (3) My recommendation: You could use CSS3 PIE instead which would take care of this and allow border-radius to work in IE6-8.
    IE 8 dev tools are showing me that every image which has not got a border, is being outputted as a <span> tag?
    Yes. I guess you haven't been doing this long enough to have used a PNG fix script for IE6. Don't worry about it.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    107
    Rep Power
    11
    Originally Posted by Kravvitz
    The problem is that the PNG fix script that's being used replaces the <img> elements, even in versions of IE that don't need the fix (IE7 and newer). There are a few possible solutions. (1) You could remove the script. (2) You could follow the recommendation on how to use the script (in other words, hide it from browsers that don't need it with a conditional comment):

    (3) My recommendation: You could use CSS3 PIE instead which would take care of this and allow border-radius to work in IE6-8.

    Yes. I guess you haven't been doing this long enough to have used a PNG fix script for IE6. Don't worry about it.
    I should see that it appears for all png thumbs
    Thank you very much, simply removed the pngfix.js
  18. #10
  19. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Originally Posted by Kravvitz
    Yes. I guess you haven't been doing this long enough to have used a PNG fix script for IE6. Don't worry about it.
    Heh, I think when IE 6 was the most up-to-date version, I was only a baba

    I've only been doing web designing for just under 3 years. There is SO MUCH to learn. When I first started, I presumed a Notebook would suffice. How wrong I was! There are so many other factors to consider when designing a website.

    I'm going to try and broaden my knowledge of CSS. I have the basics down ok but seem to struggle with screen resolution differences and knowing in details about such things as we discussed before (inline and block elements). It's not so much how to style them but more a case of WHY certain things happen.

    Kind regards,

    NM.
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    You're welcome dolay.
    Originally Posted by Nanomech
    Heh, I think when IE 6 was the most up-to-date version, I was only a baba

    I've only been doing web designing for just under 3 years.
    IE7 was released just over 6 years ago. (The IE dev team only did security fixes for several years after IE6 beat Netscape 4 in the first browser war. Then eventually Firefox was built using the same engine as Netscape 7+ and gained popularity which caused Microsoft to start to take notice.)

    Originally Posted by Nanomech
    There is SO MUCH to learn. When I first started, I presumed a Notebook would suffice. How wrong I was! There are so many other factors to consider when designing a website.

    I'm going to try and broaden my knowledge of CSS. I have the basics down ok but seem to struggle with screen resolution differences and knowing in details about such things as we discussed before (inline and block elements). It's not so much how to style them but more a case of WHY certain things happen.
    Yes, web design and development is much more complicated than it appears at first.

    Supporting multiple screen resolutions does take more work. Fortunately CSS3 Media Queries make it easier than it used to be, though of course there are many more web-enabled phones and tablets than there used to be too. These days, it seems many sites are designed to work with 3 or 4 different screen size ranges.

    I'll be around when you have questions.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo