Something's wrong with my layout, but I can't put my finger on it. The XHTML validates, as does the CSS with the exception of the opacity tags and if IE conditional comments. The URL: http://www.doublefin.com/temp/ I've tested this only in Firefox so far. The page looks fine when it loads, but when you hover over the menu items, the background drops out from the main content area. Thank you in advance for helping me out. I've already spent hours trying to track it down. Devon
Well, first thing I noticed is everything is 'broken' at default zoom on my machine - becuase I'm running large fonts and you went for 'pixel perfect' ... You need to account for that 25% font size increase or use a fixed size font. Part of your problem, at least as I see it is you've got too many containers in there... there is NO need on this layout for .navbar or #navcontainer. In fact, I think their existance is why it's getting an extra 'stripe' inserted in IE. I'm REALLY not sure why you are messing with opacity inside .navbar since it's not showing through to anything... The 'problem' in FF though seems to be related to #toprepeat. I would see if adding float:left; to it fixes that problem. Though I really do think about 40-50% of your code needs to go - you got WAY too complex in your HTML/CSS for a relatively simple layout.
The layout breaks in Firefox but not in IE (I'd expect that to be the other way around... ) The opacity code was something I was playing around with to show part of the image behind. I'll probably take it out and just use a solid bar. Yes, there is too much code in the CSS. I started with a style sheet that I'd used before and haven't removed all the unwanted/unused code yet. I'll get to that. I did try using float: left, to no avail. But I will take your suggestion and remove the two containers you mentioned and see if that helps. Thanks.