The site is located here. (<!-- m --><a class="postlink" href="http://tc-rpg.com.co.nr/index2.html">http://tc-rpg.com.co.nr/index2.html</a><!-- m -->). It looks the way I wish in IE6, but I cannot get the red block (Color for visibility purposes only) to shift over to the right 5 pixels. I've tried adding a 5 pixel margin on the float, it just extends enlarges the block widthwise. I've also tried applying the margin to the black block, and that doesn't do a thing. I'm thinking maybe because the <div> is floated...
I was just thinking, I could get rid of the margin for both, and just use padding to move the content over in IE6 and Moz...
***EDIT***
The image at the top is in a <div>, and it, only in Moz, there is a small space between that <div> (the image), and the rest of the content. This does not show up in IE6. All margins and paddings are set to 0, so I cannot think of what would be causing this.I did some rearranging of your markup and CSS. Take a loot at what I've got. There is still a small difference between IE and Moz with IE placing the red DIV 3 pixels further to the right than Moz, but you should be able to fix that.
That problem with Mozilla placing a gap between the image and the DIV is a bug. There's not much you can do, aside from positioning the logo DIV absolutely and putting a top margin on #left and #main the same number of pixels high as the logo div is high.Here's part of my variation. I replaced your body width with a wrapping layout div, zeroed the margins and floated main right. Oh yea, I put the images all into the backgrounds.
<style type="text/css">
body {
background:url("http://tc-rpg.com.co.nr/images/index_bg.gif") repeat-y #FFF;
color:#17334A;
padding:0;
margin:0;
}
#top {
margin:0;
padding:0;
text-align:left;
background: url("http://tc-rpg.com.co.nr/images/top.jpg") no-repeat;
height:196px;
width:780px;
}
#left {
float:left;
padding:0;
margin: 0;
background-color:#000; color: white;
width:107px;
}
#main {
float: right;
width: 660px;
background-color:#F00;
margin:0;
padding:0;
}
#layout {
width:775px;
}
</style>
</head>
<body>
<div id="layout">
<div id="top">This is the top</div>
<div id="left">This is left</div>
<div id="main">This is main</div>
</div>
</body>
</html>Ah, thanks for your help, but I actually switched a few things around. I absolutely positioned the black box, and gave the red one a left margin equivalent to that of the black box's width.
I was just thinking, I could get rid of the margin for both, and just use padding to move the content over in IE6 and Moz...
***EDIT***
The image at the top is in a <div>, and it, only in Moz, there is a small space between that <div> (the image), and the rest of the content. This does not show up in IE6. All margins and paddings are set to 0, so I cannot think of what would be causing this.I did some rearranging of your markup and CSS. Take a loot at what I've got. There is still a small difference between IE and Moz with IE placing the red DIV 3 pixels further to the right than Moz, but you should be able to fix that.
That problem with Mozilla placing a gap between the image and the DIV is a bug. There's not much you can do, aside from positioning the logo DIV absolutely and putting a top margin on #left and #main the same number of pixels high as the logo div is high.Here's part of my variation. I replaced your body width with a wrapping layout div, zeroed the margins and floated main right. Oh yea, I put the images all into the backgrounds.
<style type="text/css">
body {
background:url("http://tc-rpg.com.co.nr/images/index_bg.gif") repeat-y #FFF;
color:#17334A;
padding:0;
margin:0;
}
#top {
margin:0;
padding:0;
text-align:left;
background: url("http://tc-rpg.com.co.nr/images/top.jpg") no-repeat;
height:196px;
width:780px;
}
#left {
float:left;
padding:0;
margin: 0;
background-color:#000; color: white;
width:107px;
}
#main {
float: right;
width: 660px;
background-color:#F00;
margin:0;
padding:0;
}
#layout {
width:775px;
}
</style>
</head>
<body>
<div id="layout">
<div id="top">This is the top</div>
<div id="left">This is left</div>
<div id="main">This is main</div>
</div>
</body>
</html>Ah, thanks for your help, but I actually switched a few things around. I absolutely positioned the black box, and gave the red one a left margin equivalent to that of the black box's width.