Firefox Browser HTML help with website

Please! Can't figure it out for the life of me!

[Macbeth]

I have a website that has very similar html to
<snip>

However when I downloaded the firefox browser, as everybody keeps raving on about it, I decided to see how my website would look and to my dismay the formatting isn't quite there.

The top section is aligned to the left whilst the middle and bottom section is correctly aligned into the center.

Can tell me how i can get round this? I want my site be compliant with Firefox as well as IE browsers.

[edited by: engine at 2:39 pm (utc) on Feb. 17, 2005]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]

[MatthewHSE]

Please post the relevant code so we can have a look. Are you using CSS or plain ol' HTML attributes for your formatting/alignment?

If using CSS, the simple answer is to assign

margin: auto;

to the block-level elements you want centered. This is the "proper" way to get a block centered; however, IE treats a block like text, which it isn't, so in IE, using

text-align: center

on the containing element works. (Incidentally, IE of course doesn't recognize the right method of centering, so you need to use both methods to get a good cross-browser result.)

[Macbeth]

I believe this is the trouble some code in the CSS

.tb1 {
BORDER-RIGHT: #FFFFFF 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #FFFFFF 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: 0px
}

how would i fix this?

[MatthewHSE]

Can you post some HTML as well? Hard to tell what the CSS is doing without seeing the markup.

For a best guess, from what you've posted, I'd suggest setting your top and bottom margins to 0 and the left and right margins to auto. But that's just a guess; if you post the code I can give better advice.

[Macbeth]

Just sent you a sticky as i need to refer a URL

[MatthewHSE]

I got your sticky and had a look. In the future, it will be best if you take a few minutes to sort out the relevant code yourself and post it in the forum, removing all specifics to your site. Posting the code gives lasting value to the forum for later visitors.

I've taken a couple minutes to sort out the relevant portions of your code, both so other visitors can see what's going on, and so you can see how to do it yourself in the future.

In any case, I found your problem. It was as I suspected; the un-centered portion needed the left and right margins to be set to auto. So in this case, the following works:

.tb1 { 
border: 0; 
padding: 0px 0px 0px 0px; 
/* margin: 0px 0px 0px 0px; <---- YOUR OLD CODE */ 
margin: 0 auto; 
border-right: 1px solid #C0C0C0; 
border-left: 1px solid #C0C0C0; 
}

<table width="80%" align="center" cellpadding="0" cellspacing="0" class="tb1"> 
<tr>  
<td width="22%"><a href="http://example.com"><img src="/images/image.jpg" border="0"></a></td> 
<td width="78%"><div class="keyword">Text goes here</div></td> 
</tr> 
<tr> 
<td colspan="2" class="tb2"><div class="headline">Headline Here</div></td> 
</tr> 
</table>

Frankly I don't know why the rest of the page is centering; I couldn't find the code to do that in a quick glance over the page but something's doing it. Try finding that out next time you get bored! ;)

<edit> Just saw your last two posts; you're going to want to edit those out quickly or a mod will likely do it for you to eliminate all those specifics. When posting code, you need to strip out all the non-relevant portions, post all the relevant parts, and remove anything that could be used to identify your site. </edit>

[Macbeth]

You are a saint! Thank-you very much for helping me out on this.

my apologies for pasting the whole code into the forum. Giving away specifics relating to the site was not my intention.

I will make sure I'll post the relevant bits in future.

[g1smd]

Make sure to run your CSS through [jigsaw.w3.org ] to make sure that all is in order with the rest of it.