Ok in Firefox 2.0 not good in IE V6

**Zygoma** · Dec 14, 2006, 16:15

Hello..

I'm working thru a sitepoint tutorial and have hit a problem.

Here is the page http://www.thestreettheatreadvertisi...m/html_utopia/

My specific problem is regarding the alignment of the three columns. In Firefox there is no problem but in IE V6 the three columns do not align to the top navigation bar titled "Home of the Hack".

Here is the CSS

HTML Code:

body {
  margin: 0;
  padding: 0;
  background-color: #050845;
  color: white;
  background-image:  url(img/bg.jpg);
  background-repeat: repeat-x;
  font: small Arial, Helvetica, Verdana, sans-serif;
}
#wrapper {
  background-color: #fdf8f2;
  color: black;
  margin: 30px 40px 30px 40px;
  padding: 10px;
 
}
#header-bottom {
  border-top: 1px solid #b9d2e3;
  border-bottom: 1px solid #b9d2e3;
  height: 1&#37;;
  }
  
#header-bottom ul {
  margin: 0;
  padding: 0;
  padding: 0 25px 0 0;
  text-align: right;
}
#header-bottom li {
  display: inline;
  background-color: #fdf8f2;
  color: #050845;
}
#header-bottom a:link, #header-bottom a:visited {
  text-decoration: none;
  background-color: #fdf8f2;
  color: #050845;
}
#tagline {
  font-weight: bold;
  background-color: #fdf8f2;
  color: #050845;
  font-style: italic;
  margin: 0px;
  padding: 0 0 0 15px;
  width: 200px;
  float: left;
}
#ball {
  position: absolute;
  top: 110px;
  right: 55px;
}
#main {
  position: relative;
  top:0;
  left:  0;
  width: 100%;
  margin-top: 10px;
}
#content {
  margin: 0 240px 0 150px;
  border: 1px solid #b9d2e3;
  background-color: white;
  color: black;

}
#mainfeature {
  background-image:  url(img/mainimg.jpg);
  background-repeat: no-repeat;
  background-color: #112236;
  color: white;
  padding: 2em 2em 1em 200px;
  height: 1%;
}
#mainfeature h2 {
  margin: 0;
  font-weight: normal;
  font-size: 140%;
}
#mainfeature p {
  font-size: 110%;
}
#mainfeature p.more {
  margin-top: 0;
  text-align: right;
}
#mainfeature p.more a:link, #mainfeature p.more a:visited {
  color: white;
  background-image:  url(img/more-bullet.gif);
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 14px;
}

#content .inner {
  margin: 10px 20px 10px 40px;
}
#content .inner h2 {
  color: #245185;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #b9d2e3;
  font-size: 110%;
}
#content .inner ul.features {
  margin: 0;
  padding: 0;
  list-style: none;
}
#content .inner h3 {
  font-size: 130%;
}
#content .inner h3 a:link, #content .inner h3 a:visited {
  color: #245185;
}
#content .inner p {
  color: #666666;
  font-size: 90%;
  margin-left: 7%;
}
#content .inner .features li img {
  float: left;
  margin: 0 5px 5px 0;
}
#content .inner p.author {
  font-weight:  bold;
}
#content .inner p.more{
  margin-top: 0;
  text-align: right;
}
#content .inner p.more a:link, #content .inner p.more a:visited {
  color: black;
  background-image:  url(img/more-bullet.gif);
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 14px;
  font-size: 90%;
  color: #1e4c82;
}
#sidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  background-color: #256290;
  color: white;
  margin: 0;
  padding: 0;
}
#sidebar h3 {
  font-size: 110%;
  background-image:  url(file:///C|/Web/table_sitepoint/chapter08/web_site_files/02_creating_the_layout/img/sidebar-header-bg.jpg);
  background-repeat: no-repeat;
  margin: 0;
  padding: 0.2em 0 0.2em 10px;
  font-weight: normal;
}
#sidebar .inner {
  padding: 10px;
}
#sidebar ul {
  list-style-image:  url(file:///C|/Web/table_sitepoint/chapter08/web_site_files/02_creating_the_layout/img/more-bullet.gif);
  margin-left: 0;
  padding-left: 20px;
}
#sidebar p, #sidebar li {
  font-size: 90%;
  line-height: 1.4em;
}
#sidebar ul a:link, #sidebar ul a:visited {
  color: white;
}
#sidebar .date {
  font-weight: bold;
}
#searchform .text {
  width: 196px;
  border: 1px solid #45bac0;
}
#searchform .searchbutton {
  text-align: right;
  margin-top: 4px;
  
}
#searchform .btn {
  border: 1px solid #45bac0;
  background-color: #256290;
  color: white; 
  
}
#sidebar .motm-image {
  float: right;
  margin: 0 30px 0 20px;
}
#sidebar p.more {
  clear: right;
  margin: 0 30px 0 0;
  text-align: right;
}
#sidebar p.more a:link, #sidebar p.more a:visited {
  color: white;
  background-image:  url(file:///C|/Web/table_sitepoint/chapter08/web_site_files/02_creating_the_layout/img/more-bullet.gif);
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 14px;
}
#sidebar2 {
position: absolute;
top: 0;
left: 0;
width: 159px;
border-top: 1px solid #b9d2e3;
border-left: 1px solid #b9d2e3;
border-bottom: 1 px solid #b9d2e3;
background-color: white;
color: black;
margin: 0;
padding: 0;
}

#sidebar2 .inner {
margin: 10px;
}

#sidebar2 a:link, #sidebar2 a:visited {
color: #245185;
font-weight: bold;
}

#sidebar2 h3 {
color: #245185;
padding-bottom: 0.2em;
border-bottom: 1px solid #b9d2e3;
font size: 110%;
}

Ive tried in vein a number of tweeks here and there but Ive ran out of ideas

Any suggestions how i could make the columns line up directly under the Home of the hack bit very welcome...

**Dr John** · Dec 14, 2006, 17:06

It's broken in FF, IE6 and IE7

do you design on a big screen with a high resolution? cos on my screens, the two columns on the left and right overlap the central column. If you have FF with the web developer plug-in, look at it with outline block elements ticked, in a browser window of about 1000px wide, and you can see the overlap.

Shouldn't the class inner in #content have a width defined or have I missed it somewhere?

Edit
Just noticed you have fixed margins for content to bring it in from the left and right columns. BUT the left and right columns have a width defined as a percentage - they vary. So overlap is inevitable unless my screen matches yours exactly.

**Zygoma** · Dec 14, 2006, 17:12

Originally Posted by Dr John

It's broken in FF, IE6 and IE7

do you design on a big screen with a high resolution? cos on my screens, the two columns on the left and right overlap the central column. If you have FF with the web developer plug-in, look at it with outline block elements ticked, in a browser window of about 1000px wide, and you can see the overlap.

How do i get the web developer plug in? Searched for it in FF help, no luck...