[RESOLVED] Display webpage in IE 6?
Hi,
I have created a web site which displays fine it IE 7 and fire fox. However, when I display the pages in IE the images are off center and the navigation bar gets minimized. How do i display the site across both versions of Internet Explorer?
The code I'm using in this site is:
Code:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arachnoid Web Services" />
<meta name="description" content="Corvette Veterans' Club of Australia" />
<meta name="keywords" content="Corvettes History War Navy Boats Ships Sailors Guns Fighting" />
<title>Australian Corvette Veterans' Club - Home</title>
<link rel="stylesheet" type="text/css" href="./css/corvette_style.css" />
</head>
<body>
<div class="container">
<div class="banner">
<img src="./images/logo.gif" width="640" height="120" align="middle" alt="Corvette Veterans' Club" /></div>
<br /><br /><br /><br />
<!-- Left navigation bar -->
<div class="navigation">
<br /><img src="./images/compass.jpg" width="60" height="40" alt="A Compass" />
<br />Home
<br /><img src="./images/compass.jpg" width="60" height="40" alt="A Compass" />
<br /><a href="./html/mission.html" title = "Mission Statement">Mission Statement</a>
<br /><img src="./images/compass.jpg" width="60" height="40" alt="A Compass" />
<br /><a href="./html/news.html" title = "News">News</a>
<br /><img src="./images/compass.jpg" width="60" height="40" alt="A Compass" />
<br /><a href="./html/events.html" title = "Upcoming Events">Upcoming Events</a>
<br /><img src="./images/compass.jpg" width="60" height="40" alt="A Compass" />
<br /><a href="./html/join_us.html" title = "Join Us">Join Us</a>
<br /><img src="./images/compass.jpg" width="60" height="40" alt="A Compass" />
<br /><a href="./html/forum.html" title = "ACVC Forum">Forum</a>
<br /><img src="./images/compass.jpg" width="60" height="40" alt="A Compass" />
<br />
<a href="./html/history.html" title = "History">History</a> <br />
<img src="./images/compass.jpg" width="60" height="40" alt="A Compass" />
<br /><a href="./html/site.html" title = "Site Map">Site Map</a>
<br /><img src="./images/compass.jpg" width="60" height="40" alt="A Compass" />
<br /><a href="./html/contact.html" title="Contact Us">Contact Us</a>
</div>
<!-- Main body of the page -->
<div id="main" class="column">
<!-- Breadcrumbs -->
<div class="crumb">
<p>Location: Home</p>
</div>
<!-- End Breadcrumbs -->
<h2>Welcome</h2>
<p class = "first">Welcome to The Corvette Veterans' Club of Australia!</p>
<img src="./images/wollongong2.jpg" width="180" height="120" align="right" alt="A Corvette" />
<p class = "first">The Corvette Veterans' Club was established for <br /> the veterans who sailed
on the Corvettes and their families to learn
about the history of the naval boats known as
the Corvettes.</p>
<p class = "first">This website will also list information about
get-togethers for the veterans and their
families.</p>
<hr />
</div>
<!-- Page Footer Navigation -->
<div class="bottomnav"> Home | <a href="./html/copyright.html" title = "Copyright Disclaimer">Copyright Disclaimer</a> | <a href="./html/site.html" title = "Site Map">Site Map</a> |
<a href="mailto:[email protected]?subject=Corvette Veterans' Club Website Query" title="Contact Web Administrator">Web Administrator</a></div>
</div>
</body>
</html>
I am comparing it to:
Code:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arachnoid Web Services" />
<meta name="description" content="Joe's online Fruit and Vegetable shop" />
<meta name="keywords" content="Fruit, Vegetables, Veg" />
<title>Joe's Fruit Shop - Home</title>
<link rel="stylesheet" type="text/css" href="./css/joe's style.css" />
</head>
<body>
<div id="container">
<div id="banner">
<img src="./images/banner.gif" width="640" height="120" align="middle" alt="Joe's Fruit Shop" /><br /></div>
<div id="navigation"> <br /> <br /> <br />
<br /><img src="./images/peas.gif" width="22" height="40" align="middle" alt="Peas in a pod" />
<br />Home
<br /><img src="./images/peas.gif" width="22" height="40" alt="Peas in a pod" />
<br /><a href="./html/produce.html" title = "Joe's Produce">Produce</a>
<br /><img src="./images/peas.gif" width="22" height="40" alt="Peas in a pod" />
<br /><a href="./html/recipes.html" title = "Joe's Recipes">Recipes</a>
<br /><img src="./images/peas.gif" width="22" height="40" alt="Peas in a pod" />
<br /><a href="./html/staff.html" title = "Joe's Staff">Staff</a>
<br /><img src="./images/peas.gif" width="22" height="40" alt="Peas in a pod" />
<br /><a href="./html/history.html" title = "Joe's History">History</a>
<br /><img src="./images/peas.gif" width="22" height="40" alt="Peas in a pod" />
<br /><a href="./html/search.html" title = "Search Joe's">Search</a>
<br /><img src="./images/peas.gif" width="22" height="40" alt="Peas in a pod" />
<br /><a href="mailto:[email protected]" title="Email Joes">Email Joe's</a>
<br />
</div>
<div id="main">
<br />
<br />
<br />
<br />
<h2>Joe's Fruit Shop</h2>
<p> Too see the normal price of a product click the produce name to be taken to the product listing on the produce page.</p>
<table border="0" cellpadding="0" cellspacing="0" width="890px" align="center" summary="Joe's fruit specials">
<tr>
<th colspan="1"><h3>Specials</h3></th>
<th colspan="2"><h3>Reduced Price </h3></th>
</tr> <tr>
<td width="250px"><a href="./html/produce.html#asnp">Alfalfa Sprouts</a></td>
<td width="250px" align="center">$1.00 per punnet </td>
<td width="250px"><img src="./images/alfalfa_sprouts.jpg" width="111" height="100" alt = "alfalfa sprouts" /></td>
</tr>
<tr>
<td width="250px"><a href="./html/produce.html#bnp">Bananas</a></td>
<td width="250px" align="center">$8.99 per kg</td>
<td width="250px"><img src="./images/bananas.jpg" width="111" height="100" alt = "bananas" /></td>
</tr>
<tr>
<td width="250px"><a href="./html/produce.html#gnp">Garlic</a></td>
<td width="250px" align="center">$3.00 per bag</td>
<td width="250px"><img src="./images/garlic.jpg" width="111" height="100" alt = "garlic" /></td>
</tr>
</table>
<p>Product available at: <br /> Joe's Fuit Shop<br /> 55 Main Road<br /> Anytown 2999</p>
<p>Phone: 9555-9876 To order produce please ring: 1800 Joes Fruit
(that's 1800-563-378).</p>
<hr />
</div>
<div id="bottomnav">Home | <a href="./html/produce.html">Produce</a> | <a href="./html/recipes.html">Recipes</a> |
<a href="./html/staff.html">Staff </a> | <a href="./html/history.html">History</a> | <a href="./html/search.html">Search</a> | <a href="mailto:[email protected]?subject=Joe's Website Query" title="Contact Web Administrator">Web Administrator</a></div>
</div>
</body>
</html>
Which, is code that displays correctly in all the browsers mentioned above.
I have uploaded the site so you can see what I mean:
http://www.freewebs.com/astafeweb/Co...lub/index.html
Thanks,
Nightwalker
Re: Display webpage in IE 6?
Which navigation bar are you talking about? I'm looking at it in IE 6 but aside from a few gaps on the page, I don't see anything minimized when compared to Firefox.
Re: Display webpage in IE 6?
Quote:
Originally Posted by mendhak
Which navigation bar are you talking about? I'm looking at it in IE 6 but aside from a few gaps on the page, I don't see anything minimized when compared to Firefox.
It is the side navigation bar sorry! Look what happens when you move the mouse pointer over the links across the bottom (centered links) of the page.
Edit:
Here is what happens in IE6:
http://img.photobucket.com/albums/v328/Nighty83/IE6.gif
and
Here is how it is suppose to work.
http://img.photobucket.com/albums/v328/Nighty83/IE7.gif
Re: Display webpage in IE 6?
I have added the following code in the css file:
Code:
.bottomnav
{
border-top: 1px solid #0066FF;
border-bottom: 1px solid #0066FF;
clear: both; <---Added this
margin-left: 190px;
margin-right: 70px;
width: 640px;
text-align: left;
}
That works! However, I'm unsure if the result is acceptable see the link above.
1 Attachment(s)
Re: Display webpage in IE 6?
Maybe I'm being thick here.
Screenshot attached. Looks fine.
Re: Display webpage in IE 6?
Quote:
Originally Posted by mendhak
Maybe I'm being thick here.
Screenshot attached. Looks fine.
Yes, that's after I applied the code I posted above! :)
