15 replies [Last post]
precar
Offline
Regular
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2008-10-31
Posts: 25
Points: 0

Hi guys,

I'm having issues with the navigation bar on my photoblog in FF 2, and would appreciate your help on this.

The navigation bar renders fine in every other browser, but in FF 2 it seems each

  • element takes 100% width. I've tried setting the width property to a reduced amount in both the template style file and the superfish style file, but it didn't quite work.
  • Does anyone know what I need to add/modify to make the bar FF 2 compliant?

    The site is http://pranshuarya.com/photoblog. It validates for CSS 2.1.

    Triumph (not verified)
    Anonymous's picture
    Guru

    You've got some rather

    You've got some rather confounding markup errors. You may want to validate first.

    precar
    Offline
    Regular
    Last seen: 10 years 46 weeks ago
    Timezone: GMT-6
    Joined: 2008-10-31
    Posts: 25
    Points: 0

    I've taken care of some of

    I've taken care of some of the issues that were causing errors. A lot of the errors are in the stylesheet for the Thickbox JavaScript applet, which I'm using straight out-of-the-box.

    Either way, none of the validation errors (in my little knowledge) would have bearing on this issue.

    Precar.

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 7 years 50 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    What am I missing? I

    What am I missing?

    I clicked the link, don't see a menu. If I click on the image, there's a gallery with a list/menu/thingie on the left. Is that the one with the problems? Didn't see anything initially wrong with FF3 but want to wait until I know it's the right menu before booting up 'Blows to see in FF2 (Ubuntu keeps stealing my FF2 : (

    I'm no expert, but I fake one on teh Internets

    precar
    Offline
    Regular
    Last seen: 10 years 46 weeks ago
    Timezone: GMT-6
    Joined: 2008-10-31
    Posts: 25
    Points: 0

    Sorry!

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 7 years 50 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    I lost my access

    I lost my access (temporarily) to FF2 but looked in Browsershots and it looked the same as FF3 and Opera over here.

    Is this just an issue that happens on :hover? Menu itself looks fine.

    I'm no expert, but I fake one on teh Internets

    precar
    Offline
    Regular
    Last seen: 10 years 46 weeks ago
    Timezone: GMT-6
    Joined: 2008-10-31
    Posts: 25
    Points: 0

    Here's what I see

    Hi,

    I've attached a screenshot of what I see in FF2. Do you not see the same thing?

    AttachmentSize
    pkscreenshot.jpg 10.2 KB
    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 7 years 50 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    Ah, yup. I see it now.

    Ah, yup. I see it now. Note, in FF3 the main menu lines up fine but the subs are unreachable.

    You do have byte-order marks all over your CSS... that might be the problem?
    html, body{
    height:100%;
    width:auto;
    }

    Notepad is famous for adding that little mark to represent Byte Order Mark (which comes from using XML or UTF-8 or 16 charsets... UTF-8 doesn't actually need a BOM but anyway you need to remove those marks).

    I'm having trouble reading your menu HTML being all in one line. I could copy it and try to re-indent it, but if you have a copy already indented that would be great. I saw this:

    etc... somewhere and that didn't smell right, even with nested lists.

    I'm no expert, but I fake one on teh Internets

    precar
    Offline
    Regular
    Last seen: 10 years 46 weeks ago
    Timezone: GMT-6
    Joined: 2008-10-31
    Posts: 25
    Points: 0

    HTML code

    Hi,

    Where are you able to see the byte-order marks? I'm looking in Firebug in FF3 and don't see them. If you can tell me where I can view them I can take them out from there.

    You were right about the tags being mismatched in the nested list. I've fixed that. You've got a sharp eye to be able to spot that in the mess that the list was in!

    Here's the code for the menu:

    <ul class="sf-menu">
    	<li><a href="<SITE_URL>index.php?x=rss">rss</a></li>
    	<li><a href="<SITE_URL>index.php?x=about">about</a></li>
    	<li><a href="<SITE_URL>index.php?x=googlemap">map</a></li>
    	<li><a href="javascript:PicLensLite.start({feedUrl:'http://pranshuarya.com/photoblog/index.php?x=rss', maxScale:0});">slideshow</a></li>
    	<li><a href="#">browse</a> 
    		<ul>
    			<li><a href="<SITE_BROWSELINK_PAGED>">all</a></li>
    			<li><a href="#">series</a> <ul><li><a href="#">around town</a> 
    				<ul><li><a href="<SITE_URL>series/100508/">10/05/08</a></li>
    					<li><a href="<SITE_URL>series/longlake/">10/18/08 long lake</a></li>
    					<li><a href="http://pranshuarya.com/graphics/photos/halloween-08/">halloween '08</a></li>
    				</ul>
    			</li>
    			<li><a href="<SITE_URL>series/scwed/">steve & charlene's wedding</a></li>
    			<li><a href="<SITE_URL>series/indiawork/">workers in india</a></li>
    			<li><a href="#">signs</a> 
    				<ul>
    					<li><a href="<SITE_URL>series/signs1/">N. America</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul></li>
    </ul>

    Thanks!
    Precar

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 46 weeks 8 hours ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    precar wrote:Where are you

    precar wrote:

    Where are you able to see the byte-order marks? I'm looking in Firebug in FF3 and don't see them. If you can tell me where I can view them I can take them out from there.

    The W3C validators highling BOMs as errors. One reason why they are the authoratative validators.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    precar
    Offline
    Regular
    Last seen: 10 years 46 weeks ago
    Timezone: GMT-6
    Joined: 2008-10-31
    Posts: 25
    Points: 0

    Don't see it

    I'm sorry but I don't see the errors you're talking about. Just to make sure we're using the same service, I'm attaching a screenshot of what I've used.

    Thanks,
    Precar.

    AttachmentSize
    pkvalidate.jpg 48.07 KB
    CupidsToejam
    CupidsToejam's picture
    Offline
    Guru
    Florida
    Last seen: 4 years 5 weeks ago
    Florida
    Timezone: GMT-4
    Joined: 2008-08-15
    Posts: 2637
    Points: 1556

    This is you and your greezy monkey

    These are your URL's, right? see images attached. In Yo face

    AttachmentSize
    val.jpg 173.26 KB
    val2.jpg 190.77 KB
    precar
    Offline
    Regular
    Last seen: 10 years 46 weeks ago
    Timezone: GMT-6
    Joined: 2008-10-31
    Posts: 25
    Points: 0

    See it now

    Alright, I was validating the CSS while the errors were in the XHTML. But do you guys think they are relevant to the issue I'm concerned with? I thought it's just a CSS issue with FF2 not rendering the same as Safari, Opera, IE, and FF3.

    The site is running Pixelpost. I've tried validating a few other Pixelpost installations and see similar validation errors on them.

    Precar.

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 46 weeks 8 hours ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    precar wrote:Alright, I was

    precar wrote:

    Alright, I was validating the CSS while the errors were in the XHTML. But do you guys think they are relevant to the issue I'm concerned with? I thought it's just a CSS issue with FF2 not rendering the same as Safari, Opera, IE, and FF3.

    CSS rules are defined only for valid xhtml, so without that your CSS rules don't even apply. Browsers are supposed to error correct but there is no standard for this, so they are on their own and, not suprisingly they often do that differently.

    We stress this over and over on the site. Without valid html or xhtml you have no basis for holding a browser to any particular standard. With 17 posts to your name I'm surprised you haven't heard about this yet.

    If this bothers you, think about how you might go about specifying a standard for every single possible way of writing invalid html code. It's hard enough developing a standard for correct code!

    Actually I believe the xhtml standard says that a page with invalid code shouldn't even display at all. Most xhtml pages are actually served as html and so browsers will try to error correct, often badly.

    You might think you are coding in xhtml, by the way, but no browser in the known world treats it as xhtml unless the http header actually says it is xhtml, and none of the common servers do that unless you specifically configure them to, and no one does. Really, browsers just treat your code as html, which is lucky for you because for actual xhtml IE6 can't even apply CSS rules to XML.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    precar
    Offline
    Regular
    Last seen: 10 years 46 weeks ago
    Timezone: GMT-6
    Joined: 2008-10-31
    Posts: 25
    Points: 0

    Got it

    For anyone who is or might experience this in the future, I was able to fix it by removing the "float" property from the ".sf-menu" item.

    For those interested, the link to the page to view the source is <a href="http://pranshuarya.com/photoblog/index.php?x=browse&pagenum=1" rel="nofollow">http://pranshuarya.com/photoblog/index.php?x=browse&pagenum=1</a>.

    Precar.

    Stomme poes
    Stomme poes's picture
    Offline
    Elder
    Netherlands
    Last seen: 7 years 50 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2008-02-04
    Posts: 1854
    Points: 378

    Sorry, Precar, the place I

    Sorry, Precar, the place I was seeing the byte order marks were on the CSS page, when I viewed the CSS in my browser (and actually, I was looking at your page in FF2 on a Virtual Box running Winblows, but I could copy those marks from the CSS over here in Ubuntu on FF3...)

    I'm glad you got your menu sorted out, but right now in FF3 I'm having trouble grabbing that ALL under Browser. There's too much space between the main menu item and the first sub-- a physical gap that means if I don't move my mouse fast enough, :hover is lost and I have nothing to select because the submenu goes away.

    Once I get onto the submenu, everything else seems to line up fine.

    I'd say, reduce whatever top margin there is or whatever is creating that gap, and you're good. Though as a separate issue, your contrast for the text is rather low. Someone with an older screen or monitor may have trouble reading your menu items.

    You can run your page through GrayBit to see how the contrast in general is.

    I'm no expert, but I fake one on teh Internets