|
CSS - Specifiying Which Sides On An Image Are Clipped With Overflow: Hidden
Hello all
I have an elastic design in which an image clips to the appropriate size via overflow: hidden. Is there any way to control which sides are cropped? What I mean is, can one emulate the background-position property for IMGes with overflow: hidden? Thanks Tom Similar TutorialsBasic, I know. I've probably just been staring at this thing too long. The building image to the right of the navbar displays correctly in Firefox, and has its top clipped off in IE 7 (not caring at this point about 6). Hmm... I guess I can't post a link. Crumbs. Well, not sure if its even possible to get help with this thing but maybe describing it with code will make the solution pop to my head. I'm doing a quick rebuild of palladio-tours .com to sort of bring the code into this millennia. In my first run through using Firefox to check (mistake) I changed the navbar to a horizontal text CSS based <ul> underneath the Palladio Tours <img> with a <br>. Now, in Firefox this works just fine, but in IE 7 (and 6, but again, not caring at this point), the yellow-ish building to the right of the nav list is clipped off exactly above the upper boundary of the list before it. Let's see if I can post the relevant code. Html: html4strict Code: Original - html4strict Code <div id="header"> <div id="navwrap"> <img id="logo" src="images/logo.gif" alt="Palladio Tours Logo"><br> <ul id="nav"> <li id="t-home"><a href="index.html">home</a></li> <li id="t-company"><a href="company.html">company</a></li> <li id="t-daily"><a href="daily.html">daily</a></li> <li id="t-weekly"><a href="weekly.html">weekly</a></li> <li id="t-brochure"><a href="brochure.html">brochure</a></li> <li id="t-faq"><a href="faq.html">faq</a></li> <li id="t-contact"><a href="mailto:palladio@aol.com"><img src="images/contact.gif" alt="Contact Us"></a></li> </ul> </div> </div> <div id="header"> And the relevant CSS; css Code: Original - css Code body { margin: 0px 0px 0px 0px; padding: 0px; border: 0px; background: #ffffff url(images/header-bg.gif) no-repeat top left; font-family: "times", serif; color: #000000; font-size: small; text-align: left; } * html body { font-size: x-small; /* for IE */ f\ont-size: small; /* for IE 6+ */ } #header { text-align: left; } #nav { float: left; list-style: none; margin: 0px 0px 0px 0px; } #nav li { float: left; font-family: "times", serif; font-size: 120%; font-weight: normal; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #nav a { float: left; display: block; text-decoration: none; color: #000000; border: 1px solid #000000; border-left: none; margin: 0px; padding: 0px 4px 0px 4px; } #t-home a { padding: 0px 4px 0px 12px; } #t-faq a { border-right: none; padding: 0px 12px 0px 4px; } #t-contact a { border: none; padding: 0px 0px 0px 0px; } #t-contact a img { border: none; margin: -37px 0px 0px 0px; padding: 0px 0px 0px 0px; background: none; } #nav a:hover { background: #FFCE63; } #nav t-contact a:hover { background: #ffffff; } #navwrap { margin: 0px 0px 0px 0px; padding: 65px 0px 0px 90px; } #logo { margin: 0px 0px 6px 50px; }
body {
I wish I could post a link to the live example. It's a file called "shell.html" in the "css-test" folder at the above site. My brain obviously has gas, any help with this fart will be appreciated! This is working fine in FF, but IE ignores it. I have large bottom margin and large negative bottom padding contained in a wrapper with overflow set to hidden, to keep my columns the same length for different content, which seems to be ignored in IE. Other than that I'm pretty happy with the site, but I don't really know what I'm doing, so I don't really know what I'm doing wrong.. Can anyone help? Structure; Code: <div id="divBranding">
</div>
<div id="divWrapper">
<div id="divSidebar">
</div>
<div id="divContainer">
</div>
</div>
<div id="divFooterWrapper">
<div id="divInfo">
</div>
</div>
CSS for body; Code: body {
width: 800px;
margin-right: auto;
margin-left: auto;
}
CSS for wrapper; Code: #divWrapper {
overflow: hidden;
*html overflow:scroll;
display: block;
}
CSS for Sidebar; Code: #divWrapper #divSidebar {
float: left;
width: 198px;
margin-bottom: -1999px;
padding-bottom: 1999px;
position: relative;
}
And CSS for Content; Code: #divWrapper #divContainer {
float: right;
width: 598px;
margin-bottom: -1999px;
padding-bottom: 1999px;
position: relative;
}
And CSS for Footer Wrapper; Code: #divFooterWrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
position: relative;
clear: both;
}
I am having trouble with the overflow: hidden; in IE6. I have a simple example. I have rewritten this to make it as simple as possible. [code] <html> <head> </head> <body> <div style="position:absolute; top: 100px; width:200px; z-index:1; bottom: 113px; overflow:hidden"> <img src="images/700/900-pixel-height-image.jpg"> </div> </body> </html> This simple page works fine in Firefox but in IE6 the overflow:hidden does not work. Why? I thought IE6 completely supported overflow. Is there a way to have overflow content of a DIV hidden at the top of the DIV instead of the bottom? For instance, if I have a DIV that is 200px in height and the content within the DIV ("My top content ... my bottom content.") exceeds 200px: Code: <div style="height: 200px; overflow: hidden;"> My top content<br><br><br><br><br><br><br><br><br> My bottom content. </div> I want the "My bottom content." to always show at the bottom of the DIV, but the "My top content..." to be hidden. I hope this makes since. Thanks! -Chris For some reason overflow hidden is not working in chrome, ff and ie both seem to work as expected. I am totally lost here? Code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style type="text/css">
div.menuMaster {
position:absolute;
height: 450px;
width:200px;
margin-top:52px;
border-right-style:solid;
border-right-color:#FFFFCC;
background-color:#323B45;
-webkit-border-top-right-radius: 100px 400px;
-moz-border-radius-topright: 100px 400px;
border-top-right-radius: 100px 400px;
border-width:2px;
overflow:hidden;
z-index:50;
}
.sublink1 {
display:block;
float: left;
height:30px;
width:200px;
padding-top:10px;
font-family:georgia;
vertical-align:left;
text-align:left;
}
.sublink1 a {
display:block;
height:30px;
padding-top:10px;
padding-left:20px;
align:left;
border-bottom-style:solid;
border-bottom-color:#526070;
border-width:1px;
border-top-style:solid;
border-top-color:#2B3239;
border-width:1px;
text-decoration: none;
}
.sublink1 a:hover {
display:block;
height:30px;
align:left;
padding-left:20px;
color:#fff;
border-bottom-style:solid;
border-bottom-color:#526070;
border-width:1px;
border-top-style:solid;
border-top-color:#2B3239;
border-width:1px;
text-decoration: none;
background-color: #293D51;
}
.sublink1 a:link {
display:block;
height:30px;
vertical-align:left;
padding-left:20px;
color:#fff;
text-decoration: none;
}
.sublink1 a:visited {
display:block;
height:30px;
vertical-align:left;
padding-left:20px;
color:#fff;
text-decoration: none;
}
</style>
</head>
<div class="menuMaster">
<div class="sublink1"><a href="../admin/index.php">link1</a><br></div>
<div class="sublink1"><a href="../index.php">link2</a><br></div>
<div class="sublink1"><a href="../index.php?location=branches">link3</a><br></div>
<div class="sublink1"><a href="../index.php?location=involved">link4</a><br></div>
<div class="sublink1"><a href="../index.php?type=sets">link5</a><br></div>
<div class="sublink1"><a href="../index.php?location=external_links">link6</a><br></div>
<div class="sublink1"><a href="../index.php">link7</a><br></div>
<div class="sublink1"><a href="../index.php?location=branches">link8</a><br></div>
</div>
Does anyone know why overflow:hidden does not work when height is given in percentage? The following example does not work and all values from 1 to 20 are shown on screen ... Code: <div style="overflow:hidden;height:10%;border:1px solid green;"> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br /> 10<br /> 11<br /> 12<br /> 13<br /> 14<br /> 15<br /> 16<br /> 17<br /> 18<br /> 19<br /> 20<br /> </div> Changing height:10% to height:50px makes the overflow:hidden works fine. Does anyone know how I can make the overflow:hidden css rule with height rule given in percentage? Overflow:hidden, is supposed to expand a box (unless a height is set) to it's contents (just another quirky, stupid CSS rule). I have this working on all browsers except IE6 in one area. I've placed a green box around the problem area, which is the footer of this page: http://www.poweredpages.com/newtarget/ctia/ You'll see it looks fine in most places but is a skinny line in IE. I need it to render correctly because it has some padding attributes. Here it is in the css file: .footer{ padding:10px 35px 10px 35px; overflow:hidden; } Any thoughts why it's not working in IE6? While trying to get text-overflow: ellipsis going with list items, I noticed that bullets were disappearing in Webkit (Safari and Chrome) and Opera browsers. I narrowed the problem down to overflow: hidden. I understand why putting overflow: hidden on a list item can hide the bullets (firefox also hides them in that case), but I'm putting it on a div inside the list item, and the bullets are still going away in those browsers (firefox and ie still show them, but not webkit and opera). This illustrates what I'm trying to do: http://sethsticco.net/files/possiblebug.html ..and this narrows the problem down to overflow: hidden: http://sethsticco.net/files/simpler.html The first list is normal, with no styling. The second one has overflow: hidden applied to the <li> tags. The bullets disappear for firefox, webkit, and opera, but not ie. The third list is the important one. It only applies overflow: hidden to the <div> tags inside the <li> tags, but bullets still disappear for Webkit and Opera. The fourth list is only there to show what happens if I try using <span> tags. They act like divs when they get display: block, and they don't get the ellipsis when they're inline. I feel like I've found a bug, but regardless, I really just want to get text-overflow: ellipsis going on list items. Does anyone have any ideas? I had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics. At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature") When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off. I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site. www . deepwaterchurch . com Thanks so much. 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 Hello, I have a problem appearing only in IE8, but I don't seem to find the exact bug and solution. In this page http://www.cracowflats.com/index.php/search/show/id/181 there is a Details area (bottom left) where titles have a green background. For some reason this green background appears in other parts of the page. In other browsers, the whole page has a white background, as it should. 1) With this code in theme.css a {color:#62860b; } h3, h4 { color: #70af1d;} .color_title { background: #76a637;color:#fff;} .logo h1 a { color: #62860b !important;} it appers everywhere and the whole background of the page is green (should be white). 2) when I add an "overflow: hidden;" here .color_title { background: #76a637;color:#fff; overflow: hidden;} it gets better, as the main area is white. But I still have a lot of green on the footer (and tabs). If I could find out to which bug it refers, it would be easier to find a solution. Any hint would be appreciated! Thanks! Luca Hello, after a few hours I managed to identify the CSS element responsible for this problem. However so far I have no solution on how I could solve this problem. Basically the problem is very minor but still frustrating. I am using the following command to set a DIV element with transparent background; Code: filter: progid:DXImageTransform.Microsoft.gradient (gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000'); The DIV element becomes transparent. However the parent element - which is set with the CSS attribute overflow:hidden - is always displaying an extra pixel on the right of the container. This might not be clear at first, which is why I attached the following screen shot. (the light red line is the extra 1px I am referring to) If I remove the transparency CSS attribute for IE8 then this extra 1px will disappear. However that means loosing the wanted transparency. I have also developed the following example of the problem; 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>
<style>
body {
margin: 0px;
padding: 0px;
/*
* IE hack to center .content div (part1).
*/
*text-align: center;
}
div.content {
width:600px;
margin: 0px auto;
/*
* IE hack to center .content div (part2).
*/
*text-align: left;
}
div#a {
border-bottom: 1px solid grey;
border-top: 1px solid grey;
padding-bottom: 5px;
padding-top: 5px;
}
div#a div#b {
overflow: hidden;
height: 280px;
position:relative;
}
div#a div#b div#c {
position: absolute;
}
div#a div#b div#c img {
border: none;
display: block;
}
div#a div#b div#e {
background-color: red;
color: #fff;
position:absolute;
padding: 20px 10px;
width:260px;
height: 240px;
margin-left: 500px;
/* IE8 hack for background colour with alpha value */
filter: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');
}
</style>
</head>
<body>
<h1>Test 5</h1>
<div id="a" class="content">
<div id="b">
<div id="c">
<img src="pic.png" />
</div>
<div id="e">
hello
</div>
</div>
</div>
</body>
</html>
Does anyone know what's causing the problem and how I can solve it. It is true that 1px might not sound much. But it still frustrates me knowing that it is there and the fact that on Firefox all works great. Hello. I'm having an impossible time trying to get my page to behave properly. First, here's a link to the testing site: http://www.tromadance.com/hoffman_test/index.php The black left/right borders are supposed to go down to the bottom of the page (as long or short as that may be, depending on the content). Whichever is longer between the left side content or the right side content should be in charge of "stretching" the page. There is also a footer that should remain at the bottom, which is not even being shown... I added borders to some of the divs to try to see what was going on. It looks like a mess, but I'm not sure what i am doing wrong!... Here is the CSS, followed by the HTML... CSS: Code: /* CSS Document */
html, body {
background-color: #8A1410;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
color: #000;
height: 100%;
}
p {
font-size: .8em;
}
#container {
background: #EC1D25;
width: 800px;
margin: auto;
padding: 0px;
text-align: left;
border-left: 2px solid #000;
border-right: 2px solid #000;
overflow: hidden;
height: 100%;
}
#header {
background-color: #EC1D25;
width: 800px;
height: 177px;
background: url(../images/header_top.jpg) top center no-repeat;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
}
#nav {
background-color: #000;
color: #FFF;
text-align: center;
width: 100%;
height: 50px;
}
#nav p {
margin-top: 30px;
}
#sidebar {
background-color: #EC1D25;
width: 270px;
min-height: 86px;
float: left;
margin-top: 20px;
text-align: center;
margin-left: 10px;
border: 1px solid #999;
}
#donate {
background-color: #000;
width: 270px;
height: 500px;
}
#maincontent {
background-color: #7AD3F7;
margin-top: 20px;
margin-right: 10px;
height: 100%;
width: 500px;
float: right;
border: 1px solid #66F;
}
#spacer {
clear: both;
border: 1px solid #FF0;
}
#footer {
font-size: .7em;
text-align: center;
height: 20px;
margin-top: 10px;
}
HTML: 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=utf-8" />
<title>TROMADANCE!</title>
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav"><?php include("includes/nav.php") ?></div>
<div id="sidebar">
<object width="270" height="215"><param name="movie" value="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zQR7sDpGegw&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="270" height="215"></embed>
</object>
Tromadance 10th Anniversary PSA
<p>
<div id="donate">
</div>
</p><br />
<p>asdsadsa</p>
</div>
<div id="maincontent">
<p>SAMPLE TEXT</p>
</div>
<div id="spacer"></div>
<div id="footer"><?php include("includes/footer.php") ?></div>
</div>
</body>
</html>
Thank you in advance for any help that can be offered!!!... 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've tried a few combinations of position properties for this and can't figure out how to do it, or whether it is possible. What I want to do is put an image inside a div which has a property of 'overflow:auto'. I want the image to be positioned so a particlar point is inside the visible area, but so the user can still scroll around to see the whole of the image. Could somebody point me in the right direction please? My CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } 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 Have some (for me) a mysterious problem when mousing over an image inside a div. I use javascript to change the class of a div when either onMouseOver or onClick of the div. If I use onMouseOver to change the class of the div then the mousing over the image inside div is working fine. If I use onClick to change the class of the div then the mousing over the image inside div is NOT working fine. Why is that? Is there a way to make it work as I want? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Keywords" content="div, bug, onmouseover, onclick, image, ">
<meta name="Title" content="DIV onmouseover bug">
<meta name="Description" content="onmouseover over image inside DIV causes div onmouseout event to fire">
<title>onClick event of DIV causes mouseover of image in second example to make DIV hidden</title>
<style type="text/css">
body { margin:0; padding:0; }
.esmall { display:block; z-index:2; position:absolute; cursor:pointer; height:20px; width:300px; border:0; background-color:#a44; font-family:arial,sans-serif; font-size:12px; color:#fff; overflow:hidden; }
.elarge { display:block; z-index:3; position:absolute; cursor:pointer; height:auto; width:300px; border:1px solid black; background-color:#fff; font-family:arial,sans-serif; font-size:12px; color:#000; overflow:hidden; }
</style>
</head>
<body>
<div id="div1" class="esmall" onmouseover="this.className='elarge'" onmouseout="this.className='esmall'" style="left:10px; top:50px;">
<div style="display:block; margin:2px;">
MouseOver this div.<br><br>Then try to mouse over the image or the square below. Here it should work fine<br><br>
<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="" border="1" height="15px" width="15px" style="background-color:red"><br><br>
</div>
</div>
<div id="div2" class="esmall" onclick="this.className='elarge'" onmouseout="this.className='esmall'" style="left:320px; top:50px;">
<div style="display:block; margin:2px;">
Click here. Then try to mouseover image inside DIV<br><br>Then try to mouse over the image or the square below.<br><br> You will see that mousing over image causes the DIV to get its original size, as if you moved the mouse outside the div.<br><br>
The only difference between the two divs a First DIV uses onMouseOver and second uses onClick<br><br>
I would like this one to work but without the div dissapearing when I mouseover/mouseout of the image below.<br>How do I make it work?<br><br>
<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="Try to click me if you can" border="1" height="15px" width="15px" style="background-color:red;"><br><br>
Tested in: FF, IE, OP NE<br><br>
I use the nested divs to cope with some differences in padding behaviour between the browsers. It does not affect what I'm trying to do.
</div>
</div>
</body>
</html>
I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture. Everything is contained inside my <div id="wrapper"> and my layout scheme works like: Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey. My images are all inside the .main_view div id. Any help is appreciated! you can see my problem he htmltest2.weebly.com What do i need to do to fix this?! |
|||||||