|
CSS - Image Auto Fit
Hi Friends,
I have a problem with image auto fit. My problem is i have to set logos of different companies, one company logo may be small resolution and other may be higher. In my code i have given like this [code] "<td valign="top"><img border="0" src="<%=imagePath%>" alt="<%=firmName%>" style="LEFT: 14px; width:150px; POSITION: absolute;"></td>"[code] But for small images are stretching. this should not happen. Could you please help me on this issue Similar TutorialsOn button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. 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 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'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. Hello, I have been having some problems with ie and auto margins, In firefox my page shows perfectly, but in ie, the page hangs to the left only showing the default margin that ie gives you. I want the page to center in the middle. The link to the page is spanglerdesign.com/test/Mulligan1 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 have a page that uses CSS to handle layout. I also use a combination of CSS and javascript to create an expandable menu. I have a simplified version of this page he http://www.stringersites.com/csstest/index.htm Users of Dreamweaver will recognize this as being based on the HaloNavLeft template. As you can see, the page displays fine until you start expanding the menu items contained in <div id="mainMenu">. If you expand enough, the mainMenu box extends beyond the borders of the <div id="pagecell1"> in which it's contained. My primary question to the group is how to get the pagecell div to autoexpand along with the mainMenu div. My secondary question is how to stretch a vertical column to the height of the containing div. Specifically, this is <div class="relatedLinks">, which is contained in pageNav, which, in turn, is contained in pagecell1. The relevant pieces of CSS are included below, but you can link to the entire CSS sheet from the test doc above. Thanks in advance for the help. -Steve Stringer Code:
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}
#mainMenu {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
width: 350px;
position: absolute;
margin-left: 10px;
margin-top: 20px;
}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}
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 What are all of the properties does ie not support the auto value for? I know width and height are a couple, anymore? Hi i am created a div container for my content and i want it so that it goes as big as whatever content i have but it doesnt seem to work as in ie the text goes to the bottom but doesnt display the end of my box and in firefox it only goes to a certain point which is my advert container then goes under it and carries on down the page so is there anyway i can get this property to work properly any help would be much appriciated as i say i have already tried height:auto; but no luck Is there anyway to make a division automatically expand based on teh content, even though the elements inside are floating. Obviously, this works nice in IE ( ) but naturally i want it to look nice in FF. 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. On this page - http://www.mts-diesel.com/index.php, it shows as wanted in FF, but in IE9, the main body is left aligned. I tried declaring margin:0 auto but it will take effect. Any help would be appreciated. Tom Hi All, I have CSS-sheet= .thumbs { border: 2px solid #524b2f; position: static; height: 80px; width: auto; } body { background-color: #f5f0ec; font-family: Verdana, Arial, Helvetica, sans-serif; scrollbar-face-color : #f5f0ec; scrollbar-highlight-color : #aca899; scrollbar-3dlight-color : #f5f0ec; scrollbar-shadow-color : #aca899; scrollbar-darkshadow-color :#f5f0ec; scrollbar-track-color : #f5f0ec; scrollbar-arrow-color : #524b2f; } The thumbs part resizes some pictures to a fixed height of =80px and calculates the width so everyting is resized correctly. But IE6 gives problems with the width=auto , some times it's sets the widt correctly other times it doesn't. In other brouwsers its fine. Any suggestions on fixing this in IE6? here's the page link : http://www.sleuyter.be/04/lay04-1.htm thx, ROY I'm still fairly new with CSS. I cannot get margin: auto; to work in IE. Working fine in Mozilla. There was a brief bit where I got it to work, but I have no idea what I did, nor how to do it again...LOL(slightly sarcastic laughter). Anyway, it's making me crazy and maybe someone can help me out. I've stripped the code down to my CSS body and area div I've been setting my stuff in. Code:
<html>
<head>
<title>Dude Work Web Page</title>
<style type="text/css" media="screen">
body {
background: #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
#area {
background: #FFFAFA; display: table;
width: 776px;
margin: 0 auto;
border: 5px double black;
height: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="area">
What is it that keeps this from having auto margins in IE???
</div> <!-- end area -->
</body>
</html>
Much thanks, James Ok, first problem: How would I go about creating a div container that auto-resized (and works with all browsers)? I can just set the left and right margins to work with newer browsers, but I need it to work for IE etc. Currently, I am using a table for this, but due to the many colspans and rowspans, the height and width settings are buggy and my borders will not show up right. Besides that, I would much rather do it with divs anyway, because it's smaller and easier. Second problem: How would I create a paragraph that would act like this: If it was under 500px high, it would shrink to fit. If it was over that, it would add a scroll bar with overflow? What I have: Code: p.code {
font-family: "Courier New", serif;
font-size: 8px;
height: auto;
width: 600px;
border-size: 1px;
border-color: #46516F;
border-style: ridge;
padding: 5px;
overflow: auto; }
(obviously doesn't work...) Afternoon Folks! Have a seemingly simple problem here but I can't seem to figure it out. I have a Horizontal drop-down CSS menu. It's working really well in FF but our fav friend IE is reading it differently. I'm using a list for my nav, with an auto width and 15px padding left/right. But in IE it registers my width as 100% so my horizontal menu turns into a vertical menu. edit:: using IE6 as my base test simply because IE7 isn't an "Approved Software" for work yet.. haha! I'm about to head out to lunch in a few and wanted to see if some CSS wiz's could slap me and help me find the best solution for my needs. I'm sure it's simple and I just keep scimmin right over it. So I uploaded what I have for it. It can be seen here This is the style which defines my width: css Code: Original - css Code #pmenu a, #pmenu a:visited { display:block; padding: 0 15px; width: auto; font-size:11px; color:#fff; height:25px; line-height:24px; text-decoration:none; border-right: 1px dotted #fff; }
#pmenu a, #pmenu a:visited {
Of course, any and all help is appreciated! TYTY! TIA! Lates! 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 - Hi Guys I am currently trying to make a website, the problem is that its not quite working..... I have a main div that holds everything inside it but when i set its height to auto its not staying the correct length. Basically i want this main div to stretch out longer every time new content is added (dynamically). Why is it not staying as long as the content thats contained within it? Anyone know why this is happening and how i can fix it ? Help?! Code: #main {
height: auto;
width:868px;
margin-left:15px;
margin-top:15px;
background-color:#FFFFFF;
margin-bottom:3px;
}
Thanks |
|||||||