Cross browser nav bar?

openmind's picture

He has: 945 posts

Joined: Aug 2001

Hi all,

I'm playing around with new look for my site and I just wanted to test out the drop down nav bar in as many different bowsers as possible.

The url is here: http://www.openmindmedia.co.uk/v2/

If the menu looks odd or anything seems out of place, can you let me know what browser version you are using, what operating system and your resolution.
It should work across them all but I want to make sure.

Thanks.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Opera 7.5, Win XP, 1152 x768 w. taskbar on right side

Seems to work okay, but drop downs have a clear background which looks incorrect. Will check in IE to verify.

Okay, it's just overlapping the buttons a little bit. It wouldn't look so odd if it wasn't transparent.

I feel like something more should happen to the main buttons on mouseover. The whole button area should be active, not just the text. When I put my mouse on the button area, I expect something to happen.

openmind's picture

He has: 945 posts

Joined: Aug 2001

The background layer is set to white so it's odd that you're seeing it as transparent. That can be adjusted simply enough through the css.

I was thinking about that top nav bar with maybe an embossed sort of roll over?

He has: 9 posts

Joined: Sep 2004

Sweeeeet! Nice nav man! Love the "thinness" -- not a million lines of code, very clean. Had a question though--why the use of tables? Why not carry on with the "slickness" of css - a list?

As far as testing, check out Mozie - http://www.zeit.ca/mozie/ --nice little app that lets you test a bunch of browsers at the same time

Mk

openmind's picture

He has: 945 posts

Joined: Aug 2001

ok I've tweaked it slightly by making the background layer white instead of transparent.

I'm really not sure what to do with the main blue nav. I'd rather not use an image swap as that just more js to break and play with so I think css is the answer...

Any thoughts?

MK - Could you elaborate for me? Not used lists in CSS b4. Will they work across all browsers? This is v. oimportant to me as this will be the front end for my web design company and it needs to be damn near perfect..

Works in Safari apparently! woot! Laughing out loud

He has: 9 posts

Joined: Sep 2004

Yah just use CSS to style a

  • , gets rid of all that table nonsense...css! the way of the future!...ahem...err...

    Sorry, I digress....have a look at the following link for everything you'd ever want to know about lists and css, and yes--it works just about everywhere -- http://css.maxdesign.com.au/listamatic/horizontal02.htm

    mk

    Busy's picture

    He has: 6,151 posts

    Joined: May 2001

    Got a Javascript error in Opera 7.2

    Inline script thread
    Error:
    name: TypeError
    message: Statement on line 36: Expression did not evaluate to a function object: ypSlideOutMenu.writeCSS
    Backtrace:
    Line 36 of inline#1 script in http://www.openmindmedia.co.uk/v2/
    ypSlideOutMenu.writeCSS();

    And Javascript error in IE6, error is
    line 43 char 5 object doesn't support this method or property

    No javascript errors in Mozilla firebird or firefox.

    The display is slightly different in all browsers (firebird, firefox, IE6, Opera7.2) but works in all and looks good - 800x600 btw.

    The slight display difference is mostly where the down down part starts, in mozilla is starts roughy below the first letter of the link title, in opera it starts above the images (as mentioned) and IE it starts under the vertical divider.

    I think if you can suppress those errors you should be right.

    As for the CSS, not all browsers fully support the high tect stuff. browsers around the IE5 area have problems with it.

    Don't forget a option or at least a note about it.

    He has: 9 posts

    Joined: Sep 2004

    CSS works in IE 5 and up (inclusive), opera 3.5, and mostly all mozilla browsers after 6. Sorry Busy, it's hardly "high-tech", more of us should start adopting these standards that have been in place in 1997. Especially if your a web design shop -- you should look like you're "in the know" right?

    Busy's picture

    He has: 6,151 posts

    Joined: May 2001

    Flipper, not sure what you did but the navigation isn't showing in mozilla now, the drop downs work but the rest is all white. looks good in IE

    miker wrote: Sorry Busy, it's hardly "high-tech", more of us should start adopting these standards that have been in place in 1997. Especially if your a web design shop -- you should look like you're "in the know" right?

    Sorry to burst your bubble miker, but not all CSS works on all browsers, especially going back to '97. IE5/5.5 for example has problems with layers etc as well as some browsers today. Todays standards are CSS2 and XHTML 2 ? Anyone told Mr Gates this? Opera, while a good browser, has had some issues with DOM. HTML is old now but even to this day has never had 100% support.

    For the record, I am not a 'web design shop', however I support standards and all my sites are XHTML trans but anything "high tech" such as display*, navigation* etc isn't advised for most sites as not everything has 100% support. I don't want this getting into a standards/browser issue, or taking over this thread but you need to take a good look at least the top three browsers, IE, Mozilla and Opera, sometimes you have to code the simpiest thing two or three ways to get to work on all three. Standards are great but they are very loosely written - more than one way to do it.
    An HTML/XHTML example even (although I'm talking about CSS), 99% of browsers give a form value '' (blank) if the input field is blank, Opera, if blank gives it a value of 'none'. So with server side, doing if(form field != '') will show true in Opera but not others.
    Some browser display what HTML/XHTML and CSS tags they don't support - even though valid tags.
    I look forward to the day when all browser support one set of standards, but I doubt it will happen in my life time.

    * = using layers ... advanced stuff, not just a:hover and borders.

    openmind's picture

    He has: 945 posts

    Joined: Aug 2001

    ok, its validating fine as XHTML trans now as is the css but can't track down why this pesky javascript error pops up. It doesn't happen all the time just now and again...

    openmind's picture

    He has: 945 posts

    Joined: Aug 2001

    Busy, what version are you using as it's working in Fine in Mozilla Firefox v0.9.3?

    Busy's picture

    He has: 6,151 posts

    Joined: May 2001

    I mostly use firebird, for some reason perfer it over firefox

    Tried it again, this time it worked, just slow to load on dialup.

    I just noticed your using all different images for the nav background, can't you use one image for the entire background and another for the dividers ? would help increase load time. The image wouldn't have to be as long either, 100 max, 20-50 would do (min 10).

    If you used a small width you could also place the image on top of the background as a pre load type thing (backgrounds are last to load).
    .... in one of the cells to force the loading of the background.
    Ideally it would suit being at a end (or both) of the table to show whats coming in doppy browsers

    Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.