Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

I am having a problem with having margins display correctly in IE7,
Firefox and Safari. I am not sure if it is the "double margin error"
or something else. Any help would be appreciated. The file tabs at the
top content area should be flush left and the light blue frame should
line up under the logo graphic. Looks great in Safari and Firefox but
I can't get it to line up in IE7.

http://www.thinairdigital.com/tdi

Any help would be greatly appreciated.

CSS STYLES
#main{

    width:770px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;

}

.header{

    height: 75px;

}

/* .header img{

    float:left;

}*/

.header p{
    padding-top: 80px;
}

.headerStyle {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
}

#logo{
    padding-top: 12px;
    vertical-align: middle;
}

.forms{

    padding-top: 44px;

}

input{

    border-color: #3d759f;
    border-width: 1px;
    padding: 2px;

}

textarea{

    border-color: #3d759f;
    border-width: 1px;
    padding: 2px;

}

label { vertical-align: top; }

.navtabs{

    text-align: center;

    padding: 0;
    padding-top: 20px;
    padding-bottom: 25px;
    margin: 0px;
    margin-bottom: 22px;
    margin-left: -8px;

    font-family: "Verdana";
    font-size: 14px;

}

.navtabs li {

    width: 131px;

    display: inline;
    float: left;

    padding: 10px;
    padding-left: 0;

    color: #002949;

    background: no-repeat top right;
    background-image: url(/images/tabSolid.png);
}

.navtabs li a {

    font-weight: bold;
    text-decoration: none;
    color: #002949;
}

.footer{

    color: white;
    font-size: 12px;
    text-align: center;

}

.support{

    float: right;
    font-size: 12px;
    vertical-align: bottom;

}

#mainContent{

    color: #666666;

}

.login{

    text-align: right;
    vertical-align: top;
    color: #666666;
    font-family: "Verdana";
    font-size: 11px;
    float: left;
    width: 240px;
    padding-top: 10px;
    padding-left: 10px;

}

.login h1{

    text-align: left;
    color: #002949;
    font-size: 12px;
    line-height: 30px;
    text-decoration: none;
    text-indent: 14px;

}

.login h2{
    text-align: left;
    color: #002949;
    font-family: "Verdana";
    font-size: 10px;
    float: left;
    text-indent: 14px;
    font-weight: normal;
    text-decoration: underline;

}

.leftInfo{
    text-align: left;
    vertical-align: top;
    color: #666666;
    font-family: "Verdana";
    font-size: 11px;
    float: left;
    width: 240px;
    padding-top: 10px;
    padding-left: 10px;

}

.leftInfo h1{

    margin: 0;
    padding: 0;
    color: #002949;
    font-size: 12px;
    font-family: "Verdana";
    line-height: 30px

}

.leftInfo li{

    color: #002949;
    font-family: "Verdana";
    font-size: 11px;

}

.addInfo{
    float: right;
    width: 415px;
    padding: 4px;
    padding-top: 12px;
    padding-right: 28px;
    height: -100 px;
    color: #666666;
    font-family: sans-serif;
    font-size: 11px;

    vertical-align: top;

}

.clear{

    clear: both;
    height: 30px;

    }

.addInfo h1{

    margin: 0;
    padding: 0;
    color: #002949;
    font-size: 12px;
    line-height: 25px;

}

.infoanchor{
    font-size: 12px;
}

.infoanchor:link{
    color: #002949;
}

.infoanchor img{
    vertical-align: middle;
    border: 0;
}

a:link {
    color: #FFFFFF;
}
a:visited {
    color: #666666;
}
a:hover {
    color: #666666;
}
a:active {
    color: #FFFFFF;
}

.dialog {
position:relative;
margin:0px auto;
min-width:8em;
max-width:750px; /* based on image dimensions - not quite consistent
with drip styles yet */
color:#fff;
z-index:1;
margin-left:24px; /* default, width of left corner */
_margin-left:48px; /* default, width of left corner */
margin-bottom:0.5em; /* spacing under dialog */
}

.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
background:transparent url(/images/rbg.png) no-repeat top right;
}

.dialog .content {
position:relative;
_zoom:1;
_overflow-y:hidden;
padding:0px 24px 0px 0px;

}

.dialog .t {
/* top+left vertical slice */
position:absolute;
left:0px;
top:0px;
width:24px; /* top slice width */
margin-left:-24px;
height:100%;
_height:1600px; /* arbitrary long height, IE 6 */
background-position:top left;
}

.dialog .b {
/* bottom */
position:relative;
width:100%;
}

.dialog .b,
.dialog .b div {
height:30px; /* height of bottom cap/shade */
font-size:1px;
}

.dialog .b {
background-position:bottom right;
}

.dialog .b div {
position:relative;
width:24px; /* bottom corner width */
margin-left:-24px;
background-position:bottom left;
}

.dialog .hd,
.dialog .bd,
.dialog .ft {
position:relative;
}

.dialog .wrapper {
/* extra content protector - preventing vertical overflow (past
background) */
position:static;
max-height:1000px;
overflow:auto; /* note that overflow:auto causes a rather annoying
redraw "lag" in Firefox 2, and may degrade performance. Might be worth
trying without if you aren't worried about height/overflow issues. */
}

.dialog h1,
.dialog p {
margin:0px; /* margins will blow out backgrounds, leaving whitespace.
*/
padding:0.5em 0px 0.5em 0px;
}

.dialog h1 {
padding-bottom:0px;
}

p.error { color: red; }
p.status { color: green; }

DIV STRUCTURE
<div id="main">
    <div class="header"><img src="../images/logo_teamdetroit.gif"
width="770" height="100" /></div>
   <div class="forms">
       <div class="dialog">
           <div class="content">
                <div class="t"></div>
                   <ul class="navtabs">
                       <li id="navTab1"><a href="upload.html"
id="navUpload" tab="navTab1" style="color:#002949">Access </a></li>
                       <li id="navTab2"><a href="specs.html"
id="navSpec" tab="navTab2" style="color:#002949">Specifications</a></
li>
                       <li id="navTab3"><a href="faq.html"
id="navFaq" tab="navTab3" style="color:#002949">Feedback</a></li>
                       <li id="navTab4"><a href="why.html"
id="navWhy" tab="navTab4" style="color:#002949">About</a></li>
                   </ul>
                <div>
                    <div id="mainContent">
                           loading.
                   </div>
                   <div class="clear"></div>
               </div>
          </div>
          <div class="b">
                  <div></div>
           </div>
        </div>
    </div>
</div>

<div class="footer">
    <p class="style1">All trademarks and servicemarks are the property of
their respective owners<br/>
©2008 Thin Air LLC All Rights Reserved. <a
href="mailto:&#109;a&#x69;l&#x74;&#111;&#58;&#115;u&#x70;p&#x6f;&#114;&#x74;&#64;t&#x68;i&#x6e;&#97;i&#x72;&#100;&#x69;g&#x69;&#116;&#x61;&#x6c;&#46;&#x63;&#111;m">&#115;&#x75;&#x70;&#112;&#x6f;&#x72;&#116;&#x40;&#x74;&#104;&#105;na&#x69;&#x72;d&#x69;g&#x69;&#116;&#x61;&#x6c;.&#99;&#x6f;&#x6d;</
a></p>
</div>