I am the webmaster of www.ku.edu/~idea
We just re-did our website using CSS (which I'm still fairly new at).
I'm having a couple of problems. When viewing the site with different
browsers at different resolutions, the banner does weird things (the
backround image of it either goes way beyond the width of the screen
or it is too short). Also, when viewing the site with the macintosh
version of IE, the site is almost unreadable, because my sidebars lay
on top of the main text. How can I fix these issues? Thanks!

Here is the code from my CSS stylesheet:
body {
	margin: 0px;
	padding: 0px;
}
div#header {
	position: absolute;
	width: 100%;
	left: 0px;
	top: 0px;
}
div#banner {
    background-color: #3375C3;
	background-image: url(bgtile.jpg);
    background-repeat: repeat-x;
	height: 189px;
}
img#titletext {
	position: absolute;
	left: 400px;
	top: 40px;
}
div#nav ul {
	list-style-type: none;
}
div#nav ul li {
	display: inline;
}
div#content {
	position: absolute;
	left: 56px;
	top: 250px;
	right: 274px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 91%;
	line-height: 140%;
}
div#content h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 146%;
	color: #105BAC;
	font-weight: normal;
}
div#content h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #105BAC;
	font-weight: normal;
	font-size: 120%;
}
div#sidebar {
	position: absolute;
	width: 222px;
	top: 250px;
	right: 20px;
}
div#sidebar div.feature {
	font-family: Georgia, "Times New Roman", Times, serif;
	color : #666666;
	background-color : #fefefe;
	border : 1px solid #efefef;
	margin-bottom : 11px;
	padding : 10px;
	line-height : 140%;
}

div#sidebar div.feature ul{
	margin : 0;
	padding : 0;
	line-height : 180%;
	list-style-type: square;
	list-style-position: inside;
}

div#sidebar div.feature ul li{
	color : #06D3FF;
	background-color : transparent;
}

div#sidebar div.feature ul li a{
	color : #115EAC;
	background-color : transparent;
	text-decoration : none;
}

div#sidebar div.feature ul li a:hover{
	text-decoration : underline;
}

form#loginform input{
	color : #123466;
	background-color : #fff;
	width : 116px;
	border : 1px solid #ddd;
}

form#loginform input.submit{
	width : 60px;
	border : 1px solid #123466;
	color : #123466;
	background-color : #ddd;
}

form#loginform, form#loginform table, form#loginform tr, form#loginform td{
	margin : 0;
	padding : 0;
}

form#loginform table th{
	font-family : Georgia, "Times New Roman", Times, serif;
	color : #115EAC;
	background-color : #fefefe;
	font-size : 11px;
	text-align : left;
	margin : 0;
	padding : 0;
}

div#sidebar form{
	padding : 0;
	margin : 0;
}

div#sidebar h1{
	font-size : 110%;
	margin : 0;
	padding : 0;
	color: #115EAC;
}

div#nav li a{
	color : #105BAC;
	background-color : #efefef;
	text-decoration : none;
	
}

div#nav li a:hover{
	color : #105BAC;
	background-color : #fff;
	border-bottom : 4px solid #06D3FF;
}

You are using a "%" for your banner size, when you do that although it
makes for pretty viewing in a full size screen, any resolution that is
not 100% will give you a smaller banner length. Because you have laid
an image in there and image size is determined by pixels, you will get
the effect you have now. Your choices are to either adjust the image
to display in %'s or to adjust the banner to pixel size.

Do not, and I repeat do not work with both percents and pixels (when
dealing with width), with the different resolution sizes, browsers and
everything out there, it is best to work with one format. If you must
lay your images in with pixel sizes... then define your div layers
with pixels.