lastlifelost Posted September 23, 2009 Share Posted September 23, 2009 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... Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2009 Share Posted September 23, 2009 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 More sharing options...
lastlifelost Posted September 23, 2009 Author Share Posted September 23, 2009 Thanks! I'll take a look at it in a bit and post any other questions I have. What was it that was causing the issues? Was just the order everything was rendering in? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2009 Share Posted September 23, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.