www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problem with HTML/CSS in older IE versions

  1. #1
    Join Date
    May 2010
    Posts
    2

    Problem with HTML/CSS in older IE versions

    Hi,
    I am a newbie and having trouble figuring out why a web page won't display correctly in IE 7 and IE 6. It works fine in Firefox and Chrome. It's probably something stupid, but I am completely missing it.

    Any help is greatly appreciated!
    Code:
    body
    	{
    	margin: 0 auto;
    	background-image: url("images/bkgdleaves2.jpg");
    	background-color: #714b26/*med brown*/;
    	font-size: 95%;
    	}
    		
    		a:link { color: #ffffff/*white*/;}
    		a:visited { color: #ffffff/*white*/;}
    		a:hover, a:active{color: #3d1e0a/*dark brown*/; background-color: clear;}	
    		
    		.hour:link {color:#3d1e0a/*dark brown*/; font-size:16px; text-decoration: underline; font-weight: bold}
    		.hour:visited {color:#3d1e0a/*dark brown*/; font-size:16px; text-decoration: underline; font-weight: bold}
    		.hour:hover {color:#3d1e0a/*dark brown*/; font-size:16px; text-decoration: underline; font-weight: bold}
    		.hour:active {color:#3d1e0a/*dark brown*/; font-size:16px; text-decoration: underline; font-weight: bold}
    	
    		.topofpage:link {color:#3d1e0a/*dark brown*/; font-size:12px; text-decoration: underline}
    		.topofpage:visited {color:#3d1e0a/*dark brown*/; font-size:12px; text-decoration: underline}
    		.topofpage:hover {color:#3d1e0a/*dark brown*/; font-size:12px; text-decoration: underline}
    		.topofpage:active {color:#3d1e0a/*dark brown*/; font-size:12px; text-decoration: underline}
    		
    		.location:link {color:#3d1e0a/*dark brown*/; font-size:14px; text-decoration: underline; font-weight: bold}
    		.location:visited {color:#3d1e0a/*dark brown*/; font-size:14px; text-decoration: underline; font-weight: bold}
    		.location:hover {color:#3d1e0a/*dark brown*/; font-size:14px; text-decoration: underline; font-weight: bold}
    		.location:active {color:#3d1e0a/*dark brown*/; font-size:14px; text-decoration: underline; font-weight: bold}
    		
    		.schedule:link {color:#3d1e0a/*dark brown*/; font-size:14px; text-decoration: underline; font-weight: bold}
    		.schedule:visited {color:#3d1e0a/*dark brown*/; font-size:14px; text-decoration: underline; font-weight: bold}
    		.schedule:hover {color:#3d1e0a/*dark brown*/; font-size:14px; text-decoration: underline; font-weight: bold}
    		.schedule:active {color:#3d1e0a/*dark brown*/; font-size:14px; text-decoration: underline; font-weight: bold}		
    		
    		.foot:link {color: #ffffff/*white*/;}
    		.foot:visited {color: #ffffff/*white*/;}
    		.foot:hover {color: #fde55f/*sun yellow*/; background-color: clear;}
    		.foot:active{color: #fde55f/*sun yellow*/; background-color: clear;}
    		
    	div.container
    	{	
    		margin: 0 auto;
    		height: 90%;
    		width: 90%;
    	}
    	
    	div.left
    		{
    		clear: left;
    		float: left;
    		width:153px;
    		}
    	
    	div.right
    		{
    		clear: right;
    		float: left;
    		width: 153px;
    		}
    		
    	div.content
    		{
    		float: left;
    		width: 60%;
    		height: 950px;
    		background-image: url("images/bkgdyellowtree_light.jpg");
    		background-color: #daaa2a/*med yellow*/;
    		font-family: bradley hand, georgia, times, "times new roman", serif;
    		font-size: 14px;
    		line-height: 150%;
    		}	
    
    		div.nav
    			{
    			width: 175px;
    			height: 800px;
    			margin-bottom: 10px;
    			background-color: clear;
    			font-family: bradley hand, georgia, times, "times new roman", serif;
    			font-size: 18px;
    			color: #fff/*white*/;
    			line-height: 110%;
    			}
    			
    			div.nav ul
    			{
    			list-style-type: none;
    			margin: 0;
    			padding: 5px;
    			}
    					
    		div.nav ul li {margin-top: 10px;}
    
    		.nav ul li a
    			{
    			display: block;
    			width: 150px;
    			padding: 10px 10px 0px 10px;
    			text-decoration: none;
    			color: #ffffff/*white*/;
    			}
    				
    		.nav ul li a:hover
    			{
    			color: #3d1e0a/*dark brown*/;
    			}	
    
    			#floater 
    				{
    				float: left;
    				padding-right: 10px;
    				width: 175px;
    				height: 450px;
    				}
    	div.main
    		{
    		padding-left: 10px;
    		width: 95%;
    		font-family: georgia, times, "times new roman", serif;
    		text-indent: 20px;
    		}			
    			
    		ol.inside-markers {list-style position: inside}
    		div.main ul 
    				{
    				list-style: url(images/leafbullet6.gif) outside square;
    				font-family: georgia, times, "times new roman", serif;
    				font-size: 14px;
    				text-indent: 0px;
    				padding-left: 10px;
    				}
    				
    	div.center
    		{
    		padding-top: 0px;
    		padding-left: 180px;
    		width: 600px;
    		font-family: georgia, times, "times new roman", serif;
    		text-indent: 20px;
    		}
    			
    		h1 
    			{	
    			color: #3d1e0a/*dark brown*/;
    			font-family: georgia, times, "times new roman", serif;
    			font-size: 22px;
    			text-align: center;
    			text-indent: 0px;
    			line-height: 110%;
    			}
    		
    		h2
    			{
    			color: #3d1e0a/*dark brown*/;
    			font-family: monotype corsiva;
    			font-size: 40px;
    			text-align: center;
    			}
    			
    		h3
    			{
    			color: #3d1e0a/*dark brown*/;
    			font-family: georgia, times, "times new roman", serif;
    			font-size: 15px;
    			font-weight: bold;
    			text-indent: 0px;
    			}
    			
    		h4
    			{	
    			color: #3d1e0a/*dark brown*/;
    			font-family: georgia, times, "times new roman", serif;
    			font-size: 22px;
    			text-align: center;
    			text-indent: 0px;
    			}
    		
    		#s1
    			{
    			text-align: center;
    			text-indent: 0px;
    			}
    			
    		#s2
    			{
    			font-weight: bold;
    			font-style: italic;
    			}	
    			
    		#s3
    			{
    			font-weight: bold;
    			}	
    			
    		#s4
    			{
    			text-indent: 0px;
    			}
    		
    		#s5
    			{
    			font-weight: bold;
    			text-indent: 0px;
    			}	
    
    		#s6
    			{
    			text-align: center;
    			font-weight: bold;
    			}	
    
    		#s7
    			{
    			text-indent: 500px;
    			}	
    
    		#s8
    			{
    			text-indent: 0px;
    			text-align: right;
    			}		
    
    		#s9
    			{
    			text-align: center;
    			font-weight: bold;
    			font-size: 16px;
    			}		
    			
    		#s10
    			{
    			font-style: italic;
    			}	
    
    		#s11
    			{
    			text-align: center;
    			text-indent: 0px;
    			font-weight: bold;
    			}			
    
    		#s12
    			{
    			font-size: 17px;
    			font-weight: bold;
    			text-align: center;
    			text-indent: 0px;		
    			}
    			
    		#p1
    			{
    			text-indent: 0px;
    			border-style: ridge;
    			border-color: #daaa2a;
    			border-width: 5px;
    			margin-left: 165px;
    			padding-left: 10px;
    			font-weight: bold;
    			}
    			
    	.floater 
    		{
            float: right;
            padding-left: 5px;
            width: 100px;
            height: 100px;
    		}	
    
    	.floater2
    		{
            float: left;
            padding-right: 10px;
            width: 100px;
            height: 100px;
    		}			
    
    	.floater3
    		{
            float: left;
            padding-right: 10px;
            width: 120px;
    		}
    
    	.floater4
    		{
            float: right;
            padding-right: 5px;
            width: 120px;
    		}		
    		
    	div#footer
    	{
    		clear: both;
    		padding: .5em 1em;
    		text-align: right;
    		font-family: georgia, serif; font-size: 12px;
    		color: #fde55f/*sun yellow*/;
    	}
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <!--Do not change anything in the header-->
    	<title>xxxx </title>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    	<meta name="description" content="xxxx" />
    	<meta name="keywords" content="xxxx" />
    	<link rel="stylesheet" type="text/css" href="blstyle_ie.css" />
    
    	
    </head>
    
    <body>
    	<div class="container">
    		<div class="left">
    		<img src="images/blwlbottomleft950.jpg">
    		</div>
    			<div class="content">
    			
    <!--This is the heading on the page-->			
    				<h2>Bellisima Living</h2>
    <!--This is the navbar, do not change anything-->				
    				<div class="nav" id="floater">
    					<ul>
    						<li><a href="index.html">Home</a></li>
    						<li><a href="about-bellisima-living.html">About Me</a></li>
    						<li><a href="green-living-workshops.html">Bellisima Green Living Workshops</a></li>
    						<li><a href="healthy-living-tips-wisdom-circles.html">Bellisima Green Wisdom Circles</a></li>
    						<li><a href="green-living-workshop-schedule.html">Schedule</a></li>
    						<li><a href="green-living-services.html">Other Services</a></li>
    						<li><a href="green-living-products.html">Products</a></li>
    						<li><a href="green-living-workshop-locations.html">Locations</a></li>
    						<li><a href="http://www.bellisimagoddess.com" target="_blank">My Blog</a></li>
    						<li><a href="contact-green-living.php">Contact</a></li>
    					</ul>	
    				</div>
    				
    <!--This is the main copy, each line is a paragraph.  Do no remove any HTML-->					
    				<div class="main">
    				<h1>Green Living - Bellisima Living</h1>
    				<p id="s1"><img src="images/leavesdouble4.gif"></p>
    				<p id="s12">Body, Mind & Spirit ~ Connect to a Healthier, Greener, More Beautiful Life!</p>
    				<p><span id="s3">"Bellisima"</span> means <span id="s2">very beautiful</span> in Italian - an empowered life filled with passion, authenticity, and respect for the interconnectedness of all life - including our planet.</p>
    				<p><img class="floater2" src="images/donna.jpg" width="96" height="96" alt="Donna">xxxx </p>
    				<p><a href="workshops.html"><img class="floater4" src="images/free_workshop_button.jpg" width="120" height="60" border="0" alt="Free Workshops" title="Free Workshops"></a> xxxxx</p>
    				<p><a href="schedule.html"><img class="floater3" src="images/check_schedule_button.jpg" width="120" height="60" border="0" alt="Check Schedule" title="Check Schedule"></a>xxxxx </p>
    				<p id="s1"><img src="images/leavesdouble4.gif"></p>
    								
    				</div>
    			</div>
    		<div class="right">
    		<img src="images/blwlbottomright950.jpg">
    		</div>
    	</div>
    	<div id="footer">
    		xxxx | xxxx
    </div>
    <body>
    </html>
    Last edited by Kor; 05-19-2010 at 05:06 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by dlayland View Post
    Hi,
    I am a newbie and having trouble figuring out why a web page won't display correctly in IE 7 and IE 6.
    And what do you mean by correctly? Should we guess? Can you isolate the problem, please? And can you post a link to a test page, not that huge code, as we can not load your elements using your relative links, can we?

  3. #3
    Join Date
    May 2010
    Posts
    2
    Sorry, here is a link:
    http://www.daniellelayland.com/stagi...ima/index.html

    In IE 7 and 6, the main copy shows up below the nav, which is floating. So I think it is something to do with the floating nav or the sizes of the page.

    It works fine in IE8, Firefox and Chrome.

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles