Hi all,

I am working on a template for a site at the moment (it started life from an oswd.org one and I am chopping/changing it to suit my needs for a script I am using) and with a few problems I have got it to display perfectly in opera (think its 8 or 9 im using). I opened it up in IE the other day and was horrified by what I saw! The template was a mess... the main problem is the right column is placed under the left one, to the right.

I think I have narrowed down the problem. A bit of research has revealed there are problems with IE and the clear both css function.

The template uses:

<br class="clear" />

which corresponds to (in the css stylesheet):

br.clear
{
clear: both;
}

The non modified template works great in IE, but I'm using a different right column made up of .tpl files. I have looked at: http://www.positioniseverything.net/easyclearing.html

Any help appreciated!

Here is the full stylesheet (bit hacked together from scripts template and oswd template):

body { 
background-color: #fff;
color: #585858;
font-size: 9pt;
font-family: "trebuchet ms", helvetica, sans-serif;
}

select, input, textarea {
	font-size: 11px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	color: #484848;
	background-color: #999999;
	border-style: solid;
	border-color: #ebebeb;
	border-width: 1px;
}

a:link, a:active, a:visited {
	color: #484848;
	text-decoration: none;
}

a:hover {
	color: #555555;
	text-decoration: none;
	border-bottom: 0px dotted #484848;
}

img {
	border-width: 0px;
}

form {
	margin-top: 0px;
}

.boldfont {
	font-weight: bold;
}

.smallfont {
	font-size: 9px;
}
.red {
	color: #ad0000;
}

.green {
	color: #007900;
}

.blue {
	color: #56baef;
}

.yellow {
	color: #ccc000;
}

.grey {
	color: #bcbcbc;
}

.text {
	padding: 5px;
}

.yellowbg {
	background-color: #f9ffa2;
}

.maindiv {
	background-color: #ffffff;
	padding-right: 1px;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-bottom: 5px;
}

.maindiv2 {
	background-color: #ffffff;
	padding-right: 1px;
	padding-bottom: 1px;
}

.greybg {
	background-color: #fbfbfb;
	background-image: url(images/n2.gif);
	background-repeat: repeat-x;
	padding: 5px;
	border-left: 1px #ffffff solid;
	border-right: 1px #dcdcdc solid;
	border-top: 1px #ffffff solid;
	border-bottom: 1px #dcdcdc solid;
}

.greybg2 {
	background-color: #ffffff;
	background-image: url(images/greybg.gif);
	background-repeat: repeat-x;
	padding: 6px;
	width: 764px;
	height: 16px;
}

.bluebg {
	color: #ffffff;
	background-color: #440000;
	background-image: url(images/n1m.gif);
	font-weight: bold;
	padding: 5px;
	border-left: 1px #ffffff solid;
	font-size: 12px;
}

.bluebg2 {
	color: #ffffff;
	background-color: #440000;
	background-image: url(images/bluebg2.gif);
	font-weight: bold;
	border-left: 1px #ffffff solid;
	padding: 5px;
}

.navihg {
	color: #ffffff;
	background-color: #6094c6;
	background-image: url(images/bluebg2.gif);
	font-weight: bold;
	
	border-left: 1px #ffffff solid;
}

.fullcontent {
	width: 100%;
	float: left;
	margin-top: 5px;
}

.paddingbox {
	padding: 5px;
}

#loginuheader {
	margin-bottom: 10px;
}

#navigation {
	text-align: center;
	height: 22px;
}

#navigation ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

#navigation li {
	float: left;
	background: url(images/top_bg.gif);
	width: 75px;
	height: 12px;
	padding-top: 6px;
}

#navigation li:hover {
	background: url(images/top_bgh.gif);
}

#navigation a:link, #navigation a:visited, #navigation a:active, #navigation a:hover {
	text-decoration: none;
	color: #ffffff;
}

#greybg-padding {
	background-color: #f4f4f4;
	padding: 1%;
	margin-bottom: 4px;
}

#leftcontent {
	margin-top: 5px;
}

#rightcontent {
	margin-top: 5px;
}

#content {
	background-color: #ffffff;
	margin: 0 auto;
	height: 100%;
}

#content2 {
	background-color: #ffffff;
	margin: 0 auto 0 auto;
	padding-left: 7px;
	height: 100%;
}

#navi_top {
	text-align: right;
	color: #8b8b8b;
	margin-bottom: 6px;
}

#login_box {
	height: 64px; 
	width: 230px;
	float: right; 
}

#banner {
	width: 511px;
	height: 82px;
}

#footer {
	text-align: center;
	color: #d0d0d0; 
	font-weight: bold; 
}

#footer a:link {
	color: #d0d0d0; 
}

#footer a:hover {
	color: #d0d0d0; 
}

#footer a:visited {
	color: #d0d0d0; 
}

#footer a:active {
	color: #d0d0d0; 
}
.itemdiv{
	float: left;
	display: inline;
	margin-right: 3px;
	text-align: center;
	height: 200px;
	width: 200px;
	vertical-align: top;
	margin-bottom: 20px;
}
.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
	background: url(images/star.gif) left -1000px repeat-x;
}
.star-rating{
	position:relative;
	width:125px;
	height:25px;
	overflow:hidden;
	list-style:none;
	margin:0;
	padding:0;
	background-position: left top;
}
.star-rating li{
	display: inline;
}
.star-rating a, 
.star-rating .current-rating{
	position:absolute;
	top:0;
	left:0;
	text-indent:-1000em;
	height:25px;
	line-height:25px;
	outline:none;
	overflow:hidden;
	border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
	background-position: left bottom;
}
.star-rating a.one-star{
	width:20%;
	z-index:6;
}
.star-rating a.two-stars{
	width:40%;
	z-index:5;
}
.star-rating a.three-stars{
	width:60%;
	z-index:4;
}
.star-rating a.four-stars{
	width:80%;
	z-index:3;
}
.star-rating a.five-stars{
	width:100%;
	z-index:2;
}
.star-rating .current-rating{
	z-index:1;
	background-position: left center;
}	

/* for an inline rater */
.inline-rating{
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	vertical-align: middle;
}

/* smaller star */
.small-star{
	width:50px;
	height:10px;
}
.small-star,
.small-star a:hover,
.small-star a:active,
.small-star a:focus,
.small-star .current-rating{
	background-image: url(images/star_small.gif);
	line-height: 10px;
	height: 10px;
}


/* Header */

#header
{
width:100%;
height:122px;
background: #440000 url('./images/n1.gif') repeat-x;
}

#header_inner
{
position: relative;
width: 950px;
height:122px;
margin: 0 auto;
}

/* Logo */

#logo
{
position: absolute;
bottom: 0.6em;
}

#logo h1
{
display: inline;
color: #fff;
font-size: 2.6em;
}

#logo h2
{
display: inline;
padding-left: 0.5em;
color: #D2DCE5;
font-size: 1.0em;
}

/* Menu */

#menu
{
position: absolute;
right: 0em;
bottom: 0em;
}

#menu ul
{
list-style: none;
}

#menu li
{
float: left;
}

#menu li a
{
margin-left: 0.5em;
display: block;
padding: 1.1em 1.4em 1.0em 1.4em;
background: #fff url('./images/n4.gif') repeat-x;
border: solid 1px #fff;
color: #616161;
font-weight: bold;
font-size: 1.0em;
text-transform: lowercase;
text-decoration: none;
}

#menu li a.active
{
background: #CA2F2F url('./images/n3.gif') repeat-x;
color: #fff;
border: solid 1px #A94B4B;
}

/* Main */

#main_inner p
{
text-align: justify;
margin-bottom: 2.0em;
}

#main_inner ul
{
margin-bottom: 2.0em;
}

#main_inner
{
position: relative;
width: 950px;
margin: 0 auto;
padding-top: 1.5em;
}

#main_inner h3,h4
{
border-bottom: dotted 1px #E1E1E1;
position: relative;
}

#main_inner h3
{
font-size: 2.1em;
padding-bottom: 0.1em;
margin-bottom: 0.8em;
}

#main_inner h4
{
font-size: 1.2em;
padding-bottom: 0.175em;
margin-bottom: 1.4em;
margin-top: 0.95em;
}

#main_inner .post
{
position: relative;
}

#main_inner .post h3
{
position: relative;
font-size: 1.7em;
padding-bottom: 1.2em;
}

#main_inner .post ul.post_info
{
list-style: none;
position: absolute;
top: 3em;
font-size: 0.8em;
}

#main_inner .post ul.post_info li
{
background-position: 0em 0.2em;
background-repeat: no-repeat;
display: inline;
padding-left: 18px;
}

#main_inner .post ul.post_info li.date
{
background-image: url('images_blue/n5.gif');
}

#main_inner .post ul.post_info li.comments
{
background-image: url('images_blue/n6.gif');
margin-left: 1.1em;
}

/* This controls the width of the fixed width layouts */

div.fixed
{
width: 950px !important;
}

/* Basic Stuff */

*
{
margin: 0em;
padding: 0em;
}

body
{
background-color: #fff;
color: #585858;
font-size: 9pt;
font-family: "trebuchet ms", helvetica, sans-serif;
}

h1,h2,h3,h4,h5,h6
{
font-weight: normal;
letter-spacing: -1px;
text-transform: lowercase;
}

h3,h4,h5,h6
{
color: #184366;
}

h1 span
{
font-weight: bold;
}

h3 span
{
font-weight: bold;
}

h4 span
{
font-weight: bold;
}

br.clear
{
clear: both;
}

img
{
padding: 3px;
border: solid 1px #e1e1e1;
}

img.floatTL
{
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em;
margin-top: 0.5em;
}

a
{
text-decoration: underline;
color: #F16C00;
}

a:hover
{
text-decoration: none;
}

ul.links
{
list-style: none;
}

ul.links li
{
line-height: 2em;
}

ul.links li.first
{
}

p
{
line-height: 1.8em;
}

/* LAYOUT - 2 COLUMNS */

	/* Primary content */
	
	#primaryContent_2columns
	{
	position: relative;
	margin-right: 17em;
	}
	
	#columnA_2columns
	{
	position: relative;
	float: left;
	width: 100%;
	margin-right: -17em;
	padding-right: 2em;
	}
	
	/* Secondary Content */
	
	#secondaryContent_2columns
	{
        position: relative;
	float: right;
        margin-right: 19.5em;
	}
	
	#columnC_2columns
	{
	width: 16.5em;
	float: left;
	padding: 0em 0em 0.5em 2em;
	}

div.fixed
{
width: 950px !important;
}

Click here to view site

Thanks in advance!

I have never seen anyone style a line break. What is the reason for this code???

br.clear
{
clear: both;
}

edit...was tinkering in Dreamweaver CS3 and pulled up a template and noticed they style a line break as well...my questions still stands as to why this is done.

I don't think the clearing <br> is the real problem there. I suggest you VALIDATE your code, you've got several warnings that should be fixed and may solve the problem in IE just by fixing them.

Also, if you're going to use an XHTML 1.0 template and add stuff to it, then you'd better learn what is proper format for XHTML - ALL tags must be closed, including <br>'s and <img>s. Proper format is <br /> and
<img xxxxxxxxxxxxxxxxxxxx />.

The reason for the code is to CLEAR A FLOAT !
I use a clear on a <br> too, but I do more than just clear:both

.brclear { /* Use a break with this class to clear float containers on both sides. */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

If you don't want a floated element sticking outside of it's parent container, then you have to clear the float.

http://css-discuss.incutio.com/?page=ClearingSpace

Thanks for that, I'll come clean this is my first real use of xhtml/css and I am still learning, hadn't even thought of that as the original scripts template was also xhtml, although it did throw out a number of issues.

Anyway, I have got it validated (transitional) - Click here to see There are a number of "warnings" which I will look into.

The problem is, this still hasn't solved the problem of the right column showing up wrongly in IE... and also the second "bar" isn't displaying, would appreciate suggestions because I feel as though I have tried almost everything.

Thanks in advance.

All that inline scripting isn't valid under XHTML, so it will continue to choke on that.

Ok, that columnC_2columns is set to float: right with a right margin of 19.5em. This causes a doubled-float margin bug in IE that you need to address. You can read the solution at positioniseverything.net, but the solution, which you should put in a separate CSS file and call it with a conditional comment, is to set columnC_2columns to display:inline and it should stop the bug.

Really appreciate you getting back to me.

Just to clarify:

1) I change the css file to:

	#secondaryContent_2columns
	{
        display: inline;
	}

Or did you mean do that in the seperate file?

And then paste the positioniseverything fix into another file, say fix.css:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Then call to this fix.css file from the index with:

<link rel="stylesheet" type="text/css" href="fix.css" />

Am I roughly on the right track?

Thanks

Roughly. You need to put your 'hacks' for IE into a separate file (I call mine iefixes.css). Then, in your HTML, you use conditional comments, which only IE will follow, to tell IE to pull that fixes file. You can target different VERSIONS of IE this way.

I use something like this - it goes in your <head> section:
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if gt IE 6]>
<link href="ie7fixes.css" rel="stylesheet" type="text/css" /> <![endif]-->

Hmm....

I have added the fix to a file "iefix.css" uploaded, and included it as recommended above.

I then edited the existing stylesheet to:

	#secondaryContent_2columns
        {
        display: inline;
	}

Which messed up the display in opera, and didn't fix IE.... so i tried:

	#secondaryContent_2columns
        {
        display: inline;
        position: relative;
	float: right;
        margin-right: 19.5em;
	}

Which resulted in no change at all. Is there anything else I can try or have I done it wrong?

Thanks in advance!

Opera should not have read the iefix file at all. Did you put in the conditional comments in your HTML ? IE and ONLY IE will read those conditional comments, all other browsers will ignore them.

Yes I added them with conditional comments.

Even when I didn't add the fix at all, and edited the css file as above to display: inline - it made the right column unreadable as it was hidden behind the right.

I'm not sure what to do really, I can only assume that it isn't being lined up correctly.

It's not the clearing element. Your #main_inner is set to 950px wide. Your primary column inside is set to 770px, then you add in the 16.5em width (about 220px) for the problem 2nd column and you run into float-drop where the elements are too wide to fit inside the given container width so it gets 'dropped' to where there is room. If you shrink the window in FF you'll see the same problem, the 2nd column will drop.

You have to narrow the primary column and/or the 2nd column so that they both fit within the 950px #main_inner.

Well I have done the following (to the css):

/* LAYOUT - 2 COLUMNS */

	/* Primary content */
	
	#primaryContent_2columns
	{
	position: relative;
	margin-right: 17em;
	}
	
	#columnA_2columns
	{
	position: relative;
	float: left;
	width: 700px;
	margin-right: -17em;
	padding-right: 2em;
	}
	
	/* Secondary Content */
	
	#secondaryContent_2columns
        {
        display: inline;
        position: relative;
	float: right;
        margin-right: 19.5em;
	}
	
	#columnC_2columns
	{
	width: 200px;
	float: left;
	padding: 0em 0em 0.5em 2em;
	}

div.fixed
{
width: 950px !important;

The last line, relates to other pages where I only need the one column. 700 + the 200 = 900, which leaves 50px for margins etc. but it still wont display correctly in IE... - even when I have tried 500 pixels etc.

I can see what you are saying... but I'm not so sure it can be that? I'm not doing something right clearly! Above it there is a lot of white space, so there is room for it in the column.

Any more suggestions appreciated.

Tried a number of things but still no look on this - can anybody else see something blatantly obvious?

Thanks in advance!