Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Internet Explorer IE8 trouble (z-index, positioning...)

    I'm having some trouble getting my website to display properly in Internet Explorer.
    Here's my site in Firefox. Everything looks exactly like I want it.

    My site actually displays two different way in IE8. Positioning is wrong for multiple divs. The dropdown menu (which has a z-index of 999) is underneath the next div's background and the list items are sized independently. When it first loads, everything is shifted all the way to the left of the screen.

    However when the page is refreshed, everything is centered but there's still problems.


    This is the HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html>
    <head>
    	<title>Bespoke Hospitality Group</title>
    	<link rel="stylesheet" type="text/css" href="main.css" title="Default Styles" media="screen">
    </head>
    <body>
    	<div class="header">
    		<a href="index.html"><img src="logoBHG.jpeg" alt="logo"></a>
    	</div>
    	
    	<div class="menu">
    		<ul id="nav">
    			<li>
    				<a href="index.html">Home</a>
    			</li>
    		
    			<li>
    				<a href="about.html">About Us</a>
    				
    				<ul class="dropdown">
    					<li><a href="about/gregory-roberts.html">Gregory Roberts</a></li>
    					<li><a href="about/philip-santini.html">Philip Santini</a></li>
    				</ul>
    			</li>
    			
    			<li>
    				<a href="services.html">Services</a>
    		
    				<ul class="dropdown">
    					<li><a href="services/home-and-estate.html">Home and Estate Management</a></li>
    					<li><a href="services/housekeeping.html">Housekeeping and Property Management</a></li>
    					<li><a href="services/staff-oversight.html">Staff Oversight</a></li>
    					<li><a href="services/secondary-home.html">Secondary Home Arrangements</a></li>
    					<li><a href="services/event-planning.html">Event Planning and On-site Execution</a></li>
    					<li><a href="services/property-management.html">Property Management</a></li>
    				</ul>
    		
    			</li>
    			
    			<li>
    				<a href="contact.html">Contact</a>
    			</li>
    			
    			<li>
    				<a href="acknowledgments.html">Acknowledgments</a>
    			</li>
    		</ul>
    	</div>
    	
    	<div class="content" id="home">
    		
    	</div>
    	
    	<div class="lower">
    		<div class="left">
    			<p>Welcome!</p>		
    		</div>
    		
    		<div class="right">
    			<p>Bespoke Hospitality Group (BHG) is a hospitality management company offering a full range of customizable services
    			in Home and Estate Management, Housekeeping and Property Maintenance, Staff Oversight, Secondary Home Arrangements, 
    			Event Planning and On-site Execution, and Property Management.</p>		
    		</div>
    	
    	</div>	
    	
    	<div class="footer">
    		<p>Bespoke Hospitality Group &copy 2012 | <a href="privacy.html">Privacy Policy</a></p>
    	</div>
    	
    </body>
    </html>
    And this is the CSS
    Code:
    /********************GLOBAL PROPERTIES************************/
    body {
    	width: 930px;
    	margin-left: auto;
    	margin-right: auto;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 0.8125em;
    }
    
    img {
    	border: none;
    }
    
    /***********************DROPDOWN MENU**************************/
    .header {
    	margin-bottom: 10px;
    }
    
    .menu {
    	width: 100%;
    	height: 56px;
    	margin-bottom: 20px;
    	font-size: 0.8125em;
    	float: left;
    	background-color: #242021;
    }
    
    #nav {
    	position: relative;
    	top: -11px;
    	left: -40px;
    }
    
    .menu li {
    	list-style: none outside none;
    	float: left;
    	margin-right: 0px;
    	position: relative;
    	font-size: 15px;
    	line-height: 1.2307em;
    	text-transform: uppercase;
    	padding: 14px 20px 14px 19px;
    	background-color: #242021;
    }
    
    .menu li:hover {
    	background-color: #66bec8;
    }
    
    .menu a {
    	display: inline-block;
    	padding: 5px;
    	width: 100%;
    	outline: medium none;
    	text-decoration: none;
    	color: #fff;
    }
    
    .menu a:hover {
    	text-decoration: none;
    }
    
    .menu ul {
    	position: absolute;
    	left: -9999px;
    }
    .menu li:hover ul {
    	left: -40px;
    	top: 54px;
    }
    
    .dropdown a {
    	white-space: nowrap;
    }
    
    .dropdown li {
    	padding:0.5em;
    	width: 100%;
    	font-size: 12px;
    	z-index: 2;
    }
    
    /*************************MAIN BODY******************************/
    .content {
    	width: 100%;
    	height: 450px;
    	border-top: 1px solid white;
    	position: relative;
    	top: 70px;
    	z-index: 1;
    }
    
    /**********************BACKGROUND IMAGES*************************/
    #home {background-image: url('homeBG.JPG');}	/*default*/
    
    /*************************INDEX BOTTOM DIV************************/
    .lower {
    	width: 100%;
    	height: 90px;
    	background-color: #242021;
    	position: relative;
    	top: 70px;
    }
    
    .left {
    	width: 20%;
    	height: 100%;
    	float: left;
    	border-right: 2px solid white;
    }
    
    .left p {
    	color: #c8e4e8;
    	text-align: center;
    	font-size: 30px;
    }
    
    .right {
    	width: 77%;
    	float: left;
    	color: white;
    	padding-left: 20px;
    	padding-top: 6px;
    }
    
    /*************************GLOBAL FOOTER*****************************/
    .footer {
    	width: 100%;
    	height: 20px;
    	margin-top: 20px;
    	position: relative;
    	top: 70px;
    }
    
    .footer p {
    	position: relative;
    	top: -10px;
    	padding-left: 20px;
    	color: black;
    }
    
    .footer a {
    	color: black;
    	text-decoration: underline;
    }
    I need help. I can't figure out what's causing IE to display my page this way.

  • #2
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Fixed problem using clumsy <!--[if gte IE 7]> comment in header. Really wanted to avoid this but had no choice. When page first loads, it is still shifted left. After refresh or if I click on a link, everything is centered thereafter. Any ideas what's going on here.

  • #3
    New Coder
    Join Date
    Sep 2012
    Location
    Scottish Borders
    Posts
    36
    Thanks
    1
    Thanked 9 Times in 9 Posts
    Hi, you could make it a bit more stable by wrapping the page within a container division and then minimising the effect of the viewport in older versions of IE by removing any margin or padding.
    Code:
    body {font-family: Arial, Helvetica, sans-serif;font-size: 0.8125em;text-align:center;}
    *{margin:0;padding:0;border:0;}
    #wrapper{width:930px;margin:auto;overflow:auto;}
    The wrapper division opening tag comes immediately after the body opening tag and is closed immediately before the closing body tag. Since your text align is now centered by default you can add in the instruction to left align when required. ie
    Code:
    .right p{text-align:left;}
    Hope this guides you in the right direction. Jim
    Jims Way is following a strict but simple code

  • Users who have thanked jamaks for this post:

    ds_bespoke (10-17-2012)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •