View Full Version : Help!! Need Solution for Column Jumping Problem in IE8

12-19-2010, 02:40 PM
I am a total CSS/HTML novice but I have enough knowledge to be dangerous. I have customized my ecommerce site to make it look and perform like I want it to but have run into an annoying problem when viewing in IE8....FireFox renders it just fine. You can view the site here:

www.theraspyrabbit.com (http://www.theraspyrabbit.com)

The problem: When loading any of the three column pages (home page or any category pages) with IE8 the content columns jump up into the menu area about 20px. I have tried numerous things and scoured the net for answers to no avail. A clue maybe in that when I use the Developer tool in IE and de-select any attribute in the CSS view the columns return to their normal position? Another clue is that when I remove all of the content from Column 2 the columns do not jump. I thought at first it may be a conflict with float: and a margin/padding but if this is the case I can not find it.

I have validated my pages and there are errors but most if not all have to do with flash <embed> attribute in XHTML.

I am just looking for some fresh ideas on what I can try next. Any help will be greatly appreciated

12-19-2010, 04:52 PM
It is very hard to see where the problem is: for instance what is your layout css file called.

12-19-2010, 06:20 PM
These are the style sheets that apply....is this helpful?

<link href="http://www.theraspyrabbit.com/templates/__master/Styles/styles.css?c0e9a" type="text/css" rel="stylesheet" /><link href="http://www.theraspyrabbit.com/templates/__custom/Styles/styles.css?c0e9a" media="all" type="text/css" rel="stylesheet" />
<link href="http://www.theraspyrabbit.com/templates/CoffeeShop/Styles/iselector.css?c0e9a" media="all" type="text/css" rel="stylesheet" />
<link href="http://www.theraspyrabbit.com/templates/__custom/Styles/brown.css?c0e9a" media="all" type="text/css" rel="stylesheet" />
<!--[if IE]><link href="http://www.theraspyrabbit.com/templates/__custom/Styles/ie.css?c0e9a" media="all" type="text/css" rel="stylesheet" /><![endif]-->
<link href="/javascript/jquery/plugins/imodal/imodal.css?c0e9a" type="text/css" rel="stylesheet" />

The way I understand which CSS apply is the "Master" is the basic infrastructure, the "CoffeShop" is the layout and the "Brown" is the specific flavor/color scheme of the Coffeshop layout.

I appologize if I am not giving what is needed but like I said this is all fairly new to me, so if you can bare with me I provide whatever is needed.....thank you.