[thelist] ie 5 trauma
Christopher Joseph
Christopher at ideadesigners.com
Thu May 16 15:37:01 CDT 2002
SO: I have been working on the problem below since I posted this message
earlier today
<snip>
the site is:
http://www.ideadesigners.com/id_co_uk/index.php
the problem is:
IE 5.5 seems to extend the left margin of the content <div> to 0px left when
it is supposed to be margin-left:20%. Occasionally ie 6 also shows this
problem.
The site seems to be ok in Opera 6, mozilla rc2, nn6.2.
</snip>
The cause is in the bottom most DIV id=copyright.
When I use #copyright{clear:both;} or infact anything other than 'none' the
left margin specified in #content is ignored by (it seems) all versions of
IE.
Does anyone have any thoughts on how to resolve this - my aim is to have the
.menus and #copyright inside #content but .menus must be above #copyright.
Thanks, Chris.
Style sheet ===>
#content {
margin-right:10%;
margin-left: 10%;
margin-top:2%;
margin-bottom:2%;
padding-bottom:10px;
background:#dedede;
border:1px solid #000;
text-align:left;
min-width: 500px;
}
.menus {
background:#fff;
color:#000;
padding:10px;
margin-top:10px;
margin-bottom:10px;
text-align:left;
border : thin dashed;
}
#menu {
background:#dedede;
width:200px;
padding:10px;
float:right;
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #menu {
margin-right:0px;
}
#title {
height:70px;
background: url(../graphics/new_id_page.gif);
padding:0px;
margin-right:0px;
margin-left:0px;
width:100%;
voice-family: "\";}\"";
voice-family: inherit;
width:auto;
}
html>body #title {
width: auto;
}
.menus h2 {
color: #000;
margin:.86em 0 .214em; /* ~12px 0 ~3px */
padding-top : 2px;
padding-bottom : 2px;
width : 100%;
font: 400 1em georgia, palatino, serif;
}
.menus p {
line-height:1.5;
margin:0 0 2em;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;
}
p {
margin-top: 0px;
FONT: 11px/18px georgia, palatino, serif;
padding:10px 20px 0px 20px;
}
a {
color:#09c;
text-decoration:none;
font-weight: 400;
}
a:link {
color:#09c;
}
a:visited {
color:#07a;
}
hover {
background-color:#eee;
}
h1 {
color:#333333;
line-height:12px; /* Ditto */
font-weight:800;
font: 11px/18px georgia, palatino, serif /* Again, it's the logotype, so we
want this control. */
margin:0;
padding:0;
}
h2 {
color:#ccc;
font-size:2.18em; /* ~24px */
font-weight:800;
margin:0 0 .83em; /* margin-bottom: ~20px */
font: 2.18em georgia, palatino, serif;
}
h3 {
color:#333;
font-size:1em;
font-weight:700;
margin:1.63em 0 .27em; /* ~18px 0 ~3px */
font: 1em georgia, palatino, serif;
}
h4 {
color:#999;
font-weight:800;
margin:.43em 0 .214em; /* ~6px 0 ~3px */
font: 1.27em georgia, palatino, serif;
}
h5 {
color:#999;
font-style:italic;
font-weight:800;
margin:1.8em 0 .27em; /* ~20px 0 ~3px */
font: 1em georgia, palatino, serif;
}
blockquote {
margin:1em 2.7em 1.36em; /* 11px ~30px ~15px */
color:#666;
line-height:1.5;
}
img {
border-width:0;
}
#copyright {
clear:both;
padding: 10px 0px 10px 0px;
text-align:center;
font-weight: 400;
color:#999;
background-color : White;
border-top-style : dashed;
border-top-width : thin;
}
#copyrighttext {
position:relative;
left:1.5em;
}
#navfunctions{
margin : 0px 0px 0px 0px;
font: 11px/18px georgia, palatino, serif;
background-color : #66CCFF;
border-top-style : dashed;
border-bottom-style : dashed;
border : thin;
padding-left : 20px;
}
#ArticleHead{
font: 1.6em georgia, palatino, serif;
padding:10px 20px 0px 20px;
}
label{
margin-left : 7px;
margin-right : 7px;
margin-bottom : 5px;
margin-top : 5px;
}
input{
margin-left : 7px;
margin-right : 7px;
margin-bottom : 5px;
margin-top : 5px;
}
select {
margin-left : 7px;
margin-right : 7px;
margin-bottom : 5px;
margin-top : 5px;
}
#SearchButton {
border : thin groove;
background-color : #FFCC00;
}
#CategoryButton{
border : thin groove;
background-color : #66CCFF;
}
#PopupControls {
text-align : center;
padding-top : 10px;
padding-bottom : 10px;
}
#PopContent {
padding-bottom : 10px;
padding-left : 10px;
padding-right : 10px;
padding-top : 10px;
margin : 10px;
}
#CloseMe {
text-align : center;
}
#ArticleImage {
background-color : White;
padding : 10px;
border : thin groove;
margin : 10px;
}
#IconKey {
border : thin dashed;
}
caption {
text-align : left;
line-height : 2em;
}
textarea {
margin-left : 7px;
margin-right : 7px;
margin-bottom : 5px;
margin-top : 5px;
}
More information about the thelist
mailing list