Jump to content

Theme problem, categoryblock placing and more, gloss_theme


Recommended Posts

I'm having a problem with my gloss_theme as shown on the picture. That error only occurs in IE7, what in the CSS should I change to make it right? In IE6 its a huge white space between the header/logo and the rest of the site, how do I fix those problems? In FireFox everything looks good.

Thanks in advance,
Olof, Sweden

2673_x30jcC2tzDogoXuxYshZ_t

2674_yP1iQ5jTq8f6UF7tThzS_t

Share this post


Link to post
Share on other sites

Hi Olof,

I had exactly the same problem! The Pro version shares the same issues as the fee version and i think it is pretty bad to be charging people for something that doesnt work accross all the popular browsers!

Anyway rant over!! :red: You will need conditional styles sheets so you can control IE7 and IE6 seperatly. You should reference these in the header.tpl in your themes dir.

In the IE7 styles sheet you need to increase the top margin by about 80px ish to fit under your logo.
The top margin will need to be specified like this

#left_column, #center_column, #right_column
   {
   margin-top: 80px;
   }



That will space the columns down to solve the problem in IE7

As for IE6, im still working on the issue and hope to have a resolution soon!! I will keep you posted!

Hope that helps :)

Share this post


Link to post
Share on other sites

First of all: Thank you for your fast and accurate respons. Second, yes, that's not something I would like to pay for.

I understand what I should do, but where and how in the header.tpl should I reference it? I would need two different global.css for each browser (IE6 and 7), am I right?

Thanks in advance, Olof

Share this post


Link to post
Share on other sites

Thats ok :)

In the header.tpl inbetween the <head> and </head> tags add this code

<!--[if IE 6]> <style type="text/css">@import "http://www.yourwebsite.co.uk/shopfolder/themes/gloss_theme/css/ie6.css";</style>     <!--[if IE 7]> <style type="text/css">@import "http://www.yourwebsite.co.uk/shopfolder/themes/gloss_theme/css/ie7.css";</style> 



Now name your 2 styles sheets (i have called them "ie6.css" and "ie7.css". You can change the names but just make sure they are reference properly in the above code). Add these new stylesheets into the css folder in your theme folder and that should do it! :)

Also I have got the fix for IE6 also and that is below. Be sure to add this to the IE6 styles sheet only. You might need to play with the values to get it looking right for your site :)

#left_column, #center_column, #right_column
   {
   margin-top: -5px;
   }

#header
   {
   margin-top: -120px;
   }



Let me know how u get on! :)

Share this post


Link to post
Share on other sites

Thanks again, but I don't get it to work fully. In IE7 the left column has moved down but the center column is still sitting high up into the header. I have tried to change the margin on that but I dont get any result. The white space in IE6 is also still there, I have tried to change the values but nothing happens. Any good advices?

Thanks, Olof

Share this post


Link to post
Share on other sites

Creating a CSS specially for IE6 and IE7 is a very bad idea !!!

It's a problem called "margin fusion". To solve that, you have to give a border or a padding to your first block, in this case div#page (I think).

Share this post


Link to post
Share on other sites

nope, perfect in firefox. A little out in IE7 and really out in IE6. I have all the standard "resets" in the global css and then use seperate sheets for IE6 and IE7, I have never had an issue doing it this way.

Share this post


Link to post
Share on other sites

Hi Olof,

I use it and mine is fine now using the solution i gave to you. I need to have a look at the source code of your website so i can see where you are referencing the styles sheets and if its in the right place. Then it should work fine.

Share this post


Link to post
Share on other sites

I have tried your solution but I end up getting trouble. I would like to know more about "Jade's" solution, I tried but I cant get it right. Someone must be able to tell me how to fix those diffrences in IE6 and 7?

Share this post


Link to post
Share on other sites

I've heard from different sources that having multiple style sheets like this is a bad idea, and many errors occured for me even though I did it the right way. Different browsers read wrong files, in IE6 i got IE7's CSS-file and so on. So; I want to try the other or any other solution. Someone has got to have a solution! I'm ready do pay for it to be fixed.

Share this post


Link to post
Share on other sites

Ok then, fair enough, I will leave you to it.

It has worked for me and many of my clients. Also im sure if it wasnt a good idea to use then Ebuyer wouldn't be using the same method! As long as you reference the right styles sheet for the right browser IN the right locations its ok and you will receive no errors.

Hope you can find an alternative fix.

Share this post


Link to post
Share on other sites

Okey, it was nice of you to try and help but it did not solve my problem. I tried different ways to use your code and im certain that I did it and referenced it the right way, as you told me, but it still read from different files. IE6 never read from the ie6.css, it used global.css, even though it was the exact same code in header.tpl as I used to get ie7.css to work. IE7 worked but not IE6. I would still like to pay anyone to fix this problem, in the same global.css-file, to get all browsers to work.

Share this post


Link to post
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...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More