Hello all, sorry to be so needy.
I have no clue what I’m doing wrong. It was working for awhile and suddenly stopped. I have a feeling I’ve added an element that has broken everything, but after pouring over the code for a few hours I’m not sure what.
It’s very messy, so apologize. Also if anyone has any remarks on a good four column structure, it’d be much appreciated. I think I have it (EDIT: I did have it, and if fixed, it would start working again but I want to make sure there isn’t a more perfect way of doing them.) but I feel like my build will eventually hit a wall.
CSS
/* simple reset to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
}
img, fieldset {
border: none;
}
hr {
display: none;
}
body {
font-size: 90%;
font-family: calibri,verdana,helvetica,sans-serif;
background:#FFFFFF;
margin-top: 30px;
text-align: center; /*center #pageWrapper in IE 5.x */
}
#signature {
position: relative;
margin: 30px 30px 70px;
background-image:url(image/CCSignature.jpg);
repeat: x-axis;
height: 77px;
width: 368px;
border: none;
}
#signature img {
display: none;
}
h1 {
position: relative; /* wrap floats */
padding: 0;
font-weight: bold;
font-size: 115%;
font-family: "calisto mt", helvetica, verdana, sans-serif;
font-color: black;
overflow: hidden;
}
p {
padding: 10px 0 0 0;
font-size: 105%;
}
#textWrapper {
margin-left: 0 auto;
margin-right: 0 auto;
width: 760px;
padding: 0 auto;
text-align:left;
}
#navBar {
list-style: none;
font-size: 1px;
padding-top: 10px;
text-align: center;
border-bottom: 1px solid #666;
white-space: nowrap;
}
#navBar li {
display:inline;
}
#navBar hr {
display: block;
background-color: black;
}
#hrNull {
display: none;
}
#navBar a {
display:-moz-inline-block;
display:-moz-inline-box;
display: inline-block;
font-size: 18px;
white-space: nowrap;
text-decoration: none;
color: black;
padding: 10px 60px;
}
#navBar a:active,
#navBar a:focus,
#navBar a:hover {
background: #67A 0 no-repeat;
}
#navBar a:hover {
color: gold;
}
/* This is all for the overall layout of the website */
#columnWrapper {
position: absolute;
margin-left: 0 auto;
margin-right: 0 auto;
}
#column1, #column2, #column3, #column4, #column5wide, #column6wide {
padding-top: 30px;
}
#column1 {
position: absolute;
width: 211px;
}
#column2 {
position: absolute;
width: 211px;
margin-left: 241px;
}
#column3 {
position: absolute;
width: 211px;
margin-left: 482px;
}
#column4 {
position: absolute;
width: 211px;
margin-left: 723px;
}
#column5wide {
position: absolute;
width: 633px;
margin-left: 241px;
}
#column6wide {
position: absolute;
width: 422px;
margin-left: 482px;
}
/* The About Us Navigation Bar */
/* The About Us Navigation Bar */
#aboutBar {
list-style: none;
/* font-size: 1px; */
/* For IE? */
padding-top: 0px;
text-align: left;
white-space: nowrap;
}
#aboutBar li {
line-height: 30px;
}
#aboutBar hr {
display: block;
background-color: black;
}
#hrNull {
display: none;
}
#aboutBar a {
font-size: 110%;
white-space: nowrap;
text-decoration: none;
color: black;
padding: 5px;
}
#aboutBar a:active,
#aboutBar a:focus,
#aboutBar a:hover {
background: gold 0 no-repeat;
}
#aboutBar a:hover {
color: red;
/* Less important styling elements */
ul {
font-size: 90%;
padding-top: 10px;
padding-left: 20px;
}
HTML
<html>
<head>
<title>About Us | The 55th College Council</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="CC_CSS_3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="textWrapper">
<div id="signature">
<img alt="The College Council Logo —*We welcome you!" src="">
</div>
<ul id="navBar">
<li><a href="">about us</a></li>
<li><a href="">minutes</a></li>
<li><a href="">opinions</a></li>
<li><a href="">calendar</a></li>
<li><a href="">contact us</a></li>
</ul>
<div id="columnWrapper">
<div id="column1">
<h1>About Us</h1>
<p>The College Council is the <b>undergraduate student governance organization.</b></p>
<p>Some of the things we do are:</p>
<ul>
<li>Advocate for student concerns and interests.</li>
<li>Charter student groups within the Emory College of Arts & Sciences.</li>
<li>Provide funding for these groups.</li>
<li>Put on various programs for the student body, for example, the annual <i>State of Race.</i></li>
</ul>
</div>
<!-- Careful! This is a table --!>
<div id="column2">
<ul id="aboutBar">
<li><a href=""><b>Executive Board</b></a></li>
<li><a href=""><b>Legislature</b></a></li>
</ul>
</div>
<div id="column6wide">
<p>Test test test test test test test test test.</p>
</div>
</div>
</div>
</div>
</body>
</html>
