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 (<!-- m --><a class="postlink" href="http://www.unc.edu/~callie17/hirc/indexmain.htm">http://www.unc.edu/~callie17/hirc/indexmain.htm</a><!-- m -->) and here is the working CSS version (<!-- m --><a class="postlink" href="http://www.unc.edu/~callie17/hirc/index2.html">http://www.unc.edu/~callie17/hirc/index2.html</a><!-- m -->). My CSS code (<!-- m --><a class="postlink" href="http://www.unc.edu/~callie17/hirc/style.css">http://www.unc.edu/~callie17/hirc/style.css</a><!-- m -->), 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?
CheersI 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;
}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.You're not trying to preview this in IE are you?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.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}
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?
CheersI 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;
}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.You're not trying to preview this in IE are you?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.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}