Sat, 2007-01-27 08:22
First and foremost I would like to thank the moderators of the forum for the help and advice they've provided me in regards to my previous CSS related problems, cheers guy's.
I'am encountering a small problem with compatibility with IE6, I've been attempting to position a DIV in my main content wrapping so that two content related DIV's are next to each other, much like a two column sort of thing. I've used a negative margin because it was the only way in which I could manually position the DIV I wanted to move up, this has worked in Opera and Firefox but IE6 the negative margin has had no affect on the DIV I've attempted to move and is in the original position prior to using the margin, is there a more sensible way than using a negative margin or is there an IE6 workaround that I could use?.
The DIV I'am attempting to move up is #directory, so that it is along side #features_content.
My HTML so far
-
Brad Harrison, a plumber who came out to get some tools, saw the whole thing. He picked up the car with his forklift and then he turned while it was on then he turned while it was.
-
Brad Harrison, a plumber who came out to get some tools, saw the whole thing. He picked up the car with his forklift and then he turned while it was on then he turned while it was.
-
Brad Harrison, a plumber who came out to get some tools, saw the whole thing. He picked up the car with his forklift and then he turned while it was on then he turned while it was.
-
Brad Harrison, a plumber who came out to get some tools, saw the whole thing. He picked up the car with his forklift and then he turned while it was on then he turned while it was.
Semi-rounded box example text
My CSS
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
background-image: url("img/background2.gif");
background-repeat: repeat-y;
background-position: top center;
background-color: #353535;
}
#container
{
width: 759px;
position: relative;
min-height: 100%;
margin: 0 auto;
padding: 0;
padding-top: 40px;
}
* html #container
{
height: 100%;
}
#header
{
width: 100%;
height: 59px;
padding: 0;
margin: 0;
}
#logo
{
width: 159px;
height: 59px;
margin: 0 0 0 70px;
padding: 0;
background-image: url("img/branding.png");
background-repeat: no-repeat;
}
#features_content
{
width: 50%;
height: 100px;
margin: 5em 0 0 2em;
padding-bottom: 10em;
}
#directory
{
width: 10.56em;
height: 18.44em;
float: right;
margin: -15em 0 0 0;
}
.bl
{
background: url(img/bl.gif) 0 100% no-repeat #EC6224;
width: 10.56em;
height: 18.44em;
}
.tl
{
background: url(img/tl.gif) 0 0 no-repeat;
}
.clear
{
font-size: 1px;
height: 1px;
}
#footer
{
width: 734px;
height: 300px;
margin: 0 auto;
position: relative;
margin-top: 7.5em;
background: url(img/box/line_bg.gif) repeat-y;
}
#foot_top
{
background: url(img/box/top.gif) no-repeat;
background-position: top center;
width: 735px;
height: 76px;
margin: 0 0 0 0;
padding: 0;
}
#foot_bottom
{
background: url(img/box/bottom.gif) no-repeat;
background-position: bottom center;
width: 735px;
height: 20px;
margin-top: 13.5em;
padding: 0;
}
ul#sections {
list-style: none;
width: 500px;
padding: 0;
margin: 0;
}
ul#articles {
list-style: none;
width: 500px;
padding: 0;
margin: 0;
}
li {
float: left;
width: 200px;
margin: 0;
padding: 1em;
}
li#nm_3 {
}
p {
margin: 0;
padding: 0;
width: 200px;
font-size: 8pt;
font-family: Geneva, Arial, Helvetica, sans-serif;
/*font-style: oblique;*/
}
h3 {
margin: 0;
}
Any guidance would be much appreciated. 
Sat, 2007-01-27 10:40
#1
Have you tried floating the
Have you tried floating the two DIVs?
Sat, 2007-01-27 10:52
#2
Which would be the most
Which would be the most straightforward solution or take one of the classic approaches to source ordering floats.
Create a inner wrap div, give it width:100%, float:left, negative margin right of the float (sidebar) column width ~15em; within that div place your main content area, give that a margin right (50%?) to pull back content from the right sidebar, close the inner wrap then describe the float sidebar, simply floated right with it's width.
Sat, 2007-01-27 12:06
#3
I've just adopted you're
I've just adopted you're suggestions Hugo and it's working as it should in Firefox and Opera but IE6 is a right mess, it's positioned half way down the page and I don't know why. Such a frustrating predicament, could I be missing something, perhaps an extra margin or padding that IE6 is picking up and Firefox, Opera aren't?.
Updated HTML
-
Brad Harrison, a plumber who came out to get some tools, saw the whole thing. He picked up the car with his forklift and then he turned while it was on then he turned while it was.
-
Brad Harrison, a plumber who came out to get some tools, saw the whole thing. He picked up the car with his forklift and then he turned while it was on then he turned while it was.
-
Brad Harrison, a plumber who came out to get some tools, saw the whole thing. He picked up the car with his forklift and then he turned while it was on then he turned while it was.
-
Brad Harrison, a plumber who came out to get some tools, saw the whole thing. He picked up the car with his forklift and then he turned while it was on then he turned while it was.
Test text, test text.
Updated CSS
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
background-image: url("img/background2.gif");
background-repeat: repeat-y;
background-position: top center;
background-color: #353535;
}
#container
{
width: 759px;
min-height: 100%;
margin: 0 auto;
padding-top: 40px;
}
* html #container
{
height: 100%;
}
#header
{
width: 100%;
height: 59px;
}
#logo
{
width: 159px;
height: 59px;
margin: 0 0 0 70px;
background-image: url("img/branding.png");
background-repeat: no-repeat;
}
#innerwrap
{
width: 100%;
float: left;
margin-top: 5em;
margin-left: 1.5em;
margin-right: -15em;
/*padding-bottom: 10em; - Not working, because of float: left??. Used to stop #footer from overlapping content*/
}
#features_content
{
margin-right: 50%;
}
#directory
{
float: right;
margin-top: 6em;
width: 169px;
}
.bl
{
background: url(img/bl.gif) 0 100% no-repeat #EC6224;
width: 10.56em;
height: 18.44em;
}
.tl
{
background: url(img/tl.gif) 0 0 no-repeat;
}
.clear
{
font-size: 1px;
height: 1px;
}
#footer
{
width: 734px;
height: 300px;
margin: 0 auto;
position: relative;
margin-top: 7.5em;
background: url(img/box/line_bg.gif) repeat-y;
}
#foot_top
{
background: url(img/box/top.gif) no-repeat;
background-position: top center;
width: 735px;
height: 76px;
margin: 0 0 0 0;
padding: 0;
}
#foot_bottom
{
background: url(img/box/bottom.gif) no-repeat;
background-position: bottom center;
width: 735px;
height: 20px;
margin-top: 13.5em;
padding: 0;
}
ul#sections {
list-style: none;
width: 500px;
padding: 0;
margin: 0;
}
ul#articles {
list-style: none;
width: 500px;
padding: 0;
margin: 0;
}
li {
float: left;
width: 200px;
margin: 0;
padding: 1em;
}
li#nm_3 {
}
p {
margin: 0;
padding: 0;
width: 200px;
font-size: 8pt;
font-family: Geneva, Arial, Helvetica, sans-serif;
/*font-style: oblique;*/
}
h3 {
margin: 0;
}
Thanks for the patience guys.
Sat, 2007-01-27 13:56
#4
You'll have to shift the
You'll have to shift the margin-right unit to pixel or em as IE is too dumb to be able to calculate the percentage, you have a fixed width container so fixed margins would be better.
Sat, 2007-01-27 14:22
#5
It's working, brilliant,
It's working, brilliant, thank you mate.