www.webdeveloper.com
Results 1 to 2 of 2

Thread: little gap between img and surounding li - firefox only

  1. #1
    Join Date
    Aug 2007
    Location
    Germany, NRW
    Posts
    76

    Question little gap between img and surounding li - firefox only

    Hi,

    i found this problem while designing a page with firefox. The gap is not coming from padding or margins. The Problem is not visible in Opera or IE. Please see the attached images for best explanation.
    Please help.
    Jens

    Here my code:
    HTML Code:
    <ol id="teaser">
    		<li class="item">
    	      	<h2 class="hideme"><a href="#1" >Messe</a></h2>
    			<img src="images/teaser_one.jpg" alt="Lorem Ipsum Dolor Siamet"/>
    			<p class="hideme"><strong>Teaser one </strong>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
            </li>
    		<li class="item">
              	<h2 class="hideme"><a href="#2">Aktion</a></h2>
    			<a href="#2"><img src="images/teaser_two.jpg" alt="Lorem Ipsum Dolor Siamet"/></a>
    			<p class="hideme"><strong>Teaser two </strong>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
            </li>
    ...
    Code:
    	OL#teaser {
    		margin:0;
    		padding: 10px 0;
    		text-align: center;
    	}
    	OL#teaser li {
    		display: inline-block;
    		width: 481px;
    		border: 3px solid;
    		margin: 0 0 6px 0;
    		padding:0;
    		
    	}
    Attached Images Attached Images

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

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