CSS Problem

[SJM]

Hey All. I am pretty new to Zen Cart (only my second project) but have been a web development hobbiest since 1995...however...I do make dumb mistakes in CSS sometimes...and I'm sure there's one here causing me to post for help for the first time in my life!

I have been working on a template for a couple of days and all has been looking good. I constantly check my corrections in Opera and Firefox...but got a little lazy today and was only checking in Opera. When I checked it in Firefox and IE, the site is a bit messed up and it looks to be related to the same CSS.

I have been able to really narrow it down to the "float" in #navCatTabs. When I remove that, alignment is greatly improved (though not perfect). View the site in Opera for what it should look like, then in IE and Firefox for two uniquely distorted views:

The Site: http://www.redtailsphotography.ca/test1234/

The CSS in Question:

#navCatTabs ul {
    margin: 0;
    padding: 0;
    }

#navCatTabs li {
    float: left;
    display: inline;
    width: 162px;
    height: 21px;
    margin: 0;
    border-bottom: 1px solid #c5c5c5;
    border-top: 1px solid #c5c5c5;
    padding: 7px 0 0 0;
    background-image: url(../images/cat_tabs.jpg);
    font-weight: bold;
    }

[Website Rob]

Although I would code it a bit differently, you have to do some funky coding with "li" tags, the easy solution should be to add a break.

<!--eof-optional categories tabs navigation display-->
</div>

<br class="clearBoth" />

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">


Adds a bit of padding but you may want that anyway for the Breadcrumb.


BTW, your site went offline just now.

Unable to connect

Firefox can't establish a connection to the server at www.redtailsphotography.ca.

[SJM]

Although I would code it a bit differently, you have to do some funky coding with "li" tags, the easy solution should be to add a break.

<!--eof-optional categories tabs navigation display-->
</div>

<br class="clearBoth" />

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">

Nope...that didn't make any changes.

[SJM]

Correction: It did fix Firefox...but not IE (why am I not surprised).

[Website Rob]

Works for me in IE 6, your Greeting is now showing correctly.

Did you Refresh your Browser(s)?

[SJM]

Yes...I hard refreshed. I should have specified it's IE7 (again..surprise, surprise).

[Website Rob]

Sometimes with IE (any version) you must close all your open IE Browsers to clear things up. Also helps sometimes to clear the Cache before closing. Have you done that as well?

Otherwise, it should be working fine in all Major Browsers.


Checkout http://browsershots.org/ for a second opinion.

[SJM]

I've done all that. I'm a pretty techy guy...so it's nothing obvious like that. I even have multiple systems with various OS's for checking.

I have run into problems with IE7 on a few other sites I've done and have always managed to throw some extra code at it to make the problem go away....perhaps that's what MS did when they build IE7....hmmm....

Nevertheless....there has to be a CSS/XHTML solution. Any ideas?

[Website Rob]

Even though I don't have IE 7 installed, I can take snapshots of a site using various Browsers. Attached is an image of your test site using IE 7. Looks fine to me.

Did you not see the same thing in the snapshot from browsershots.com?

[Website Rob]

I should follow my own tagline.

In doing a closer look at the image I uploaded, I can see the Owl's feet show beneath the NavMenu whereas, in other snapshots I looked at they do not.

This tells me/us that you need to take a very close look at the coding used for the NavMenu -- which is your original question I know. At this time though, I don't have time to look into this further. Perhaps later or someone else may come along and now know exactly where to look and/or help you diagnose the problem.