Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › I’ve followed the CSS Tricks, but it doesn’t work with FF3.0

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 18, 2008 at 11:14 am #22792
    flyseair
    Member

    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

    June 18, 2008 at 5:47 pm #47979
    Argeaux
    Participant

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

    Code:

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…

June 19, 2008 at 6:22 am #47990
flyseair
Member

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!

June 19, 2008 at 8:18 am #47991
flyseair
Member

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

June 19, 2008 at 10:18 pm #48024
flyseair
Member

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

June 20, 2008 at 9:53 am #48046
flyseair
Member

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">
<!–Search SEAIR–>
<form id="search" method="get" action="http://www.google.com/custom&quot; 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.

June 24, 2008 at 12:00 am #48112
flyseair
Member

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.

  • Author
    Posts
    • Viewing 7 posts - 1 through 7 (of 7 total)