Pop-up Blocker and Layout. Yikes.

[calliepeck]

Ok, so I'm working on converting to CSS from embedded tables and I'm having some trouble getting the layout to match up. Here is the tables version (http://www.unc.edu/~callie17/hirc/indexmain.htm) and here is the working CSS version (http://www.unc.edu/~callie17/hirc/index2.html). My CSS code (http://www.unc.edu/~callie17/hirc/style.css), too.

I am also having some issues with my contractible headers not working well if the IE pop-up blocker is activated. No idea why. Any ideas on how to fix this or any other way to get the contractible headers look?

Cheers

[ray326]

I assume the non-table version isn't content complete. To fix that main div,

div#mainpage {
position: absolute;
margin-top: -1px;
margin-left: 5px;
width: 595px;
height: 460px;
display: inline;
background-color: #E8E8D0;
font-family:Arial, Helvetica, sans-serif;
}

[calliepeck]

For some reason that messes it up even more. I don't know why. I need that search bar on the far right to be on top. I'm trying to nest the columns somehow, but mostly I'm just getting frustrated with it.

[ray326]

You're not trying to preview this in IE are you?

[calliepeck]

Ok, I've got some of the kinks out, but I'm still having issues getting the main content lined up the way I want it (especially having side-by-side nested columns in the beige area). And any idea on the pop-up issue or how to fake those contractible left-side links?

And I am previewing in IE and Firefox.

[ray326]

Ok, here's your css with ineffective stuff removed and positioning adjusted. Done in Fx 1.5. I'd probably rework the HTML in a way that would cut 75% of this css out. A single wrapper div on the left would work better than everything separate there.

/*-----------------------------------------------------------------------------------------------------------------*/

/* Sets the width of the content and background color */

body {
background-color: #508184;
width: 800px;
margin: 0 auto;
padding: 0;
font-size: 10px;
}

#containter {
}

/*-----------------------------------------------------------------------------------------------------------------*/

/* Header section for committee logo */
div#logo {
}

/*-----------------------------------------------------------------------------------------------------------------*/

/* main section width, features, etc. */

div#main {
background: #508184;
}

/* floating right column (basically the main fluid content). If you have to edit something, edit this. */

div#mainpage {
position:relative;
margin-left: 210px;
background-color: #E8E8D0;
font-family:Arial, Helvetica, sans-serif;
height:440px
}

div#leftmain {
}

div#topnav {
width: 390px;
padding-left: 150px;
}

div#topnav a {
color:#8B181B;
}

div#rightmain {
position:absolute;
top:0;
width: 200px;
margin:0 0 0 390px;
}


div#news {
margin-top: 20px;
width: 390px;
background-image: url(components/newsbg.gif);
background-repeat:repeat-y;
}

div#news p {
padding-right: 20px;
padding-left: 20px;
font-size: 110%;
}

/*-----------------------------------------------------------------------------------------------------------------*/

/* floating left column includes the nav bar and all content below. Editing could result in a world of pain. */

div#pagelinks {
position:absolute;
top:113px;
width: 200px;
background-color: #CC9;
}

div#emailsignup {
position:absolute;
top:340px;
width: 200px;
font-family: Arial, Helvetica, sans-serif;
background-color: #8B181B;
color: #E8E8D0;
}

div#emailsignup p {
padding:0 10px;
margin: 0;
text-align: center;
font-size: 110%;
}

div#emailsignup form {
}

div#contact-left {
position:absolute;
top:450px;
width: 200px;
font-family: Arial, Helvetica, sans-serif;
background-color: #CCCC99;
}

div#contact-left p {
text-align: center;
font-size: 110%;
margin: 0;
}

/*------------------------------------------------------------------------------------------*/

/* Bottom header and disclaimer. Do what you will. */

div#copyright {
margin-top: 10px;
clear: both;
}

div#copyright p {
font-family: Arial, Helvetica, sans-serif;
font-size: 110%;
text-align: center;
width:600px;
margin: 0 auto;
}

/*------------------------------------------------------------------------------------------*/

/* Form customization stuff. */

input.name {
background-color: #E8E8D0;
border-color: #600;
border-width: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 5px;
margin-left: 10px;
color:#666;
}

input.emailaddress {
margin-top: 3px;
background-color: #E8E8D0;
border-color: #600;
border-width: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 5px;
color:#666;
vertical-align:middle;
margin-left: 10px;
height: 16px;
}

input.search {
margin: 3px 0;
background-color: #fff;
border-color: #600;
border-width: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 5px;
color:#666;
vertical-align:middle;
height: 16px;
width: 97px;
}

input.buttonred {
margin: 3px 0 0 3px;
border-width:0;
vertical-align: middle;
}


/*------------------------------------------------------------------------------------------*/

/* General layout tags. Again, editing will result in design havoc. */

img.top {vertical-align: text-top}
img.bottom {vertical-align: text-bottom}
img.margin-top {margin-top: 10px}