Grow your CSS skills. Land your dream job.

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

  • # June 18, 2008 at 11:14 am

    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:17 pm

    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

    # June 18, 2008 at 5:47 pm

    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

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

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

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 19, 2008 at 11:34 pm

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?

# June 20, 2008 at 9:53 am

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

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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".