Jump to content

Two Issues In Ie


lastlifelost
 Share

Recommended Posts

http://woodturningvt.com/betagallery.htmTake a look at the linked page. This is hopefully going to be an image gallery. My issues are twofold. First: look at the page in IE7, the spacing gets a messed up, adding a wide top margin. I can't figure out where the problem is coming from. Second: click the top left image in the gallery. It brings up a lightbox-esque image preview and description. This preview is designed to dynamically resize the image to fit into the screen utilizing CSS image property width="100%". In IE7, the resize works fine. IE8, however, doesn't resize the height proportionately. No problems in the other browsers so far. Does anyone have an insight about either of these issues? I'd post the code, but I'm not sure where the problems are... Edited by lastlifelost
Link to comment
Share on other sites

i had to move a couple of divs (topimgbox images into graybar div), and adjust css in several locations, but this seem to work.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Gallery - Rosato Woodturning</title><style type="text/css"><!--*{padding:0;margin:0;}body { background: #fff url(http://woodturningvt.com/images/site/bgfade.jpg) repeat-x top; height: 100%; position: relative; margin: 0px; padding: 5px 0 0 0;}ul { list-style-type: none;}li.toplevel { background: url(http://woodturningvt.com/images/site/leafbullet.png) left top no-repeat; min-height: 34px; margin: -5px 0 5px -25px; padding: 5px 0 0 20px;}li.toplevel div.submenu { display: none; border-top: 1px solid #050; width: 100%;}li.toplevel:hover div.submenu { display: block;}a , a img{ border: 0px solid white; text-decoration: none; }#head { float: left; margin: 0px; margin-top: 10px; padding: 0px;}#graybar { margin-left: 294px; border-bottom: 16px solid #baab8a;}#content { position: absolute; top: 0px; left: 0px; float:left;}#topimgbox { height: 87px; width: 75%; min-width: 440px; padding-bottom: 10px;}.topleft { float: left; padding: 0 15px;}.topright { float: right; padding: 0 15px;}#menu { float: left; width: 185px; padding: 10px; margin: 90px 10px 0 0;}.mainmenu { margin: 120px 0 0 25px; padding: 0px; list-style-type: none; font-family: Georgia, "Times New Roman", Times, serif; font-size: .75em; letter-spacing: 1px; float:left;}.menucaps { font-size: x-large; padding-left: 5px;}.submenu ul { border-left: 1px solid #050; margin: -5px 0 0 50px; padding: 0 0 0px 0px;}.submenu div { border-top: 1px solid #050; margin: 5px 0 0 50px; height: 1px;}.subli { margin: 10px 5px 0 5px; padding-left: 10px;}.subli:hover { border-width: 0px 1px 0px 1px; border-color: #050; border-style: solid; padding-left: 9px;}#rightmargin { width: 190px; height: 100%; float: right; margin-top: 10px;}#watermark { position: absolute; bottom: 20px; right: 10px;}.imgcol { float: left; width: 200px; height: 100%;}.imgcontainer { background: url(http://woodturningvt.com/images/site/imgcolshadow.png) top left no-repeat; width: 188px; height: 150px; padding: 5px 0 0 5px;}.gallery img { margin: 0 15px 25px 0; padding-bottom: 25px; border-bottom: 4px double #050; }.pagecontent { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 150%; top: 132px; position:relative; margin: 0 220px; }#webmaster { background-color: #fff; height: 33px; width: 100%; text-align: center; font-size: .75em; border-top: 3px double #eee; position: fixed; bottom: 0px; }#webmaster a , #webmaster a:visited { text-decoration: none; color: black; }#webmaster a:hover { color: blue; text-decoration: underline; } .popupdiv { position: fixed; top: 0px; left: 0px; z-index: 100; background: url(http://woodturningvt.com/images/site/transpbg.png); height: 100%; width: 100%; display: none; text-align: center; }#subdiv { margin: 25px auto; width: 75%; } #subdiv img { width: 750px; max-width: 60%; margin: 0px; padding: 0px; border: none; }#subdiv p { background: #fff; margin: 0px auto; padding: 0 2em; text-align: left; width: 55%; overflow-y: scroll; max-height: 9em; font-size: .75em; line-height: 150%; } --></style><!-- SCRIPTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--><script type="text/javascript"><!--function CloseWindow(el_id) { var popup = document.getElementById(el_id); popup.style.display='none';} function showWindow(el_id) { var popup = document.getElementById(el_id); popup.style.display='block';}//--></script><!-- END SCRIPTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~--></head><body><div id="bglayers"> <img src="http://woodturningvt.com/images/site/rwlogotop.png" alt="Rosato Woodturning" width="294" height="183" id="head" /> <div id="graybar"><div id="topimgbox"> <img src="http://woodturningvt.com/images/site/topplatter.png" alt="platter" class="topleft"/> <img src="http://woodturningvt.com/images/site/topbowl.png" alt="bowl" class="topright"/> </div></div></div> <!-- END #bglayers --><div id="content"> <div id="rightmargin"> <img src="http://woodturningvt.com/images/site/Lamp.png" alt="lamp" width="171" height="359" id="lamp"/> <img src="http://woodturningvt.com/images/site/rwwatermark.png" alt="watermark" width="202" height="200" id="watermark" /> </div> <!-- END #rightmargin --> <div id="menu"> <ul class="mainmenu"> <li class="toplevel"><span class="menucaps">A</span>VAILABLE <span class="menucaps">W</span>ORKS <div class="submenu" > <ul> <li class="subli">Bowls</li> <li class="subli">Platters</li> <li class="subli">Other</li> </ul> <div class="brokenborder"> </div> <!-- bottom border for submenus --> </div> </li> <li class="toplevel"><span class="menucaps">T</span>URNING <span class="menucaps">L</span>ESSONS</li> <li class="toplevel"><span class="menucaps">C</span>USTOM <span class="menucaps">W</span>ORK</li> <li class="toplevel"><span class="menucaps">B</span>IO & <span class="menucaps">C</span>ONTACT</li> </ul> <!-- END .mainmenu --> </div> <!-- END #menu --> <div class="pagecontent gallery"> <a href="java script:void(0);" onclick="showWindow('bowl1-1')"> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> </a> <div class="popupdiv" id="bowl1-1"> <div id="subdiv"> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1"/> <p><a href="java script:void(0);" onclick="CloseWindow('bowl1-1')">CLOSE</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor rutrum massa ac fringilla. Proin fringilla tincidunt dui, et condimentum nulla viverra vitae. Proin ipsum mauris, suscipit ac adipiscing ut, porttitor eu velit. Vivamus blandit orci vel justo sagittis viverra. In hac habitasse platea dictumst. Ut id eros sodales arcu facilisis tristique a cursus metus. Praesent iaculis egestas turpis sed hendrerit. Etiam eros eros, iaculis a ultrices in, sagittis in erat. Curabitur tristique purus eu nisi euismod ut rutrum mauris tincidunt. Quisque sit amet sem nunc. Sed sed eleifend lacus. </p> </div> <!-- END .subdiv --> </div> <!-- END .popupdiv #bowl1-1--> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> <img src="http://woodturningvt.com/images/site/bowl1.jpg" alt="bowl1" width="160" height="120" /> </div> <!-- END .pagecontent --> <div id="webmaster"> Copyright © 2009 Nick Rosato, Rosato Woodturning <div style="float:right ; padding: 0 2em">Webmaster: <a href="http://SosImagesOnline.com" target="blank">Sos Images Online</a></div> </div> <!-- END #webmaster --></div> <!-- END #content --></body></html>

Link to comment
Share on other sites

few more improvements#content { position: absolute; top: 0px; left: 0px; float:left; width:100%;}#rightmargin { width: 190px; float: right; margin-top: 10px; min-height: 580px;}.pagecontent { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 150%; top: 132px; position:relative; margin: 0 205px 0 220px; }#webmaster { background-color: #fff; height: 33px; width: 100%; text-align: center; font-size: .75em; border-top: 3px double #eee; position: fixed; bottom: 0px; left:0px; }

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...