IE 7 is staggering the images, FF and Chrome see them fine - HELP please

Discussion in 'CSS' started by sahmothers.com, Aug 6, 2010.

  1. #1
    I have tried adding clear:both, overflow:hidden and a few other options but I cannot seem to figure out why on earth the coding is throwing my images into a staircase look (staggering)

    Any help would be awesome

    s91532.gridserver.com

    Images at the bottom starting with "What we're About"

    Thanks in advance
     
    sahmothers.com, Aug 6, 2010 IP
  2. Rimona

    Rimona Active Member

    Messages:
    123
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    63
    #2
    Try loosing the <li> and </li>.

    They serve no purpose and the </li> sometimes tend to force a break.
     
    Rimona, Aug 6, 2010 IP
  3. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I looked at your css code. The HTML for the bottom images is actural 3 column layout. But the CSS for setting the 3 column is on <a> tag, rather than <li>.

    
    			<div id="bottom-buttons">
    			      <li class="left"><a href="/what-were-about">What We're About</a></li>
    			      <li class="middle"><a href="/impact-groups">Small Groups</a></li>
    			      <li class="right"><a href="/socialmedia"><strong>HVC and Social Media</a></li>
    			</div>
    HTML:
    I made some modification on the CSS


    #bottom-buttons li {   
    	list-style-type: none;
    	width: 301px;
    	float:left;
    	margin-right:15px;
    	padding:0;	
    }
    
    #bottom-buttons li.left a:link {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomleft.jpg) no-repeat; display:block; text-indent:-9999px;}
    #bottom-buttons li.left a:visited {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomleft.jpg) no-repeat; display:block;  text-indent:-9999px;}
    #bottom-buttons li.left a:hover {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomleft.jpg) no-repeat; background-position: 0 -174px;  display:block;   text-indent:-9999px;}
    #bottom-buttons li.left a:active {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomleft.jpg) no-repeat; background-position: 0 -174px;  display:block;   text-indent:-9999px;}
    
    /* Middle Button on Bottom */
    #bottom-buttons li.middle a:link {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottommiddle.jpg) no-repeat;  display:block;  text-indent:-9999px;}
    #bottom-buttons li.middle a:visited {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottommiddle.jpg) no-repeat;  display:block;   text-indent:-9999px;}
    #bottom-buttons li.middle a:hover {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottommiddle.jpg) no-repeat; background-position: 0 -174px;  display:block;  text-indent:-9999px;}
    #bottom-buttons li.middle a:active {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottommiddle.jpg) no-repeat; background-position: 0 -174px;  display:block;   text-indent:-9999px;}
    
    /* Right Button on Bottom */
    #bottom-buttons li.right a:link {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomright.jpg) no-repeat;  background-color:#cfcfcf;display:block;   text-indent:-9999px;}
    #bottom-buttons li.right a:visited {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomright.jpg) no-repeat;  display:block;   text-indent:-9999px;}
    #bottom-buttons li.right a:hover {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomright.jpg) no-repeat; background-position: 0 -174px;   display:block;  text-indent:-9999px;}
    #bottom-buttons li.right a:active {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomright.jpg) no-repeat; background-position: 0 -174px;   display:block;  text-indent:-9999px;}
    Code (markup):
     
    unigogo, Aug 6, 2010 IP
  4. sahmothers.com

    sahmothers.com Well-Known Member

    Messages:
    2,389
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    135
    #4
    Thank you very much, I am trying the newest code now.
     
    sahmothers.com, Aug 7, 2010 IP
  5. jj1

    jj1 Active Member

    Messages:
    892
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #5
    When I had something similar in Wordpress (ie6 showed different spacing), I actually ended up calling different css sheets for ie6 and other browsers. That way I could position things exactly for ie6 in one style sheet and position exactly in other browsers in another style sheet.
     
    jj1, Aug 17, 2010 IP