IE6 layout problem with header ... can you help?

[hayes]

My site is based on a slightly-modified version of the basic prestashop theme. However, I'm having a problem making the index page look right on IE6. The problem is that the header block ("Welcome, Log in. Your Account. Cart: (empty)") shifts to the left and down in IE6, which makes the whole layout look pretty awful.

The site looks fine in Safari, FF (mac and windows), and IE7 and IE8. The images below show the difference between IE6 (Picture 2) and IE7 (Picture 4).

I'm not so good with css, and I can't figure out how to make the header block stay in the right place. Can anyone help?

the site is at http://secure.topobo.com/

thanks!

+hayes

[sarmenhb]

can you post your css that you put.

[sarmenhb]

open header.tpl
under this: <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
put


<!--[if lte IE 6]>
<link href="{$base_dir}/css/ie6.css" type="text/css" rel="stylesheet" media="screen" />


then go and make your changes in ie6.css, anything you do here wont take affect on firefox or otther browsers.

see if that worked.

[hayes]

Dear sarmenhb,

thanks for the tip how to make ie6 look at a different css file. Now I just need to know what part of the css to fix! (I'm learning the hard/slow way here, by trial and error...).

I'm posting the css here, but I don't know what part to fix. Basically this is from the stock css file that comes with the standard prestashop theme, with a few colors changed. I don't want to post the whole css, because it's so much, so I'm hoping I grabbed the right part!

This is from /themes/prestashop/css/global.css

/* global layout */
#page {
width: 980px;
margin: 0 auto 2px auto;
text-align:left;
}
h1#logo {
float: left;
width: 29%;
margin-top:0.5em;
}
#header {
float: left;
height:100px;
width: 71%;
text-align: right;
}
#left_column, #center_column, #right_column {
float:left;
}
#left_column {
clear:left;
width:190px;
padding-right: 15px;
}
#center_column {
width: 556px;
margin: 0 0 30px 0;
}
#right_column {
width: 190px;
padding-left: 15px;
}



/* block top user information */
#header #header_user {
width: 99%;
text-align: right;
clear: left;
margin:0.6em 0.6em 0 0;
}
#header_user p { color: #595a5e; }
#header_user span { font-weight: bold; }
#header_user ul { margin-top: 0.3em; }
#header_user li {
float: right;
line-height: 2em;
margin-left: 0.5em;
white-space: nowrap;
}
#header_user #shopping_cart, #header_user #your_account { font-size: 0.9em; }
#header_user #shopping_cart a, #header_user #your_account a {
background-repeat: no-repeat;
background-position: top left;
padding: 2px 0 4px 26px;
height: 20px;
text-decoration: none;
}
#header_user #shopping_cart a { background-image: url('../img/icon/cart.gif'); }
#header_user #shopping_cart span.ajax_cart_quantity { padding-right:0.5em; }
#header_user #your_account a { background-image: url('../img/icon/my-account.gif'); }




Thank you for your help!
+Hayes

[hayes]

I'm going to post the whole css file (attached) in case i put the wrong bit in the post above. I realize it's probably too much to ask someone to read this whole thing, but maybe it will help....

Thank you, prestashop community!

+Hayes

[sarmenhb]

you know on the default theme that comes with prestashop. how did you get rid of the monitor on the left pane?

[hayes]

I don't recall, but try editing the image file in the theme directory.

[sarmenhb]

hey do you have aim , msn, or yahoo messenger?
maybe i can help you and you can help me

my aim is: sarmenhb
yahoo: [email protected]

[hayes]

great idea. i'm [email protected]. Although now is not a great time for me... I'm usually free around 8:30 am or 8:30 pm PST. Either of those times work for you?

+Hayes

[Ánh Nga]

open header.tpl
under this: <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
put


<!--[if lte IE 6]>
<link href="{$base_dir}/css/ie6.css" type="text/css" rel="stylesheet" media="screen" />


then go and make your changes in ie6.css, anything you do here wont take affect on firefox or otther browsers.

see if that worked.

Sorry, i do exactly and this trick work in IE6 and worked wrong with FF and IE 7 & 8 and make my sit view with IE 6 is good but with FF and IE 7 & 8 it look very ugly.
May be FF and IE7 not skip this code and make wrong thing.....

Here i inserted to header.tpl

   <link href="{$base_dir}theme/prestashop/css/ie6.css" type="text/css" rel="stylesheet" media="screen" />

Help me please....

[Ánh Nga]

open header.tpl
under this: <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
put


<!--[if lte IE 6]>
<link href="{$base_dir}/css/ie6.css" type="text/css" rel="stylesheet" media="screen" />


then go and make your changes in ie6.css, anything you do here wont take affect on firefox or otther browsers.

see if that worked.

Sorry, i do exactly and this trick work in IE6 and worked wrong with FF and IE 7 & 8 and make my sit view with IE 6 is good but with FF and IE 7 & 8 it look very ugly.
May be FF and IE7 not skip this code and make wrong thing.....

Here i inserted to header.tpl

   <link href="{$base_dir}theme/prestashop/css/ie6.css" type="text/css" rel="stylesheet" media="screen" />

Help me please....

OK! I fixed this problem by myself, I use browser detection to make smarty chose what file to use with each browser diffirent........