Too much space, and centering issues

L

liunx

Guest
I have found the whole experience of getting CSS to display what I need it to very frustrating, but I have two particular problems. For reference, the website I'm working on is: <!-- m --><a class="postlink" href="http://www.secretservants.org/">http://www.secretservants.org/</a><!-- m --> and the stylesheet is <!-- m --><a class="postlink" href="http://www.secretservants.org/secretstyle.css">http://www.secretservants.org/secretstyle.css</a><!-- m -->

So, two problems:

1. There's a big chunk of space on the right that I undoubtly specified at some point in the CSS file, but I can't seem to figure out how to get rid of it or make it smaller.

2. On the "Our Mission" page, the chart only displays as centered in Firefox, not in IE... how do I fix it so it's centered in both?


Any ideas? Thanks...First thing to do is take care of the HTML errors: <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.secretservants.org%2Fcontent%2Findex.php">http://validator.w3.org/check?uri=http% ... Findex.php</a><!-- m -->

(Adding a valid doctype may go a long way toward getting IE to act more like FF.)

Then check out the CSS errors: <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.secretservants.org%2Fcontent%2Findex.php&usermedium=all">http://jigsaw.w3.org/css-validator/vali ... medium=all</a><!-- m -->

Any time you have any HTML errors and/or CSS errors, all bets are off. Bookmark these two links, you'll want to use them a lot (I know I do :) ):
<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
<!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/Thanks">http://jigsaw.w3.org/css-validator/Thanks</a><!-- m --> a ton, that's a very helpful site and I've never seen it before.A question, I set the DOCTYPE to strict and it's complaining about attributes that I defined in my stylesheet. Is it supposed to? If so, what should I do to achieve the same effect without creating errors?Played around with it some, making the HTML markup cleaner and more semantically meaningful, and tweaked the CSS to get what I think is the desired effect. (I put all the appicable CSS within the style block, deleting some stuff that didn't appear to apply to this page, so don't just cut-and-paste it over your CSS file as you might need some of it for other pages? I also changed image src names to full urls so I could get them from my browser - again you might want to change them back to relative paths if you use any of this.) Oh, and I commented out the stylesheet link, so you'll want to uncomment it if/when you update the CSS file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

<title>Secret Servants</title>
<!-- link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"secretstyle2.css" -->
<style type="text/css">
<!--
body {
margin:0px 0px 0px 0px;
font-family: Arial, sans-serif;
font-size: 13pt;
}
img {
border:0;
}
#leftcontent {
float:left;
background:#fff;
margin-right:15px;
padding-left:50px;
padding-top:20px;
list-style: none;
}
#leftcontent li {
display: block;
margin-bottom: 0 0 10px;
}

#rightcontent {
background:#fff;
margin-right:15px;
padding-bottom:20px;
text-align: justify;
padding-left: 160px;
}

#topcontent {
margin: 0;
padding: 0;
height: 156px;
}

p {
margin: 0px 0px 0px 0px;
padding-bottom: 0;
clear:right;
}

h1 {
font-size: 14px;
padding-top: 10px;
}

h2 {
font-weight:bold;
font-size:medium;
color: rgb(51,51,153);
text-align: center;
}

.centered {
text-align: center;
}

#rightcontent p {
font-size:13px;
margin-left:0px;
}
#footer {
clear: both;
margin-top: 1em;
text-align: center;
font-size: smaller;
}
-->
</style>

</head>

<body>
<h1 id="topcontent">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.secretservants.org/content/images/layout_01.gif"
width="1004" height="156" alt="Secret Servants Logo">
</h1>

<ul id="leftcontent">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php"><img src="http://www.secretservants.org/content/buttons/home.gif" name="home" alt="home"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"history/index.php"><img src="http://www.secretservants.org/content/buttons/history.gif" name="history" alt="Our History"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"mission/index.php"><img src="http://www.secretservants.org/content/buttons/mission.gif" name="mission" alt="Our Mission"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"involved/index.php"><img src="http://www.secretservants.org/content/buttons/involved.gif" name="involved" alt="Get Involved"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"nominate/index.php"><img src="http://www.secretservants.org/content/buttons/nominate.gif" name="nominate" alt="Nominate A Family"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"updates/index.php"><img src="http://www.secretservants.org/content/buttons/recipients.gif" name="recipients" alt="SS Recipients"></a><br>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"sponsors/index.php"><img src="http://www.secretservants.org/content/buttons/sponsors.gif" name="sponsors" alt="Our Sponsors"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact/index.php"><img src="http://www.secretservants.org/content/buttons/contact.gif" name="contact" alt="Contact Us"></a></li>
</ul>

<div id="rightcontent">
<h2>Welcome To Secret Servants!</h2>
<p class="centered">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.secretservants.org/content/images/houseSmall.gif" alt="House Graphic">
</p>
</div>

<script type="text/javascript">
var newwindow;
function poptastic(url)
{
newwindow=window.open(url,'name','height=400,width=450');
if (window.focus) {newwindow.focus()}
}
</script>

<p id="footer">Copyright 2005 Secret Servants. Web related questions/comments?
Email <a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">here</a>.
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:poptastic('privacy/index.php');">Privacy Policy.</a></p>

</body>
</html>
 
You must log in or register to reply here.
Back
Top