Having early troubles with IE

[MoiD]

Hi all
New to this site/Forum(looks like a pro bunch of fellas here) and very new to web design so go easy on my noobish troubles :o

I have started a site (just layout at this stage) and i am having trouble with that layout. the site is www.credenhill.demon.co.uk

I would like the 3rd column on the far right to sit to the far right and level with the central content section this is indeed the case if you look in FireFox, Opera, Safari, Netscape but not Internet Explorer (this is typical from what i have read so far about IE :mad: ).

I would like to know if any of you fellas could point me to a by the book solution and not a hack please? :confused:

I think what i am after is 3 columns therefore 3 devs all separate as the other browsers illustrate (the code still might be wrong offcourse but it looks perfect as far as the layouit goes)
Below is my CSS for www.credenhill.demon.co.uk

body {
margin: 0;
padding: 0;
background: #000000 url(images/img1.gif) repeat-x;
font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #2FCC61;
}

h1, h2, h3, h4, h5, h6 {
color: #ffffff;
}

a {
color: #00FF51;
}

a:hover {
text-decoration: none;
color: #FFFFFF;
}

/*Header */

#header {
width: 750px;
height: 200px;
margin: 0 auto;
background: url(images/img2.jpg) no-repeat center bottom;
}

/* Logo */

#logo {
float: left;
}

#logo * {
margin: 0;
padding: 0;
color: #FFFFFF;
}

#logo h1 {
padding: 90px 0 0 0;
letter-spacing: -3px;
font-size: 3.5em;
}

#logo h2 {
letter-spacing: 1px;
font-size: 1em;
}

/* Menu */

#menu {
float: right;
}

#menu ul {
margin: 0;
padding: 163px 0 0 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
margin-right: 2px;
padding: 10px 20px;
text-decoration: none;
font-size: 1em;
font-weight: bold;
color: #FFFFFF;
}

#menu .active a {
background: transparent;
}

#menu a:hover {
background: #000000;
}



/* Column One */

#colOne {
float: Left;
width: 150px;
margin: auto;
}

#colOne ul {
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}

#colOne li {
margin-bottom: 20px;
}

#colOne li li {
margin-bottom: auto;
}

#colOne li ul {
padding-left: 20px;
list-style: square inside;
}

#colOne h2 {
padding-Top: 20px;
padding-bottom: 5px;
padding-left: 20px;
font-size: 1.25em;
color: #FFFFFF;
border-bottom: 1px solid #2C2C2C;
}
/* Content */

#content {
width: 625px;
margin: 0 0 0 180px;
padding: 20px 0 0 0px;
}

/* Column Two */

#colTwo {
float: left;
}

#colTwo h2 {
margin-top: 0;
font-size: 2.5em;
}

#colTwo p{
line-height: 140%;
}

#google {
float: right;
width: 120px;
}

/* Footer */

#footer {
clear: both;
width: 750px;
height: 60px;
margin: 0 auto;
padding: 20px 0;
}

#footer p {
margin: 0;
padding: 0;
text-align: center;
font-size: smaller;
}

#footer a {
font-size: 1.25em;
}

[WebJoel]

TestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTest TextTestTextTestTextTestText

TestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTest TextTestTextTestTextTestTe....?? Cut us some slack. :o Throw in a 'word break' or hundred.
"non-breaking text" in a compliant browser will correctly 'break through' the container DIV, while in IE it will incorrectly expand the container, causing a terrible page-busting event.

Try "lorem ipsum dolar" text:
The 'classic' Latin:<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt,
neque porro quisquam est, qui do<strong>lorem ipsum</strong>, quia <strong>dolor sit, amet, consectetur,
adipisci</strong> v<strong>elit, sed</strong> quia non numquam <strong>eius mod</strong>i
<strong>tempor</strong>a <strong>incidunt, ut labore et dolore magna</strong>m
<strong>aliqua</strong>m quaerat voluptatem.
</p>

<p><strong>Ut enim ad minim</strong>a <strong>veniam, quis nostru</strong>m
<strong>exercitation</strong>em <strong>ullam co</strong>rporis suscipit <strong>laborios</strong>am,
<strong>nisi ut aliquid ex ea commodi consequat</strong>ur? <strong>Quis aute</strong>mvel eum
<strong>iure reprehenderit,</strong> qui <strong>in</strong> ea <strong>voluptate velit esse</strong>,
quam nihil molestiae <strong>c</strong>onsequatur, vel <strong>illum</strong>, qui
<strong>dolore</strong>m <strong>eu</strong>m <strong>fugiat</strong>, quo voluptas <strong>nulla pariatur</strong>?
</p>

<p>At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti
atque corrupti, quos dolores et quas molestias<strong>exceptur</strong>i <strong>sint,
obcaecat</strong>i <strong>cupiditat</strong>e <strong>non pro</strong>v<strong>ident</strong>,
similique <strong>sunt in culpa</strong>, <strong>qui officia deserunt mollit</strong>ia <strong>anim</strong>i,
<strong>id est laborum</strong>et dolorum fuga.
</p>
Or the English:<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and
I will give you a complete account of the system, and expound the actual teachings of the great explorer of
the truth, the master-builder of human happiness.</p>

<p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how
to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances
occur in which toil and pain can procure him some great pleasure.</p>

<p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some
advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>

<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized
by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that
are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is
the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.</p>
<p>In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
other greater pleasures, or else he endures pains to avoid worse pains.
</p>

the 35 validation warnings are mostly minor & dismissable, but the first three shown in the attached screenshot, are fairly important to get right.

[MoiD]

thank you webjoel, I think i understand the word break thing (when i said noob i meant noob :o ) and i have for layout chaged the text.

However IE still places the column 3 below the central column and not level with. agaoin all other browsers look fine.

your thoughts

[WebJoel]

Great. And now that I'm not so tired my responces will seem less ascerbic. :D I'm really quite docile. It's a ferret-thing...

edit: back.

Okay, -there are several different ways you can do this thing. One, we could make the "content" container be position:relative; and give it a width of say, "auto", and give it left-&-right borders of "border:150px solid black;" and place the "left" and the "right" inside of "content" with "position:absolute;" to offset each onto the 'border' space. Being "absolute" they are out of the document flow so will not affect the "content" spacing. And being that the borders are 'real', they remain on-the-page always.
Downside is that, being 'out of the document flow', if left-or-right column is taller than "content", it might 'disappear' below the page..

I have had good luck with this above layout in the past.

But it appears that your "right" column is going to be longer, so you'll want the "container" to be "100%" height, and have it's parent element (html, body) also be "height:100%;". IE gets this wrong and it can be a bit tricky, but it will allow the taller-than-content columns to 'expand' the wrapper. "Faux Columns" ("Google" the expression), is what this is called I beleive.

I'm going to be busified this morning but later I'll try to shape this up for you. I explained all the above because you are 'newb' and y:)u might want to try some things on your own. -It's great fun when you 'get it' on your own.

[Centauri]

For this type of layout, you would be better putting the html code for the #google div before the #content div in the html, and then not set a width for #content, instead set both left and right margins and let it fill the gap :#content {
margin: 0 150px 0 180px;
padding: 20px 0 0 0px;
} You can then unfloat #colTwo.

[MoiD]

ok i tried that but now the google dev sits far bottom left in IE.

If you look at the web page online in ff, opera, safi, or ns, that is what i want it to look like in them and IE if you see what i am saying :confused:

[MoiD]

sorry last post was aimed at cent (thanks cent but its not what i am looking for) webjoel i will try to absorb what you have put shortly and see if i can make sence of it :)

[Centauri]

Setting this up locally, with the above changes I suggested, the #google div also needs a clear so it doesn't get caught on the menu :#google {
float: right;
width: 120px;
clear: right;
}
Then it works in FF and IE6

[MoiD]

you fellas are great! :D

Cent i tried your solution first as it seemed easier to try first and it worked.
eing new it would be taking the easy way out to just accept it and not try to understand why IE didnt work before and now it does.

The layout side HTML is quite a nack, i thiought the order was:
Col1 (#Colone) first then Col2 (#coltwo) 2nd then finally Col3 (#google) but forgot col col2 was within another Dev *sigh i got alot to learn but enjoying it never the less

Keep up the good work it people like you that make this internet gubbins such a friendly place (well some of it ;) )

[WebJoel]

... but forgot col col2 was within another Dev *sigh i got alot to learn but enjoying it never the less.. Thought that is was maybe a typo but these are DIVisions. Calling them "dev"s is going to cause confusion. :)

For just about every method of of doing anything in HTML, there exists several other ways to achieving the same effect. If you know for instance, that the "middle column" will always be taller than either the "left" or the "right", then the fat borders method I outlined above can work. And for every method of doing anything, there can be small drawbacks & caveats.
-Fun, eh? :D