CSS - Overflow: Scroll | Auto Not Using The Wheel

when you put overflow: auto; into a div it adds a horizontal scroll bar in, is there a way using css and/or html to make it add a vertical scroll bar instead of a horizontal one so when the text got to the end of the div instead of extending the div it just adds a vertical scroll?

Thanks in advance!

Here's my next IE challenge (or frustration). It deals with the overflow attribute. Overflow property was a challenge on my page since the page emulates position fixed for IE.

The present scenario deals with the pre element. Sometimes the content in the pre container exceed the parent container's width. IE expands the parent containers width as a result. The workaround for this scenario relates to the overflow property and using a wrapper with the height set to 1% . Now, IE maintains the parent container width. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results.

The workaround involves wrapping a pre element in a div, WrapOverflow. Now, you could set the overflow auto attribute on the child pre element. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results.

Firefox has no need for the wrapper and still renders the page accurately with the superfluous code. The problem relates to IE rendering pre/wrapper with a smaller height. By controlling the horizontal expansion; the workaround has somehow constrained the height as well. The net effect is a vertical scroll bar, which is not ideal.

Compare the scenario in both Firefox and IE; set the browser next to each other; notice the div.WrapOverflow pre container height. Screenshots are below and review the code for a full illustration.

Yes, you must be thinking change overflow auto to overflow vertical. Let's not jump to a quick conclusion. Understanding what is going on here is important as well. The pre container's height should grow in IE, but the page's complexity and various hacks muddle the scenario. I have already spent a month on this scenario, but do not have the skill to decipher what various hacks impose on my layout. Let me know if you have any good ideas, explanations, or suggestions on this situation.

http://neville.f2o.org/nifty_TEMP2.html

i always seem to have problems keeping inner elements within the confines of the div box. i always use overflow: auto, but i am wondering if i am going about this the wrong away. another annoying thing is using overflow: auto tends to make the div tab-able.

Code:

<div class="info_box">
	<img src="images/temp_tiger.png" class="imgalignleft" alt="Petition Title" />
	<h5>Petition Title</h5>
</div>

...

.info_box {
	clear: both;
	overflow: auto;
	border: 1px solid #999;
	background-color: #fff;
	margin-bottom: 8px;
	padding: 10px;
	font-size: 11px;
}

.info_box h5 {
	color: #06c;
	font-size: 14px;
}

Hello, I have overflow set to auto and it doesn't work in IE Mac.
It works just right in all other bnrowsers that I've checked with, except IE 6 which adds the vertical scrolls when it shouldn't. I only want the horizontal scroll bar to show up. But, that's not as big an annoyance as the IE Mac, although, should you have a suggestion for that too, I'll take it. Scroll bars didn't work at all in IE 6 until I added a width to the <code> tag.

The webpage is at www.huntacular.com and the css file is here

What happens in IE Mac is that the contents of the div disappears when I try to set overflow: auto;

I tried to set white-space: pre; as recommended at evolt, but no luck.

On another note, is there any other way to resolve the vertical spacing in IE 6 other than using this solution which uses comments to retain the indentation so that the li elements don't need to span more than one line. If not, that's not too big a deal, just annoying.

I hope someone can help, thanks.

Thanks for reading my question.

I have 2 sections. They are #info and #menu.

The way I have my html set up is, I have <div id="info"> then <div id="menu"> that way, the height of "info" will always be at least as high as "menu".

My problem arizes when "info" is higher than "menu". In this case I would like "info" to not grow in height, but rather have the Overflow: auto; come into effect, and have a scrollbar on the right hand side of the "info" section.

For an example of what is happening right now check out
www.pierced.ca/Kelly/index.htm

index.htm looks the way I want all the pages to look.

if you click on Cards, Tags, or Seasonal, you'll see how the page differs from index.htm or the contact, or order pages.

Is there a way to say, height can be no bigger than the current height of "menu"?

Thanks,

Brad

Title sounds a bit contradictory, I know, but please bear with me...

I'm building a simple chat application with html, javascript php and mysql.

The technical stuff (php/ajax etc) i'm absolutly fine with; what I'm struggling with is the CSS to make it behave how I want. I've got a prrof-of-concept page working 90% how I want, here

http://chris.loyaltymatters.co.uk/chat-demo/

This works by having an outer div of position:relative and an inner div of position:absolute; bottom:0px

so that as new content gets added to the bottom, older text goes up. So far so good....but I want a scroll bar so that I can scroll up to see previous comments.

Giving the inner div a height value gives me a scroll bar, but the position remains at the top and new content gets hidden towards the bottom

html:

Code:

<div id='container'>
	<div id='chatRoom'>

	</div>
</div>

css

Code:

#container {
	width:500px;
	height:500px;
	margin:50px auto;
	border:1px solid black;
	position:relative;
	overflow-y:scroll;
	overflow-x:hidden;
}

#chatRoom {
	position:absolute;
	bottom:0px;
	margin:5px;
	width:100%;
}

To summarise, all I need now is a scroll bar so that I can scroll up

many thanks in advance

I have a wrapper div with a height of 600px and a width of 900px

Inside it there are 2 divs

The first is floated left with the below style
Code:

    #left{
    height : 100%;
    width : 600px;
    overflow:hidden;
    float : left;
    }

The second one is not floated, so that it can occupy the rest of the space and the style is
Code:

    #right{
    height : 100%;
    overflow : auto;
    margin-left : 600px;
    }

The above design is meant to create a 2 column layout with a fixed height. The html I used is
Code:

    <div class="wrapper">
      <div id="left">
        <img id="main-image" src="/some/image"/>
      </div>
      <div id="right"></div>
      <br clear="left"/>
    </div>

The thing is that Opera (v 10.01) and Safari (v. 4.0.3) do not display the right div.

When I remove the overflow:auto, however they do.

I cannot figure out why. Any help appreciated

Thanks

It always amazes me how Microsoft can mess something up that was working before. Take the following example, a table cell set to a specific width, containing a div, width set to 100% of its containing block element (the table cell). Overflow:auto is applied to the div and content is placed in the cell that cannot be wrapped. See the code that follows:

html4strict Code:
Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 100%; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>

  

  


 <table width="200px" cellpadding="0" cellspacing="0" border="0">


   <tr>


     <td style="width: 200px;">


       <div style="width: 100%; overflow: auto;">


         <p style="white-space: nowrap;">Content that should not be wrapped.</p>


       </div>


     </td>


   </tr>


 </table> 

One would expect to have the table cell display with a width of 200 pixels and scrollbars will be displayed for the un-wrappable content.

IE7 does not do that. It widens the cells width to accommodate the content. FF follows this perfectly. To fix this, one has to set the div to the same width as the table cell, like so:

html4strict Code:
Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 200px; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>

  

  


 <table width="200px" cellpadding="0" cellspacing="0" border="0">


   <tr>


     <td style="width: 200px;">


       <div style="width: 200px; overflow: auto;">


         <p style="white-space: nowrap;">Content that should not be wrapped.</p>


       </div>


     </td>


   </tr>


 </table> 

Only then, IE7 will correctly display it. Just something to keep in mind when working with percentage widths.

Hi, Here's the page: http://www.caillouette.com/alpha-dream3/alpha-maschio2.html
Scroll down and you will see a row of parfume bottles. The width of the box is supposed to be 300px, but it comes out much bigger.

Here's the CSS Code:

#productImages{
postion:absolute;
height:78px !important;
width:300px;
overflow: auto;
border:1px solid #333333;
white-space:nowrap;
} 

Here's the HTML: Code:

  <table  bordercolor="333333" border="1" cellpadding="8"><th valign="center"><p class="productText"> MEET THE PHERMONES</p></th>
             <tr><td height="75" width="300" id="productImages">
            
             <a href="MaschioPage/MaschioText1.html" target="maschioText"><img src="images/products/thumbs/prod1T.jpg" border="0"></a>
              <a href="http://www.caillouette.com/alpha-dream3/MaschioPage/MaschioText2.html" target="maschioText">
              <img src="images/products/thumbs/prod2T.jpg" border="0"></a>
              <a href="../../MaschioPage/MaschioText3.html" target="maschioText"><img src="images/products/thumbs/prod3T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod4T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod5T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod6T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod7T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod8T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod9T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod10T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod11T.jpg" border="0"></a>
             <a href="#"><img src="images/products/thumbs/prod12T.jpg" border="0"></a>
             
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td height="138"><iframe name="maschioText" src ="maschioText0.html">
                                                           </iframe> 
                                                          <p>&nbsp;</p>
                                                          </td>
                                                        </tr>
                                                      </table>

Pretty simple stuff, except I can't make the div stay at a 300px width, and have only a horizontal scrollbar. Can somebody please help me out?

thanks
-

I am a UI designer and when I get a new client I do the heavy-lifting, concepting, hand holding, asset management .. then i pass it on to a coder. This time around I lost my coder and am stuck.

My process: PS > Imageready > DW

Here is the home page design - no problems, coded, done:

URL

here is the problem, secondary page(s):

URL

what i want to see happen is where the transparent/orange container is .. flow in text, with scrollbar since there is a lot of text on some of the secondary and tertiary pages.

i started trying my hand at coding with a div inside a table .. via deleted the image, replacing cell with the image dimensions, placing the image as the background, and copied in the text. pretty fugly

URL

here the code (don't laugh too hard):
Code:

<html>
<head>
<title>kading_eye_exam</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (kading_eye_exam.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		kading_eyeexam_Vision_Therapy_over = newImage("images/kading_eyeexam_Vision-Th-17.gif");
		kading_eyeexam_Contact_Lens_over = newImage("images/kading_eyeexam_Contact-L-21.gif");
		kading_eyeexam_Pediatrics_over = newImage("images/kading_eyeexam_Pediatrics-o.gif");
		kading_eyeexam_Education_over = newImage("images/kading_eyeexam_Education-ov.gif");
		kading_eyeexam_About_Us_over = newImage("images/kading_eyeexam_About-Us-ove.gif");
		kading_eyeexam_Eye_Exam_over = newImage("images/kading_eyeexam_Eye-Exam-ove.gif");
		kading_eyeexam_Forms_over = newImage("images/kading_eyeexam_Forms-over.gif");
		kading_eyeexam_Contact_over = newImage("images/kading_eyeexam_Contact-over.gif");
		preloadFlag = true;
	}
}

// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
}
.style2 {font-size: medium}
.style3 {font-size: small}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; }
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (kading_eye_exam.psd) -->
<table id="Table_01" width="1025" height="769" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" rowspan="3">
			<img src="images/kading_eyeexam_01.gif" width="256" height="192" alt=""></td>
		<td rowspan="3">
			<img src="images/kading_eyeexam_02.gif" width="256" height="192" alt=""></td>
		<td colspan="22">
			<img src="images/kading_eyeexam_03.gif" width="496" height="21" alt=""></td>
		<td rowspan="3">
			<img src="images/kading_eyeexam_04.gif" width="16" height="192" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="images/kading_eyeexam_05.gif" width="53" height="171" alt=""></td>
		<td colspan="16">
			<img src="images/kading_eyeexam_logo.gif" width="417" height="168" border="0" alt="" usemap="#kading_eyeexam_logo_Map"></td>
		<td colspan="3" rowspan="2">
			<img src="images/kading_eyeexam_07.gif" width="26" height="171" border="0" alt="" usemap="#kading_eyeexam_07_Map"></td>
		<td>
			<img src="images/spacer.gif" width="1" height="168" alt=""></td>
	</tr>
	<tr>
		<td colspan="15">
			<img src="images/kading_eyeexam_08.gif" width="416" height="3" border="0" alt="" usemap="#kading_eyeexam_08_Map"></td>
		<td>
			<img src="images/kading_eyeexam_09.gif" width="1" height="3" border="0" alt="" usemap="#kading_eyeexam_09_Map"></td>
		<td>
			<img src="images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="11">
			<img src="images/kading_eyeexam_10.gif" width="256" height="144" alt=""></td>
		<td rowspan="11">
			<img src="images/kading_eyeexam_11.gif" width="256" height="144" alt=""></td>
		<td colspan="22">
			<img src="images/kading_eyeexam_12.gif" width="496" height="52" alt=""></td>
		<td rowspan="11">
			<img src="images/kading_eyeexam_13.gif" width="16" height="144" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="52" alt=""></td>
	</tr>
	<tr>
		<td colspan="14">
			<img src="images/kading_eyeexam_14.gif" width="339" height="1" alt=""></td>
		<td colspan="6" rowspan="3">
			<a href="#"
				onmouseover="changeImages('kading_eyeexam_Vision_Therapy', 'images/kading_eyeexam_Vision-Th-17.gif'); return true;"
				onmouseout="changeImages('kading_eyeexam_Vision_Therapy', 'images/kading_eyeexam_Vision-Thera.gif'); return true;"
				onmousedown="changeImages('kading_eyeexam_Vision_Therapy', 'images/kading_eyeexam_Vision-Th-17.gif'); return true;"
				onmouseup="changeImages('kading_eyeexam_Vision_Therapy', 'images/kading_eyeexam_Vision-Th-17.gif'); return true;">
				<img name="kading_eyeexam_Vision_Therapy" src="images/kading_eyeexam_Vision-Thera.gif" width="133" height="36" border="0" alt=""></a></td>
		<td colspan="2" rowspan="10">
			<img src="images/kading_eyeexam_16.gif" width="24" height="92" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="images/kading_eyeexam_17.gif" width="200" height="1" alt=""></td>
		<td colspan="5" rowspan="3">
			<a href="#"
				onmouseover="changeImages('kading_eyeexam_Contact_Lens', 'images/kading_eyeexam_Contact-L-21.gif'); return true;"
				onmouseout="changeImages('kading_eyeexam_Contact_Lens', 'images/kading_eyeexam_Contact-Lens.gif'); return true;"
				onmousedown="changeImages('kading_eyeexam_Contact_Lens', 'images/kading_eyeexam_Contact-L-21.gif'); return true;"
				onmouseup="changeImages('kading_eyeexam_Contact_Lens', 'images/kading_eyeexam_Contact-L-21.gif'); return true;">
				<img name="kading_eyeexam_Contact_Lens" src="images/kading_eyeexam_Contact-Lens.gif" width="134" height="38" border="0" alt=""></a></td>
		<td rowspan="9">
			<img src="images/kading_eyeexam_19.gif" width="5" height="91" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="5">
			<img src="images/kading_eyeexam_20.gif" width="52" height="64" alt=""></td>
		<td colspan="6" rowspan="3">
			<a href="#"
				onmouseover="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;"
				onmouseout="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics.gif'); return true;"
				onmousedown="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;"
				onmouseup="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;">
				<img name="kading_eyeexam_Pediatrics" src="images/kading_eyeexam_Pediatrics.gif" width="148" height="38" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="34" alt=""></td>
	</tr>
	<tr>
		<td colspan="6" rowspan="3">
			<img src="images/kading_eyeexam_22.gif" width="133" height="29" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<a href="#"
				onmouseover="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;"
				onmouseout="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics.gif'); return true;"
				onmousedown="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;"
				onmouseup="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;">
				<img src="images/kading_eyeexam_Pediatric-27.gif" width="101" height="1" border="0" alt=""></a></td>
		<td colspan="2" rowspan="3">
			<img src="images/kading_eyeexam_24.gif" width="33" height="27" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/kading_eyeexam_25.gif" width="249" height="25" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/kading_eyeexam_26.gif" width="71" height="1" alt=""></td>
		<td rowspan="2">
			<a href="#"
				onmouseover="changeImages('kading_eyeexam_Education', 'images/kading_eyeexam_Education-ov.gif'); return true;"
				onmouseout="changeImages('kading_eyeexam_Education', 'images/kading_eyeexam_Education.gif'); return true;"
				onmousedown="changeImages('kading_eyeexam_Education', 'images/kading_eyeexam_Education-ov.gif'); return true;"
				onmouseup="changeImages('kading_eyeexam_Education', 'images/kading_eyeexam_Education-ov.gif'); return true;">
				<img name="kading_eyeexam_Education" src="images/kading_eyeexam_Education.gif" width="53" height="11" border="0" alt=""></a></td>
		<td colspan="5">
			<img src="images/kading_eyeexam_28.gif" width="125" height="1" alt=""></td>
		<td rowspan="4">
			<img src="images/kading_eyeexam_29.gif" width="12" height="27" alt=""></td>
		<td rowspan="2">
			<a href="#"
				onmouseover="changeImages('kading_eyeexam_About_Us', 'images/kading_eyeexam_About-Us-ove.gif'); return true;"
				onmouseout="changeImages('kading_eyeexam_About_Us', 'images/kading_eyeexam_About-Us.gif'); return true;"
				onmousedown="changeImages('kading_eyeexam_About_Us', 'images/kading_eyeexam_About-Us-ove.gif'); return true;"
				onmouseup="changeImages('kading_eyeexam_About_Us', 'images/kading_eyeexam_About-Us-ove.gif'); return true;">
				<img name="kading_eyeexam_About_Us" src="images/kading_eyeexam_About-Us.gif" width="50" height="11" border="0" alt=""></a></td>
		<td colspan="4">
			<img src="images/kading_eyeexam_31.gif" width="71" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/kading_eyeexam_32.gif" width="49" height="26" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="images/kading_eyeexam_Eye-Wear.gif" width="52" height="12" alt=""></td>
		<td rowspan="3">
			<img src="images/kading_eyeexam_34.gif" width="22" height="26" alt=""></td>
		<td rowspan="3">
			<img src="images/kading_eyeexam_35.gif" width="23" height="26" alt=""></td>
		<td colspan="2" rowspan="2">
			<a href="#"
				onmouseover="changeImages('kading_eyeexam_Eye_Exam', 'images/kading_eyeexam_Eye-Exam-ove.gif'); return true;"
				onmouseout="changeImages('kading_eyeexam_Eye_Exam', 'images/kading_eyeexam_Eye-Exam.gif'); return true;"
				onmousedown="changeImages('kading_eyeexam_Eye_Exam', 'images/kading_eyeexam_Eye-Exam-ove.gif'); return true;"
				onmouseup="changeImages('kading_eyeexam_Eye_Exam', 'images/kading_eyeexam_Eye-Exam-ove.gif'); return true;">
				<img name="kading_eyeexam_Eye_Exam" src="images/kading_eyeexam_Eye-Exam.gif" width="53" height="12" border="0" alt=""></a></td>
		<td rowspan="3">
			<img src="images/kading_eyeexam_37.gif" width="28" height="26" alt=""></td>
		<td colspan="2">
			<a href="#"
				onmouseover="changeImages('kading_eyeexam_Forms', 'images/kading_eyeexam_Forms-over.gif'); return true;"
				onmouseout="changeImages('kading_eyeexam_Forms', 'images/kading_eyeexam_Forms.gif'); return true;"
				onmousedown="changeImages('kading_eyeexam_Forms', 'images/kading_eyeexam_Forms-over.gif'); return true;"
				onmouseup="changeImages('kading_eyeexam_Forms', 'images/kading_eyeexam_Forms-over.gif'); return true;">
				<img name="kading_eyeexam_Forms" src="images/kading_eyeexam_Forms.gif" width="33" height="10" border="0" alt=""></a></td>
		<td rowspan="3">
			<img src="images/kading_eyeexam_39.gif" width="21" height="26" alt=""></td>
		<td rowspan="3">
			<img src="images/kading_eyeexam_40.gif" width="29" height="26" alt=""></td>
		<td colspan="3">
			<a href="#"
				onmouseover="changeImages('kading_eyeexam_Contact', 'images/kading_eyeexam_Contact-over.gif'); return true;"
				onmouseout="changeImages('kading_eyeexam_Contact', 'images/kading_eyeexam_Contact.gif'); return true;"
				onmousedown="changeImages('kading_eyeexam_Contact', 'images/kading_eyeexam_Contact-over.gif'); return true;"
				onmouseup="changeImages('kading_eyeexam_Contact', 'images/kading_eyeexam_Contact-over.gif'); return true;">
				<img name="kading_eyeexam_Contact" src="images/kading_eyeexam_Contact.gif" width="42" height="10" border="0" alt=""></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/kading_eyeexam_42.gif" width="53" height="16" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/kading_eyeexam_43.gif" width="33" height="16" alt=""></td>
		<td rowspan="2">
			<img src="images/kading_eyeexam_44.gif" width="50" height="16" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="images/kading_eyeexam_45.gif" width="42" height="16" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/kading_eyeexam_46.gif" width="52" height="14" alt=""></td>
		<td colspan="2">
			<img src="images/kading_eyeexam_47.gif" width="53" height="14" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/kading_eyeexam_48.gif" width="256" height="8" alt=""></td>
		<td>
			<img src="images/kading_eyeexam_49.gif" width="256" height="8" alt=""></td>
		<td colspan="22">
			<img src="images/kading_eyeexam_50.gif" width="496" height="8" alt=""></td>
		<td rowspan="3">
			<img src="images/kading_eyeexam_51.gif" width="16" height="399" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/kading_eyeexam_52.gif" width="39" height="391" alt=""></td>
			
		<td height="389" colspan="23" align="left" valign="top">
		<div style="background:url(images/kading_eyeexam_53.gif); width: 953px; height: 389px; overflow: auto; padding: 12px;">
<p class="style1 style2"> Eye Exam Overview </p>
		  <ul class="style1">
            <li class="style3"> Annual Eye Exams </li>
            
              <li class="style3"> It is important to have your eye health examined on a yearly basis. Your vision is one of your most important assets and our job is to help you protect it. Many eye diseases such as cataracts, glaucoma, diabetic retinopathy and macular degeneration are slow progressing diseases that may not manifest early symptoms. With these types of conditions, early diagnosis is critical to ensure lifelong visual clarity and quality of life. Additionally, we do a refraction to determine your eyesight and prescription on an annual basis. Included in our commitment to personalized service is helping you understand and choose the best eyewear options for your lifestyle - protection, prevention, and recreation. </li>
            </ul>
	      </ul>
		
		  <p class="style4"> Testing/Screening performed with each Eye Exam </p>
		  <ul class="style4">
            <li><strong> OPTOS Digital Imaging System</strong> allows us to image the inside of the eye without the use of dilating eye drops. We feel that this is critical to evaluate the retina and blood vessels inside the eye on a regular basis in order to track changes with eye health over time. Our patients enjoy having a comprehensive eye health examination without the need of dilation. </li>
            <li><strong> Visual Field Screening </strong> allows us to evaluate the visual pathway which begins in the eye and progresses through the brain to the visual cortex located just above the upper neck (occipital lobe). This instrument is used in the early diagnosis of eye disease and neurological abnormalities.</li>
            <li><strong> Digital Refraction</strong> is our method of checking a patient&rsquo;s prescription. No one likes the eye exam because of the difficulty they may experience in trying to decide which choice is better, one or two. With our state of the art Digital Refraction system, we are able to make this process easier than ever. </li>
            <li><strong> Intraocular Pressure Checks</strong> are performed at every eye exam. These tests are crucial for the diagnosis of eye disease such as Glaucoma. We are committed to staying on the cutting edge of this technology and have multiple ways of measuring the pressure in the eye. We have recently added the most state of the art system for checking eye pressure that does not involve an air puff or the need for eye drops. </li>
            <li><strong> Auto-refractor</strong> is performed in order to give a baseline measurement of the shape and power of the eye. It is a fast method used to ensure that the glasses and contact lens prescriptions are accurate. </li>
            <li><strong> Slit Lamp Evaluation</strong> is performed in the examination room with the doctor. The slit lamp is a microscope that allows the doctor to evaluate the surface of the tear film, the glands that produce the tear film, cornea, conjunctiva, iris (colored part of the eye), the lens (where cataracts are formed), and the retina. The doctor uses this instrument to evaluate the eye for disease, dry eye, and contact lens eligibility. If a patient is a candidate for contact lenses, the slit lamp is also used to evaluate the proper fit, orientation, and health of the eye with the contact lenses. </li>
	      </ul>
		  <p class="style4"> Additional Tests that are performed throughout the eye exam </p>
		  <ul>
            <ul>
              <li class="style4"> Eye Teaming &ndash; the ability to team the eyes together efficiently </li>
              <li class="style4"> Eye Focusing &ndash; the ability to maintain a clear focus at distance and near </li>
              <li class="style4"> Color Vision screening </li>
              <li class="style4"> Visual Acuity for distance, computer, and near tasks </li>
              <li class="style4"> Eye Muscle movements </li>
            </ul>
	    </ul></div></td>
		
		
		<td rowspan="2">
			<img src="images/kading_eyeexam_54.gif" width="16" height="391" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="389" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/kading_eyeexam_55.gif" width="217" height="2" alt=""></td>
		<td>
			<img src="images/kading_eyeexam_56.gif" width="256" height="2" alt=""></td>
		<td colspan="21">
			<img src="images/kading_eyeexam_57.gif" width="480" height="2" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/kading_eyeexam_58.gif" width="256" height="33" alt=""></td>
		<td>
			<img src="images/kading_eyeexam_59.gif" width="256" height="33" alt=""></td>
		<td colspan="22">
			<img src="images/kading_eyeexam_60.gif" width="496" height="33" alt=""></td>
		<td>
			<img src="images/kading_eyeexam_61.gif" width="16" height="33" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="33" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="39" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="217" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="256" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="49" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="48" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="22" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="53" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="23" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="52" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="28" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="5" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="50" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="29" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="39" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="16" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="16" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<map name="kading_eyeexam_logo_Map">
<area shape="rect" alt="" coords="3,0,417,168" href="kading_index.html" target="_self">
</map>
<map name="kading_eyeexam_07_Map">
<area shape="rect" alt="" coords="0,0,25,170" href="kading_index.html" target="_self">
</map>
<map name="kading_eyeexam_08_Map">
<area shape="rect" alt="" coords="3,0,416,2" href="kading_index.html" target="_self">
</map>
<map name="kading_eyeexam_09_Map">
<area shape="rect" alt="" coords="0,0,1,2" href="kading_index.html" target="_self">
</map>
<!-- End ImageReady Slices -->
</body>
</html>

thank you in advance!

I have a website im developing and I wanted to know how i would go about having a graphic element that floats on top of everything but if it goes outside the bounds of the window it wont introduce scroll bars.

Reason: I have an image that i want to make quite long but its not important for the viewer to see the end of the image. I guess its a bit like a background image but on the top

Thanks

Hi,

I've created a fixed width Div/CSS design for my forum, and while Firefox can handle excessively wide user-posted images, IE handles it badly and stretches the div that the image is in, breaking the layout.

An example is he http://forums.hiveworldterra.co.uk/viewtopic.php?t=496 (currently with my CSS work around - not pretty)

What I would like is a non-Javascript, CSS-based method (or very minimal that gives acceptable results when JS is off) of making the containing Div of the image scroll horizontally when the image is over 590px wide, but not show a vertical scroll bar and not show any scroll bars if the image is under 590px.

Is that even possible? thanks for any suggestions

IBBoard

Hey guys,

I built a site that uses a linked list as an multi-level menu. This menu works fine in Moz/Netscape, but I have to use IE behaviours (thus JavaScript) for it to work in IE. Because this is a list I've contained it in a div with overflow: auto. And set a new external css file using JavaScript to convert that list into the multi-level menu.

The problem is the menu's horizontal submenus appears within the parent div, rather than overflowing above the parent. I was able to fix this problem using a z-index and overflow: visible in IE. However, in Gecko based browsers the menu's submenu's links aren't accessible over the site content also contained in an overflow: auto div. But, as said works fine in IE.

Here is the site. To test this bizare functionality manipulate the #contentArea and #navArea properties in this css file.

You will notice that there is a DHTML custom scrollbar if JS is enabled, this is because the only way I could get the submenu's to be accessible above the content in Gecko is to make the div overflow: hidden.

Myself, and the developer of the orginal menu, have been working on this for weeks (well, more me) and haven't determined how to make the menu accessible while mantaining overflow: auto on the #contentArea div. Just today we had some limited success changing the #navArea position to fixed rather than absolute in Gecko. After some repositioning the menu was fully accessible at medium/100% text size. But, once the site was resized using font sizes (it uses a relative font size 'em' for an elastic layout) the fixed div wouldn't stay in position.

I'm hoping that someone here is able to tell me how to set overflow: visible to overflow above an overflow:auto div in NS/Moz (I'm using FF0.8) and still work in IE?

I'd greatly appreciate it because I want to replace the custom scrollbar with default scrollbars for accessibility. Thanx.

Hello,
I have been searching through the threads in search of a solution but decide to ask outright. I am trying to develop a way for a css layer to stretch the height of a window 100% and scroll its content inside of itself. I have only been able to trigger the scroll bars inside of the content layer on using a defined pixel height for the container layer that it sits in. My main goal is to get the content layer to stretch the full height of the browser window and scroll its content so that I have no horizontal scroll bars on the browser itself but rather on the content layer. Trying to guess the height of a browser window to specify a happy medium, for different screen resolutions seems silly. Any ideas would be Gratefully appreciated!

Ex: http://edward.sensite.net/Hyundai/

CSS:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000000;
}
.numbertext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
vertical-align: middle;
}
td {
vertical-align: middle;
text-align: center;
}
.container {
position: relative;
margin: 0 auto;
width: 780px;
height: 200px;
text-align: left;
}
.headerlayer {
position: absolute;
visibility: visible;
z-index: 1;
height: 206px;
width: 780px;
top: 0px;
}
.contentlayer {
position: absolute;
visibility: visible;
z-index: 2;
top: 207px;
width: 780px;
height: 100%;
background-color: #FFFFFF;
overflow: auto;
}