Menu
Hey all, I’m fairly new to css and new to the forum, so bare with me. I’m working on a fairly straight forward personal site and I’m looking to have essentially 2 columns. One centered (600px) and a side bar (200px) on the right. Currently this is achieved by having three columns, one centered and two side bars (one empty) and it renders correctly in FF, but not so much in IE (haven’t tested others yet). I was wondering if anybody can help correct it as I’m stumped. I’ve attached the html below (with inserts where ajax kicks in) and css, and you can check it out yourself at [url]http://krsulich.mit.edu
Also, I’m curious if there’s always one solution that works between all browsers. That is, might I have to run browser specific css? Best way to do this?
Thanks a lot.
style.css
[CODE]
body,html
{
background-color : #FFFFFF;
margin : 0;
padding : 0;
font-family : Georgia;
font-size : 10px;
line-height : 1.2em;
color : #444;
text-decoration : none;
word-spacing : normal;
letter-spacing : 0;
text-align : justify;
}
body
{
min-width : 600px;
}
a:link { color : #a30023; text-decoration : none; }
a:visited { color : #a30023; text-decoration : none;}
a:hover { color : #ea006d; text-decoration : underline; }
a:active { color : #ea006d; text-decoration : underline; }
a.silent:link { color : white; }
a.silent:visited { color : white; }
a.silent:hover { color : white; }
a.silent:active { color : white; }
h1
{
font-size : 2.4em;
text-decoration : underline;
margin-top : 10px;
margin-bottom : 10px;
}
h2
{
font-size : 2em;
text-decoration : none;
margin-top : 10px;
margin-bottom: 5px;
line-height: 1em;
}
ul.indentedList
{
list-style-type : none;
list-style-image : none;
}
img.floatLeft
{
border-style : none;
float : left;
margin : 0px;
padding : 0px;
z-index: -1;
}
div.newsDate
{
color : #6b6b00;
font-size : 1em;
}
div.bodyContainer
{
margin : 0 auto;
width : 600px;
}
div.genBody
{
text-align : justify;
}
div.newsContainer
{
margin : 0 auto;
width : 750px;
}
div.leftBar
{
float : left;
width: 200px;
margin : 0 auto;
}
div.rightBar
{
position : relative;
float : right;
top : -10px;
width: 200px;
text-align : left;
margin : 0 auto;
padding-left : 10px;
}
div.centeredText
{
text-align : center;
width : 600px;
margin : 0 auto;
clear : both;
}
div.newsText
{
width: 550px;
float: none;
margin: 0px auto 0px auto;
}
div#diggHidden
{
display: none;
}
span#ajaxThrobber
{
position: fixed;
_position: absolute; /* ie hack, no idea if it works, doesn’t validate here*/
right: 1px;
top: 1px;
padding: 0px;
display: none;
}
#throbWhite { display : none; }
#throbBlack { display : none; }
[code=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>krsulich_mit_edu</title>
<link rel=”stylesheet” type=”text/css” href=”scripts/incl/style.css” />
<link rel=”stylesheet” type=”text/css”
href=”scripts/incl/lightbox2.02/css/lightbox.css” />
<meta http-equiv=”expires” content=”Wed, 09 Aug 2000 08:21:57 GMT” />
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<script type=”text/javascript” src=”scripts/incl/flashdetect.js”></script>
<script type=”text/vbscript” src=”scripts/incl/flashdetect.vbs”></script>
<script type=”text/javascript” src=”scripts/incl/ajax.js”></script>
<script type=”text/javascript” src=”scripts/incl/flashcomm.js”></script>
<script type=”text/javascript”
src=”scripts/incl/lightbox2.02/js/prototype.js”></script>
<script type=”text/javascript”
src=”scripts/incl/lightbox2.02/js/scriptaculous.js?load=effects”>
</script>
<script type=”text/javascript”
src=”scripts/incl/lightbox2.02/js/lightbox.js”></script>
</head>
<body onload=”AJinit(‘ajaxWarning’,’graphic_header’,’content_body’);
initLightbox();”>
<div id=”throbber”>
<span id=”ajaxThrobber”>
<a href=”#” class=”silent” onclick=”return switchThrobber();”>
<img id=”throbWhite” src=”images/indicator.white.gif” alt=”w” />
<img id=”throbBlack” src=”images/indicator.black.gif” alt=”b” />
</a>
</span>
<div id=”throbFrame”><!–insert an empty iframe to looping php to tickle browser throbber–></div>
</div>
<div id=”graphic_header”><!–flash header goes here through ajax–></div>
<div id=”content_body”>
<!– this whole div filled through ajax –>
<div class=”newsContainer”>
<div class=”leftBar”></div>
<div class=”rightBar”>
<h2>
<img src=”images/16×16-digg-guy.png” alt=”digg logo”
height=”16″ width=”16″ />
diggs…
</h2>
<div id=”diggs”><!– grabs from diggHidden->></div>
</div>
<div class=”newsText”>
<!– fill this up with the main body text–>
</div>
<div class=”centeredText”>
<!– footer –>
<hr/>
<p>© Kevin Krsulich unless otherwise noted</p>
<p>Page load time: 0.00102 sec.,
Server uptime: 1d 20h 27m 43s,
Server load: 1.00 1.00 1.00 </p>
<p>
<a href=”http://validator.w3.org/check?uri=referer”>
<img src=”../images/w3c-valid-xhtml11.png”
alt=”Valid XHTML 1.1 Strict” height=”15″ width=”80″ /></a>
<a href=”http://validator.w3.org/check?uri=referer”>
<img src=”../images/css.png”
alt=”Valid CSS Level 2.0″ height=”15″ width=”80″ /></a>
</p>
</div>
</div>
<div id=”ajaxWarning”>
<!– this is hidden as soon as javascript starts up–>
<p>Your browser doesn’t support AJAX, and this site doesn’t not
require it…yet. Consider turning on JavaScript and refreshing this
page.</p>
<p>If your name is GoogleBot, however, wait to see a dump of all
“content.”</p>
<div id=”dump”></div>
</div>
<div id=”diggHidden”>
<!–call and hide script here, since you can’t run javascript direct when loaded through ajax, and I haven’t had time to right a feed reader yet.–>
<script type=”text/javascript”
src=”http://www.digg.com/diggjs/user/dugg/ksool/4″></script>
</div>
</body>
</html>