Jump to content

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


Recommended Posts

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

6991_W1MiIdZ1brXRwwQozZ5l_t

6992_FLjcutC3m7vtmicQgg9x_t

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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........
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...