[css-d] Logo drops down in IE6&7

[Emily Songster]

Hi,

I'm very sorry about my prior post with attachments. I did read the posting 
guidelines, but it was a while ago, so I forgot about the no attachments part. 
Please have mercy on me and help me if you have some time.

ISSUE#1
The logo is supposed to be flush top, along with the main navigation. But it 
drops down below the navigation in IE6&7. It works fine in Safari and Firefox.

ISSUE#2
Random(?) white gaps in the bottoms of the second & third columns of the 
subpages, showing up only in IE6&7 and Safari. It works fine in Firefox.


The site is located at: http://www.emspacedesign.com/index.html and the CSS is 
below.

Thanks in advance for your help!

Take care,
Emily Songster


--------------------------------------------
CSS FILE FOR HOME PAGE:
--------------------------------------------

@charset "UTF-8";

* {
padding: 0;
margin: 0;
}

#container { 
width: 780px; 
background-color: #fff;
margin: 2% auto 0 auto; 
text-align: left; 
}

#mainNav ul li {
float: right;
list-style-type: none;
display: inline;
}

#mainNav img {
border: 0;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
text-align: center; 
background-color: #999;
}

#logo { 
background-color: #fff; 
padding: 0 0 10px 85px;
margin: 0;
width: 695px;
background-color: #fff;
} 

#logo img { 
border: 0;
} 

#logo h1 { 
margin: 0;
padding: 0;
} 

#header {
float: left;
display: inline;
width: 695px;
margin: 0px 0px 0px 85px;
background-color: #666;
height: 40px;
background-image: url(images/rounded_corners.gif);
background-position: top right;
background-repeat: no-repeat;
}

#columnOne {  /* Left Sidebar */
float: left; 
display: inline;
width: 85px; 
background-color: #fff;
background-image: url(images/spacer_white.gif);
background-position: top center;
background-repeat: repeat-y;
}

#columnOne h2 {  /* Left Sidebar */
margin: 0;
padding: 0;
}

#columnTwo {  /* Main Content */
float: left;
display: inline;
padding: 0 40px 0 40px;
margin: 0;
width: 480px;
height: 45em;
background-color: #333;
background-image: url(images/spacer_666333666.gif);
background-position: top center;
background-repeat: repeat-y;
}

#TopColumnThree {  /* Top of Right Sidebar */
float: left;
display: inline;
width: 135px;
height: 16px;
padding: 0;
margin: 0;
}

#columnThree {  /* Right Sidebar */
float: right;
display: inline;
background-color: #666;
width: 125px;
height: 43.4em;
margin: 0 0 0 10px;
padding: 0; 
background-image: url(images/metalTypeTop.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}

#columnThree img {
padding: 0;
margin: 0;
}

#columnThree p {
font-family: arial, helvetica, sans-serif;
font-size: 1.1em;
line-height: 1.1em;
font-weight: normal;
white-space: normal;
padding: 10px 5px 0 15px;
}

#columnThree a {
text-decoration: none;
color: #ccc;
}

#columnThree a:link {
color: #ccc;
}

#columnThree a:hover {
color: #999;
}

#columnThree a:active {
color: #f60;
}

#bottomAnchor { 
width: 695px;
height: 40px;
clear: both;
background-color: #666;
margin: 0 0 0 85px;
background-image: url(images/metalTypeBot.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}

#footer { 
width: 778px;
height: 20px;
clear: both;
background-color: #333;
border: 1px solid #333;
vertical-align: bottom;
}

#footer p { 
font-family: "Arial Narrow", arial, helvetica, sans-serif;
font-size: 10px;
line-height: 1.3em;
text-align: left;
color: #ccc;
padding-left: 5px;
padding-top: 5px;
float: left;
}

#easterEgg a { /* unvisited link */
float: right;
display: inline;
font-family: arial, helvetica, sans-serif;
font-size: 1.1em;
line-height: 1.1em;
color: #f60;
font-weight: bold;
text-decoration: none;
margin: -16px 7px 0 0;
border: 1px solid #333;
}

#easterEgg a:link {
color: #f60;
}

#easterEgg a:hover {
color: #ccc;
}

#easterEgg a:active {
color: #f96;
}



-------------------------------------------
CSS FILE FOR SUBPAGES:
-------------------------------------------

@charset "UTF-8";

* {
padding: 0;
margin: 0;
}

#container { 
width: 780px;  /* using 20px less than a full 800px width allows for browser 
chrome and avoids a horizontal scroll bar */
background-color: #fff;
margin: 2% auto 0 auto; /* the auto margins (in conjunction with a width) 
center the page */
text-align: left; /* this overrides the text-align: center on the body element. 
*/
}

#mainNav ul li {
float: right;
list-style-type: none;
display: inline;
}

#mainNav img {
border: 0;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
text-align: center; /* this centers the container in IE 5* browsers. The text 
is then set to the left aligned default in the #container selector */
background-color: #999;
}

#logo { 
background-color: #fff; 
padding: 0 0 10px 85px;
width: 695px;
background-color: #fff;
} 

#logo img { 
border: 0;
} 

#header {
float: left;
display: inline;
width: 695px;
margin: 0px 0px 0px 85px;
background-color: #666;
height: 40px;
background-image: url(images/rounded_corners.gif);
background-position: top right;
background-repeat: no-repeat;
}

#columnOne {  /* Left Sidebar */
float: left; /* since this element is floated, a width must be given */
display: inline;
width: 85px; /* the actual width of this div, in standards-compliant browsers, 
or standards mode in Internet Explorer will include the padding and border in 
addition to the width */
background-color: #fff; /* the background color will be displayed for the 
length of the content in the column, but no further */
background-image: url(images/spacer_white.gif);
background-position: top center;
background-repeat: repeat-y;
}

#columnTwo {  /* Main Content */
float: left;
display: inline;
padding: 15px 55px 25px 55px;
width: 450px;
background-color: #333; /* the background color will be displayed for the 
length of the content in the column, but no further */
background-image: url(images/spacer_666333666.gif);
background-position: top center;
background-repeat: repeat-y;
}

#columnTwo h4 {  /* Main Content */
font-family: arial, helvetica, sans-serif;
font-size: 1.8em;
line-height: 1.6em;
font-weight: bold;
text-decoration: none;
color: #f60;
} 

#columnTwo p {  /* Main Content */
font-family: arial, helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.3em;
font-weight: normal;
text-decoration: none;
color: #ccc;
} 

#columnTwo a {  /* Main Content */
font-family: arial, helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.3em;
font-weight: normal;
text-decoration: none;
color: #fc9;
}

#columnTwo a:hover {  /* Main Content */
color: #f60;
} 

#columnTwo ul {  /* Main Content */
font-family: arial, helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.3em;
font-weight: normal;
text-decoration: none;
list-style-type: square;
list-style-position: inside;
text-indent: 20px;
color: #ccc;
} 

#columnTwo #indent {  /* Main Content */
font-family: arial, helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.3em;
font-weight: normal;
text-decoration: none;
text-indent: 32px;
color: #ccc;
}

#columnTwo .strong {  /* Main Content */
color: #fff;
}

#columnTwo .quote {  /* Main Content */
font-style: italic;
text-align: right;
}

#columnTwo .formFields {  /* Main Content */
vertical-align: middle;
font-family: "Courier New", Courier, monospace;
font-size: 1em;
line-height: 1.2em;
font-weight: bold;
color: #f60;
}

#TopColumnThree {  /* Top of Right Sidebar */
float: left;
display: inline;
width: 135px;
height: 16px;
}

#columnThree {  /* Right Sidebar */
float: right;
display: inline;
background-color: #666;
width: 125px;
margin: 0 0 0 10px;
background-image: url(images/metalTypeTop.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}

#columnThree img {
padding: 0 0 0 0; /* padding keeps the content of the div away from the edges */
}

#columnThree p {
font-family: arial, helvetica, sans-serif;
font-size: 1.1em;
line-height: 1.1em;
font-weight: normal;
white-space: normal;
padding: 10px 5px 0 15px; /* padding keeps the content of the div away from the 
edges */
}

#columnThree a {
text-decoration: none;
font-style: normal;
color: #ccc;
}

#columnThree a:link {
color: #ccc;
}

#columnThree a:visited {
font-style: normal;
}

#columnThree a:hover {
color: #999;
}

#columnThree a:active {
color: #f60;
}

#bottomAnchor { 
width: 695px;
height: 40px;
clear: both;
background-color: #666;
margin: 0 0 0 85px;
background-image: url(images/metalTypeBot.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}

#footer { 
width: 778px;
height: 20px;
clear: both;
background-color: #333;
border: 1px solid #333;
vertical-align: bottom;
}

#footer p { 
float: right;
display: inline;
font-family: "Arial Narrow", arial, helvetica, sans-serif;
font-size: 10px;
line-height: 1.3em;
text-align: right;
color: #ccc;
padding-right: 5px;
padding-top: 5px;
}



--------------------------------------------------------
CSS FILE FOR PORTFOLIO PAGES:
--------------------------------------------------------

@charset "UTF-8";

* {
padding: 0;
margin: 0;
}

#container { 
width: 780px;  /* using 20px less than a full 800px width allows for browser 
chrome and avoids a horizontal scroll bar */
background-color: #fff;
margin: 2% auto 0 auto; /* the auto margins (in conjunction with a width) 
center the page */
text-align: left; /* this overrides the text-align: center on the body element. 
*/
}

#mainNav ul li {
float: right;
display: inline;
list-style-type: none;
}

#mainNav img {
border: 0;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
text-align: center; /* this centers the container in IE 5* browsers. The text 
is then set to the left aligned default in the #container selector */
background-color: #999;
}

#logo { 
background-color: #fff; 
padding: 0 0 10px 85px;
width: 695px;
background-color: #fff;
} 

#logo img { 
border: 0;
} 

#header {
float: left;
display: inline;
width: 695px;
margin: 0px 0px 0px 85px;
background-color: #666;
height: 40px;
background-image: url(images/rounded_corners.gif);
background-position: top right;
background-repeat: no-repeat;
}

#columnOne {  /* Left Sidebar */
float: left; /* since this element is floated, a width must be given */
display: inline;
width: 85px; /* the actual width of this div, in standards-compliant browsers, 
or standards mode in Internet Explorer will include the padding and border in 
addition to the width */
background-color: #fff; /* the background color will be displayed for the 
length of the content in the column, but no further */
background-image: url(images/spacer_white.gif);
background-position: top center;
background-repeat: repeat-y;
}

#columnTwo {  /* Main Content */
float: left;
display: inline;
padding: 0 40px 0 40px;
width: 480px;
background-image: url(images/spacer_666333666.gif);
background-position: top center;
background-repeat: repeat-y;
}
#columnTwo #thumbs {
background-color: #fff;
}

#columnTwo #thumbs img {
border: 1px solid #333;
}

#columnTwo #thumbs .blankThumb img {
border: 0;
}

#columnTwo #thumbs .spacer {
font-family: arial, helvetica, sans-serif;
font-size: 75%;
line-height: 75%;
}

#columnTwo #thumbs .captions a {
font-family: arial, helvetica, sans-serif;
font-size: 0.9em;
line-height: 1.2em;
font-weight: normal;
color: #333;
text-align: left;
max-width: 100px;
vertical-align: top;
text-decoration: none;
}

#TopColumnThree {  /* Top of Right Sidebar */
float: left;
display: inline;
width: 135px;
height: 16px;
}

#columnThree {  /* Right Sidebar */
float: right;
display: inline;
background-color: #666;
width: 125px;
margin: 0 0 0 10px;
background-image: url(images/metalTypeTop.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}

#columnThree img {
padding: 0 0 0 0; /* padding keeps the content of the div away from the edges */
}

#columnThree p {
font-family: arial, helvetica, sans-serif;
font-size: 1.1em;
line-height: 1.1em;
font-weight: normal;
white-space: normal;
padding: 10px 5px 0 15px; /* padding keeps the content of the div away from the 
edges */
}

#columnThree a {
text-decoration: none;
font-style: normal;
color: #ccc;
}

#columnThree a:link {
color: #ccc;
}

#columnThree a:visited {
font-style: normal;
}

#columnThree a:hover {
color: #999;
}

#columnThree a:active {
color: #f60;
}

#bottomAnchor { 
width: 695px;
height: 40px;
clear: both;
background-color: #666;
margin: 0 0 0 85px;
background-image: url(images/metalTypeBot.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}

#footer { 
width: 778px;
height: 20px;
clear: both;
background-color: #333;
border: 1px solid #333;
vertical-align: bottom;
}

#footer p { 
float: right;
display: inline;
font-family: "Arial Narrow", arial, helvetica, sans-serif;
font-size: 10px;
line-height: 1.3em;
text-align: right;
color: #ccc;
padding-right: 5px;
padding-top: 5px;
}



      
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/