I'm ripping my hair out here. I've got a design set out and it works fine in Firefox. But when it comes to Internet Explorer the design is all messed up.
This is what it looks like in FF.
Firefox layout
And this is what it looks like in IE.
Internet Explorer
Also I've got a drop down menu this looks like this when the user hovers over the link.
Click here. But I can't get it working in IE.
HTML
HTML Code:
<html>
<head>
<title>A1 Sparkles</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div id="container">
<div id="header"></div>
<div id="navigation">
<ul>
<li><a href="index1.php">Home</a></li>
<li><a href="about.php">About Us</a>
<ul>
<li><a href="about.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</li>
<li><a href="balloonsmain.php">Balloons</a>
<ul>
<li><a href="balloons.php?id=1">Party Balloons</a></li><li><a href="balloons.php?id=2">Wedding Balloons</a></li><li><a href="balloons.php?id=3">Birthday Balloons</a></li><li><a href="balloons.php?id=4">Balloons - Special Occasions</a></li> </ul>
</li>
<li><a href="cakesmain.php">Cakes</a>
<ul>
<li><a href="cakes.php?id=5">Wedding Cakes</a></li><li><a href="cakes.php?id=6">Birthday Cakes</a></li><li><a href="cakes.php?id=7">Cakes - Special Occasions</a></li> </ul>
</li>
<li><a href="flowersmain.php">Flowers</a>
<ul>
<li><a href="flowers.php?id=8">Wedding Flowers</a></li><li><a href="flowers.php?id=9">Birthday Flowers</a></li><li><a href="flowers.php?id=10">Flowers - Special Occasions</a></li> </ul>
</li>
<li><a href="contact.php">Contact</a>
</li>
</ul>
</div>
<div id="content">
<div id="main">
<h1>Welcome to A1 Sparkles</h1>
<p>We are the premier providers of Balloons, Cakes and Flowers. Our goal is to provide you the very best quality and price where possible, our quality control is of the highest standards and our personal touch makes us all the different, we are among the best and aim to stay that way. We like to provide you with piece of mind, allowing your event to be as stress free as possible which is of paramount importance.</p>
<p><strong>Services available</strong>
<br>Celebration/wedding cakes
<br>Fresh/luxury silk flowers
<br>Balloons
<br>Personalised foil Balloons
<br>Wedding bouquets
<br>Gift wrapping service
<br>Table dressing service
<br>Favours
<br>Personalised ribbons
</p>
<p>Our company is based in Walsall in the West Midlands and you can contact us on 01922 746596 or 07722 612651</p>
<p>Monday - Saturday from 9am - 5pm (Free local consultations may be arranged upon request).</p>
<p>Please feel free to browse this site, should you have any questions about any of our products or services or simply need more information and want to contact us, click on the contact button and mail us your questions.</p>
<p>Thank you for visiting and we look forward to assisting you with our forth coming event.</p>
</div>
<div id="gal">
<h4>Our products</h4>
<p>Below is just a sample of our work. If you would like to see more of our work, click on the relevent sections above.</p>
<a href="#" onClick="window.open('images/3tier20birthday.jpg', 'WindowC', 'width=650, height=500,scrollbars=yes');"><img src="images/3tier20birthday.jpg" id="imggal"></a>
<a href="#" onClick="window.open('images/S1030357.JPG', 'WindowC', 'width=650, height=500,scrollbars=yes');"><img src="images/S1030357.JPG" id="imggal"></a>
<a href="#" onClick="window.open('images/kim.JPG', 'WindowC', 'width=650, height=500,scrollbars=yes');"><img src="images/kim.JPG" id="imggal"></a>
</div>
<div id="footer">
© Copyright 2009 A1 Sparkles
</div>
</div>
</div>
</center>
</body>
</html>
CSS
HTML Code:
body
{
background-color: #c1ecf4;
font-family: Arial, Verdana;
}
#container
{
width: 985px;
}
#header
{
background-image: url('images/header2.jpg');
height: 195px;
width: 985px;
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
}
#navigation
{
height: 31px;
background-color: #65b2df;
width: 985px;
border: 1px solid;
}
#content
{
width: 975px;
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
background-color: #6BBDEC;
padding: 5px;
position:absolute;
z-index:-1;
}
#main
{
background-color: #FFFFFF;
float: left;
width: 680px;
height: auto;
border: 1px solid;
background-image: url('images/background.jpg');
padding: 10px;
}
#gal
{
background-color: #FFFFFF;
float: right;
width: 210px;
height: auto;
border: 1px solid;
font-size: 15px;
padding: 10px;
}
#footer
{
clear: both;
position: bottom;
}
#img
{
border: 0px;
height: 190px;
width: 220px;
}
#imggal
{
border: 0px;
height: 140px;
width: 164px;
}
ul
{
font-family: Arial, Verdana;
font-size: 17px;
margin: 0;
padding: 0;
list-style: none;
}
ul li
{
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 54px 5px 54px;
background: #01a2ff;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #008ad9; }
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
font-size: 11px;
}
li:hover a { background: #008ad9; }
li:hover li a:hover { background: #1AABFF; }
h1
{
font-size: 20px;
color: #8a1616;
}
h4
{
color: #8a1616;
}
These two problems are the only ones I can't fix, so if anyone can point me in the right direction I will be grateful.
Managed to get the layout formatted correctly now.
