This is my first time to the forum. I'm working on a project for my class and I'm having two problems.
The first problem, the right border is not aligning up with the rest of the border. I also want the end points around the border to be rounded but we will worry on fixing the first issue first.
The second problem, I don't want any white space inside/around my two columns. I want the background of my columns to start right next to the border. This is a bigger issue in Firefox. How can I correct that?
Here is a link
https:// umdrive.memphis.edu/jmgillum/band_update/hmm.html
CSS-style sheet
Code:
/* CSS Document */
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background-image: url(img001.jpg);
background-repeat: no-repeat;
background-position: center;
height:150px;
display: block;
margin-left: auto;
margin-right: auto;
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
border-right:4px solid blue;
border-left:4px solid blue;
}
#contentcolumn{
margin: 0 0 0 285px;
background:#330000;
/*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 280px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
border-top:4px solid blue;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
Menu Style Sheet
Code:
/****** H3 */
ul#menu{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("http://www.v7n.com/forums/images/OFF.gif") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:4px solid blue;
border-top:1px solid blue;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;}
ul#menu li a{
display:block;
float:left;
color:#6d7078;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
}
ul#menu li a:hover{
}
HTML
Code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Univeristy of Memphis Mighty Sound of the Sound</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<link href="menu_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<ul id="menu">
<li><a href="home.html" target="_self" title="Home">Home</a></li>
<li><a href="news.html" target="_self" title="News">News</a></li>
<li><a href="bios.html" target="_self" title="Bios">Bios</a></li>
<li><a href="members.html" target="_self" title="Members Only">Members Only</a></li>
<li><a href="alumni.html" target="_self" title="Alumni">Alumni</a></li>
<li><a href="links.html" target="_self" title="Other LInks">Other LInks</a></li>
</ul>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<p><b>Content Column: <em>Fixed</em></b> </p>
Welcome to the Mighty Sound of the South's home page! The mission of the Mighty Sound of the South Marching Band is perform entertaining halftime and pre-game shows, and to provide energy and spirit at all events at which we perform.
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column 54443434443: <em>180px</em></b> </div>
</div>
<div id="footer">JMG Productionism</div>
</div>
</body>
</html>
Linear Mode
