?
Solved

ViArt Shopping Cart: CSS problems in internet explorer with

Posted on 2008-10-16
12
Medium Priority
?
316 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

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.
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

719 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