Solved

ViArt Shopping Cart: CSS problems in internet explorer with

Posted on 2008-10-16
12
309 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
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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

932 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

8 Experts available now in Live!

Get 1:1 Help Now