Hi All, I'm pretty new to this, but I have this webpage and style sheet that is displaying some weird characteristics in IE, but not in any other browsers (surprise, surprise)... 1)There's a few pixel space between the header div, the UL that makes up the menu, and the div that seperates the main content top and main content background.
2)The drop down menus are hidden behind the image in the right div of the main content 3)The word SHOWS is an h1 tag of the sports-show div, and the top and bottom of the h1 are cut off... I think that's it. Here's the files, and thanks in advance for all your help. ******************************************************************index.html********************************************************************** <!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>Black Bear, Deer, Moose and Grouse Hunts at North Country Lodge</title> <link href="index_style.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script> <script src="js/slideshow.js" type="text/javascript" charset="utf-8"></ script> <script src="js/jquery.dropdownPlain.js" type="text/javascript" charset="utf-8"></script> <link href="menu_styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page-wrap"> <div id="header"> <a href="index.html"><img src="images/header.jpg" /></a> </div> <ul class="dropdown"> <li><a href="#">The Lodge</a> <ul class="sub_menu"> <li><a href="lodge.html">The Lodge</a></li> <li><a href="pic_lodge.html">Accommodations Gallery</a></li> <li><a href="map.html">Map and Directions</a></ li> <li><a href="weather.html">Local Weather</ a></li> </ul> </li> <li><a href="#">Bear Hunting</a> <ul class="sub_menu"> <li><a href="bear.html">Maine Bear Hunt</a></ li> <li><a href="pic_bear.html">2009 Bear Hunt</a></li> <li><a href="video.html">Video</a></li> <li><a href="https://www5.informe.org/cgi- bin/online/moses2/l_step01.pl">Online Bear Hunting License & Bear Permit</a></li> </ul> </li> <li><a href="#">Deer Hunting</a> <ul class="sub_menu"> <li><a href="deer.html">Maine Whitetail Deer Hunt</a></li> <li><a href="pic_deer.html">Deer Gallery</ a></li> <li><a href="https://www5.informe.org/cgi- bin/online/moses2/l_step01.pl">Online Whitetail Deer Hunting License</ a></li> </ul> </li> <li><a href="#">Moose Hunting</a> <ul class="sub_menu"> <li><a href="moose.html">Maine Trophy Moose Hunt</a></li> <li><a href="pic_moose.html">Moose Gallery</a></li> <li><a href="http://www5.informe.org/ online/moose/">Online Moose Hunting Permit</a></li> </ul> </li> <li><a href="#">Rates and Dates</a> <ul class="sub_menu"> <li><a href="rates.html">Rates</a></li> <li><a href="images/rates_images/ reservation.pdf">Reservation Form</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul class="sub_menu"> <li><a href="mailto:[email protected]?subject=north Country Lodge Inquiry&body=Dear North Country Lodge,%0A%0a">E-Mail the Lodge</a></ li> <li><a href="contact.html">Contact Info</ a></li> <li><a href="request.html">Request a Free Brochure and DVD</a></li> <li><a href="#">Blog</a></li> </ul> </li> <li class="fishing"><a href="http:// www.flintwildernessresort.com">Canadian Fishing</a></ li> </ul> <img src="images/main-content-top.jpg" alt="Main Footer" /> <div id="main-content"> <div id="article"> <h1> The Ultimate Maine Hunting Experience</h1> <p><br /></p><p> North Country Lodge was established in 1985, and is located in Aroostook County Maine, the largest wilderness area east of the Mississippi River, 11 miles north of Patten Maine, and approximatley 25 miles east of Maine's largest state park (Baxter State Park).</p><p> The Lodge is nestled among the pines and spruce, lending itself to the overall breathtaking beauty of this magnificent hunters paradise. </p><p> For well over a century, Aroostook County has offered the finest Black Bear, Whitetail deer, and moose hunting on the North American continent. </p><p> Hardwood ridges, rolling hills, swamps and bogs provide the setting for an exciting and memorable experience in the vast North Maine Woods. If your dream is to bag a trophy Maine Whitetail deer, Black Bear, or moose, North Country Lodge is here for you. </p><p> </p> </div> <div id="slideshow"> <img src="images/bearguys.png" alt="" class="active" /> <img src="images/deerpole.png" alt="" /> <img src="images/donmoose.png" alt="" /> </div> <div id="flint-quote"> <p> North Country Lodge also owns and operates Flint Wilderness Resort, in Northern Ontario Canada. Northern Canada is renowned for it's <i>World-Class Fishing</i>. Please take a moment to check out <a href="http://www.flintwildernessresort.com/";>Flint Wilderness Resort</a>.</ p> </div> <div class="clear"></div> <div id="sportsshow"> <ul> <li> <h1>Sport Shows</h1> </li> <li> <h3>We will be exhibiting at the following Outdoor Sport's Shows in 2010:</h3> </li> <li>Columbus Sports, Vacation & Boat Show<br /> Feb 11-14, 2010<br /> Ohio Expo Center, Ohio State Fairgrounds <br /> 717 E. 17th Ave<br /> Columbus, OH 43221<br /> Booth #'s 246 & 247 </li> <li>Indianapolis Boat Sport & Travel Show<br /> Feb 19-28, 2010<br /> Indiana State Fairgrounds<br /> 1202 E. 38th St.<br /> Indianapolis, IN 46205<br /> Booth #'s C-58 & C-59 </li> <li>Deer Turkey & Waterfowl Expo<br /> Feb 19-21, 2010<br /> Exposition Hall<br /> Indiana State Fairgrounds<br /> 1202 E. 38th St.<br /> Indianapolis, IN 46205<br /> Booth # 212 </li> </ul> </div> <div class="clear"></div> <div id="footer"> <ul id="legal"> <li> Your Hosts,<br /> The Goodman Family<br /> </li> <li style="text-align:center;"> P.O. Box 323<br /> Patten, ME 04765<br /> (207)-528-2320<br /> <a href="site_map.html">Site Map</a> </li> <li style="text-align:right;"> ©2010 North Country Lodge<br /> All rights Reserved<br /> </li> </ul> </div> <div id="clear"></div> </div> </body> </html> **************************************************************Index Css Style Sheet***************************************************************** @charset "utf-8"; /* CSS Document */ /* RESETS & BASIC PAGE SETUP */ * {margin: 0; padding: 0; } html { overflow-y: scroll; } body { height:100%; font:62.5% Arial, Helvetica, sans-serif; font-weight:bolder; background:url(images/background-pattern.jpg) repeat-x; background-color:#000000; } ul {list-style: none inside; } p { font-size:1.5em; line-height: 1.2em; margin-bottom:1.2em; padding-left:60px; font-style:normal; font-weight:bolder; text-indent:20px; } a {outline: none;} a img {border:none;} h1 { font-family:Georgia, "Times New Roman", Times, serif; font-size:4em; font-weight:normal; color:#440505; } /* END RESET */ /* TOOLBOX */ .floatleft { float:left;} .floatright {float:right;} .clear {clear:both;} /* END TOOLBOX */ #page-wrap{ width:959px; margin:0 auto; /*background:url(images/content-background.jpg) repeat-y;*/ background-position:top; } #header { height:277px; width:959px; background:url(images/header.jpg) center; background-position:right; } #header background a{ } /*#main-header{ height:89px; width:959px; position:absolute; top:300px; background:url(images/main-content-top.jpg) ; z-index:1; } */ #main-content { top:388px; background:url(images/content-background.jpg) repeat-y; min-height:255px; } #article { float:left; width:425px; position:relative; } #main-content p { position:relative; left:20px; width:405px; float:left; font-size:1.3em; } #main-content h1 { padding-left:68px; width:425px; float:left; } #main-content img { background:none; } #slideshow { float:right; position:relative; right:140px; bottom:20px; height:212px; width:282px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; } #slideshow IMG.active { z-index:10; } #slideshow IMG.last-active { z-index:9; } #flint-quote p{ position:relative; left:-150px; width:305px; float:right; font-size:1.3em; } #sportsshow { position:relative; float:left; width:805px; height:500px; bottom:20px; } #sportsshow li { font-size:1.3em; line-height: 1.2em; margin-bottom:1.2em; padding-left:60px; text-align:center; font-weight:bolder; } #sportsshow h1 { width:16.2em; text-align:center; font-size: 3em; } #sportsshow h3 { width:20em; margin:0 auto; font-size:1.8em; line-height: 1.2em; text-align:center; margin-bottom:1.2em; padding-left:60px; color:990000; font-weight:bolder; padding-top:2em; } /* #main-bottom{ position:absolute; top:150px; height:151px; width:959px: background:url(images/main-content-bottom.jpg); } */ #footer { height:151px; width:959px; background:url(images/main-content-bottom.jpg) center; background-position:right; } ul#legal {width:120em; position:relative; left:8.2em;} ul#legal li{float:left; margin-right:22.5em; } ***********************************************************Menu Style Sheet************************************************************************ @charset "utf-8"; /* CSS Document */ /* LEVEL ONE */ ul.dropdown {position: relative; width:98em; } ul.dropdown li { text-align:center; font-weight: bold; font-size:1.0em; border: double; float: left; zoom: 1; background: #bb930a; width: 13.1em; z-index:12} ul.dropdown a:hover { color: #000; } ul.dropdown a:active { color: #ffa500; } ul.dropdown li a { display: block; padding: 2px 4px; border-right: 1px solid #333; color: #222; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { background: #F3D673; color: black; position: relative; } ul.dropdown li.hover a { color: black; } /* LEVEL TWO */ ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; float: none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; border-bottom:double; width: 90%; display: inline-block; } /* LEVEL THREE */ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; } ********************************************************JQuery Script to fade the images********************************************************** $(document).ready(function(){ $('.photo_slider').each(function(){ var $this = $(this).addClass('photo-area'); var $img = $this.find('img'); var $info = $this.find('.info_area'); var opts = {}; $img.ready(function(){ opts.imgw = $img.width(); opts.imgh = $img.height(); }); opts.orgw = $this.width(); opts.orgh = $this.height(); $img.css ({ marginLeft: "-150px", marginTop: "-150px" }); var $wrap = $('<div class="photo_slider_img">').append($img).prependTo ($this); var $open = $('<a href="#" class="more_info">More Info ></ a>').appendTo($this); var $close = $('<a class="close">Close</a>').appendTo($info); opts.wrapw = $wrap.width(); opts.wraph = $wrap.height(); $open.click(function(){ $this.animate({ width: opts.imgw, height: (opts.imgh+95), borderWidth: "10" }, 600 ); $open.fadeOut(); $wrap.animate({ width: opts.imgw, height: opts.imgh }, 600 ); $(".info_area",$this).fadeIn(); $img.animate({ marginTop: "0px", marginLeft: "0px" }, 600 ); return false; }); $close.click(function(){ $this.animate({ width: opts.orgw, height: opts.orgh, borderWidth: "1" }, 600 ); $open.fadeIn(); $wrap.animate({ width: opts.wrapw, height: opts.wraph }, 600 ); $img.animate({ marginTop: "-150px", marginLeft: "-150px" }, 600 ); $(".info_area",$this).fadeOut(); return false; }); }); }); ***********************************************************************End of Relevant Files ******************************************************* Thanks for your help folks. Any advice is greatly appreciated. --D -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
