2 Replies - 653 Views - Last Post: 07 February 2013 - 11:36 AM

#1 thoban  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 26-January 10

problem with page view in internet explorer

Posted 07 February 2013 - 10:25 AM

I have built the web page and in all browsers besides internet explorer the page looks fine. (fine in firefox, opera, safari, and chrome) The only problem is in the navigation banner. In all browsers the links are in the top green banner. In Internet explorer is is just below the green banner. You can see here at http://www.thobanco.com/dog2 Below is the code, and below that is the css.

<!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" />
	<meta http-equiv="content-type" content="text/html" />
	<meta name="keywords" content="pet resort, dog, dog grooming, dog daycare, dog Boarding, dog resort, southfield, farmington, farmingtonhills, west bloomfield, livonia, detroit, commerce, novi, northville, franklin, birmingham, bloomfield, bloomfield hills, troy, michigan, kennel, michigan dog resort, dog hotels ,dog suites, doggy spa, dog play day, doggy play day, dog stay, dog pampering, pet pampering, michigan dog pampering, dogs play, dog care, dog friends, dog pool" />
    <meta name="revisit-after" content="14 days" />
    <meta name="expires" content="never" />
    <meta name="description" content="Orchard Lake Pet Resort " />
    <meta name="zipcode" content="48034"/>
    <meta name="city" content="Southfield"/>    
    <meta name="state" content="MI"/>
    <meta name="metropolitan area" content="Detroit"/>
    <meta name="country" content="United States"/>
    <meta name="copyright" content="Copyright ? 2013 OrchardLakePetResort.com All rights reserved." />

<title>Orchard Lake Pet Resort - Where We Treat Every Dog Like a Champion</title>
<link href="style.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="js/cycle-plugin.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	
	$('.banner_iner').cycle();
	});

</script>
</head>

<body>
<!-- Wrapper -->
<div id="wrapper">
<div id="maincontaner">
<!-- Header -->
<div class="mainheader">
<!-- logo -->
<div class="toppart">
<div class="logosec"><a href="#"><img src="images/logo.png" width="280" height="77" alt="" /></a></div>
<div class="toppart_testses">
<div class="toppart_testses_left"><p>Orchard Lake Pet Resort<br />
29233 Northwestern Highway
Southfield, MI 48034</p></div>
<div class="toppart_testses_right">
<a href="reservation.htm"><img src="images/Request-a-Reservation-.png"/>
<h3>248-372-7000</h3>
</div>
         
			</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<!-- logo -->
<!-- NAV -->
<div class="rightnavsec"><img src="images/nav_right.png" width="56" height="83" alt="" /></div>
<div class="leftnavsec"><img src="images/nav_left.png" width="56" height="83" alt="" /></div>
<div class="nav"><ul>
<li><a href="index.htm" class="active">Home</a></li>            
<li><a href="about.htm">About</a></li>            
<li><a href="services.htm">Services</a></li>            
<li><a href="policies.htm">Policies</a></li>
<li><a href="rates.htm">Rates &amp; Specials</a></li>
<li><a href="testimonials.htm">Testimonials</a></li>            
<li><a href="reiki.htm">Reiki Massage  </a></li>
<li><a href="contact.htm">Contact Us</a></li>
</ul></div>
<!-- NAV -->
<div class="clear"></div>
</div>
<!-- Header -->
<!-- midsec -->
<div class="mainmidbody">
<div class="midcontentsec">
  <div class="banner">
<div class="banner_iner">  <img src="images/banner001.jpg" width="301" height="314"/>
<img src="images/banner002.jpg" width="301" height="314"/>
<img src="images/banner1.jpg" width="601" height="314"/>
<img src="images/banner2.jpg" width="601" height="314"/>
<img src="images/banner3.jpg" width="601" height="314"/>
<img src="images/front.jpg" width="601" height="314"/></div>
   </div>
  <div class="banner_right">
  <ul>
<li><a href="boarding.htm"><strong>Round 1</strong> - <em>Boarding</em></a></li>
<li><a href="grooming.htm"><strong>Round 2</strong> - <em>Grooming</em></a></li>
<li><a href="daycare.htm"><strong>Round 3 </strong>- <em>Daycare</em></a></li>
<li><a href="playtime.htm"><strong>Round 4 </strong>- <em>Playtime</em></a></li>
<li><a href="rates.htm"><strong>Round 5</strong> - <em>Pricing</em></a></li>
<li><a href="reiki.htm"><strong>Round 6 </strong>- <em>Reiki</em></a></li>
</ul>
</div>
  <div class="clear"></div>
  </div>
<div class="midpanalsec">
  <div class="midpanalsec_left">
  <h3>Welcome to Orchard Lake Pet Resort! <br /> Where every dog deserves to be a champion !!!</h3>
  <p>At Orchard Lake Pet Resort, our goal is to provide the<br />
 exceptional care you expect along with the personal love<br /> and
 attention your pet deserves.  We strive to keep our guests <br />happy
 and healthy so they beg to come back!
  </div>
  <div class="midpanalsec_mid">
  <h3>Hours of Operation</h3>
 <h4> Hours are:<br />
Monday-Saturday&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sunday<br />
<span>8:00 a.m. - 5:30 p.m.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8:00 a.m. - 5:00 p.m.</span>
</h4>
  </div>
  <div class="midpanalsec_right"><p>Feel free to call and leave<br />
 a message if we don't <br />pick up!We will get back <br />to you the moment we <br />are able to!</p></div>
  <div class="clear"></div>
</div>
<!-- Box Part -->
<div class="testimonialsec">
<div class="box"> <a href="#"><img src="images/lightweight.jpg" width="250" height="207" alt="" style="margin:0 0 6px 0;" /></a>
<h3 class="fox">Lightweight Champion </h3> 
</div>
<div class="box01"> <a href="#"><img src="images/middleweight.jpg" width="250" height="207" alt="" style="margin:0 0 6px 0;" /></a>
<h3 class="fox01">Middleweight Champion</h3> 
</div>
<div class="box"> <a href="#"><img src="images/heavyweight.jpg" width="250" height="207" alt="" style="margin:0 0 6px 0;" /></a>
<h3 class="fox">Heavyweight Champion</h3> 
</div>
<div class="clear"></div>
</div>
<!-- Box Part -->
<div class="clear"></div>
</div>
<!-- midsec -->
</div>
<div class="clear"></div>
</div>
<!-- Wrapper -->
<!-- Footer -->
<div id="footer">
<div class="mainfooter"><ul class="footer_nav">
<div style="float: right;"><a href="http://www.facebook.com/orchardlakepetresort"><img src="images/facebook.jpg" width="155" height="55" alt="" /></a></div>

<li><a href="index.htm" class="active">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="services.htm">Services</a></li>
<li><a href="policies.htm">Policies</a></li>
<li><a href="reiki.htm">Reiki</a></li>
<li><a href="rates.htm">Rates &amp; Specials</a></li>
<li><a href="resources.htm">Resources &amp; Tips</a></li>
<li><a href="contact.htm">Contact Us</a></li>
</ul>
<div class="clear"><h3 class="fox">"Where Every Dog Deserves To Be A Champion."</h3></div>
<div><p>Copyright © 2013 Orchard Lake Pet Resort. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 Design by: <a href="http://www.thobanco.com/"><strong><em>Thobanco Technologies</em></strong></a></p></div>
</div>
</div>
<!-- Footer -->
</body>
</html>





The CSS
body{
		padding:0;
		margin:0;
		background:#fff;
		font: normal 13px/19px Arial, Helvetica, sans-serif;
	}  
* {
	padding:0px;
	margin:0px;
}
html, body, div, span, object, h1, h2, h3, h4, h5, h6, iframe, blockquote, pre, abbr, address, code, em, font, img, small, strike, strong, sub, sup, tt, var, dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
ul, li{list-style:none;}
a {
	text-decoration:none;
	outline:none;
	color:#5c5c5c;
}
a:focus {
	outline: none;
}
.clear {
	font-size:0;
	line-height:0;
	clear:both;
}
@font-face {
    font-family: 'straitregular';
    src: url('fonts/strait-regular-webfont.eot');
    src: url('fonts/strait-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/strait-regular-webfont.woff') format('woff'),
         url('fonts/strait-regular-webfont.ttf') format('truetype'),
         url('fonts/strait-regular-webfont.svg#straitregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'lexiaregular';
    src: url('fonts/lexia_std_rg-webfont.eot');
    src: url('fonts/lexia_std_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lexia_std_rg-webfont.woff') format('woff'),
         url('fonts/lexia_std_rg-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
/*======================general=======================*/
#wrapper{width:100%; background:url(images/top-bg.jpg) 0 0 repeat-x #ffffff; padding-bottom:18px;}
#maincontaner{width:980px; margin:0 auto; padding-top:39px;}

/*============================== Header ==========================*/
.mainheader{width:980px; margin:0 auto;}
.toppart{width:980px; margin:0 auto; padding-bottom:21px;}
.logosec{width:295px; float:left;}
.logosec img{margin-left:12px;}
.toppart_testses{ width:491px; float:right;}
.toppart_testses_left{ width:235px; float:left;}
.toppart_testses_left p{font-family: 'lexiaregular';font-weight: normal;font-style: normal; font-size:16px; color:#554104; line-height:22px; padding:10px 0 0 0;}
.toppart_testses_right{ width:227px; float:right;}
.toppart_testses_right img{ margin- :138px;}
.toppart_testses_right h3{font-family: 'lexiaregular';font-weight: normal;font-style: normal; font-size:34px; color:#1f4f2b; padding:20px 0 0 5px; }
.rightnavsec{ float:left; width:76px; position:absolute; margin:0 0 0 -56px;}
.leftnavsec{ float:right; width:76px; position:absolute; margin:0 0 0 980px;}
.nav{background:url(images/nav_mid.jpg) 0 0 repeat-x; height:83px; margin:0 auto;width:980px;}
.nav ul{padding:0; margin:0;}
.nav ul li{float:left;font-family: 'lexiaregular'; font-size:16px; line-height:68px; color:#ffffff; font-weight:normal; background:url(images/nav-devider.png) 0 0 no-repeat; margin-right:0;}
.nav ul li a{color:#ffffff; display:block; padding:0 23px;}
.nav ul li a:hover{color:#110808; background:url(images/nav_hover.png) 0  0 repeat-x;}
.nav ul li a.active{color:#110808; background:url(images/nav_hover.png) 0  0 repeat-x;}

/*============================== Header end ==========================*/


/*============================== body not main page==========================*/



/*============================== mid body ==========================*/
.mainmidbody{width:980px; margin:0 auto;}
.midcontentsec{width:980px; margin:0 auto;padding-bottom:15px;}
.midpanalsec{width:980px; margin:0 auto; background:url(images/mid_bg.jpg) 0 0 no-repeat; padding:28px 0 25px 0;}
.testimonialsec{width:980px; margin:0 auto; padding-top:15px;}
.box{ width:283px; float:left; padding:17px 0 0 36px; background:url(images/box01.jpg) 0 0 no-repeat;}
h3.fox{font-family: 'lexiaregular';font-weight: bold;font-style: normal; font-size:22px; color:#ffffff; padding:0 0 18px 54px; text-shadow:1px 1px #000000;}
.box01{ width:283px; float:left; padding:17px 0 0 36px; background:url(images/box02.jpg) 0 0 no-repeat; margin:0 11px 0 11px;}
h3.fox01{font-family: 'lexiaregular';font-weight: bold;font-style: normal; font-size:22px; color:#ffffff; padding:0 0 18px 54px;text-shadow:1px 1px #000000;}
.midpanalsec_left{ width:428px; float:left; padding:0 0 0 22px;}
.midpanalsec_left h3{font-family: 'lexiaregular';font-weight: normal;font-style: normal; font-size:18px; color:#ffffff; line-height:20px;}
.midpanalsec_left p{ font:normal 16px/19px "Times New Roman", Times, serif; color:#bfd2c3; padding:16px 0 0 0;}
.midpanalsec_mid{ width:320px; float:left;}
.midpanalsec_mid h3{font-family: 'lexiaregular';font-weight: normal;font-style: normal; font-size:18px; color:#ffffff; line-height:20px;}
.midpanalsec_mid h4{ font:bold 16px/24px "Times New Roman", Times, serif; color:#bfd2c3; padding:16px 0 0 0;}
.midpanalsec_mid h4 span{ font:bold 16px/24px "Times New Roman", Times, serif; color:#d9c99e; padding:0 0 0 0;}
.midpanalsec_right{ width:177px; float:right;}
.midpanalsec_right p{ font:normal 16px/19px "Times New Roman", Times, serif; color:#d9c99e; padding:5px 0 0 0;}
.banner{ width:725px; float:left; background:url(images/banner_bg.jpg) 0 0 no-repeat; height:326px; padding-top:12px;}
.banner_iner{ width:701px; margin:0 auto;}
h2.pet{font-family: 'lexiaregular';font-weight: normal;font-style: normal; font-size:35px; color:#ffffff; line-height:40px; padding:228px 0 0 32px;
 text-shadow:1px 1px #000000;}
.banner_right{ width:210px; float:right; background:url(images/side_nav.png) 0 0 no-repeat; height:338px; padding:0 0 0 27px;}
.banner_right ul{ padding:0 0 0 0; margin:0 0 0 0; list-style-type:none;}
.banner_right ul li{font-family: 'lexiaregular';font-weight: normal;font-style: normal; font-size:16px; color:#6a561c; line-height:56px; background:url(images/nav_mark.png) 0 center no-repeat; padding:0 0 0 30px;}
.banner_right ul li a{color:#6a561c;}
.banner_right ul li a:hover{ text-decoration:underline;}
/*============================== mid body end ==========================*/

/*============================== Footer ==========================*/
#footer{ width:100%; margin:0 auto; background:url(images/footer_bg.jpg) 0 0 repeat-x;}
.mainfooter{width:865px; margin:0 auto; padding-top:32px; clear:both; padding-left:115px;}
ul.footer_nav{padding:0; margin:0;}
ul.footer_nav li{float:left; font:normal 16px/20px Arial, Helvetica, sans-serif; color:#ffffff; padding:0 15px 20px 0;}
ul.footer_nav li a{color:#ffffff;}
ul.footer_nav li a:hover{color:#d3ac38;}
ul.footer_nav li a.active{color:#d3ac38;}
ul.footer_nav_iner{padding:0 0 20px 234px; margin:0;}
ul.footer_nav_iner li{float:left; font:normal 14px/16px Arial, Helvetica, sans-serif; color:#98bea3; padding:0 9px 0 9px; background:url(images/footer_nav-devider.jpg) 0 center no-repeat;}
ul.footer_nav_iner li a{color:#98bea3;}
ul.footer_nav_iner li a:hover{color:#d3ac38;}
ul.footer_nav_iner li a.active{color:#d3ac38;}
.mainfooter p{font:normal 12px/30px Arial, Helvetica, sans-serif; color:#FEFDFD; padding:5px 0 20px 260px; }



/*============================== Footer end ==========================*/



This post has been edited by Dormilich: 07 February 2013 - 12:24 PM
Reason for edit:: fixed code tags


Is This A Good Question/Topic? 0
  • +

Replies To: problem with page view in internet explorer

#2 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: problem with page view in internet explorer

Posted 07 February 2013 - 11:19 AM

I would suggest using a css reset style sheet to keep cross-browser issues to a minimum. A good place to start is the html5 boilerplate from this site:
html5boilerplate.com

Also I would suggest reading up on the differences between using a div id and div class.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,833
  • Joined: 12-December 12

Re: problem with page view in internet explorer

Posted 07 February 2013 - 11:36 AM

You have a number of errors in your HTML. Fix the more important of these and your problem might disappear.

You also appear to have few extra a-tags (for reservation.html) within (and just before) your navigation list.

NOTE The only elements that should appear within a UL are LIs; other elements must be nested within these LIs.

http://jigsaw.w3.org...banco.com/dog2/

Check your CSS as well.

This post has been edited by andrewsw: 07 February 2013 - 11:35 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1