website layout not the same in both firefox and IE

smjack · Joined: 16 Mar 2008 Posts: 7

Hello,

I just learned CSS so I am very new at this! I created this site using my MAC and testing it in Firefox. I did everything in text edit, so it is purely code. Once I was done, I validated the HTML using that W3 validator website and it found a few errors. I used the "tidy" code it gave me, tested it again and it said it passed, and found no errors......I also validated the CSS and it passed with no errors.

But when i view the site on IE the layout is messed up. Mainly the logo which appears on the bottom of the page, on top of the footer, is hidden by the footer (not sure why) and the disclaimer text at the bottom is overflowing outside the footer DIV.

Additionally, when you roll over the menu items on the top, it moves the whole menu around. I would greatly appreciate any advice or help anyone can give me. Thank you!

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="eng" xml:lang="eng">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Our Practices - Family Law - Criminal Defense - Civil Litigation</title>

<style type="text/css">
/*<![CDATA[*/

body {
width: 850px;
margin: 0; padding: 0;
font: small verdana, sans-serif;
}

a{
text-decoration: none;
}

a img {
border:0;
}

p {
margin: 0 0 1em;
}

#maincontainer {
margin: 25px;
width: 850px;
}

#topsection {
background: url(media/pinkbgover.gif);
padding-top: 20px;
height: 50px;
width: 100%;
}

#menu a {
color: #660000;
}

#menu {
margin: 0 11% 0 11%;
float: left;
margin-top: .25em;
}

#submenu {
margin-left: 15em;
padding-top: 1em;
margin-top: .5em;
}

#submenu li {
font-size: .8em;

}

#menu li {
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
margin-top: 20px;
border-right: 1px solid #660000;
text-decoration: none;
letter-spacing: 0.1em;

}

#menu li a:hover{
color: red;
font-style: italic;
}

#menu li.last {
border-right:0;
}

#maincontent {
height: 350px;
width: 100%;
padding-top: 15px;
padding-bottom: 45px;
}

#maincontent a {
color: #660000;
text-decoration: underline;
}

#text {
color: #660000;
font-size: 1em;
text-align: justify;
letter-spacing: 0.05em;
float: right;
padding-right: 5px;
padding-left: 25px;
margin-right: 65px;
width: 500px;
margin-top: 40px;
overflow: auto;
height: 300px;
}

#image {
float: right;
width: 200px;
padding-top: 40px;
}

#logo {
font-family: garamound, georgia, serif;
font-variant: small-caps;
font-size: 3em;
text-align: center;
color: #660000;
margin-bottom: 0px;
height: 50px;
}

#footer {
background: url(media/pinkbgfooter.gif);
width: 100%; height: 70px;
padding-bottom: 20px;
margin-top: -40px;
}

#footer h1 {
color: #660000;
text-align: center;
letter-spacing: .5em;
font-size: 11px;
font-weight: normal;
padding-top: 30px;
}

#footer p {
color: #660000;
text-align: justify;
font-size: .75em;
margin: 10px 10px 0 10px
}

/*]]>*/
</style>
</head>

quartzy · Joined: 26 Dec 2007 Posts: 405

I am not very experienced in CSS myself, but I dont think you're divs match up. A tip is to place a comment on each end div for what is ends for.
Like <div id="footer">
Text
</div>--->for footer.
You may find that by doing this youre divs will be corrected.

Straystudio · Joined: 14 Apr 2008 Posts: 261 Location: Nord Italy

I have seen nothing, still; tray changing declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

into:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Let Us know ...

smjack · Joined: 16 Mar 2008 Posts: 7

smjack · Joined: 16 Mar 2008 Posts: 7

quartzy · Joined: 26 Dec 2007 Posts: 405

Had a look at your site and whilst this will not help you, is it right to have two <style type=text/css></style> on one page? Which is what you have, try removing one of them see if it helps.

smjack · Joined: 16 Mar 2008 Posts: 7

sticks464 · Joined: 31 Dec 2006 Posts: 1179

This should work for you in IE7 and FF. It will need more work for Opera, Safari and IE6.

sticks464 · Joined: 31 Dec 2006 Posts: 1179

This will work in all modern browsers, however IE5.5 and 6 do not like the logo png. You might consider changing it to a jpg.

smjack · Joined: 16 Mar 2008 Posts: 7

Sticks- thank you so much for your reply and time. Initially, both codes work great in both. However, I need the logo on the bottom to be right on top of the footer. When I change the CSS to do this, the logo is once again hidden by white space from the footer and the text is not in alignment. I have attached some screen shots to show you what I would like it to look like, and what it looks like to me in IE.

sticks464 · Joined: 31 Dec 2006 Posts: 1179

Initally what the cause in IE for the logo to be hidden was the negative margin on the footer. Ok, change these in the css

smjack · Joined: 16 Mar 2008 Posts: 7