|
CSS - Div Scroll Bar Not Working With Overflow: Auto
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. Similar TutorialsAloha, 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'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. 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 - 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? I want a fixed height table, so I'm using overflow: scroll for the tbody. This works well in Firefox but does not work in Opera or IE. Does a solution exist to my problem? 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 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. 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;
}
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 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 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! 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 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 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 |
|||||||