473,222 Members | 1,976 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,222 software developers and data experts.

IE7 Margin Problem - Please Help

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
1 3081
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Brian | last post by:
I have a page with content, navigation, and footer divs, in that order. The nav div has position: absolute, width 8em, on green background. The other divs have an 8em green left border, such that...
2
by: shapper | last post by:
Hello, I created a div with margin and padding and a fixed width. It seems the behavior is different in Firefox and IE. I am not sure but it seems: True width = width + paddingORmargin OR...
3
by: Daz | last post by:
Hi everyone. I have just been making a JavaScript chat applet, which should open in a new child window. It does all of this fine, and works within Firefox beatifully. However, IE thinks it's...
1
by: superDk | last post by:
Hello, IE6 is adding a large margin between my two containers (container1 & container2) everything works fine in IE7 and Firefox. I've been searching on-line for a fix but I've had no luck. It...
5
by: Neviton | last post by:
Hi this is the html to generate the behavior: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...
7
by: GTalbot | last post by:
Hello fellow authoring.stylesheets colleagues, Can someone please explain why the bottom margin of the last inflow block-level child in an overflowed parent should not have its margin reachable....
5
by: David Schwartz | last post by:
I've got a sidebar element that's a floating div. To the left of this div, there are p's each with a margin-right set as well as overflow: auto set (see below)). Some of the p's are of class...
1
by: moondaddy | last post by:
I have a group of elements inside a grid and want to align them along the left side of the grid. I also want have this group centered vertically and the xaml below demonstrates the appearance want...
1
by: runway27 | last post by:
i am having a serious issue with ie 7 i really need help. i am using a center layout using 900px the center layout looks and works fine in all browsers except for ie7 i have used a border for...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.