More FF/IE CSS issues

[ackerley1]

TX Waffle Layout 2

The navigation menu (Buy now, Tell Friends, More info) should be displaying right below the product shot in both IE and FF. I can get it to work in IE6 & 7, but when I try to make it work in FF, it creates ridiculous spacing in IE. I tried to set up an conditional to load a different CSS file for IE, but that didn't seem to work either.

Not sure if I am doing it wrong or not.

Any assitance would be greatly appreciated.

Thanks

[ran_dizolph]

well, the simplest solution (IMHO) would be just to pop one big image up there in 1 div tag.

That's essentially what you're trying to do, just with a bunch of javascript mixed in.

The optimum solution, would be to start over fresh. Start with a pencil and paper, draw out how you want it, then build it.

By the way, I'd suggest taking a look at your own site in FF ( windows 2000, @ 1024 x 768 )...it's a mess.

[Dinghus]

Yeh. Your mistake is using CSS to try and do all this.

Seriously, look at how much time you are wasting trying to get it to work. What you probably should do is make a table (GASP!) and then wrap that in a div tag and put it where you want it. When it comes to making things look the same on different browsers, tables are still about the only sure fire way. Either that or spend hours and hours beating your head against a wall.

Or, more beter yet, go with FLASH!!!!!

[southplatte]

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.

#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:

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

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

[jomariet]

It also helps if you do the layout in FF first and then check it in IE. When you do so, you'll catch your mistakes as you go rather than having to go in and redo after all your work.

Also, make sure that you specify height width attributes for your images. This helps the divs with a relative positioning:

<img src="images/hdr_introducing.gif" alt="Introducing the Texas Waffle Maker" />
<img src="images/waffle_iron.gif" alt="Texas Waffle Maker" />
<img src="images/price.gif" alt="Only 49.99" />

Don't forget to run your page through the CSS validator:
W3C CSS Validator results for http://www.texaswafflemaker.com/index2.php

JM

[ackerley1]

All thanks for the constructive input... Thats why I love this forum. Working on a revision based on all this... will post again when live for review...

Any comments on the yellow-ish background color? Client is stuck on it... I think it looks terrible. Any advise?

As for my website... (commented on by Ran_Dizolph) It was abandoned years ago as I have been too busy to maintain it - image that a designer too busy to keep up with his own site No complaints here as word of mouth drives more biz than anything I have tried in 6 years