www.webdeveloper.com
Results 1 to 15 of 15

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

  1. #1
    Join Date
    Sep 2003
    Posts
    301

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

    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
    Attached Images Attached Images
    Last edited by etard; 02-22-2010 at 10:59 PM.

  2. #2
    Join Date
    Feb 2010
    Posts
    39
    I would love to see all the code to see if the problem is elsewhere.

  3. #3
    Join Date
    Sep 2003
    Posts
    301
    cant do that as it is in beta on a beta server

    but the php code is this

    PHP Code:
    <?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->items0$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
    Last edited by etard; 02-23-2010 at 01:05 AM.

  4. #4
    Join Date
    Feb 2010
    Posts
    39
    Well this is the first time I've resorted to a hack of some sorts, but it works this way on my end.

    Code:
    <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

  5. #5
    Join Date
    Dec 2005
    Posts
    2,984
    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?
    Last edited by aj_nsc; 02-23-2010 at 07:43 AM.

  6. #6
    Join Date
    Feb 2010
    Posts
    39
    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.

  7. #7
    Join Date
    Dec 2005
    Posts
    2,984
    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.

  8. #8
    Join Date
    Sep 2003
    Posts
    301
    Quote Originally Posted by aj_nsc View Post
    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

  9. #9
    Join Date
    Sep 2003
    Posts
    301
    Quote Originally Posted by aj_nsc View Post
    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

  10. #10
    Join Date
    Sep 2003
    Posts
    301
    Quote Originally Posted by josephbm91 View Post
    Well this is the first time I've resorted to a hack of some sorts, but it works this way on my end.

    Code:
    <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.

  11. #11
    Join Date
    Feb 2010
    Posts
    39
    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.

  12. #12
    Join Date
    Sep 2003
    Posts
    301
    Quote Originally Posted by aj_nsc View Post
    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;
    }

  13. #13
    Join Date
    Sep 2003
    Posts
    301
    Quote Originally Posted by josephbm91 View Post
    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.
    Last edited by etard; 02-23-2010 at 11:03 AM.

  14. #14
    Join Date
    Feb 2010
    Posts
    39
    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.

  15. #15
    Join Date
    Sep 2003
    Posts
    301
    Quote Originally Posted by josephbm91 View Post
    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.

    Quote Originally Posted by josephbm91 View Post
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles