[thelist] ie 5 trauma

[Christopher Joseph]

ALL FIXED! sorry to have troubled. Hopefully my trauma will assist someone
elses cause at some point. After re-reading the specification for the
'clear' property I realised that I was able to apply it to other elements.
The fix in my case was to add a <br /> element at the end of the text
designed to flow around the .menus class but before the #copyright <div>.
Then apply clear:both; style to <br id="fix" />

....i don`t like the solution but I guess it is one of those 'have to live
withs'.

chris.


-----Original Message-----
From: thelist-admin at lists.evolt.org
[mailto:thelist-admin at lists.evolt.org]On Behalf Of Christopher Joseph
Sent: Thursday, May 16, 2002 5:47 PM
To: thelist at lists.evolt.org
Subject: RE: [thelist] ie 5 trauma


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;
	}

--
For unsubscribe and other options, including
the Tip Harvester and archive of thelist go to:
http://lists.evolt.org Workers of the Web, evolt !