X-Cart forums

[aitek]

Hey Guys after edting some css and working with firefox, I've noticed I have some issues with IE, Im rundding IE8. I see that there are ie7,7.css files along with my altskin.css, do I have to edit these? Or even create an ie8 one? Please see the following link in Firefox (correct) and IE (incorrect)

http://www.twobrosjuice.com/cart/home.php

IE makes my main image and menu split. I also have an issue on another page where no text shows up in IE. hopefully if I can figure out whats happening in the main page I can figure out the rest.

http://www.twobrosjuice.com/cart/product.php?productid=17514&cat=0&bestseller=Y

[cflsystems]

Yes it's a pain. Work in FF and then use ie_x.css file to fix issues in IE. IE Web Developer Tools can help

[aitek]

Ok I fixed the issue on the front page, I cant make heads or tails on this page:

http://www.twobrosjuice.com/cart/product.php?productid=17514&cat=0&bestseller=Y

in ff its perfect, in ie its brutalized, like I cant even see it at all to know where it is. And I'm not very good at CSS to be able to weed thru all this stuff, can you help me in the right direction for this?

[gb2world]

I can give you some hints: In IE - using the developer tools - the divs are not being positioned properly beginning with the dialog and content divs around the image and details. When I added position:relative, just to explicitly tell IE how they should be positioned - it seemed to clear up the problem.

I had to add position:relative to these two divs to move them back into place. These are the divs that are the parent divs for your content that is not being positioned properly
.dialog
.content

These divs get used a lot - so you might have to experiment to make sure relative positioning is okay in all browsers - or add more classes to refine your changes specifically to these divs.

[aitek]

Hey man, totally worked. Thanks a bunch I really appreciate it. I could not find what was getting messed up with the IE developer tool, maybe just not using it right but couldnt find anything to select.

[gb2world]

For the IE7 developer tool - there is no select or mouse over (that I see) - you actually have to step through the code, and as you select it, it will border the region in the browser.

For the IE8 developer - similar to Firebug, there is an arrow under the HTML tab. Once that is selected, you mouse over elements in the browser, then select, and it takes you to the html code.

Yours was tricky because the div was being repositioned lower on the screen and disappearing. You could step through the code in the developer window - watch the areas being bordered, then see where things started moving down and disappearing.