I am working on this website for a charity event and I am having some problems with the css. It looks fine on IE 7 but on FF and IE 6 its goofing up, I was hoping to get some suggestions.

FF: The entire page is shifted down quite a bit and isnt lining up flush with the top of the browser like it should.

IE 6: The entire right column wont line up with the left column and is being placed underneath it.

Ive tried messing around with both problems but I cant figure it out. I am new to css so I assume it has something to do with my float/positioning of the elements.

http://www.globalcitypartnership.com/test/index.html

EDIT: I know everyone is busy, not expecting a code fix, but if you could point me in the right direction that would be helpful.

Any help would be really appreciated. Thanks!

I can help you out if you post your css.

Whenever I have cross browser issues i make sure my code validates properly. There are 57 errors in the link you provided. You can check out the errors and recieve sugesstions on how to fix them by going to http://validator.w3.org/ and put the web address in.

Did you post your CSS code yet?

Obviously he didn't. I could view source and find your css link but I was too busy. I'll take a look tonight if you haven't posted it yet.

First, you need to NOT use IE as your main test bed, it's just too far off the standards, although IE7 is better than IE6, it's more likely that FF is showing you the more accurate view.

What you're seeing in FF is margin-collapse, and it is NOT a bug. Add padding-top: 1px to #headerImg and the whole #content section will pull up to the top where it belongs.

IE6 - sounds like float drop, I would suggest you read up on IE's bugs at www.positioniseverything.net.

Wow thanks for all the replies. Sorry for not posting my code, to be honest I didnt think I would get anything more then general comments of where I should look but at the bottom of this post is a link to a copy of the CSS and a pasting of the code.

Thanks to ladynred for your suggestions. The FF fix worked like a charm (and I never meant to suggest that it was a bug ). I havent had time to take a look at the IE link you suggested yet but I will do that tommorow.

And ya I know I have quite a few problems in my code according to the validator. The CSS checks out, and I am starting to go over the HTML. Probably shouldnt have it on strict but oh well.

link to code:http://www.globalcitypartnership.com...css/layout.css
actual code:

/**************************************************************
   Visit studio7designs.com for more layouts and downloads for this template!
 **************************************************************/
/**************************************************************
   All page content except for footer
 **************************************************************/

#content {
  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
}
/**************************************************************
   Header Image
 **************************************************************/

#headerImg {
  margin: 0 auto;
  height: 143px;
  background: url(../images/bg/header_image.jpg) no-repeat top left;
  padding-top: 1px;
}

#headerSearch {
margin-top:120px;
margin-left:743px;
}

/**************************************************************
   Top Block Menu
 **************************************************************/

#menu {
  margin: 0 auto;
}

#menu ul {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: left;
  background: #FFFFFF
}

#menu ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu ul li a {
  float: left;
  width: 16.6%;
  height: 2em;
  font: 400 1.2em arial, sans-serif;
  letter-spacing: 0.1em;
  color: #000000;
  border-top: 1px solid #2E5AFF;
  border-bottom: 1px solid #2E5AFF;
}
/*border colour formerly #0066B3 */
#menu ul li a span {
  display: block;
  padding: 2px 7px;
  margin-top: 4px;
  text-align: center;
}

#menu ul li a:hover,
#menu ul li a.here {
  color: #0066B3;
}
/**************************************************************
   Page Content
 **************************************************************/

#page {
  clear: both;
  float: left;
  width: 100%;
  margin-bottom: 6em;
  text-align: left;
}

#columns {
  margin: 0 auto;
  
}
/* CENTRE CONTENT */
/*main news box */
#mainNews {
border: 1px dashed gray;
margin-top: 10px;
height:230px;
background: url(../images/news/08/craigk.jpg) no-repeat top left;
}
#mainPageSel{
position:absolute;
z-index:1;
color:#2444C1;
background:white;
height:1.5em;
padding:0px;
margin:0px;
width:75px;
cursor:pointer;
vertical-align: top;
}
#mainPageSel ul {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: left;
  background: #FFFFFF
}
#mainPageSel ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}
#mainTitleBox{
position:relative;
top:185px;
left:0px;
height:40px;
padding-top:5px;
border-top: 1px dashed gray;
border-bottom: 1px dashed gray;
background: white;
}
#mainTitle{
font-size:200%;
color:#2E5AFF;
}
#mainTitleSmall{
font-size:100%;
color:#2E5AFF;
}

/*minor news boxes*/
#minorNews ul{
width:102.5%;
height: 275px;
float: left;
margin-top:10px;
margin-right:15px;
text-align:left;
clear:left;
margin-left:0px;
padding:0px;
}
#minorNews ul li {
float:left;
height:100%;
padding: 0px;
margin-right: 10px;
list-style: none;
width: 31%;
border: 1px dashed gray;
}
#minorNewsImg {
padding:0px;
margin:0px;
width:100%;
}
/* RIGHT CONTENT */
#rightTop {
margin-top:10px;
border: 1px dashed gray;
width:100%;
background:#2E5AFF;
color:white;
height:230px;
}
#rightMid {
padding-top:5px;
margin-top:10px;
border: 1px dashed gray;
width:99%;
height:87px;
}
#rightBot {
margin-top:10px;
border: 1px dashed gray;
width:100%;
height:170px;
}
#rightBot ul {
  margin-top:0;
  margin-left:20px;
}


/* TEXT HOLDER ON OTHER PAGES */
#textHolder {
border: 1px dashed gray;
margin-top: 10px;
height:auto;
padding-left: 5px;
padding-top:10px;
padding-bottom:10px;
}
/*POINTSEVEN.HTML*/
#calculations {
visibility:visible;
margin-left:317px;
}
/*INVOLVED.HTML (dropdown menu)*/
.mL {
display:none;
}
/* Column widths */
.width {
  width: 950px;
}

.widthPad {
  width: 746px;
}

.width25 {
  width: 24%;
}
.width40 {
  width: 39%;
}
.width50 {
  width: 48%;
}

.width60 {
  width: 60%;
}
.width73 {
  width: 73%;
}

.width75 {
  width: 75%;
}

.width100 {
  width: 100%;
}


/**************************************************************
   Footer
 **************************************************************/


#footer {
  clear: both;
  float: left;
  width: 100%;
  height: 5em;
  margin-top: -5em;
}

/**************************************************************
   Generic Display 
 **************************************************************/
.smalltxt{
font-size:xx-small;
margin-right:5px;
}

.block {
  display: block;
}

.clear {
  clear: both;
}

.paddingLeft {
  padding-left: 5px;
}

.paddingLeftBig{
padding-left:15px;
}

.paddingRight {
  padding-right: 5px;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.alignCent {
 text-align: center;
 }
 
.alignTop {
  vertical-align: top;
}

.alignMiddle {
  vertical-align: middle;
}

.alignBottom {
  vertical-align: bottom;
}
.pointer{
cursor:pointer;
color:blue
}

.margRight {
margin-right:5px;
}

In the end it looks like I made a mistake on my margins on the small text boxes on the bottom left. I had it setup where it was adding 10px to the right of each box. I changed it to having nothing added to the first box and then 16px to the left of the remaining two.

Thanks for all the help! And even though this problem is fixed I will still read the rest of that site LadyNRed because it looks really good.

I will still read the rest of that site LadyNRed because it looks really good.

It is, it is my first resource for IE bugs most of the time