Please, send us a link to where your web Page is hosted. It's hard to reproduce your problem.
__ Paulo Diovani Gonçalves [email protected] http://diovani.com > -----Mensagem original----- > De: [email protected] [mailto:[email protected]] Em > nome de MD > Enviada em: sexta-feira, 29 de janeiro de 2010 18:14 > Para: Design the Web with CSS > Assunto: [Design with CSS 2816] IE compatibility issues > > 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] -- -- 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]
