Arrrghgh! CSS and centering

chabsey

I'm being driven insane trying to get Firefox and IE to interpret my CSS in the same way.

Basically I'm moving a site from a table-based version to an entirely CSS based version. In IE it looks fine, better than it did with tables. However, in Firefox it has a problem with the centering.

My site is set up like this:

<top nav>
<content area>
<bottom nav>

and has the following CSS applied to the body:

body {
text-align: center;
}

In IE the whole site is centered nicely using this, but in Firefox it looks like this:

<top nav>
..............<content>
<bottom nav>


Basically the top and bottom navs aer aligned to the left and the content in the middle is centered and no amount of editing the DIVs associated with the top and bottom navs with allow me to center them.

Anyone got any ideas?

Yerac

This should help http://bluerobot.com/web/css/center1.html

It's an area I'm looking at at the moment so don't ask me to explain, but from what I understand, text-align shouldn't actually work, the link above has a better explanation of the bug and how to support all browsers.

Ph3n0m

Can you post up the css, it might prove helpful

chabsey

Yerac wrote:

This should help http://bluerobot.com/web/css/center1.html

It's an area I'm looking at at the moment so don't ask me to explain, but from what I understand, text-align shouldn't actually work, the link above has a better explanation of the bug and how to support all browsers.

Thanks, I had read through that page already in fact but I'm still having the problem. I have to presume there's some conflict with some other CSS I've defined later in the stylesheet. It's frustrating trying to get these two damn browsers to work, even the areas that work still look slightly different on the two browsers!

chabsey

Ph3n0m wrote:

Can you post up the css, it might prove helpful

Why not!

Be gentle....I'm only learning this stuff!

---

/* CSS Document */
body {
text-align: center; /* Hack for IE5/Win */
}

/************************************************************** MAIN NAVIGATION */
#mainNavOuter {
width: 745px;
background: #145119;
}

#mainNav {
width: 745px;
font-weight: bold;
font-family: verdana, helvetica, arial, sans-serif;
}


/* float clear hack that has been hacked for Moz 1.5x and below */
#mainNavOuter:after {
content: ".";
display: block;
height: 0px;
overflow: hidden;
clear: both;
visibility: hidden;
}

/*Hack Targets IE Win only \*/
* html .mainNavOuter {height: 1%;}
/* End Hack */

#mainNav ul {
padding: 0;
margin: 0;
list-style-type: none;
}

#mainNav ul li {
background: #145119;
display: block;
float: left;
padding: 0px;
margin: 0px;
border-right: 1px dashed #FFD700;
}

#mainNav ul li a {
display: block;
float: left;
text-decoration: none;
color: #fff;
padding: 4px 15px 3px 15px;
font-size: 10px;
height: 15px;
}

#mainNav ul li#mainLast {
background: #145119;
display: block;
float: left;
padding: 0;
margin: 0;
border-right: 0px dashed #145119;
}

#mainNavLower {
width: 745px;
font-weight: bold;
font-family: verdana, helvetica, arial, sans-serif;
}

#mainNavLower ul {
padding: 0;
margin: 0;
list-style-type: none;
}

#mainNavLower ul li {
background: #145119;
display: block;
float: left;
padding: 0;
margin: 0;
border-right: 1px dashed #FFD700;
}

#mainNavLower ul li a {
display: block;
float: left;
text-decoration: none;
color: #fff;
padding: 4px 6px 3px 6px;
font-size: 10px;
height: 15px;
}

#mainNavLower ul li#mainLast {
background: #145119;
display: block;
float: left;
padding: 0;
margin: 0;
border-right: 0px dashed #145119;
}

#mainNavOuterImage {
width: 745px;
background: #145119 url(Images/flags.gif) no-repeat right;
}
#mainNavLower ul li a:hover{
color: #FFD700;
}

#mainNav ul li a:hover{
color: #FFD700;
}
/************************************************************** END MAIN NAVIGATION */

/************************************************************** CONTENT OF SITE */
#main {
color: #000;
margin: 0px auto 0px auto;
padding-bottom: 10px;
width: 745px;
text-align: left;
position: relative;
background: #fff;
border: 1px solid Black;
}
#main p {
font: 10px;
margin: 2px 5px 2px;
}
#main #textSections {
position: relative;
}
#main #leftColumn {
padding: 10px 10px 0px 10px;
/* use Box Hack */
width: 400px; /* for browsers with no escapes at all */
\width: 300px; /* for IE5/Win */
w\idth: 400px; /* for good browsers */
}
#main #rightColumn {
margin: 0em 0em 0em 430px;
padding: 5px 0px 0px 0px;
width: 290px;
position: absolute;
top: 0px;
}
#main #rightColumn ul#lowerList {
margin: 0px;
list-style-type: none;
}
#main #rightColumn ul#lowerList li {
padding: 0px;
}
#main #rightColumn ul#lowerList li a {
padding: 1px 0px 1px 20px;
background: transparent url(Images/car_shadow.gif) no-repeat 0px 2px;
color: #000; /* Box Model Hack */
width: 165px; /* for browsers with no escapes at all */
\width: 160px; /* for IE5/Win */
w\idth: 160px; /* for other browsers */
text-decoration: none;
display: block;
}
#main #rightColumn ul#lowerList li a:hover {
color: #000;
text-decoration: underline;
}

#main > #textSections > #leftColumn, #main > #textSections > #rightColumn {
padding-top: 0em;
}

/**************************************************************END CONTENT OF SITE */

P {
FONT-SIZE: 10px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
H1 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 12px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #000000;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
H2 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #006600;
PADDING-TOP: 0px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
LIST-STYLE-TYPE: none
}
}
TD {
FONT-SIZE: 10px;
COLOR: #000000;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
}
.copyright {
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #cccccc;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;

}

.tableoutline {
border: 1px solid #DADADA;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
TEXT-DECORATION: none;
color: Black;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
TEXT-DECORATION: none;
color: Black;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: underline;
}
.header
{
FONT-SIZE: 12pt;
COLOR: #636362;
FONT-FAMILY: Verdana, Arial
}.internal {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
}
.smallheading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006A00;
font-weight: bold;
}
#allinc{
font: bold 10px "Verdana Geneva Arial Helvetica sans-serif";
color: Red;
}

Ph3n0m

I could suggest a cheat/hack for this and it covers all browsers

Use a single large container table, so what you would have is this

<table border="0" cellspacing="0" cellpadding="0" class="table_container">
<tr>
<td valign="top" class="table_container_cell">
<div class="container">

<!-- all your other divs -->

<!¬- end of all divs -->

</div>
</td>
</tr>
</table>

and in your style sheet add the following

.table_container {width:100%; height:100%;}
.table_container_cell { height:100%;}
.container {position: relative;margin: 0 auto;width: 780px; height:100%;} /* width is the total width of your page */

I am currently using the above and it looks great in all browsers

chabsey

I had actually tried something similar and it did work. But this migration from tables --> CSS was kind of a test to see if I could do it. I'd hate to give in to tables at this stage, seeing as I know this has to be possible...I'm just missing something obvious.

Ph3n0m

I have done searching and what I posted was a recommend solution so that all browsers would see the page centered

chabsey

Ph3n0m wrote:

I have done searching and what I posted was a recommend solution so that all browsers would see the page centered

Fair enough....maybe that's a compromise I'll have to make. Thanks for the help.

JustHalf

Can you please provide your HTML? A pure CSS solution may be possible, and I'd suggest avoiding tables unless you're displaying tabular data.

louie

Did you try loading a diferent style sheet depending on the browser?
one css for IE and one for firefox

<script language="javascript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;

if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) {
document.write("<link href='IE.css' rel='stylesheet' type='text/css' />");
}

else if (browser_type == "Netscape" && (browser_version >= 4)) {
document.write("<link href='Netscape.css' rel='stylesheet' type='text/css' />");
}

// -->
</script>

also the html of that page might help us to help you.