Hi again. This is my day I guess. Earlier, I decided to clean out the unneccessary styles on my sheet. Well, it sort of changed things a bit. In Mozilla, it looks nice and clean. In IE, there is space under the banner that I think has a lot to do with the adjoining navigation list.
Also, in the left margin with the client login and newletter registration. Again, in Mozilla, everything looks the way I want it to. But in IE, there is just entirely too much space between the word client login, the form and forgot your password. How can I get rid of that space.
Rather than try to explain, I'll just put the link to the page and css.
<!-- m --><a class="postlink" href="http://iwdtestsite.com/Premier/home2.htm">http://iwdtestsite.com/Premier/home2.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://iwdtestsite.com/Premier/index3.htm">http://iwdtestsite.com/Premier/index3.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://iwdtestsite.com/Premier/nav.css">http://iwdtestsite.com/Premier/nav.css</a><!-- m -->
Since I am hoping to complete this layout before the week is out, I know I'll be back, so I am asking for a lot of patience here.
Magikey.The first thing I see is your doctype isn't right so even FF is rendering in quirks mode. Also, check this out.
<style type="text/css">
<!--
#top {color: #1a46a0; bottom-bottom: #1a46a0 1px solid; border: 0; font-family: Arial, Verdana, Helvetica, sans-serif; vertical-align: top; font-size: 80%;}
#logo {float:left; border-bottom: 1px solid #1a46a0; padding: 0; margin: 0; vertical-align: top; width: 175px; background-color: #1e56a0;}
#nav {float:left; font-size: 83%; font-weight: bold; border-bottom: 1px solid #1a46a0;
background-color: #ece7aa; width: 110px; margin-top: .05em; }
#banner {float:left; border-bottom: 1px solid #1a46a0; background-image: url(banner/pvaa_people.jpg);
background-repeat: no-repeat; margin-right: -15em; height: 111px; width: 500px;}
-->
</style>
</head>
<body>
<div id="top">
<div id="logo"><img src=http://www.webdeveloper.com/forum/archive/index.php/"banner/pvaa_logo.gif" width="175" height="110"></div>
<div id="nav">
<ul>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Home</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Services</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">E-bookstore</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Clients</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Resources</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Media</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Affiliations</a></li>
</ul>
</div>
<div id="banner"> </div>
</div>
That's just a very quick de-tablization of your page top. There is a lot of excess goop in the css that I was too lazy to extract.OK Ray. I tried it your way and it was a total disaster in both Mozilla and IE.
I replaced the <table><tr><td> tags with <div> tags just as you suggested. I added {float: left} and any other changes you suggested in css. My banner disappeared completely, and the nav (between banner and logo) ended up beneath the logo.
I used the jigsaw css validator and the only warning I got is Line 0, font-family: use a generic font family.
I'm at my wits end. Everything is in order except the banner. What am I doing wrong?
<!-- m --><a class="postlink" href="http://iwdtestsite.com/Premier/index3.htm">http://iwdtestsite.com/Premier/index3.htm</a><!-- m -->
MagikeyYou didn't leave out all your other styles did you? All I did was come in after your styles were all included and over-rode those few. Anyway here's some things I found on index3
#nav ul {list-style: url(images/arrow_top.gif) inside none; margin:0 0 0 -1em; padding:1.5em; width: 12em; }
That crunches the height as far as it will go so most of your problem was there.
The trs on your first rules have no effect so #top, #logo, #banner.
Add a line-height:0; to your #logo or put the logo image into the background so you can control it better.
Also, in the left margin with the client login and newletter registration. Again, in Mozilla, everything looks the way I want it to. But in IE, there is just entirely too much space between the word client login, the form and forgot your password. How can I get rid of that space.
Rather than try to explain, I'll just put the link to the page and css.
<!-- m --><a class="postlink" href="http://iwdtestsite.com/Premier/home2.htm">http://iwdtestsite.com/Premier/home2.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://iwdtestsite.com/Premier/index3.htm">http://iwdtestsite.com/Premier/index3.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://iwdtestsite.com/Premier/nav.css">http://iwdtestsite.com/Premier/nav.css</a><!-- m -->
Since I am hoping to complete this layout before the week is out, I know I'll be back, so I am asking for a lot of patience here.
Magikey.The first thing I see is your doctype isn't right so even FF is rendering in quirks mode. Also, check this out.
<style type="text/css">
<!--
#top {color: #1a46a0; bottom-bottom: #1a46a0 1px solid; border: 0; font-family: Arial, Verdana, Helvetica, sans-serif; vertical-align: top; font-size: 80%;}
#logo {float:left; border-bottom: 1px solid #1a46a0; padding: 0; margin: 0; vertical-align: top; width: 175px; background-color: #1e56a0;}
#nav {float:left; font-size: 83%; font-weight: bold; border-bottom: 1px solid #1a46a0;
background-color: #ece7aa; width: 110px; margin-top: .05em; }
#banner {float:left; border-bottom: 1px solid #1a46a0; background-image: url(banner/pvaa_people.jpg);
background-repeat: no-repeat; margin-right: -15em; height: 111px; width: 500px;}
-->
</style>
</head>
<body>
<div id="top">
<div id="logo"><img src=http://www.webdeveloper.com/forum/archive/index.php/"banner/pvaa_logo.gif" width="175" height="110"></div>
<div id="nav">
<ul>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Home</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Services</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">E-bookstore</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Clients</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Resources</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Media</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/arrow2.gif" width="12" height="7"><a href="#">Affiliations</a></li>
</ul>
</div>
<div id="banner"> </div>
</div>
That's just a very quick de-tablization of your page top. There is a lot of excess goop in the css that I was too lazy to extract.OK Ray. I tried it your way and it was a total disaster in both Mozilla and IE.
I replaced the <table><tr><td> tags with <div> tags just as you suggested. I added {float: left} and any other changes you suggested in css. My banner disappeared completely, and the nav (between banner and logo) ended up beneath the logo.
I used the jigsaw css validator and the only warning I got is Line 0, font-family: use a generic font family.
I'm at my wits end. Everything is in order except the banner. What am I doing wrong?
<!-- m --><a class="postlink" href="http://iwdtestsite.com/Premier/index3.htm">http://iwdtestsite.com/Premier/index3.htm</a><!-- m -->
MagikeyYou didn't leave out all your other styles did you? All I did was come in after your styles were all included and over-rode those few. Anyway here's some things I found on index3
#nav ul {list-style: url(images/arrow_top.gif) inside none; margin:0 0 0 -1em; padding:1.5em; width: 12em; }
That crunches the height as far as it will go so most of your problem was there.
The trs on your first rules have no effect so #top, #logo, #banner.
Add a line-height:0; to your #logo or put the logo image into the background so you can control it better.