Home/ Questions/Q 6007111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T01:38:05+00:00

I’ve currently coded all of the front-end design to work 100% correctly in Chrome.

  • 0

I’ve currently coded all of the front-end design to work 100% correctly in Chrome. Now I’m going through and cross-browser testing and fixing bugs. I’ve come across a strange error in Safari where the images won’t display correctly. Taking a look at the HTML:

<li class="newsfeedlist-item">
<div class="questionslogo"</div>
<div class="newsfeedlist-image">
<img src="http://images.ted.com/images/ted/2ade6b48aac1eb21b7b90fe43335a8e70771455c_50x50.jpg"></div>
<div class="newsfeedlist-content">
<h3><b><a href="#">What Is The Best Way To Become A Photographer? </a></b></h3>
<div class="newsfeedlist-bodytext"> What if a fish came across a river? Then what???    What if a fish came across a river? Then what???    What if a fish came across a river? Then what???    What if a fish came across a river? Then what???    What if a fish came across a river? Then what???</div>  
<div class="newsfeedlist-questionauthor"> <i>Started By <a href="#">Robert Sopel</i></a></div>
</div>
</li>

you will notice that it’s a bunch of simple div’s that all reference scripts from the CSS. The error in Safari (in my opinion) does not come from the CSS, but from the “img src” tag in html. But here’s the CSS for the “newsfeedlist-image” and “questionslogo”, both of which have errors:

.questionslogo {
width: 84px;
background: url(images/questions.png) top left no-repeat;
padding: 8px 0px 0px 100px;
float: left;
}

.newsfeedlist-image {
width: 48px;
float: left;
}

note that I have tried fixing a height for both and display: block, but this does not change the fact that in Safari, it does not recognize the image (you can’t click and drag it around, it just hovers over it) See screenshots below.

Chrome:

http://www.cl.ly/3f1Z143b3X0V1N1i1b1c

Firefox:

http://www.cl.ly/471R002N3v182q2W1V1j

and finally Safari:

http://www.cl.ly/1X3H2W1A1V3b0G3V2n0G

I think it’s a simple fix, but can’t come across it right now. Would appreciate any help. Thanks!!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is this part, where you have a typo:

    <div class="questionslogo"</div>

    Fix it by adding a >:

    <div class="questionslogo"></div>

    To find errors like this yourself, it’s a good idea to validate your HTML using: http://validator.w3.org/

    I also notice that you also have:

    <i>Started By <a href="#">Robert Sopel</i></a>

    You’ve closed the tags in the wrong order, it should be:

    <i>Started By <a href="#">Robert Sopel</a></i>
    • 0