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).