The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
CSS Image Borders Disappear only in IE Borwsers
Discuss CSS Image Borders Disappear only in IE Borwsers in the CSS Help forum on Dev Shed.
CSS Image Borders Disappear only in IE Borwsers Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
December 4th, 2012, 11:57 AM
|
|
Contributing User
|
|
Join Date: Jan 2004
Posts: 107
Time spent in forums: 4 h 44 m 25 sec
Reputation Power: 10
|
|
|
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.
|
December 4th, 2012, 05:58 PM
|
 |
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
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.
|
December 4th, 2012, 11:50 PM
|
|
Contributing User
|
|
Join Date: Jan 2004
Posts: 107
Time spent in forums: 4 h 44 m 25 sec
Reputation Power: 10
|
|
Quote: | 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
|
December 5th, 2012, 02:10 AM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
|
Which version of IE are you testing it in?
Regards,
NM.
|
December 5th, 2012, 09:21 AM
|
|
Contributing User
|
|
Join Date: Jan 2004
Posts: 107
Time spent in forums: 4 h 44 m 25 sec
Reputation Power: 10
|
|
Quote: | 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
|
December 5th, 2012, 03:29 PM
|
 |
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
|
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.)
|
December 5th, 2012, 03:58 PM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
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.
|
December 5th, 2012, 11:55 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
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):
Quote: | 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.
Quote: | 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.
|
December 6th, 2012, 10:03 AM
|
|
Contributing User
|
|
Join Date: Jan 2004
Posts: 107
Time spent in forums: 4 h 44 m 25 sec
Reputation Power: 10
|
|
Quote: | 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
|
December 6th, 2012, 11:42 AM
|
|
Contributing User
|
|
Join Date: Aug 2011
Location: The Pleiades
|
|
Quote: | 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.
|
December 6th, 2012, 03:23 PM
|
|
CSS & JS/DOM Adept
|
|
Join Date: Jul 2004
Location: USA
|
|
You're welcome dolay.
Quote: | 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.)
Quote: | 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.
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
