SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: news-ticker

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    news-ticker

    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.
    Code:
    <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>
    Code:
    <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">	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">	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">	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">	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
    Last edited by Paul O'B; Feb 6, 2013 at 11:12. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I assume you have the html5 shiv in place for IE?
    I used modernizr.
    Quote Originally Posted by Paul O'B View Post
    Why the extra div around the h1 when none is needed as there are no styles applying to it?
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tulip-flower View Post
    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
    Glad you sorted it and thanks for letting us know what the problem was as it may help others in a similar situation

    Edit:


    However please see here for a follow up.
    Last edited by Paul O'B; Feb 10, 2013 at 07:58.


Bookmarks

Posting Permissions

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