By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,984 Members | 2,659 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,984 IT Pros & Developers. It's quick & easy.

IE7 Margin Problem - Please Help

P: n/a
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:ma&#x69;l&#x74;o:su&#x70;p&#x6f;r&#x7 4;@t&#x68;i&#x6e;ai&#x72;d&#x69;g&#x69;t&#x61;&#x6 c;.&#x63;om">s&#x75;&#x70;p&#x6f;&#x72;t&#x40;&#x7 4;hina&#x69;&#x72;d&#x69;g&#x69;t&#x61;&#x6c;.c&#x 6f;&#x6d;</
a></p>
</div>
Jul 30 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
In article
<d0**********************************@m44g2000hsc. googlegroups.com>,
in******@gmail.com wrote:
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{
No need to include css or html given you supply URL.

Why not first fix up the errors mentioned at the W3C validation services
at

<http://jigsaw.w3.org/css-validator/>

and

<http://validator.w3.org/>

--
dorayme
Jul 30 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.