browser compatibility, help!

sanjalee posted this at 04:46 — 28th April 2009.

They have: 2 posts

Joined: Apr 2009

Hi, I am using a website builder to create a website for a company im setting up.

Here is a link - http://www.monk3d.com/browserscompat.html

It works great in IE, however in firefox the menu is alligned to the left, and the footers are stretched out slightly.

Now I am a TOTAL novice when it comes to building a website (hence why im using a site builder).

Any help/ advice would be greatly appreciated and in return I will offer you much love and happiness

blue cross health insurance

greg posted this at 09:21 — 28th April 2009.

He has: 1,581 posts

Joined: Nov 2005

The (inner) table class doesn't have any CSS defined for the table itself. So adding something such as this in the <head> will give you alignment options:

.menu{
margin-left: 20px;
}

Not sure what you want to do with it, but the above code will give it a left margin, you can change the 20px to whatever you want.
If you wanted the menu to be aligned centrally you will have to use auto margins.

Or as the entire menu inner table is in an outer table cell (TD) you can just centre align the text on the entire outer table TD:

<td align="left" style="text-align: center; background: rgb(255, 153, 0) 
none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; 
-moz-background-origin: -moz-initial; -moz-background-inline-policy: 
-moz-initial;">

That is your original code with text-align: center; added to the inline CSS style. It just aligns text centrally in the table cell. It worked in firefox leaving the align="left", might not work as well in other browsers - I don't use tables often so don't know how they behave in general really.

Or you could remove the inline CSS style declarations from the following code (the inner table):

From this:
<table height="35" cellspacing="5" cellpadding="0" border="0" 
align="center" meta="menu" metaid="able2design2" 
style="display: inline; border-collapse: collapse;" class="menu">

To this:
<table height="35" cellspacing="5" cellpadding="0" border="0" align="center"
meta="menu" metaid="able2design2" class="menu">

And add the CSS to the class in the CSS in the <head>:

.menu {
margin: 0px auto 0px auto;
border-collapse: collapse;
}

You will have to leave out display: inline; to get this to work.
You already have a class for the table anyway class="menu" - so not sure why you have a class called in the document <head> then also have inline style for it as well. Just use the <head> for everything (unless it's from PHP of course).

Not sure what you mean by "The footers are stretched out slightly". The footer appears to be the same length as the top nav menu orange background in my Firefox.

articlemaster posted this at 14:23 — 28th April 2009.

They have: 83 posts

Joined: Apr 2009

But its work fine for me I have checked your site in all types of web browsers but i don't find any problem with it its working perfectly with Mozilla firefox,Netscape navigator,IE,Chrome,Opera,Safari etc...there is no misalignment problem but your site is very slow you have given a demo page with very less text still its loading very slowly in comparison to other big dynamic sites so work on this issue otherwise everything is fine.
Thanks.