Forums

flyseair

Hello Everybody!

I would like to ask for your help on my CSS that I have based from one of the CSS-Tricks. It worked perfectly with Safari and IE, but unfortunately, it's giving me headache when it comes to Firefox.

Here's the url of the problematic site: http://seairlifestyle.flyseair.com or http://www.flyseair.com.

In Firefox, the menu gets distorted when you go to a different link, but it gets fixed when the browser is refreshed.

I would really appreciate your help on this. Super thanks!

Sincerely,

Leo

al_m473

I am just trying it in FF3 and doesn't seem to be wrong for me,
do notice that you have no link back to the home page from any
pages you link to.

Al

Argeaux

i saw the bug. This is what the source looks like when the bug happens:


<li>
  <a class=\"search\" title=\"Search SEAIR\"> </a>
  <form id=\"search\" target=\"google_window\" action=\"http://www.google.com/custom\" method=\"get\">
  <a class=\"search\" title=\"Search SEAIR\"> </a>
  <div align=\"right\">
   <a class=\"search\" title=\"Search SEAIR\">
     <input type=\"hidden\" value=\"flyseair.com\" name=\"domains\"/>
     <input type=\"hidden\" value=\"pub-0240922582484691\" name=\"client\"/>
     <input type=\"hidden\" value=\"1\" name=\"forid\"/>
     <input type=\"hidden\" value=\"ISO-8859-1\" name=\"ie\"/>
     <input type=\"hidden\" value=\"ISO-8859-1\" name=\"oe\"/>
     <input type=\"hidden\" value=\"active\" name=\"safe\"/>
     <input type=\"hidden\" value=\"active\" name=\"safe2\"/>
     <input type=\"hidden\" value=\"GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;\" name=\"cof\"/>
     <input type=\"hidden\" value=\"en\" name=\"hl\"/>
     <input type=\"hidden\" value=\"flyseair.com\" name=\"sitesearch\"/>
     <input class=\"searchtxt\" type=\"text\" maxlength=\"255\" size=\"12\" value=\"Search Site\" name=\"q\"/>
     <input id=\"submit\" align=\"top\" type=\"hidden\" value=\"Search\" name=\"image\"/>
   </a>
  </div>
  <a class=\"search\" title=\"Search SEAIR\"> </a>
</form>
</li>

As you see there are 4 a tags in the list. When the bug doesnt happen there is only one a tag in the list.

So is there some sort of php code wich produces this? And maybe its a smart idea to remove the form out the list and only put the input there. It looks a bit stuffed now. with everything in it...

flyseair

Dear Argeaux and Al,

Super thank you for your reply, I really really appreciate it :D I have used WordPress and I've tried revising my codes, but still dame problem :( I even tried cleaning it up by removing some of the <a> tags, but the menu becomes unclickable.

Is it possible for me to take out the <form> tag yet still link the <input> to google adsense? If so, how can I do it?

As for Al, the link to the home is on the logo, but thank you for giving me your opinion :) you rock! When I'm done fixing the major problems. Actually, the book now is going to be the home, but since our booking engine is not yet in place, it the link just go to our classic booking engine.

Thank you so much guys!

flyseair

Oh, I also forgot to tell, that the code for http://www.flyseair.com doesn't work well with Opera :( Thanks!

flyseair

Hi everybody!

I've checked on this bug and it only happens with Firefox running on Mac OSX. Please help me solve this mystery :(
This is driving me nuts. Thanks to all who replied!

Leo

chriscoyier

I saw the bug too and it's exactly as it was described above. On first load on some pages, that form element gets loaded with a bunch of extra anchor tags. You need to track down how the heck that is happening and you'll have your answer. How is that form being added to the page?

flyseair

Hallo,

Here's the code that I used:

I. Header

<body>
<div id="page-wrap">

<div class="logo"><a title="SEAIR Home" href="/">SEAIR Logo</div>

<ul id="menu">
<li><a class="booknow" title="Book Now" href="http://secured.flyseair.com/b2c/">Book Now</a></li>
<li><a class="destinations" title="SEAIR Destinations" href="/category/destinations">Destinations</a></li>
<li><a class="routemap" title="SEAIR Routemap" href="/routemap">Route Map</a></li>
<li><a class="ourfleet" title="SEAIR Fleet" href="/ourfleet">Our Fleet</a></li>
<li><a class="timetable" title="SEAIR Timetable" href="../wp-downloads/flightsched.pdf">Timetable</a></li>
<li><a title="Coming Soon" title="Coming Soon!" class="inflightshop" href="inflightshop">InFlight Shop</a></li>
<li><a title="Search SEAIR" class="search">

<form id="search" method="get" action="http://www.google.com/custom" target="google_window">
<div align="right">
<input type="hidden" name="domains" value="flyseair.com"/>
<input type="hidden" name="client" value="pub-0240922582484691" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="hidden" name="oe" value="ISO-8859-1" />
<input type="hidden" name="safe" value="active" />
<input type="hidden" name="safe2" value="active" />
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;" />
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="sitesearch" value="flyseair.com" />
<input name="q" type="text" class="searchtxt" value="Search Site" size="12" maxlength="255" />
<input name="image" type="hidden" id="submit" value="Search" align="top" />
</div>
</form></a></li>
</ul>

II. style.css

/*****************
Navigation
******************/
ul#menu{
list-style:none;
margin-top:40px;
}
ul#menu li{
display:inline;
}
ul#menu li a{
text-indent:-9999px;
display: block;
height:30px;
float:left;
}

ul#menu li a.booknow{
background: url('images/booknow.png') no-repeat 0 -30px;
width:103px;
}

ul#menu li a.destinations{
background: url('images/destinations.png') no-repeat 0 -30px;
width:112px;
}

ul#menu li a.routemap{
background: url('images/routemap.png') no-repeat 0 -30px;
width:107px;
}

ul#menu li a.ourfleet{
background: url('images/ourfleet.png') 0 -30px no-repeat;
width:90px;
}

ul#menu li a.timetable{
background: url('images/timetable.png') 0 -30px no-repeat;
width:105px;
}

ul#menu li a.inflightshop{
background: url('images/inflightshop.png') 0 -30px no-repeat;
width:116px;
}

ul#menu li a.search{
background: url('images/normal_07.png') no-repeat;
width:129px;
}

ul#menu li a.booknow:hover{
background: url('images/booknow.png') no-repeat;
}
ul#menu li a.destinations:hover{
background: url('images/destinations.png') no-repeat;
}
ul#menu li a.routemap:hover{
background: url('images/routemap.png') no-repeat;
}
ul#menu li a.ourfleet:hover{
background: url('images/ourfleet.png') no-repeat;
}
ul#menu li a.timetable:hover{
background: url('images/timetable.png') no-repeat;
}
ul#menu li a.inflightshop:hover{
background: url('images/inflightshop.png') no-repeat;
}

.logo{
position:relative;
background-image: url('images/seairlogo.jpg');
display: block;
width: 197px;
height: 90px;
top: 20px;
}

.logo a{
text-indent:-9999px;
display: block;
width: 197px;
height: 90px;
top: 30px;
}

#search{
position:relative;
padding-top:6px;
padding-right:10px;
}
#search input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 105px;
color:#454545;
}
#search #submit{
padding-top:2px;
}

/* @end(navigation) */

/*****************
Container
******************/
#maincontent{
width:765px;
margin-top:100px;
margin-bottom:10px;
}

/*Single Posts*/
#mainsingle {
width:765px;
margin-top:100px;
margin-bottom:10px;
font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
}
/* @end(single posts) */

/* @end(container) */

-----------------------------------------------------------------------------------------------------------------------------------

I still can't figure out why the problem persists :(

Thanks for the reply and the help.

flyseair

Really need your help :(

I have been tracing the problem and checking the cause of the codes distortion whenever it's being run, but still no luck.
Please let me know if there's something wrong with my code (see previous post) or is there another way of doing it more efficiently?

Thanks so much.

treehouse : what would you like to learn today?

Forums

I've followed the CSS Tricks, but it doesn't work with FF3.0