Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Fixed height, scrollable ul inside form/fieldset (IE7)

    Hi peeps,

    I think the title says it all, but let me explain ...I have a fieldet which has a fixed height, which has a list within it, when the number of list items exceeds the height of the fieldset or ul, it should scroll. I'd done this on a list plenty, infact the main column in the code I'll paste (the left one), actually has an order list using the similar mark up, its just in a div instead of a table.

    I think the problem is definitily coming from using a fieldset - the reason it uses this is due to where it it pulled from on the site it also expands/collapses on click of the legend using jscript.

    Be great it someone can have a look at this and help. It only seems to be an issue in IE7 and below, IE8 seems fine.

    Thanks in advance,
    Ste


    Oh, I forgot to add, there is one other issue I'm having in IE7. The list that is in the right column below the form/fieldset - the list item styles don't display, any ideas why? Just can't put my finger on it!



    Code:
    <!DOCTYPE html>
    <head>
    
    <style type="text/css">
    
    /* =RESET
    ------------------------------------------------------------------*/
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    	}
    
    /* =GENERIC
    ------------------------------------------------------------------*/
    
    body {
    	background:#f0f0f8;
    	font-family: "Arial", Helvetica, sans-serif;
    	margin:0;
    	padding:0;
    	}
    
    #mid {
    	background: #333;
    	padding-top:42px;
    	}
    	
    #mid .inner {
    	clear:both;
    	margin:0 auto;
    	padding: 0 10px 32px;
    	width:940px;
    	}
    
    /* Columns */
    
    .col-wrapper {
    	clear:both;
    	}
    .col {
    	display:inline;
    	float:left;
    	}
    
    .col-left {
    	width:569px;
    	}
    .col-right {
    	float:right;
    	width:301px;
    	}
    .box {
    	background: #fff;
    	margin:0 0 32px 0;
    	padding:16px;
    	position:relative;
    	}
    	
    /* =LAYOUT
    -----------------------------------------------------------------*/
    
    fieldset{}
    fieldset p { 
    	margin-bottom:8px;
    	}
    fieldset li {
    	color:#a0aab9;
    	font-size:12px;
    	margin-top:16px;
    	vertical-align:center;
    	line-height:28px;
    	position:relative;
    	}
    
    
    .block,
    .block li {
    	list-style:none;
    	margin:0;
    	padding:0;
    	}
    .block {
    	float:left;
    	height:220px;
    	margin:0;
    	overflow:auto;
    	overflow-x:hidden;
    	padding:0;
    	}
    .block li {
    	display: inline-table;
    	height: 35px;
    	line-height:16px;
    	margin-bottom:12px;
    	vertical-align: middle;
    	background:none;
    	padding:0 0 0 5px;
    	width:240px;
    	}
    	
    .block li img {
    	border:1px solid #d3d1da;
    	float:left;
    	height:30px;
    	margin-right:8px;
    	overflow:hidden;
    	vertical-align:middle;
    	width:30px;
    	}
    .block li strong {
    	color:#708299;
    	display:table-cell;
    	font-size:12px;
    	font-weight:normal;
    	text-align: left;
    	vertical-align:middle;
    	width: 200px;
    	}
    
    /* Side List */
    	
    ul#side-list {
    	clear:both;
    	float:left;
    	margin:4px 0 0;
    	}
    ul#side-list li {
    	color:#cdd2de;
    	float:left;
    	line-height:18px;
    	list-style-position:inside; 
    	list-style-type:disc;
    	width:150px;
    	}
    ul#side-list li a {
    	color:#304870;
    	font-size:12px;
    	}
    
    
    /* =CLEARFIX
    -----------------------------------------------------------------*/	
    
    .clearfix:after,
    .inner:after,
    #mid:after,
    .box:after,
    .col-wrapper:after,
    .col:after {
    	content:".";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    }
    .clearfix,
    .inner,
    #mid,
    .box,
    .col-wrapper,
    .col {
    	display:inline-block;
    	}
    .clearfix,
    .inner,
    #mid,
    .box,
    .col-wrapper,
    .col {
    	display:block;
    	}
    	
    </style>
    
    </head>
    
    <body>			
    	<div id="mid">
    		<div class="inner">			
    				<div class="col-wrapper">		
    					<div class="col col-left">
    						<div class="box">
    							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    						</div>
    					</div>
    					<div class="col col-right">
    						<form>
    							<fieldset>
    								<div class="box">
    									<legend><a href="#">Title of expandable fieldset</a></legend>
    									<ul class="block">
    										<li>
    											<img src="img/content/no-image.png" title="No Image Available." />
    											<strong>Title of track</strong>
    										</li>
    										<li>
    											<img src="img/content/no-image.png" title="No Image Available." />
    											<strong>Title of track</strong>
    										</li>
    										<li>
    											<img src="img/content/no-image.png" title="No Image Available." />
    											<strong>Title of track</strong>
    										</li>
    										<li>
    											<img src="img/content/no-image.png" title="No Image Available." />
    											<strong>Title of track</strong>
    										</li>
    										<li>
    											<img src="img/content/no-image.png" title="No Image Available." />
    											<strong>Title of track</strong>
    										</li>
    										<li>
    											<img src="img/content/no-image.png" title="No Image Available." />
    											<strong>Title of track</strong>
    										</li>
    										<li>
    											<img src="img/content/no-image.png" title="No Image Available." />
    											<strong>Title of track</strong>
    										</li>
    										<li>
    											<img src="img/content/no-image.png" title="No Image Available." />
    											<strong>Title of track</strong>
    										</li>
    									</ul>	
    								</div>
    							</fieldset>	
    						</form>
    						<h3>Side column List</h3>
    						<ul id="side-list">
    							<li><a href="#" title="TITLE TEXT.">Lorem ipsum dolor</a></li>
    							<li><a href="#" title="TITLE TEXT.">Lorem ipsum dolor</a></li>
    							<li><a href="#" title="TITLE TEXT.">Lorem ipsum dolor</a></li>
    							<li><a href="#" title="TITLE TEXT.">Lorem ipsum dolor</a></li>
    							<li><a href="#" title="TITLE TEXT.">Lorem ipsum dolor</a></li>
    						</ul>
    					</div>
    				</div>
    			</div>
    		</div>			
    	</div>
    </body>
    </html>
    Last edited by grimaldi; 08-11-2011 at 12:37 PM.

  • #2
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Cheeky bump? Anyone? :/

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    use the property overflow:scroll;

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yeah overflow:scroll doesn't work either

    Re: Ste


  •  

    Posting Permissions

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