News-ticker

HTML & CSS
1

:)Hi
I’ve use a news-ticker in my site. It works very well in ie9 & ie8
but it doesn’t work in ie7. The h1 & image appear for seconds then disappear ---->to have an empty news-ticker box.
Links also don’t work.
(note: it does not work inside my site, while it works in an empty page )

I guess there is some problem in my css. I’ve tried to solve it many times but never come with the solution.


<style type="text/css">
#container {width:100%; background-color:#999}


#first-l{ margin-top:22px; border-bottom:2px dashed #999; width:1000px;padding-bottom:3px; height:366px;  }
.ie7 #first-l{  margin:0; border:1px solid red; display:inline}
/*news-ticker*/
#newsticker-demo { width:415px; height:360px; background:#d3cccc; padding:5px 5px 0; font-size:16px; float:right; border-left:3px solid #aaa; border-right:3px solid #aaa;}
.ie7 #newsticker-demo {float:none }
#newsticker-demo a { text-decoration:none; color:#000;}
#newsticker-demo img { border: 3px solid #d8d6d6; }
#newsticker-demo .title h1{ text-align:center; color:#fff; padding:3px;  background-image:
url(../images/btn-n.png); width:130px; height:27px; float:right; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; border:1px solid #900633; font-family:Verdana, Geneva, sans-serif; font-size:24px; font-weight:bold; margin-right:5px; margin-bottom:5px }
.newsticker-jcarousellite { width:400px; margin-left:auto; margin-right:auto; padding:0 15px}
.ie7 .newsticker-jcarousellite { margin-left:0; margin-right:0; }

.ie7 .newsticker-jcarousellite ul li {margin-bottom:0}
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:3px; text-indent:4px; border-bottom:1px dashed #666; height:100px; background:url(../images/arrrow.png) no-repeat 377px 18px;}

.ie7 .newsticker-jcarousellite .thumbnail {float:none; margin-top:8px; margin-left:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:118px; height:63px; margin-top:18px; margin-left:15px;}

.ie7.newsticker-jcarousellite .info { margin:5px; float:right;} 
.newsticker-jcarousellite .info { float:right; width:230px; text-align:right; margin:10px; }

.ie7 .newsticker-jcarousellite .info span.cat { margin:5px;}
.newsticker-jcarousellite .info span.cat { display: block; font-size:12px; color:#666; margin:10px; line-height:150%; }
.clear { clear: both; }

</style>


<section id="container">
      <div class="wrap">
      
      <div id="first-l">
      <ul>
        
        <li>
        
           <div id="newsticker-demo">    
    		<div class="title"><h1>news</h1></div>
    		<div class="newsticker-jcarousellite">
            	<ul>
                	<li>
                		<a href="#">
                    	<div class="thumbnail">
                        <img src="images/fir_pic.jpg" width="112" height="57">
                    	</div>
                    	<div class="info">
                        floated element
                        	<span class="cat">&#61607;	use a conditional comment as the last item in the floated element</span>
                    	</div>
                    	<div class="clear"></div>
                    	</a>
                	</li>
                	
                	<li>
                    <a href="#">
                    <div class="thumbnail">
                        <img src="images/thir_pic.jpg" width="112" height="57">
                    </div>
                    <div class="info">
                        floated element
                        <span class="cat">&#61607;	use a conditional comment as the last item in the floated element</span>
                    </div>
                    <div class="clear"></div>
                    </a>
                	</li>
                    
                	<li>
                    <a href="#">
                    <div class="thumbnail">
                        <img src="images/seco_pic.jpg" width="112" height="57">
                    </div>
                    <div class="info">
                        floated element
                        <span class="cat">&#61607;	use a conditional comment as the last item in the floated element</span>
                    </div>
                    <div class="clear"></div>
                    </a>
                	</li>
                    
                	<li>
                     <a href="#">
                    <div class="thumbnail">
                        <img src="images/thir_pic.jpg" width="112" height="57">
                    </div>
                    <div class="info">
                        floated element
                        <span class="cat">&#61607;	use a conditional comment as the last item in the floated element</span>
                    </div>
                    <div class="clear"></div>
                    </a>
                	</li>
                	
            	</ul>
    		</div>
    	   </div>
		</li>
        </ul>
       </div>
    </div>   
</section>

Thank you

2

Do you have a link as there’s not enough there to get a working demo and as you said yourself it’s only broken in your page so we need to see that one:)

I assume you have the html5 shiv in place for IE? You also need to set the anchors to display:block when you wrap block content with them (ugh html5).

Why the extra div around the h1 when none is needed as there are no styles applying to it? IE hates elements without haslayout especially ones that are not needed anyway.

3

I used modernizr.

I’ve changed it to h1.title and remove the div which had surrounded by h1

also I’ve find out where the problem is?.
My site take a (rtl direction) which causes a problem with the demo.

In the reset.css
I have :
*{border:none;padding:0;margin:0; direction: rtl}
To fix the problem I added these classes :
.ie7 .newsticker-jcarousellite,
.ie7 .newsticker-jcarousellite ul,
.ie7 .newsticker-jcarousellite ul li{ direction: ltr !important;}
Many thanks

4

Glad you sorted it and thanks for letting us know what the problem was as it may help others in a similar situation :slight_smile:

Edit:

However please see here for a follow up.