Well, where to start this at to be taken as constructively -
You have a nice idea - however, you have tried to do a pure css layout, without much forethought to the design. Why say that you ask?
Using CSS for your layout and design, it is not necessary to embed all the javascript junk to do simple image roll-overs on your navigation menu as you have it. You add so much overhead on the script to swap out the images and you can accomplish it very simply with CSS using a:link, a:visited, a:hover, and a:active and specify the different image states as a background image in a nice unordered list (and yes you can display them horizontally very simply).
You also are doing conditional style sheets, which with the design you have it is not necessary if you were to rethink and redo the design aspect of it properly. You have several nested divs, which depending upon your positioning statements (I honestly didn't go that far into the css files yet) could be causing your issues as Firefox and IE implement the box model differently (yes even IE7 still is flaky in my testing). You have divs specified just to have a red image with white text as the only content, which really voids all the
SEO benefits of using CSS to style the content - why not make the DIV have the red BG color and then style the text to show as it is in the image? You cut down size of downloading as well as have a small bit of text for
SEO optimization, which there is not much text content other than ALT tags currently.
Code:
#tx-wfl-content-bg {
background-color:#f50000;
width: 561px;
}
#tx-wfl-content-holder {
background-color:#f50000;
width: 561px;
}
Why the duplication on the styles here? You have two divs, nested both with the same declarations in them. Not sure what the purpose or attempt at end result you are trying to get, but that could well be part of the problem.
Then here, you have your layout objects going:
Code:
#intro {
position:relative;
float: left;
margin: -50px 80px 0px 20px;
z-index:50;
}
#product {
float:left;
margin: -60px 0px 0px 20px;
z-index:10;
}
#price {
float:right;
margin: -300px 10px 0px 0px;
z-index:50;
}
The first is positioned relative, the rest are not, and you are using negative margins to get the placement properly, yet because of these, I can imaging that is part of the problem with Firefox because when you do not specify position as absolute, relative, fixed, static or inherit firefox does not always assign the expected positioning type, whereas many times IE does (an example of this can be seen on site that have the inner content flow past the footer in FF, but not in IE because IE implicity expounds the outer container to the overflow, whereas FF does not unless it is told to do so in the stylesheet).
Code:
#main-menu-home {
}
#main-menu {
position:relative;
width:556px;
height:39px;
margin-top:60px;
margin-bottom:30px;
}
#star1 {
position:absolute;
left:0px;
top:0px;
width:35px;
height:39px;
}
Here you have the main-menu-home setup with no positioning at all, and on subsequent pages setup to be relative positioned, which is already within four containers (wrapper->tx-wfl-content-bg->tx-wfl-content-holder->tx-wfl-content), which really will not matter since the divs for star1, 2, 3, etc and the second part of the image, the actual button portion, is yet another div with absolute positioning that is honestly overkill and too much for CSS, then you have your javascript rollover added to the mix at that point.
Lets look at the result here:
You have the wrapper with no positioning declaration, then the tx-wfl-content-bg with none, then the duplicate tx-wfl-content-holder with none, then tx-wfl-content floated left with a positioning of relative and a negative top margin, then you have main-menu-home without any declarations at all, then the star1 positioned absolute.
Can you do this with CSS? Yes, with about half the nested divs and better positioning than you are attempting to do, with no javascript and simple background colors that will allow you to have actual text rather than images for the main content on the home page.
You can use a table as well as Dinghus points out, because as you have implemented the css poorly and the javascript on the navigation you are losing most if not all of the benefits of CSS and not making a very
SEO friendly site in the process.
My suggestion would be to do a quick table based design and work on the CSS design as you gain more understanding of CSS, the rules of the browsers and learn more about positioning elements using CSS as you have made it unbelievably complicated in your endeavor. An example, make the Star and Buy Now one button, add your effect you desire for the rollover and save that as the over state. Then setup an unorder list for your navigation, you will have three LI items that will be floated left, all within the UL that is positioned properly, and you will lose 3 or 4 of the divs and all of the javascript you have.
If you need help on making a CSS based layout, send me a PM - I am a big fan of CSS and a believer that some awesome designs can be had without much headach if CSS is learned well, and applied properly. Tables still work as well as they did last year and two years ago as well.
More FF/IE CSS issues
Re: More FF/IE CSS issues
Linear Mode
