|
CSS - Problem With Height:auto When Used With Overflow:auto
I am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear.
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
function initPage()
{
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
}
input {
width: 200px;
background: #f4f4f4;
border: 1px solid #999;
font-size: .9em;
/*
*/
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cAutoCompleteCtl {
position: relative;
/*
border: 3px solid red;
*/
}
.cAutoCompleteCtl input {
margin: 0 5px 0 0;
display: block;
float: left;
}
.cAutoCompleteCtl a.dwnarrow {
width: 15px;
height: 15px;
border: 1px solid #999;
background: url(images/downarrow.gif)
no-repeat;
background-position: center center;
background-color: #efefef;
float: left;
display: block;
font-size: 1px;
text-decoration: none;
}
.cAutoCompleteCtl .acCtlDropdwn {
position: absolute;
top: 20px;
left: 0px;
z-index: 100;
visibility: visible;
min-width: 300px;
max-width: 600px;
height: auto;
max-height: 200px;
background: #fff;
padding: 5px;
border: 1px solid #999;
overflow: auto;
/*
width: 400px;
*/
}
* html .cAutoCompleteCtl .acCtlDropdwn {
width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}
.cAutoCompleteCtl .acCtlDropdwn a {
white-space: nowrap;
display: block;
text-decoration: none;
padding: 2px 5px;
color: #000;
border: 1px solid #fff;
}
.cAutoCompleteCtl .acCtlDropdwn a.lastOption {
}
.cAutoCompleteCtl .acCtlDropdwn a:hover {
background: #f5f5f5;
border: 1px solid #b3b3b3;
}
-->
</style>
</head>
<body onload="initPage();">
<div class="cAutoCompleteCtl clearfix">
<input type="text" /><a href="" class="dwnarrow"> </a>
<div class="acCtlDropdwn">
<!--<a href="#">options here options here options here options here options here options here options here options here options here options here options here</a>-->
<a href="#">options here</a>
<a href="">Boulder Logic</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
</div>
</div>
</body>
</html>
I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected. The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour. Can anyone see where I'm going wrong? Similar TutorialsI wish to set a container to have auto height... meaning the height of the container is defined by it's contents. I have had this working in many other designs... but this one baffles me. (Problem is only in good browsers mozila/firebird) Here it is with the height of #main @ auto (attached) Here it is with the height of #main @ 600px (attached) Here is the HTML code: Code: <!-- Code --> <!-- Document --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ben Gunn</title> <link rel="stylesheet" href="index.css" /> </head> <body> <div id="main"> <img src="images/default_header.gif" id="header" height="120" width="749"/> <div id="content"> <div class="left"> <ul id="nav"> <li><a href="#">News</a></li> <li><a href="#">Music</a></li> <li><a href="#">Media</a></li> <li><a href="#">Bio</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="right"> </div> </div> </div> <br /><br /> </body> </html> And here is the code for the CSS: Code:
body {
margin: 0;
padding: 0;
background-color: #666666;
}
#header{
margin-left: 2px;
}
#main {
position: relative;
width: 756px;
height: 600px;
left: 50%;
margin-left: -355px;
margin-top: 20px;
background-image:url("images/background-bezel.gif");
background-repeat: repeat-y;
padding: 0px;
padding-bottom: 20px;
/*border: black 1px solid;*/
}
#content{
padding: 10px;
}
.left{
float: left;
width: 30%;
}
.right{
float: right;
width: 60%;
}
#nav{
list-style: none;
margin: 0;
padding: 0;
border: none;
padding-left: 10px;
font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color: white;
font-weight: lighter;
}
#nav li {
background-color: #8B0000;
border-bottom: 1px solid #CCCCCC;
margin: 0;
padding: 1px 0 2px 0;
}
#nav li a {
display: block;
text-decoration: none;
width: 100%;
color: white;
padding-left: 5px;
}
html>body #nav li a {
width: auto;
}
#nav li a:hover {
background-color: #191970;
color: #fff;
}
Please notify me of the moronic mistakes I am making... thanks. 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 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;
}
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’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 – the ability to team the eyes together efficiently </li>
<li class="style4"> Eye Focusing – 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! 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> </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 - 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>
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>
Only then, IE7 will correctly display it. Just something to keep in mind when working with percentage widths. 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 Hello All: I'm working on a design (See insivia.com/fo) and I was wondering if someone could give me some insight on using the css style "overflow:auto;" instead of using an iframe. Specifically, if you mouseover "our company" and go to "overview" you'll see that the "overflow:auto;" works great on all of the browsers (both PC and MAC systems) except IE on MAC. I was wondering if there is something that I have done incorrectly or if there is some kind of work around. Using the traditional iframe doubles my work and I'd rather not spend the time if at all possible. I've studied css and many different posts and compatibility charts and they all say that there is NO compatibility issues with using "overflow:auto;" in MAC IE. my css code below: Code:
html {
width:100%;
height:100%;
}
body {
background:#877966;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
img {
margin-bottom: 0px;
}
#site {
text-align:left;
width:756px;
padding:0px;
border:0px;
margin:0px;
border-top:18px solid #000000;
border-bottom:18px solid #000000;
}
#site .top {
background:#000000;
font: bold 10px Arial, Verdana;
color:#ffffff;
padding:2px 0px 20px 0px;
width:756px;
border:0px;
margin:0px;
}
.top_nav{
width:756px;
}
#site .navigation {
width:756px;
float:left;
}
#site .heading_title {
float:left;
white-space:nowrap;
border:0px;
margin:0px;
padding:0px;
width:592px;
}
#site .heading_ext {
float:right;
white-space:nowrap;
border:0px;
margin:0px;
padding:0px;
width:164px;
}
#site .main {
font:normal 10px verdana;
float:left;
background:#ffffff;
padding:0px;
border:0px;
margin:0px;
width:469px;
height:218px;
overflow:auto;
}
#site .image {
white-space:nowrap;
padding:0px;
text-align:right;
float:right;
border:0px;
margin:0px;
width:287px;
}
#site .bottom {
padding:0px;
border:0px;
margin:0px;
width:756px;
background:#000000;
}
#site .bottom_logo2 {
clear:both;
background:#000000;
width:756px;
}
I appreciate everyone's help! Best, BAF 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 everyone, relatively new web developer seeking help! I'm working on a template that will eventually be used with Joomla, but right now I'm just concerned about getting the layout to work with just the HTML and CSS. I want to create a fixed frame around the webpage that expands and contracts to fit different resolutions and browser window resizing, and then have the content scroll inside of that frame. The frame is also comprised of transparent PNG's since the client wanted lots of art on the frame around the content. It mostly works in Firefox, and is a giant mess in IE at the moment. I'd like to get it working in the standards compliant browsers first and then figure out some hacks that I can use for IE. Hopefully I can do that.... Here is my HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Site Test</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <link rel="stylesheet" type="text/css" href="site_test.css" /> </HEAD> <BODY> <div id="wrapper"> <div id="frame_left"> </div><!--End frame_left--> <div id="logo"> </div><!--End logo--> <div id="content"> <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> etc, etc, </div><!--End content--> <div id="frame_right"> </div><!--End frame_right--> </div><!-- End wrapper --> </BODY> </HTML> Here is the CSS: Code: #wrapper {
margin: 0px;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
background-image: url(frame_middle.png);
background-repeat: repeat-x;
z-index: 10;
}
#frame_left {
margin: 0px;
background-color: transparent;
background-image: url(frame_left2.png);
background-repeat: no-repeat;
width: 224px;
height: 625px;
position: fixed;
left: 0px;
top:0px;
z-index:50;
}
#frame_right {
margin: 0px;
background-color: transparent;
background-image: url(frame_right2.png);
background-repeat: no-repeat;
width: 198px;
height: 625px;
position: fixed;
right: 0px;
top: 0px;
z-index: 25;
}
#logo {
margin: 0px;
background-color: transparent;
background-image: url(pink_logo2.png);
background-repeat: no-repeat;
width: 316px;
height: 125px;
position: fixed;
top: 0px;
left: 34.5%;
z-index: 75;
}
#content {
background-color:transparent;
position: fixed;
top: 145px;
bottom: 60px;
left: 160px;
right: 150px;
width: auto;
height: auto;
overflow: auto;
}
In FireFox everything works and the scroll bar pops up, but won't actually scroll anywhere, even though there is content off screen? Any thoughts? I am slightly concerned that this is just totally undoable, but then I look at some of the stuff on CSS Zen Garden and think that there must be a way to pull it off! Any help is very, very much appreciated. 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; } Hi, I think this might requiere an IE hack buti have nested divs inside a div on http://gohedonist.com/mempage.php?id=19 but for some reason instead of the divs bein constainted inide the larger div they go all the way down the screen. This is works fine in FF. The problem is located at http://gohedonist.com/mempage.php?id=19 (select Submissions from the dropdown box on the right). Thanks for any help in advance. Aloha, Is there any way to make overflow: auto & overflow: scroll use the wheel mouse on mozilla / mozilla firefox ? Here's my design for any of you who might be confused about what i'm asking: http://ub3r.net/oxiserve/ . Thanks. love, mikey I have a form that looks similar to this: Code:
<div id="form">
<div class="title">Fill out this form:</div>
<div class="main">
<div class="item bg1">
Enter your name:
<div class="field">
<input type="text" />
</div>
</div>
<div class="item bg2">
Enter your email address:
<div class="field">
<input type="text" />
</div>
</div>
</div>
</div>
now, when i insert an image in the item div, there is an overflow problem which i fix with overflow: auto in the item class. now, when a user is tabbing through the form, it will select the div with the overflow: auto in it. any suggestions? I have a div that I have set the overflow property to auto - enabling scroll bars when the content is longer then the fixed size of the div. This doesn't seem to work in Safari, or and older version of Firefox. I could use overflow: scroll, but then there is a scroll bar when the content doesn't overflow. Is there any clever fix for this? Cheers, whiteatom I have yet another CSS issue: The site I'm working on has a dynamically generated table within a div named "data", if the number of rows is high (say over 1500 rows) the table is truncated. when I check the generated code all the data is present. Upon troubleshooting, I find that the issue is related to the overflow property I have set for this div. If the overflow is set to either visible or hidden all the rows are displayed. However if I use auto (preferred) or scroll the data table is truncated, while the page length appears as if the entire table is displayed. Any ideas???? Code:
#data {
width: 100%;
overflow: auto;
}
Code:
<div id="data">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data">
<tr>
<th scope="col" width="5%" nowrap="nowrap">fund</th>
<th scope="col" width="6%" nowrap="nowrap">bsli</th>
<th scope="col" width="4%" nowrap="nowrap">reg</th>
<th scope="col">title</th>
<th scope="col" width="9%" nowrap="nowrap">projcode</th>
<th scope="col" width="7%" nowrap="nowrap">cip</th>
<th scope="col" width="4%" nowrap="nowrap">afc</th>
<th scope="col" width="10%" nowrap="nowrap">avail</th>
<th scope="col" width="10%" nowrap="nowrap">oblig</th>
<th width="10%" nowrap="nowrap" scope="col">unoblig</th>
<th scope="col" width="10%" nowrap="nowrap">outlays</th>
</tr>
<cfoutput query="qgetbsli" >
<tr>
<td scope="row" align="center" nowrap="nowrap">#fund#</td>
<td align="center" nowrap="nowrap">#bsli#</td>
<td align="center" nowrap="nowrap">#region#</td>
<td>#title#</td>
<td align="center" nowrap="nowrap">#projcode#</td>
<td align="center" nowrap="nowrap">#cip#</td>
<td align="center" nowrap="nowrap">na</td>
<td align="right" nowrap="nowrap">#numberformat(availability,'$,')#</td>
<td align="right" nowrap="nowrap">#numberformat(obligations,'$,')#</td>
<td align="right" nowrap="nowrap">#numberformat(unobligated,'$,')#</td>
<td align="right" nowrap="nowrap">#numberformat(outlays,'$,')#</td>
</tr>
</cfoutput>
</table>
</div>
I've got the div below Code:
<style>
div
{
height: 100px;
position: absolute;
overflow-y: auto;
}
</style>
<div>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
</div>
This div is the width required to hold the text. Unfortunately once the scroll bar is added to the div it obscures the text. Is there a way to make the div expand horizontally that bit extra required by the scrollbar? I know i can put padding-right on the div. I'm looking for a way that will only expand if further if a scrollbar is needed. I'm pretty new to this so I'm not 100% sure what I'm doing yet. However, I've created a test page to show you guys the rendering issue that I'm experiencing. The page renders how I want it to in Firefox, Flock and Chrome. It renders incorrectly in IE8 (which is a required browser that this needs to be supported in). Here is a link to the test page cm-rosestate.mine.nu/test.aspx and the css is /MyStyle.css My suspicion is that it's a problem with the css and/or the doctype. However, I just don't know enough about this to know how to troubleshoot it. Any help or insight will be appreciated. |
|||||||