Solved

ViArt Shopping Cart: CSS problems in internet explorer with

Posted on 2008-10-16
12
307 Views
Last Modified: 2012-08-14
I'm trying to modify layout of shopping cart from http://www.viart.com/

It is done, however it looks good under firefox3 but "broken" under IE7

left boxes, top menu cut, menu links under the menu etc.

Link: http://hosting.viart.com/~eccshop.net/

Thank you
0
Comment
Question by:Goldblum
  • 6
  • 6
12 Comments
 
LVL 29

Expert Comment

by:fibo
Comment Utility
B-)) Your shopping cart looks fine in "my" IE7, at least this is what it looks to me: check on attached screen capture.

screen-capture-ee.jpg
0
 

Author Comment

by:Goldblum
Comment Utility
Thank you for your reply, please take a look at attached files.

Wrong stuff is circled. Title page.

Thank you
Picture-3.png
Picture-4.png
0
 
LVL 29

Expert Comment

by:fibo
Comment Utility
B-((
I see where is the challenge... now I will look!
0
 
LVL 29

Expert Comment

by:fibo
Comment Utility
Hmmm... I would probably look at 2 areas.

1 - The images are handled thru the CSS
* html .png {//background-image: none ! important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/logo.png,sizingMethod=crop);}
* html .png-powered {//background-image: none ! important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/button-powered.png,sizingMethod=crop);}

This is probably relying ways too much on actions out of your control.
Could you transform your images to get your effects in a more clasical way?

2 - Your page is relying very heavily on tables to organize the layout. This makes your page difficult to tune and maintain. You should really consider managing the layout thru a more intensive use of CSS. Relying on tables is unpredictable at best.
I would suggest first that you add in the css
* { border-collapse: collapse}
then adjust in necessary your code, since some images might be moved some pixels.
OTOH, your present css looks very comprehensive (although using tables in that context is just making half of the things) with 800 lines and 40K... but you are not using it full potential.
For example, your menu uses javascript to produce the rollover effet... while this seems to be already prepared in you css with the a:hover
0
 

Author Comment

by:Goldblum
Comment Utility
Thank you very much
I will apply all recommended changes and will let you know
0
 
LVL 29

Accepted Solution

by:
fibo earned 500 total points
Comment Utility
Some afterthoughts:
1 - I notice that for your css in the html or in the css file you use a space between ! and important. I have always seen them without any space: can you test the impact of having !important ?
2 - your <!doctype is 4.01 transitional, which is a mode in which IE is less standard compliant.
Test the effect of switching to 4.01 strict
Is that changing the look of your "wrong areas" and making them more normal? is it at the same time breaking something else?

Handling CSS to manage differences between IE and FF is really a nightmare... needs a good dose of black magic, lots of faith in irrational, and a massive amount of luck!
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:Goldblum
Comment Utility
You are right, it is nightmare, especially if this shopping cart was programmed by third party and i need to fix it. But I will try all your recommendations on Monday and will let you know. Thank you very much again
0
 

Author Comment

by:Goldblum
Comment Utility
Fibo,

I've tried to do this changes, however couldn't figure out all of them.
For example I couldn't find in index.php any doctype to change to strict. I think you are using firebug, where you see generated code, however original code looks horrible. (if you would see it through ftp)

I think it is not worth it try to change it for IE 7, It probably will work in IE8 (Do you have opportunity to see it on IE8?) When is IE8 coming out?

Thank you for your help.
0
 
LVL 29

Expert Comment

by:fibo
Comment Utility
B-)) Thx for the points and grade.

- What might be a "good" source of trouble: IE understand "width" as "minimum width" where all other browser understand "exact width"
- If you dont't find the doctype... then presumably the browser invents it.. you should consider putting yourself one... so you php file would start as
<!doctype....
<?php ....
0
 

Author Comment

by:Goldblum
Comment Utility
Fibo, thank you for all advises, I ve spent some time and somehow with your help and some luck managed to get it properly, however, they are down for couple days already, and I will be switching to new shopping cart, however you might know if we can switch to EASY TO MODIFY shopping cart that is less confusing for my friend, because I don't want to be his support 24/7. you know what I mean. Please let me know if you know what is the best shopping cart and it would be even better if the company has services to modify their shopping cart to his PSD file. If you have any ideas please send me couple links of good reputations shopping carts.

Thank you again
0
 
LVL 29

Expert Comment

by:fibo
Comment Utility
I have selected Magento for some new projects, but the learning curve is really steep and so cannot be recommended in your situation.

Which program are you using to handle the content. Ie, if you are using Joomla as a CMS, there is an add-on (VirtueSmart) which seems widely used
0
 

Author Comment

by:Goldblum
Comment Utility
We don't use Joomla, but I will take a look at Magento. Thank you
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now