[RESOLVED] Stumped! border around regular - NOT linked - image only in IE??

[etard]

okay, I have tried it all in my css to get rid of a pesky border around an image - an image that is NOT a link!! - only seen in IE. Only. It is in some php code that places this image after each blog post to separate the posts. Works perfect everywhere but IE..

I have tried

img {
border: none;
}

and when defining the actual image style I have tried...

border: none;
border-style: none;
border-collapse: collapse;
border:0px;

etc, etc, etc

and I can't kill this border around this image. here are some screenshots of the issue and I am stumped?

Thoughts?

BTW, the image is coded as a background image via CSS - it is not an image in the page old school HTML way

[josephbm91]

I would love to see all the code to see if the problem is elsewhere.

[etard]

cant do that as it is in beta on a beta server

but the php code is this

<?php
define('MAGPIE_DIR', 'magpie/');
require_once(MAGPIE_DIR.'rss_fetch.inc');

$num_items = 3;
$rss = fetch_rss( 'http://www.myblog.blogspot.com/atom.xml' );
$items = array_slice($rss->items, 0, $num_items);

foreach ($items as $item) {
   $href = $item['link'];
   $title = $item['title'];
   $created = $item['created'];

   echo "<a href=$href>$title</a> $created<hr/>";
}

?>

that final hr style is defined by css like this and this is the image that IE is putting a border on despite the fact it is told not to and it is NOT a linked image

hr { background:url(../images/divider.png) no-repeat; width:25px; height:10px; border: none; text-align:center;}

as I said, is perfect in every other browser on mac and pc.. IE is the only issue

[josephbm91]

Well this is the first time I've resorted to a hack of some sorts, but it works this way on my end.

<div style="width:25px; height:10px; background: #000000 url(../images/divider.png) no-repeat scroll center;"><hr style="display:none;" /></div>

Credit goes to

About.com

[aj_nsc]

Oh that's a ridiculous 'solution'.

Use firefox and the webdeveloper toolbar add-on, push ctrl+y and then click on your hr, you'll see all the styles applied to it and you'll find out that another style, lower in the cascade than the one you specified above.

EDIT: wait what version of IE gives you this grief?

[josephbm91]

Well the coding friendly version would just be to not use an image as a horizontal rule, but if the OP wants to use an image with the HR, that's the only way so far I've seen it work. No need to be so rude.

The border shows up in IE7.

[aj_nsc]

My apologies, I wasn't paying close enough attention to the fact that it was an hr.

I don't see any reason for the OP to use an hr here, though. If the hr is separating different parts on a page, then skip the hr and just wrap the content in separate divs, then applying a bottom padding on each div and set the background image to the image that you want for the hr like this: background: url(yourimage) center bottom no-repeat;

If they are different posts then they should be treated as separate parts of the page. If divs aren't appropriate, then use <p> and use the same solution.

Again joseph, sorry about that, you're exactly right.

[etard]

Oh that's a ridiculous 'solution'.

Use firefox and the webdeveloper toolbar add-on, push ctrl+y and then click on your hr, you'll see all the styles applied to it and you'll find out that another style, lower in the cascade than the one you specified above.

EDIT: wait what version of IE gives you this grief?

both 7 and 8

I will try the FF toolbar, never noticed that trick

[etard]

My apologies, I wasn't paying close enough attention to the fact that it was an hr.

I don't see any reason for the OP to use an hr here, though. If the hr is separating different parts on a page, then skip the hr and just wrap the content in separate divs, then applying a bottom padding on each div and set the background image to the image that you want for the hr like this: background: url(yourimage) center bottom no-repeat;

If they are different posts then they should be treated as separate parts of the page. If divs aren't appropriate, then use <p> and use the same solution.

Again joseph, sorry about that, you're exactly right.

there is an important part here that makes this different than just a common issue like this in general code.

PHP is rendering code. this is not just code I have that much control over and can div and style out as I see fit. The PHP code places a blog post, then a divider of some sort and yes, I can use a simple HR with no image and just have a line to separate posts, BUT we wanted something a bit more artistic this time. so an image was used. The fact it works on mac and pc, on opera, chrome, safari, FF, camino, NS, etc - and only in IE, tells me the issue is in IE.

the <hr> is used for 2 reasons, it is one of the few HTML type tags you can use in the above php code without breaking the code, you just can't place any code you want in that PHP code and have it function and second, we want a nice image for looks, not a boring line

[etard]

Well this is the first time I've resorted to a hack of some sorts, but it works this way on my end.

<div style="width:25px; height:10px; background: #000000 url(../images/divider.png) no-repeat scroll center;"><hr style="display:none;" /></div>

Credit goes to

About.com

you can't do this

you guys are missing the point that I am not placing the HR in the page. The PHP code places the HR. I can only give HR some style definitions, but the PHP code places it where and when at the right time after it pulls data from the blog.

if I could place the post, then divider image, then post, then divider image, it would be a piece of cake.... but PHP is rendering the layout so you don't have this kind of control.

[josephbm91]

If your PHP is so out of control and you can not manipulate it however you wish, then you have problems with your programming logic you need to fix.

You're almost making the PHP code sound like some entity you can't control.

[etard]

Oh that's a ridiculous 'solution'.

Use firefox and the webdeveloper toolbar add-on, push ctrl+y and then click on your hr, you'll see all the styles applied to it and you'll find out that another style, lower in the cascade than the one you specified above.

EDIT: wait what version of IE gives you this grief?

interesting results with the FF trick, it tells me this... but none of this is applied to the HR so where is it coming from? And, FF displays perfect.

hr (line 319)

{
background-color: transparent;
background-image: url(../images/divider.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
width: 25px;
height: 10px;
border-top-width: 0px;
border-right-width-value: 0px;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-bottom-width: 0px;
border-left-width-value: 0px;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-top-style: none;
border-right-style-value: none;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-bottom-style: none;
border-left-style-value: none;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-top-color: -moz-use-text-color;
border-right-color-value: -moz-use-text-color;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-bottom-color: -moz-use-text-color;
border-left-color-value: -moz-use-text-color;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
}

[etard]

If your PHP is so out of control and you can not manipulate it however you wish, then you have problems with your programming logic you need to fix.

You're almost making the PHP code sound like some entity you can't control.

funny thing is.. we are making excuses for IE when in fact,

(1) this PHP code - using Magpie - is well used code on the web for pulling in blog posts into your web site

(2) the code works perfect on both Mac and PC systems on 5+ other browsers

and yet we want to point fingers at the PHP code.

Every code has limitations, you cannot do and control EVERY aspect of function. The PHP code handles a critical piece and that is going out and parsing blog posts and pasting them into your website.

let's stop pointing fingers at the PHP code and point the finger where it deserves, some issue in IE. And, like that should be a real surprise, we all have IE specific issues often, every developer knows this - and here is one.

so clearly, the PHP code is not out of control, it does exactly as designed, IE - and IE only - is adding something not there for an unexplained reason. Further proof of this fact is that if you just go to a stylized HR and not try to use a nice image, it works perfect. the fact you add an image as the style to HR exploits some issue in IE and if we had not, I would never have posted this issue.

[josephbm91]

Horizontal rules are used to display lines. If you don't want a line, don't use horizontal rules. IEs only fault here is its inability to correctly interpret iffy semantics. There's no reason why if you can echo "<hr />" and style the hr, you can't echo "<div class=\"divider\"></div>", or anything other than a horizontal rule and style that as well.

[etard]

Horizontal rules are used to display lines. If you don't want a line, don't use horizontal rules. IEs only fault here is its inability to correctly interpret iffy semantics.

just FYI... it is absolutely okay and W3C complaint to use images in HR styles. Agreed it is not ideal and using a styled out DIV to make a cool divider line or image or effect is the best way, but a styled HR will pass W3C.

There's no reason why if you can echo "<hr />" and style the hr, you can't echo "<div class=\"divider\"></div>", or anything other than a horizontal rule and style that as well.

but anyway.... THANKS!! you tipped me off to the solve with the Echo of the div.. echoing a styled out div and not a styled out HR... that was it. My bad for not picking up on it earlier.

thanks!