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.

[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



Thanks!

[vinay111]

Screenshot of the site in Firefox




Any Help will be highly appreciated.

[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. Only then should you consider having a cross-browser design. Besides using deprecated code, you have a lot of misplaced elements.