<!-- m --><a class="postlink" href="http://www.justmoved.org/test">http://www.justmoved.org/test</a><!-- m -->
I'm doing a three column layout. Here is my CSS:
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
.OuterDiv {
margin-left: auto;
margin-right: auto;
width: 780px;
border: 2px solid #999999;
}
.contentEnclosureDiv {
background-color: #ffe8f9;
margin-top: -5px;
}
.leftColumn {
float: left;
width: 180px;
height: 500px;
}
.rightColumn {
float: right;
width: 211px;
height: 500px;
}
.movingBlurb {
font-family: tahoma,verdana,arial;
font-size: 11px;
line-height: 1.5em;
color: #804c4c;
background-color: #fffee8;
margin-top: -10px;
margin-bottom: -10px;
padding-left: 10px;
padding-right: 7px;
padding-top: 3px;
padding-bottom: 3px;
}
.centerContent {
font-family: tahoma,verdana,arial;
}
.resourcesBoxLinks {
background-color: #fffee8;
font-family: tahoma,verdana;
font-size: 10px;
font-weight: bold;
margin-top: -5px;
}
.resourcesBoxLinks a {
color: #784365;
display: block;
text-decoration: none;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 3px;
}
.resourcesBoxLinks a:hover {
text-decoration: underline;
}
.footer {
clear: left;
}
.footer a {
color: #784365;
text-decoration: none;
font-family: tahoma,verdana;
font-size: 10px;
}
.footer a:hover {
text-decoration: underline;
}
-->
</style>
In FireFox, the columns show up as they are supposed to.
In IE, which will be my used used browser, the center column just shifts down below the left one. I need it to be in the middle.
Also, there is a footer with links. The clear: left; option will not shift it down under the left column.
And yes, I know I didn't upload the images. But you should see proper dimensions.
Ideas?The problem in IE is caused because for some reason it thinks the image at the top of your centerContent div is a little too wide. You can fix the problem by making your OuterDiv just a little bit wider. A width of 786px seemed to work for me.Thanks. I'll give that a shot. I was dinking around with it last night some more and tried making the left and center DIV's both float lefts, now I can't get a background to show through. I'll post that today later. Maybe I might be able to figure it out before then.
Pesky IE. At least I get more consistent results when I tell it to adhere to Strict rendering.Finished with the test layout for the most part - <!-- m --><a class="postlink" href="http://www.justmoved.org/test/index2.html">http://www.justmoved.org/test/index2.html</a><!-- m -->
Now I'm just dealing with the little padding differences and nuances with IE and FireFox....Originally posted by ChrisBrown
Finished with the test layout for the most part - <!-- m --><a class="postlink" href="http://www.justmoved.org/test/index2.html">http://www.justmoved.org/test/index2.html</a><!-- m -->
Now I'm just dealing with the little padding differences and nuances with IE and FireFox....
Looking good.
I'm doing a three column layout. Here is my CSS:
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
.OuterDiv {
margin-left: auto;
margin-right: auto;
width: 780px;
border: 2px solid #999999;
}
.contentEnclosureDiv {
background-color: #ffe8f9;
margin-top: -5px;
}
.leftColumn {
float: left;
width: 180px;
height: 500px;
}
.rightColumn {
float: right;
width: 211px;
height: 500px;
}
.movingBlurb {
font-family: tahoma,verdana,arial;
font-size: 11px;
line-height: 1.5em;
color: #804c4c;
background-color: #fffee8;
margin-top: -10px;
margin-bottom: -10px;
padding-left: 10px;
padding-right: 7px;
padding-top: 3px;
padding-bottom: 3px;
}
.centerContent {
font-family: tahoma,verdana,arial;
}
.resourcesBoxLinks {
background-color: #fffee8;
font-family: tahoma,verdana;
font-size: 10px;
font-weight: bold;
margin-top: -5px;
}
.resourcesBoxLinks a {
color: #784365;
display: block;
text-decoration: none;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 3px;
}
.resourcesBoxLinks a:hover {
text-decoration: underline;
}
.footer {
clear: left;
}
.footer a {
color: #784365;
text-decoration: none;
font-family: tahoma,verdana;
font-size: 10px;
}
.footer a:hover {
text-decoration: underline;
}
-->
</style>
In FireFox, the columns show up as they are supposed to.
In IE, which will be my used used browser, the center column just shifts down below the left one. I need it to be in the middle.
Also, there is a footer with links. The clear: left; option will not shift it down under the left column.
And yes, I know I didn't upload the images. But you should see proper dimensions.
Ideas?The problem in IE is caused because for some reason it thinks the image at the top of your centerContent div is a little too wide. You can fix the problem by making your OuterDiv just a little bit wider. A width of 786px seemed to work for me.Thanks. I'll give that a shot. I was dinking around with it last night some more and tried making the left and center DIV's both float lefts, now I can't get a background to show through. I'll post that today later. Maybe I might be able to figure it out before then.
Pesky IE. At least I get more consistent results when I tell it to adhere to Strict rendering.Finished with the test layout for the most part - <!-- m --><a class="postlink" href="http://www.justmoved.org/test/index2.html">http://www.justmoved.org/test/index2.html</a><!-- m -->
Now I'm just dealing with the little padding differences and nuances with IE and FireFox....Originally posted by ChrisBrown
Finished with the test layout for the most part - <!-- m --><a class="postlink" href="http://www.justmoved.org/test/index2.html">http://www.justmoved.org/test/index2.html</a><!-- m -->
Now I'm just dealing with the little padding differences and nuances with IE and FireFox....
Looking good.