Cross browsing error

[vinay111]

Hi,
Our site www.travelspan.in is looking OK! in IE but is looking messed up in Firefox.

What could be the problem?

Is there any solution to this problem?

Thanks in advance.:o

[bluewalrus]

There could be multiple things wrong and possible multiple solutions. Which problems are you looking for. I see about 5 things that could be what you are referring to.
1. blueish/grey background not extending the whole page
2. uneven box sizes
3.nav bar on 2 lines
4. footer at top of page
5. centered content not centered for whole page

I don't have IE so can't see how it is suppose to look can you post a screen shot.

[vinay111]

Yes, exactly that is the reason why I need help, what could be the possible solution to set the site right in Firefox.

I am 100% sure it is looking well in IE.

But I am wondering people like you who are not using IE.

Any help will be highly appreciated.

Here is the Screenshot of the site (http://www.travelspan.in/screenshottravelspan.gif)

http://www.travelspan.in/screenshottravelspan.gif

Thanks!

[vinay111]

Screenshot of the site in Firefox (http://www.travelspan.in/screenshotfirefox.gif)

http://www.travelspan.in/screenshotfirefox.gif


Any Help will be highly appreciated.:o

[bluewalrus]

Is this a dreamweaver template or something?

[bluewalrus]

Too much code for me to go through right now, this does the top bar though atleast it'll probably be tricky to mix them i think you'll have to recode the rest of your page but you should do it so there are three or two boxes each with a set width in % and float each to the left then put the content in them. if that makes sense?

<div id="header">
<div id="banner">
<h1 style="color:#FFFFFF; float:left; font-family:'Times New Roman', Times, serif; font-size:40px;"><strong>Travel Span</strong></h1>

<span style="float:left; color:#FFFFFF; padding-top:35px; font-size:16px; clear:left;">The Complete Resource
for Business &amp; Leisure Travellers</span>
</div>
<ul id="navigation2">
<li><a title="Cargo News" href="cargonews.htm">Cargo News</a></li>
<li><a href="miceindustry.htm">MICE News</a></li>
<li><a title="Hotels and Resorts News" href="travelspan_SpaNews.htm">Spa News</a></li>

<li><a href="GDSnews.htme.htm"><span style="text-decoration: none">GDS</a></li>
<li><a href="visamain.htm">Cruise News</a></li>
</ul>
<ul id="navigation">
<li><a href="default.htm">Home</a></li>
<li><a href="media%20kit%20forweb.pdf">Media Kit</a></li>
<li><a title="Airlines News" href="travelspan-Archieves.htm" style="text-decoration:none;">Airlines</a></li>

<li><a title="Hotels and Resorts News" href="hotels&resortsnews.htm" style="text-decoration:none;">Hotels &amp; Resorts</a></li>
<li><a href="GDSnews.htme.htm">GDS</a></li>
<li><a href="visamain.htm">Visa Updates</a></li>
<li><a href="aboutus.htm">About Us</a></li>
<li><a href="contact/contact.htm">Contact</a></li>

<li><a href="calendar/calendar.htm">Calendar</a></li>
<li><a href="exhibitions_news.htm">Exhibitions</a></li>
<li><a href="Travel%20Span%20Subscription%20Form.pdf">Subscribe Travel Span</a></li>
<li><a title="NTOs News" href="NTOs_news.htm" style="text-decoration:none;">NTOs</a></li>
</ul>


* {
border:0;
margin:0;
}
#navigation {
background-color: #ca7;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
clear:left;
float:left;
width:100%;
}
#navigation2 {
background-color: #FFFFF0;
overflow: hidden;
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
clear:left;
float:left;
margin-top:11px;
}
#banner {
height:100px;
padding-left:25px;
padding-top:25px;
background:#990000;
}

[Medyman]

First, validate your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.travelspan.in%2F&charset=(detect+automatically)&doctype=Inline&group=0). Only then should you consider having a cross-browser design. Besides using deprecated code, you have a lot of misplaced elements.