CSS ab pos menu in a liquid layout

[admench]

Hi

I'm having problems with this page:

http://www.unitstudios.co.uk/tester/artistproduction

Here is the CSS

.static-scroller {
	/*background: url(../images/header-bg-loop.gif) repeat-x;*/
	position: relative;
	background-color: #3B6B9C;
	overflow: auto;
	width: 90%;
	max-width: 1200px;
	min-width: 880px;
	margin: 0 auto;
}

.scrolling-content {
	background-color:#fff;
	float: right;
	display: block;
/*	border:solid 1px black;*/
	margin: 11px 10px 10px 215px;
	padding: 0 0 10px 0px;
	min-width: 670px;
}



.static-menu {
position: absolute;
left: 0;
top: 0;
display: block;
overflow: auto;
	width: 180px;
	height: auto;
	padding: 0 10px 0 0;
/*	border:solid 1px black; */
	margin-left: 10px;
	margin-right: 20px;
	text-align: right;
}

.sc-text-holder {
	margin: 5px 20px 20px 20px;
}

.scrolling-header {
	height: 140px;
	background: url(../images/paper-header-bg.gif) repeat-x;
	position: relative;
	

}

#nav {
	width: 640px;
	float: right;
	margin: 0 0 0 0;
	min-width: 640px;
	
}

.static-menu #unit-logo{
width:  17%;
min-width: 170px;
	margin: 10px 0 10px 0;
	padding: 0px;
	margin-left: 0px;
	padding-bottom: 10px;
	border-bottom: dotted #fff 1px;
	float: right;

}

#static-nav {

	float: right;
	width: 100%;
	list-style: none;
	padding: 0;
	margin-top: 0;
	

}

and the html:

<div class="static-scroller">


<!-- Scrolling Content -->

<div class="scrolling-content">
		<div class="scrolling-header">
			
			<div id="nav">
			
			<ul class="paper-nav">
			<li class="nav-bg"><a class="active" href="../artistproduction">Artist Production</a></li>
			<li class="nav-bg"><a href="../mixing">Mixing</a></li>
			<li class="nav-bg"><a href="../electronicproduction">Electronic Music Production</a></li>
			<li class="nav-bg"><a href="../custominstruments">Custom Instruments</a></li>
			<li class="nav-bg"><a href="../corporateprojects">Corporate Projects</a></li>
			<li class="nav-bg"><a href="../locationrecording">Location Recording</a></li>
			</ul>
			
			</div> <!-- nav -->
			
		</div> <!-- scrolling-header -->
		
			<div class="sc-text-holder">
	
	<h1>Artist Production @ Unit Studios</h1>
	
<br class="clear" />
	
	<div id="scrolling-quote-box" style="float: right">
 <h2>Calling all experienced artists! Beginners are welcome too!</h2>
 <p>Our two in-house engineer/producers, Adam and Andy, have worked with <i>a huge amount of different artists!</i><br/><br/>We're confident that our gentle approach to producing will work with you as an individual.</p>
 </div>


<br />
 <p>Here at Unit Studios, we are proud of the fact that we are not just engineers and producers but musicians also! Because of this we work closely with various songwriters and performers helping them achieve a great result on all the projects that they collaborate with us on.<br/><br/>Whether this may be an unfinished idea or a fully realized song that just needs that extra help to take it to the next level, we will support and coax the best performance from you, the songwriter, artist or musician. Focus is put on improving the aspects of <b>your music.</b><br/><br/></p>
   <p>We can bring additional live instruments to the sonic palette of your creations including Double Bass, Live Drums &amp; Percussion, Upright Piano, Electric &amp; Acoustic Guitar and Bass Guitar. This injection of live can often have a profoundly inspiring effect to your musical projects and will give them a truly personal sound. <br/><br/></p>
 
  <h2>Some of the techniques we employ:</h2>
<br class="clear" />
 
 <div class="captioned_image">
  <img  class="captioned_img" title="Unit Studios - a comfortable recording studio giving you a cutting edge sound" src="../images/photos/lions-mikey.jpg" alt="Unit Studios, a comfortable recording studio giving you a cutting edge sound" />
  <p class="caption">Vocalists will feel comfortable and get fantastic takes with us!</p>  </div>

<h3>Vocalists</h3>

<p>When approaching Vocal Tracking it is key for the vocalist to be comfortable. This includes correct headphone settings, help with a thorough warm-up including scales and expressive mouth exercises.<br/>

You will be surprised how much a little advice, the right atmosphere and some ginger &amp; honey tea will help you achieve a great vocal recording!  </p>
<br class="clear" />

<div class="captioned_image">
<img title="Unit Studios - a comfortable recording studio giving you a cutting edge sound" src="../images/photos/drummer-contrast-270.jpg" alt="Unit Studios, a comfortable recording studio giving you a cutting edge sound" />
<p class="caption">Drummers can play freely or to a click, benefitting the music!</p></div>

<h3>Drummers</h3>
<p>To get the key sound that every drummer strives for it is essential for the raw sound from each drum to be tuned correctly. We can help to get the best possible sound by spending time with you at the start of the tracking session.<br/><br/>

Microphone positioning, experience and experimentation can create some great results for all your recordings once the sound of your drum kit has been fine-tuned. Also worthy of mention is the Pearl Masters custom kit available at the studio. Check our <a href="../equipment">Equipment &amp; Facilities page</a> for more info! </p>


<br class="clear" />

<div class="captioned_image">
<img title="Unit Studios - a comfortable recording studio giving you a cutting edge sound" src="../images/photos/unit-studios-sofa-guitarist.jpg" alt="Unit Studios, a comfortable recording studio giving you a cutting edge sound" />
<p class="caption">Guitarists can focus on 'their' sound, we will reproduce it faithfully!</p>
</div>

<h3>Guitarists</h3>
<p>Recording guitars begins with the same technique as recording drums; the source sound needs to be at the highest standard to create the best possible recording. We aim to achieve this by selecting different amplifiers and guitars often supplied by the artist.<br/><br/> Unit studios also have access to some other amplifiers and guitars available on request. Once we begin tracking, our engineers will strive to make you as comfortable as possible to gain the best possible outcome.</p>
<br class="clear" />

<div id="next-clickthrough"><p><a href="../rates">See our rates...</a></p></div>
</div>


 		</div> <!-- sc-text-holder-->
 		
 		<div class="static-menu">
 		
 			<div id="unit-logo">
 			
 	<img src="../images/Unit-Logo.png" width="163" height="80" alt="Unit Studios - Recording Studio based in Letchworth, Hertfordshire" /> 
				
 					
 			</div>
 				<h1>Recording Studio Services</h1>
 				<div id="static-nav">
 					<ul>
 								<li><a href="/">Home</a></li>
 								<li><a href="news.htm">News</a></li>
 								<li><a href="rates.htm">Listen</a></li>
 								<li><a href="rates.htm">Look</a></li>
 								<li><a class="active" href="services.htm">Services</a></li>
 								<li><a href="rates.htm">Testimonials</a></li>
 								<li><a href="rates.htm">Rates</a></li>
 								<li><a href="equipment.htm">Equipment</a></li>
 								<li><a href="rates.htm">Contact Us</a></li>
 					
 					</ul>
 				</div>
 			
 		</div>
 		<br class="clear" /> </div>

It works as it should in firefox and Safari, however older browsers do not show this page properly as intended.

Please help me resolve this issue, the left menu should be static, with the content on the right scrolling past it.

Is this possible in IE6?

admench

[azoomer]

in my FF and safari everything is scrolling, including the left menu ?
have you tried position: fixed; like this

.static-menu {
display:block;
height:auto;
left:0;
margin-left:10px;
margin-right:20px;
overflow:auto;
padding-bottom:0;
padding-left:0;
padding-right:10px;
padding-top:0;
position:fixed;
text-align:right;
top:0;
width:180px;
}

[admench]

Hi,


thanks for the reply, I didn't update my page when testing, of course, I have got it to work in Firefox with fixed, as you see, it is updated and works in firefox- however, what can I do to fix the rendering problems shown in these screenshots?





Thanks in advance.

[azoomer]

Hi I am assuming that the screenshots are from IE6. Tried to google the problem and found this hack among many other pages describing the problem.
http://ryanfait.com/position-fixed-ie6/
Unfortunately I don't have access to IE6 so i can't be of much help.

An alternative to the hack could be to have a separate stylesheet for IE
See http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

This would be a link to a stylesheet only read by IE6 and IE 5.5 and so on

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->