Internet Explorer 7 vs firefox interpretation of CSS

F

Finessed

I have just started teaching myself html and css. I have recently purchased
FRONTPAGE.
I have tried to create a master css for my website using the div.header,
footer, left and content with ul tag for the header and footer
The problem is with the borders.
I have given borders (top and bottom) to the header and footer and a left
border to the content - but this does not reach the header when you view in
"preview" on FRONTPAGE even though it looks right in the "design" view.
When viewed in FIREFOX Browser it is correct i.e. as the design view.

ANY IDEAS - I am new to this so please keep it as simple as possible - I'm
still learning the language!
 
F

Finessed

This is the CSS and following is a page that uses this CSS
div.container
{
width: 104%; margin: -10px; border: 0px; line-height: 150%;
}
div.header
{
padding: 0px; background-color: #ffffe5; margin-bottom: -1px;
border-top-style: solid; border-top-color: #54889e; border-top-width: 1px;
border-bottom-style: solid; border-bottom-color: #54889e;
border-bottom-width: 2px;
clear: left;
}
div.footer
{
padding: 0px; background-color: #ffffe5; margin-bottom: 0px;
border-top-style: solid; border-top-color: #54889e; border-top-width: 2px;
border-bottom-style: solid; border-bottom-color: #54889e;
border-bottom-width: 1px;
clear: left;
}
h1.header
{
padding: 0px; margin-top: 20px; margin-left: 20px; font-family: vivaldi;
font-size: 36pt;
}


div.left
{
float: left; width: 80px; margin: 0px; padding: 0.3em; Background-color:
#ffffe5;
border-right-style: solid; border-right-color: #54889e; border-right-width:
2px;

}
div.content
{
background-color: white; margin-left: 80px; padding: 0.3em;

}
h2, h3, h4, h5
{
font-family: arial narrow; color: #445e86;
}
p
{
color: #445e86; font-family: arial narrow; margin-right: 17px; margin-left:
5px;
}

ul
{position: relative; top: 0px; width: 110%; padding: 0.5em; margin-left:
80px; list-style-type: none;}

li
{display: inline}
a:link
{color: #445e86; text-decoration: none;}
a:hover
{background: #fdffc2;}
a
{text-decoration: none; font-family: arial narrow; color: #445e86;
padding: 0.2em 0.3em; border: 0;}
hr
{color: #445e86; size: 2px; width: 100%;}

************************and this is a page using that CSS

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:eek:="urn:schemas-microsoft-com:eek:ffice:eek:ffice"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Finesse Designs 2</title>

<link rel="stylesheet" type="text/css"
href="../Copy%20of%20common%20layout%20for%20testing.css">

</head>

<body>
<div class="container">
<div class="header">
<h1 class="header">Finesse Designs</h1>
<hr style="position: absolute; top: 70px; width: 110%; margin-left: -80px" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#"">Herbal Cosmetics</a></li>
<li><a href="#">Art</a>
<li><a href="#">Flowers</a></li>
<li><a href="#">Jewellery</a></li>
<li><a href="#">Well Being</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

</div>

<div class="left">
<p align="center">This will contain further
<br>links</p></div>
<div class="content">
<div align="left">
<h2>This is where all the action is</h2>This is where all the action is
</div>
</div>

<div class="footer">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Delivery Information</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</div>

</div>

</body>

</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Unwanted line across top of pages; how to delete? 0
IE6 and 7 problems with css pseudo-frames 5
css and images 7
CSS ( ul li ul = Hidden) not working 0
CSS errors 2
CSS and Tables 3
CSS vs XML 5
Menu in CSS problems 9

Top