Please help .. FF display problem

@swapdudeMar 29.2007

Hi,

I am trying to continue working on someone else’s CSS work and I have spent hours figuring why the top nav on the following page is not displaying right on FF

~~[url]~~http://www.sws-tech.com/css-p/[/url]

Please help

#checkout_nav

{
margin-top: 3px;
margin-left: 0px;
float: left;
}

—– Problem —–

<a href=”cart.php”>YOUR CART</a><br> <span class=”small”>Cart Review</span></td>

<td width=”143″ style=”padding-left:25px;”> <span class=”top_selected”>YOUR INFO</span><br> <span class=”small_selected”>Billing & Shipping</span></td> <td width=”150″ style=”padding-left:20px;”>

CONFIRMATION<br> <span class=”small”>Your Receipt</span></td>

<td style=”padding-left:25px;”>  </td> <td width=”164″> <p align=”right”> <font color=”#000000″ style=”font-size: 9pt; font-weight: 400″>1234234 Main Street<br> 23423423423423443<br> (703) 232344234</font></td>

</tr>

</table>
</div>

to post a comment

CSS

15 Comments(s) _↴

@WebJoelMar 29.2007 — #There are a few warnings in there (most are dismissable), but some unclosed-expecteds and this:

<input id='shiptobilling' type='checkbox' name='shiptobilling' value='true' onclick="ShowOrHide('ShipAdd')" [B] [SIZE="4"][U]![/U][/SIZE]/[/B]>

-A value is 'expected', -but this is a meaningless !important, -yes? ?

-Still looking...

@WebJoelMar 29.2007 — #I cleaned-up a few warnings (left most of 'em). There are so so many '[I]relative[/I] path to URL' images that I can't be sure if this is any better or not as I cannot see wht is what (and really do not wish to go through this and make all images be '[I]absolute[/I]-path-to-URL' to test this (because it makes it easier for testing 'offline' hint-hint ? ). But, try this and see if it's any better...

[upl-file uuid=16c17696-3c5f-4382-9cc3-c4e947171caa size=4kB]noname5.zip[/upl-file]

@swapdudeauthorMar 29.2007 — #Thanks for trying ..

It is still the same .. The original looks fine in IE but not in FF ?

@WebJoelMar 29.2007 — #Well what are you seeing that I am not? Is it that apparent double "hr" thingie at the top? In my offline version, viewed with Firefox and IE-view, -this now looked to be resolved... ?

@swapdudeauthorMar 29.2007 — #It is not double hr but 2 images on the top. ..

[upl-file uuid=c53618e8-6f1c-46fa-878b-e8a6801605a4 size=22kB]problem.jpg[/upl-file]

@WebJoelMar 29.2007 — #It is not double hr but 2 images on the top. ..[/QUOTE] -What browser are you viewing this in? I am sidinig with Firefox displaying accurately, -but it is not what you wanted?? See screenshot:

(Ignore the red border outline... this is just a testing tool in Firefox that I had 'on' when I grabbed the screenshot)

[upl-file uuid=d813ccc6-c444-4c79-9ebb-ed22ff54530c size=36kB]Image1.gif[/upl-file]

@swapdudeauthorMar 29.2007 — #Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

@WebJoelMar 29.2007 — #A simple "Firefox" would suffice. ? -Which is the way you want this to look? As IE shows it, or as Firefox shows it. I note a 'double green horizontal line' that displays a half-second before being covered-up with content when refreshing with IE-view... perhaps this is the problem. -Firefox is allowing this 'hidden-in-IE' image to be shown(??)

@swapdudeauthorMar 30.2007 — #? ?

Would putting the table in CSS be a better idea ?

Any help ?

@WebJoelMar 30.2007 — #:) :)

Would putting the table in CSS be a better idea ?

Any help ?[/QUOTE] It would make it easier for me as I haven't really done much with TABLE in 4 or 5 years apart from simple tabular lists.

I have your code on my desktop. It's been a long day so I'm going to wrap it up here but I'll look at it again tomorrow morning. ?

@swapdudeauthorMar 30.2007 — #Thank You very much

? ? ?

@WebJoelMar 31.2007 — #I think I figured it out:

The 'background-image" is in the <TABLE> called [B]class="top"[/B]<table border="0" width="900" background="navbar2.jpg" [B]class="top"[/B]>

<tr>

<td width="45"> </td>

<td width="158" style="padding-left:15px;">

 <a href="cart.php">YOUR CART</a><br>
   <span class="small">Cart Review</span></td>
 
   <td width="143" style="padding-left:25px;">
  <span class="top_selected">YOUR INFO</span><br>....[/QUOTE] which this TABLE needs either a default [B]height:?px[/B] equal to the height of the background-image, or the background-image be instructed "[B]repeat:no-repeat;[/B]" because what is happening is that the background-image is beginning to 'tile' along the y-axis ("vertically tiling"). Probably default-height the TABLE is the best option.

You do not see this in IE unless you 'refresh' and watch very closely, -you can see the background-image tile 'twice' before being covered up with content of the container below it (probably positioned?). Firefox on the other hand, is trying to display this correctly by tiling the background-image to fill the background of TABLE class="top" (and making it looked messed up)....

Try this. I'll snag your code again and try it myself..

@WebJoelMar 31.2007 — #I'm seeing nice results with this:

<div id='checkout_nav'>

<table class="top" [B]style="[U]background-image:url(http://www.sws-tech.com/css-p/navbar2.jpg)[/U]; width:900px; [U]height:60px;[/U] border:0;"[/B]>

Note the height is stated default. height:60px; seems to do the trick. Could go another pixel or two maybe. Try "90px;" or a more and you start to see 'the problem' in it's current state.

Also changed to 'absolute-path URL' ? (-which will not work if clicked 'in the forum', -copy&paste to navigation bar to view image).

@swapdudeauthorApr 01.2007 — #? ? ? ?

works fine now ... thanks ?)

You guys rock!

@WebJoelApr 01.2007 — #-I stared at your code for 20 minutes or more Friday and couldn't make out the problem. Next day, -saw it in about 60-seconds and figured it out. ? -Makes a difference, -a full night's sleep.

Also in #CSS _↴

What Is The Difference Between These Table Borders ?alignment Navigation Bar Problem

Success!

Help @swapdude spread the word by sharing this article on Twitter...

Tweet This

Please help .. FF display problem

15 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Please help .. FF display problem

15 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #CSS _↴