Solved

ViArt Shopping Cart: CSS problems in internet explorer with

Posted on 2008-10-16
12
315 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 29

Expert Comment

by:fibo
ID: 22742300
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
ID: 22742451
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
ID: 22742618
B-((
I see where is the challenge... now I will look!
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 29

Expert Comment

by:fibo
ID: 22743308
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
ID: 22745804
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
ID: 22748568
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
 

Author Comment

by:Goldblum
ID: 22748654
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
ID: 22753507
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
ID: 22771795
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
ID: 22772224
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
ID: 22773970
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
ID: 22778173
We don't use Joomla, but I will take a look at Magento. Thank you
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

630 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