www.webdeveloper.com
Results 1 to 3 of 3

Thread: IE7 and my floated link list issue…

Hybrid View

  1. #1
    Join Date
    Apr 2007
    Location
    Newcastle upon Tyne
    Posts
    61

    IE7 and my floated link list issue…

    Help!!!
    Here's the page I'm working on for you to view:
    http://ashby-design.co.uk/MPT/community.php

    I just can't figure out why IE7 won't display the list (ul.lineup) of images and captions in the second column without it flipping down when the window is smaller. The link widths are set by the image and caption widths, but overall there should be plenty of room - but acts as though it doesn't.

    I've used the column set-up throughout my website and this is the only place where this problem occurs and I've tried all sorts to try and figure out what's going on. I've added borders to ul (black) and li (red) to try and pick up what's happening - but no inspiration as yet - anyone?

    If I note out the div.authorphotosmall and the p.authorcaptionsmall the same thing happens, so I don't think it has anything to do with their properties. I've tried playing around with the ul.lineup links - but no joy.

    Below is the html and css (I've removed the specific content so it's easier to see what's going on, I hope)

    HTML Code:
    <div class="two">
    <h3>TITLE</h3>
    <div class="column-wrapper">
    <div class="column">  
    <div class="prose">
    <h2>title</h2>   
    <p>text content</p>
    <p>text cotent</p>
    <!-- end prose--></div>
    <!-- end column --></div>
        
    <div class="column">  
    <div class="prose">
    <h2>title</h2>  
    
    <ul class="lineup caption">
    <li><div class="authorphotosmall"><img src="image" /></a></div>
    <p class="authorcaptionsmall">Caption</p></li>
    <li><div class="authorphotosmall"><img src="image" /></a></div>
    <p class="authorcaptionsmall">Caption</p></li>
    <li><div class="authorphotosmall"><img src="image" /></a></div>
    <p class="authorcaptionsmall">Caption</p></li>
    </ul>
    
    <ul class="lineup caption">
    <li><div class="authorphotosmall"><img src="image" /></a></div>
    <p class="authorcaptionsmall">Caption</p></li>
    <li><div class="authorphotosmall"><img src="image" /></a></div>
    <p class="authorcaptionsmall">Caption</p></li>
    <li><div class="authorphotosmall"><img src="image" /></a></div>
    <p class="authorcaptionsmall">Caption</p></li>
    </ul>
     <p class="dark"><strong>A paragraph</strong></p>
    	<!-- end prose--></div>
    	<!-- end column --></div>
     
    <!-- end column-wrapper --></div>    
    </div>

    Code:
    .lineup { overflow: hidden;}
    ul.lineup { 
    	margin-bottom: 0;
    	border: 1px solid black
    	}
    .lineup li { 
    	list-style-type: none;
    	float: left;
    	width: 100px;
    border: 1px solid red
    	}
    
    .caption {
    	font-style: italic;
    	overflow: hidden;
    	}
    .caption a {text-decoration: none; }
    .caption p.authorcaptionsmall { width: 80px;}
    
    .authorphotosmall img {width: 100%; }
    .authorphotosmall {border: 3px solid rgb(204,204,204);}
    .authorphotosmall a {display: block }	
    .authorphotosmall, .authorphotosmall a { width: 80px; height: 80px; }
    
    
    
    .two {
    	background-color: rgb(255,255,255);
    	margin-bottom: 2em;
    	overflow: hidden;
    	}
    .column-wrapper { 
    	overflow: hidden; 
    	width: 100%;
    	}
    .column {
    	width: 50%;
    	float: left;
    	overflow: hidden;
    	}
    .prose {
    	padding-left:1.5em;
    	padding-right:1.5em;
    	margin: 1.5em 0.8em 1em 0.8em;
    	overflow: hidden;
    	}

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    I don't know what you are talking about. The page looks and acts the same in FF, IE7 and IE8 /Win7

    Except that you have a JavaScript error (common for all the browsers). You call a function/method called Cufon which is not defined.

  3. #3
    Join Date
    Apr 2007
    Location
    Newcastle upon Tyne
    Posts
    61
    Hmm - thanks Kor
    I am wondering if this is a strange effect produced because I am using Parallels on a Mac to load IE7… I'm hoping so as I've been scratching my head over this one. Apologies to all if this is the case.

    thanks for alerting me to the cufon link - forgot to remove it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

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