css image problems in chrome & IE

  • I have a small image logo that displays to the left of the text for each post, just under the post heading. The logo displays fine in Firefox, but puts a border around the image in both Chrome and IE.

    HERE IS THE CSS:

    .post_logo {
    background-image: url(‘images/post_header_logo.gif’);
    margin-right: 11px;
    margin-bottom: 10px;
    margin-left: 50px;
    border-style: none;
    float: left;}

    HERE IS THE HTML:
    //
    <?php if (have_posts()) { ?>
    <?php while (have_posts()) { the_post(); ?>
    <div class=”post”>
    <div class=”title”>
    <h1>“><?php the_title(); ?></h1>
    <h2><?php the_time(‘F jS, Y’) ?> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp // &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <?php the_category(‘, ‘) ?> &nbsp &nbsp </h2>

    </div>
    <img class=”post_logo” width=”80″ height=”80″>
    <?php the_content(”); ?> //

    You can view it in action here: blog.fsweddings.com

    Any suggestions are very appreciated!!!

    Ryan

Viewing 7 replies - 1 through 7 (of 7 total)

  • You seem to hav many css files. I found this one below, the extra lines seems to come from .img in all.css but you need those for your bigger images.

    .post_logo {
background-image:url(images/post_header_logo.gif);
border-bottom-style:none;
border-left-style-ltr-source:physical;
border-left-style-rtl-source:physical;
border-left-style-value:none;
border-right-style-ltr-source:physical;
border-right-style-rtl-source:physical;
border-right-style-value:none;
border-top-style:none;
float:left;
margin-bottom:10px;
margin-left:50px;
margin-right:11px;
}

    IE also shows me the missing image symbol projected over the soft blue logo.
    Can’t find anything else butyou should start correcting the html and css errors found through here:
    https://www.xhtml-css.com/

    Thread Starter floodster

    (@floodster)

    Thank you for your response. I have no idea where these declarations are coming from:

    border-bottom-style:none;
border-left-style-ltr-source:physical;
border-left-style-rtl-source:physical;
border-left-style-value:none;
border-right-style-ltr-source:physical;
border-right-style-rtl-source:physical;
border-right-style-value:none;
border-top-style:none;

    As far as I know, there are 3 css files being used: 2 that are part of the wp theme (all.css & stylesheet.css) and one for sFIR fonts via the font burner plug-in.

    I eliminated all img declarations from all.css and still had the same problems. Do you see any additional style sheets being used? Any thoughts?

    Thank you.

    I see an all.css#2 which I don’t understand.

    style.css does import/use all.css , that’s allright.
    The logo is now completely gone (offcourse).

    It looks like the logo has been commented out? In your CSS, try changing the tag below your post logo tag from:

    .post_logo img { border: white}

    to

    .post_logo img { border: none}

    Thread Starter floodster

    (@floodster)

    Thank you for your suggestions. I did remove the logo briefly to try and fix it. mechx1, I have updated the css with your border declaration, but still no change. This is just a mystery to me . . .

    The selector .post_logo has a rule border: white; as opposed to border: none; as you stated above. I suggest you set it to border: none; White really should work, since it is on a white background, but maybe not in IE and Chrome

    in IE, not only has the logo a border, but also the sign of an image not found.
    i think the empty image tag is causing this.

    <img class="post_logo" width="80" height="80"/>

    if you could change this into a div:

    <div class="post_logo" ></div>

    and adapt your css, the border should be gone.

    css:

    .post_logo {
background-image: url('images/post_header_logo.gif');
margin-right: 11px;
margin-bottom: 10px;
margin-left: 50px;
border-style: none;
float: left;
height:80px;
width:80px;}

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘css image problems in chrome & IE’ is closed to new replies.