CSS working in firefox and chrome but not in internet explorer

[ricardolgrj]

Hello!

Sorry if my english isn't really good.

The page is <snip>

I am trying to figure out why the forth column is not correctcly displayed in IE8. I know that the code is not really well written, but it worked in Chrome and Firefox and in android and iOS browsers, but is not working in IE.

I don't have newer IE versions to test, but I think it would happen with old versions too.

Anyone knows why is it not working and how can I fix it?

Another doubt is why isn't the "mosaico" div centralized in page, since I used margin:auto in it.

Thank you!

[edited by: incrediBILL at 9:13 pm (utc) on Apr 7, 2013]
[edit reason] URL removed, see forum charter and site TOS for posting rules [/edit]

[Fotiman]

You have a div class="wrapper" that surrounds everything. That div has a width of 960px. Inside that is div class="mosaico", which also has a width of 960px. Inside that are 4 divs with the following classes and styles:
col1: width 250px + padding-left: 19px + padding-right: 19px (total: 288px)
col2: width 215px + border-left: 1px + padding-left: 19px + padding-right: 19px (total: 254px)
col3: width 215px + border-left: 1px + padding-left: 19px + padding-right: 19px (total: 254px)
col4: width 250px + border-left: 1px + padding-left: 19px + padding-right: 19px (total: 289px)

288 + 254 + 254 + 289 = 1085px, which is GREATER than the width you've given to your containers. I think you should start by getting those numbers right.

[drhowarddrfine]

Having problems with ANY version of IE is normal and expected. You can never count on IE to do anything right.

[lucy24]

Another doubt is why isn't the "mosaico" div centralized in page, since I used margin:auto in it.

By my count the page uses fifteen external stylesheets* and two css-related javascript functions in addition to its own CSS. Now, if you'd give a hint which of those seventeen places holds the "mosaico" definition(s)...

"margin: auto" is not enough to center an element. You also need to set it to text-align: center and/or give it an explicit width that is less than the page.

Any use of

!important

is a warning sign that things are cascading in the wrong directions. Arrange the styles in the right order and sort out the inheritances and you won't need any forced overrides. They never work anyway.


* I recently discovered by accident that MSIE 5.23 crashes when presented with more than one external stylesheet. Oh, good! Another reason not to worry about backward compatibility.

[ricardolgrj]

Thank you all for your aswers!

@Fotiman I really didn't try to change the size of the divs because this error happened when mosaico and wrap divs were both 1200px wide too. Do you think that IE reads this size issue and try to wrap everything in the container div? Anyway I am going to fix that.

@drhowarddrfine LOL... I always read this about IE. I wish I could know all the hacks to make IE work right...

@lucy24 This page is a patch over a patch over another patch... It is a modification of a wordpress theme with 2 or 3 plugins working on the same object. Is it a good idea to copy and paste all the stylesheets to just one big style.css or it won't make any difference?

Thanks again for your answers. I will rewrite the code with your insights and post here again when it is done.

[ricardolgrj]

@Fotiman I just resized everything and it solved the mosaico div central align problem. But it still not showing correctly at IE.

The sizes now are:
col1: width 215px + padding-right: 14px (total: 229px)
col2: width 215px + border-left: 1px + padding-left: 14px + padding-right: 14px (total: 244px)
col3: width 215px + border-left: 1px + padding-left: 14px + padding-right: 14px (total: 244px)
col4: width 215px + border-left: 1px + padding-left: 14px (total: 230px)
Total: 229+244+244+230= 947px and the mosaico div is 950px wide. This makes room for a 5px margin in wrapper div that is 960px wide.

Everything is ok in all browsers, but not in IE... The last column is still displaying in one big column. Theonly thing different from that one to the others is that it is float:right. Could that be the problem?

Here is the screenshot: <snip>

Any ideas about why is it happening?

[edited by: incrediBILL at 9:15 pm (utc) on Apr 7, 2013]
[edit reason] URL removed, see forum charter and site TOS for posting rules [/edit]