Overlapping columns in Firefox

[Casey Kcins]

Hi Everybody!

This question, I thought, would be best answered by someone in this group. Hopefully you can point me in the right direction.

I'm attempting to make a 3 column layout. A middle column, and two columns on the right.
Here's the link to the site:
http://servicesoftheweb.com/servicesoftheweb/Default.aspx

Now, opened in IE6, it looks wonderful.
Firefox is a different question.
Usually IE is the problem.
Anyone have any ideas?

Here's the link to the CSS: http://servicesoftheweb.com/servicesoftheweb/css/general.css

Thanks!

[Galen Palmer]

I was goofing off in the FireFox web developer plug in (https://addons.mozilla.org/en-US/firefox/addon/60 :: highly recommended) and came up with this:

    
 
/* LETS START WITH THE HEADER STUFF *******
 *
 */
 
#header {
padding: 0px 0px 0px 300px;
font-family: Times;
font-size: 24px;
 
display: block;
width: 100%;
height: 30px;
}
 
#header li {
float: left; 
padding: .25em 23px 0 13px; 
margin-right: 5px;
background: url(../images/xmark.gif) 100% 66% no-repeat;}
 
#header li a {
padding: .75em 0 0.25em;
text-decoration:none;
color: #000000;
}
 
/* DONE HEADER */
 
#movingtype {
 text-align: center;
 font-size:.9em;
 /* padding: .5em 1em 0.5em;  */
 padding-bottom: .25em;
 border-bottom: 1px dashed #999;
 margin-right:5px;
 text-transform:uppercase;
 letter-spacing: 0.025em;
}
 
#intro {
text-align: center;
border-bottom: 1px dashed #999;
margin-right:5px;
font-style: oblique;
letter-spacing: 0.025em;
} 
 

/* Source ordered floating 3 col layout by luci, comments/suggestions mailto:luci[-at-]sh.ground.cz */
 
/* first comes html and body */
html, body {
height: 100%;
}
body {
margin: 0px; 
padding: 0px;
font-family: 'Gill Sans', 'Lucida Grande', 'Luxi Sans', Tahoma, lucida, sans-serif;
font-size: 75%;
_font-size: 100%;/* using underscore hack for MSIE here */
background: #ffffff;
 
}
 
/* all the divs */
div { }
 
div#maincol {
  float: left;
  text-align:justify;
  width: 550px;
  height: auto;
}
 
div#col2 {
float: right; 
width: 200px; 
border-right: 1px solid #999;  
height: auto;
}
 
div#col3 {
float: right; 
width: 125px; 
border-right: 1px solid #999;  
height: auto;
} 
 
div.colwrapper {margin: 0px;}
div.content {padding: 1em;}
 
#footer {
  clear: both;
}
 
/* headings */
h1 {font-size: 200%; text-align: center; margin-top: 0;}
h2 {font-size: 150%;}
 
/* other common content elements can follow here */
del {
background-color: #FFF0E6;
}
ins {
background-color: #FFF3BF;
text-decoration: none;
}
object {
border: solid 1px black;
}

/* FOOTER ********************* 
 *
 */
#footer {clear: both; border: 1px solid #666; border-width: 1px 0;
  margin-bottom: 3em; font-size: 0.85em;
  background: #FBFAF4 url(../img/pixelstoprose.gif) 20px 50% no-repeat;}
#footer p {margin-left: 200px; padding: 1em 20px; border-left: 1px solid #666;
  background: #FFF;}
#footer a:link, #footer a:visited {border-bottom-width: 0;}
#footer a:hover {border-bottom-width: 1px;}
#footer .copyright {padding-left: 25px; background: url(../images/xmark.gif) 10px 50% no-repeat;}
.issn {font: 0.9em Verdana, sans-serif; text-transform: uppercase; letter-spacing: 0.33em;}
.issn b {font: 1.2em Georgia, Times, serif; letter-spacing: 1px;}
/* END FOOTER */
 

I tried to clear out some of the css to see if I could see what the problem is and ended up giving the #maincol, #col2, and #col3 explicit widths and heigts. I then made sure the header was full width so that #maincol would wrap to a clean line.

Anyway, with 3 fixed width columns floating in the page it's a little odd. As the browser window is resized the right columns start to bounce down to their own line in the layout. I'm not sure if this is the effect you were going for.

BTW, this has NOT been tested in IE. I was just curious if I could get FF to work again.

[Casey Kcins]

Well, you're correct. It looks like it should now in FF. Looks good in IE also. I guess it's just the variable width stuff eh? I guess explicit widths and heights are the way it's going to have to be. <shrugs>

I'll definitely download the addon.

Thanks again for the help, I'll tweak it from here.