Forum Moderators: not2easy
HTML/ASP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SPU SPS - Home</title>
<link rel="stylesheet" type="text/css" href="styles/spsstyle.css"></head>
<body>
<div id="whole">
<div id="left">
<!-- This is the left sidebar
There are no plans for
This right now, but something
may come up later -->
</div>
<div id="content">
<div id="nav">
<br />
<!-- This is the navigation bar
It contains all relavent
Links for the page. -->
<!-- #include file="asp/navigation.inc" -->
</div>
<!-- This is the main body of the page.
All information, news, and graphs
Will be here -->
</div>
<br />
<h3>News:</h3>
<div id="footer">
<!-- This is the footer element.
It will contain any copyright
info. -->
<!-- #include file="asp/footer.inc" -->
</div>
<div id="right">
<!-- This is the left sidebar
There are no plans for
This right now, but something
may come up later -->
</div>
</div>
</body>
</html>
CSS
/* This is the CSS stylesheet for the SPS
Website. *//* Begin global styles */
body {
font-family: "Times New Roman", Times, serif;
text-align: justify;
}
p {
padding-right: 10px;
padding-left: 10px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: xx-large
}
h2 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: x-large;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
padding-right: 10px;
padding-left: 10px;
}
.footertext {
font-family: "Courier New", Courier, mono;
text-align: center;
font-size: small;
}
.newstext {
padding-left: 20px;
padding-right: 20px;
}
.officepos {
font-weight: bold;
}
.centerpics {
text-align: center;
}
/* End global styles */
/* Begin layout styles */
div#nav {
position: relative; top: 0;
background-color: #999999;
border-bottom: 2px solid #8C0018;
text-align: center;
}
/* These are the navigation list
link, list styles */
#navlist ul {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist a {
padding: 3px 10px;
}
#navlist a:link, #navlist a:visited {
color: #FFFFFF;
text-decoration: none;
}
#navlist a:hover {
color: #8C0018;
text-decoration: none;
}
/* End navigation list styles. */
div#left {
float: left;
width: 10%;
}
div#content {
float: left;
width: 78%;
border: 2px solid #8C0018;
margin: auto;
}
div#right {
float: left;
width: 10%;
}
div#footer {
width: 100%;
clear: both;
border-top: 2px dotted #8C0018;
}
div#boarder {
border-top: 2px solid #8C0018;
border-bottom: 2px solid #8C0018;
}
div#whole {
margin:0 auto;
}
/* End layout styles */
The reason for margin: 0px auto; is: text-align only works on text. If you want to align the text within a p tag, sure, you can use text-align for it. IE does this incorrectly by centering block elements - divs, etc etc. So for both browsers to work:
<div style="text-align:center;">
<div style="width:765px;margin:0px auto;text-align:left;">
<p>Distasteful? Yes.</p>
</div><!-- Proper Method -->
</div><!-- Just for IE -->
Now I have a similar problem as the OP, in that the whole 3 column, 1 row table is not quite centered -- except in IE. It seems to be 5% or so to the left side (my over-all width is set to 95%). I've tried using your suggested centering code in a number of places, including setting up new divs where there were none. It's kinda hit or miss - all misses so far. Can you guide me?
Thanks,
Grump
Here was a small part of my css when I had the problem:
*
{
margin: 0;
border: 0;
}*
{
margin: 0 auto;
border: 0;
}I was going through the css cleaning up the mess and gave that a try. I still have a lot of work to do, but all the really hard parts are behind me now.
Thanks for the help,
Grump
*
{
margin: 0 auto;
border: 0;
}
Grump, you've actually hit on only half an answer there. Leaving the above code in your page is almost guaranteed to cause collateral problems.
What the above code says is to apply zero padding, zero top and bottom margins, and auto left and right margins to every element on the page. This resolved your problem because whatever element NEEDED the auto margins got the auto margins, but doing it this way is rather like trying to catch a specific fish using an enormous net. You'll get that fish, but you'll also catch all kinds of other fish in the net that maybe you didn't want. With everything on the page getting an auto l/r margin, any element with a width will end up centered in compliant browsers.
If this isn't causing layout problems, consider yourself lucky, but it establishes a context where problems could occur when future changes are made.
I would strongly suggest that you continue investigating to discover exactly which page element it was that needed the auto margin, and apply it specifically to that element, rather than everything on the page.
If I had to guess, I would say the <body> element is the most likely candidate, followed by any wrapper or container divs or tables you might have holding the bulk of the layout.
cEM
Thanks for your detailed reply. I am really new at this, but let me explain my reasoning and I hope you will let me know where it is faulty.
The code above is a starting point. It is the first code in my css. It does everything you said until I tell those elements to do something different. When I build the news module in the left column below the header, it is partly controlled by this:
.news
{
background: #faf3ed;
margin: 10px;
width: 180px;
border-top: 0;
border-right: 1px solid #a05000;
border-bottom: 1px solid #a05000;
border-left: 1px solid #a05000;
overflow: hidden;
padding: 2px;
}
.news p
{
color: #a05000;
font: 8pt tahoma, verdana, arial, helvetica, sans-serif;
margin: 7px;
text-align: left;
}
Likewise, the center content column over-rides the original settings:
.article
{
padding: 1px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 0;
margin-top: -10px;
}
.article p
{color: #000;
font: normal 0.9em/135% verdana, arial, helvetica, sans-serif;
margin: 12px;
text-align: left;
text-indent: 1cm;
}
To finish the main table, middle row that sits between the header and the footer, the right column has a picture module:
.pictureright
{
width:200px;
padding:10px;
float:right;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 0;
margin-top: 10px;
background:#d09962;
text-align:right;
border:1px solid #a05000;
color:#000;
}
.pictureright p
{
margin:0 auto;
padding:0;
font: normal 0.8em/140% tahoma, arial, helvetica, sans-serif;
text-align:center;
}
These are sections I have studied and worked on individually and popped into their respective positions. It makes it easier for me to build each page (I also have templates without one or more of the columns or swapped modules). A lot of the code was culled from doing searches looking for similar effects or trying to resolve an issue.
If my code can be refined or corrected to eliminate potential problems, please tell me. This is a sometimes frustrating, but always interesting experience in learning.
Thank you,
Grump
My worry is with the added "auto" value for the l/r margin, and here's why: the universal selector (*) doesn't apply it's rules just to divs, or just to top level parent elements, but to everything on the page, from the body element right down to each individual anchor tag. Now in most cases, this won't have much effect - an element must be block level and have an explicit width in order for auto margins to do anything - but by applying that auto margin to every single element on the page, you run the risk having it center something you don't want centered. If that happens, of course, you can just go in and specify that you don't want that element to have a l/r margin, but in my book this somewhat works against the idea behind using the universal selector to begin with; i.e., the idea is to remove default settings that interfere with cross-browser uniformity, not create a new default in order to get an effect on a single element, that must then be overridden for other elements.
If you think about this in terms of volume, you might be able to see my point. Say I have a total of 32 elements on my page, between the divs and headers and paragraphs and nav links, etc. Of those 32 elements, I need to center just one: the container div that holds my layout. All the rest of the stuff will sit as it sits, and I will control it's alignment using the appropriate properties.
If I apply auto margins to everything, I've now got to go through and make sure that the other 31 elements aren't being effected by those margins. Most of them won't be: only block level elements are effected, of them only ones with explicit widths are effected, and of those only the ones with widths smaller than 100% will be effected. It may well be that the only element of the 32 that the auto margins will effect at all is the wrapper div. However, anytime I add a new element to this page, I have to make sure that the auto margin isnt touching it, and if it is, I have to explicitly change it's l/r margin.
Conversely, if I know that only the one wrapper div needs the auto margin, I can apply the auto margin directly to it and don't even have to think about the other 31 elements. Nor do I have to worry about removing the l/r auto margin from elements that don't need it. Nor do I have to worry about what will happen when new content is added.
Perhaps it's just a matter of approach - a glass half full or half empty kind of thing. Ultimately, as long as it doesn't break your page it doesn't really matter. Either way consciously thinking about and discussing these things leads to better coding for everyone involved, so there you go. :)
cEM
I have been playing around with and trying to pick up bits and pieces of knowledge for about a year, but I have never absorbed so much as I have in the last several days. You have been of particular help and I thank you.
When you mentioned "wrapper div", I had no idea what you were talking about. I searched and learned a little more. I didn't have a wrapper div, but I do now. I removed the auto value from the universal selector, as you suggested, and am now using better css techniques. It made me see a solution to the centering, which exposed another fault or two that lead to even better control.
Still, there's a ways to go, so don't be surprised if you see me pestering you (or anyone willing to take the time) for more valuable information soon.
Best r'gards,
Grump
