5 replies [Last post]
Bangers
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2006-10-26
Posts: 9
Points: 0

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. Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Have you tried floating the

Have you tried floating the two DIVs?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Bangers
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2006-10-26
Posts: 9
Points: 0

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. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Bangers
Offline
newbie
Last seen: 13 years 44 weeks ago
Joined: 2006-10-26
Posts: 9
Points: 0

It's working, brilliant,

It's working, brilliant, thank you mate. Smile