Okay, so I'm using a 3 column design, with multiple headers on the left and right column. They're the same width, so I set my header to be a class, and use span, such as:
<span class="header">Navigation</span>
However, I would like to put a header on the top of my main content column in the center. The problem is, this column resizes depending on the browser size (width:auto
So I set the width in the <span> so that I don't have to waste space rewriting the CSS.
<span class="header" style="width:100%;">Website Title</span>
Now, for some reason, it works in IE, but in real browsers it overlaps the column and even goes into the right column. To actually see the problem, you can go to the site (<!-- m --><a class="postlink" href="http://www.wdhaven.com">http://www.wdhaven.com</a><!-- m -->). Since I'm still working on the CSS, it's all in the page's source. If anyone can help me figure out why this is happening and how to fix it, I'd be much obliged.Why a span? These are headings and should be h1 or h2 which will naturally fill the width of the container.Hmm. Well, the reason for the span was because of the background, possible image and border. But, you are of course right. This is why I am a novice. Thank you kindly.OK, I take back what I said before. Now that I was finally able to implement it, it is all MUCH worse than before. They aren't properly aligned, the columns' header no longer fill their columns, its a complete mess!No hacks:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="keywords" content="Master, Bob, personal, blog, PHP, HTML">
<meta name="description" content="The Personal Website of Master Bob. Includes PHP scripts, Web help, and other miscellaneous things."><title>A Web Designer's Haven</title>
<style type="text/css">
<!--
body {font-family: "Times New Roman", Times, serif; background: #333399; padding:0px; margin:5px 0 20px 5px; color:#000000;}
img { border:0px; }
a:link { color:#0000ff; }
a:visited { color:#0000ff; }
a:hover { color:#800080; }
a:active { color:#800080; }
/* No hacking allowed */
#content {
position:relative;
text-align: center;
width:auto;
min-width:120px;
height:700px;
margin:0px 153px 20px 147px;
border:1px solid black;
background:#d3d3d3;
}
#copyright {font-family: Arial, sans-serif;
clear:both;
font-size:0.7em;
position:relative;
text-align: center;
width:auto;
min-width:120px;
margin:0px 153px 20px 147px;
border:1px solid black;
background:#d3d3d3;
padding:0px;
}
h1, h2 {
text-align:center;
font-size:1.2em;
font-weight:normal;
border-bottom:1px solid #000000;
background:#808080;
padding:5px;
margin:0;
}
h2 {
border-top:1px solid #000000;
}
.box {
background:#d3d3d3;
width:140px;
margin-top:140px;
text-align:center;
}
#links {
background:#d3d3d3;
position:absolute;
left:5px;
width:140px;
height:700px;
border:1px solid black;
text-align:center;
}
#links a, p a {
display:block;
}
#other {
position:absolute;
right:5px;
top:5px;
width:140px;
height:700px;
border:1px solid #000000;
background:#d3d3d3;
}
-->
</style>
</head>
<body>
<div id="links">
<h1>Navigation</h1>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wdhaven.com/index.php"><img src="A%20Web%20Designer%27s%20Haven_files/me.htm" alt="Home" width="120" height="70" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wdhaven.com/blog.php">Blog</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wdhaven.com/php/index.php">PHP Scripts</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wdhaven.com/forum/index.php">Forum</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wdhaven.com/ilinks.php">Interesting Links</a>
</div>
<div id="content">
<h1>A Web Designer's Haven</h1>
<h3>This Website is currently under development.</h3>
</div>
<div id="other">
<h1>Other Stuff</h1>
<div class="box">
<h2>Polls</h2>
<p>Poll Stuff</p>
</div>
<div class="box">
<h2>Validation</h2>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=referer"><img src="A%20Web%20Designer%27s%20Haven_files/valid-html401.png" alt="Valid HTML 4.01!" height="31" width="88" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://jigsaw.w3.org/css-validator/validator?uri=www.wdhaven.com&usermedium=all"><img src="A%20Web%20Designer%27s%20Haven_files/vcss.png" alt="Valid CSS!" height="31" width="88" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.cynthiasays.com/org/cynthiatested.htm"><img src="A%20Web%20Designer%27s%20Haven_files/Ctested.gif" alt="Cynthia Tested!" height="31" width="88" /></a>
</p>
</div>
</div>
<div id="copyright">
Copyright 2004?M. Roberts<br />
All Rights Reserved
</div>
</body>
</html>But um, if I take out the hacks, won't I have issues with cross-browser appearance? I'm really not sure, I got the hacks from bluerobot.It works for all modern browsers on Windows, I can not test for the Mac.
Too many sites insist on using hacks, especially for IE.
It is up to you to use a 'hackless' solution or not. I have never personally used a hack for any of my sites.But as it is, it seems that the hacks are not giving me issues. Apparantley, it is simple using 100% for the width. Opera and Mozilla keep overspilling it, but it actually works in IE. Even without any hacks this happens. Can someone please explain why 100% is larger than the column, and how I may fix it? The fact that Mozilla and Opera aren't displaying correctly means that it isn't proper CSS and IE just threw me a fluke. Any help, guys? CSS is not my forte.
EDIT: I figured it out. The padding of my div was skewing the width when done in percentages. I simply set the padding of my main content div to 0 to work around the different ways it is displayed in different browsers.
<span class="header">Navigation</span>
However, I would like to put a header on the top of my main content column in the center. The problem is, this column resizes depending on the browser size (width:auto
So I set the width in the <span> so that I don't have to waste space rewriting the CSS.<span class="header" style="width:100%;">Website Title</span>
Now, for some reason, it works in IE, but in real browsers it overlaps the column and even goes into the right column. To actually see the problem, you can go to the site (<!-- m --><a class="postlink" href="http://www.wdhaven.com">http://www.wdhaven.com</a><!-- m -->). Since I'm still working on the CSS, it's all in the page's source. If anyone can help me figure out why this is happening and how to fix it, I'd be much obliged.Why a span? These are headings and should be h1 or h2 which will naturally fill the width of the container.Hmm. Well, the reason for the span was because of the background, possible image and border. But, you are of course right. This is why I am a novice. Thank you kindly.OK, I take back what I said before. Now that I was finally able to implement it, it is all MUCH worse than before. They aren't properly aligned, the columns' header no longer fill their columns, its a complete mess!No hacks:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="keywords" content="Master, Bob, personal, blog, PHP, HTML">
<meta name="description" content="The Personal Website of Master Bob. Includes PHP scripts, Web help, and other miscellaneous things."><title>A Web Designer's Haven</title>
<style type="text/css">
<!--
body {font-family: "Times New Roman", Times, serif; background: #333399; padding:0px; margin:5px 0 20px 5px; color:#000000;}
img { border:0px; }
a:link { color:#0000ff; }
a:visited { color:#0000ff; }
a:hover { color:#800080; }
a:active { color:#800080; }
/* No hacking allowed */
#content {
position:relative;
text-align: center;
width:auto;
min-width:120px;
height:700px;
margin:0px 153px 20px 147px;
border:1px solid black;
background:#d3d3d3;
}
#copyright {font-family: Arial, sans-serif;
clear:both;
font-size:0.7em;
position:relative;
text-align: center;
width:auto;
min-width:120px;
margin:0px 153px 20px 147px;
border:1px solid black;
background:#d3d3d3;
padding:0px;
}
h1, h2 {
text-align:center;
font-size:1.2em;
font-weight:normal;
border-bottom:1px solid #000000;
background:#808080;
padding:5px;
margin:0;
}
h2 {
border-top:1px solid #000000;
}
.box {
background:#d3d3d3;
width:140px;
margin-top:140px;
text-align:center;
}
#links {
background:#d3d3d3;
position:absolute;
left:5px;
width:140px;
height:700px;
border:1px solid black;
text-align:center;
}
#links a, p a {
display:block;
}
#other {
position:absolute;
right:5px;
top:5px;
width:140px;
height:700px;
border:1px solid #000000;
background:#d3d3d3;
}
-->
</style>
</head>
<body>
<div id="links">
<h1>Navigation</h1>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wdhaven.com/index.php"><img src="A%20Web%20Designer%27s%20Haven_files/me.htm" alt="Home" width="120" height="70" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wdhaven.com/blog.php">Blog</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wdhaven.com/php/index.php">PHP Scripts</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wdhaven.com/forum/index.php">Forum</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.wdhaven.com/ilinks.php">Interesting Links</a>
</div>
<div id="content">
<h1>A Web Designer's Haven</h1>
<h3>This Website is currently under development.</h3>
</div>
<div id="other">
<h1>Other Stuff</h1>
<div class="box">
<h2>Polls</h2>
<p>Poll Stuff</p>
</div>
<div class="box">
<h2>Validation</h2>
<p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=referer"><img src="A%20Web%20Designer%27s%20Haven_files/valid-html401.png" alt="Valid HTML 4.01!" height="31" width="88" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://jigsaw.w3.org/css-validator/validator?uri=www.wdhaven.com&usermedium=all"><img src="A%20Web%20Designer%27s%20Haven_files/vcss.png" alt="Valid CSS!" height="31" width="88" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.cynthiasays.com/org/cynthiatested.htm"><img src="A%20Web%20Designer%27s%20Haven_files/Ctested.gif" alt="Cynthia Tested!" height="31" width="88" /></a>
</p>
</div>
</div>
<div id="copyright">
Copyright 2004?M. Roberts<br />
All Rights Reserved
</div>
</body>
</html>But um, if I take out the hacks, won't I have issues with cross-browser appearance? I'm really not sure, I got the hacks from bluerobot.It works for all modern browsers on Windows, I can not test for the Mac.
Too many sites insist on using hacks, especially for IE.
It is up to you to use a 'hackless' solution or not. I have never personally used a hack for any of my sites.But as it is, it seems that the hacks are not giving me issues. Apparantley, it is simple using 100% for the width. Opera and Mozilla keep overspilling it, but it actually works in IE. Even without any hacks this happens. Can someone please explain why 100% is larger than the column, and how I may fix it? The fact that Mozilla and Opera aren't displaying correctly means that it isn't proper CSS and IE just threw me a fluke. Any help, guys? CSS is not my forte.
EDIT: I figured it out. The padding of my div was skewing the width when done in percentages. I simply set the padding of my main content div to 0 to work around the different ways it is displayed in different browsers.