0

So I have a standard 960 width website where the content is, and I have boxes set up that are 300 width, and 10 margin on each side, so they will float 3 across. It looks fine in FF and Chrome, but why in IE does the 3rd box always jump down to the next line and throw off the positiong. It's like IE reads widths differently than any other browser. It is soooo annoying, is there any way to fix this?

zeeb44
  • 13
  • 3
  • 2
    Do you have any code to show us? – Smeegs Jul 10 '14 at 17:18
  • Most likely it is a user-agent style that is causing the inconsistency. Without seeing any code, my suggestion would be to use a CSS reset like @l2aelba suggested below. – APAD1 Jul 10 '14 at 17:21

3 Answers3

1

You have to reset all elements before start (CSS reset)

Example : http://necolas.github.io/normalize.css/

Why ? : CSS reset - What exactly does it do?

Community
  • 1
  • 1
l2aelba
  • 21,591
  • 22
  • 102
  • 138
  • I think you should elaborate on this. WHY should he reset, what is causing the problem in the first place? – sharf Jul 10 '14 at 17:20
  • That's a rather lazy way of doing it. What if those links break somewhere down the line? – sharf Jul 10 '14 at 17:25
  • Better, you just answer it self ? @user3669154 – l2aelba Jul 10 '14 at 17:27
  • If I use that reset, do I need to add anything to it or is it already ready to go? Just add the stylesheet to my html header and viola? Or do I need to change anything in the css? – zeeb44 Jul 10 '14 at 17:46
  • @zeeb44 Make it the first CSS in your header and you should be good. The only reason to change it is if you want to customize the reset. Not every CSS reset is created equal. – sharf Jul 10 '14 at 18:29
  • I added the css code and put it first in the header, but still having a problem with the spacing, or padding in IE... Below is the url for the site. http://familydentalhealthonline.com/new-patient/ – zeeb44 Jul 10 '14 at 19:26
1

As l2aelba says, you need to reset your elements. The problem is that each browser has its own set of default values for various elements. So IE might add padding that the others don't, making your elements too big to fit so they wrap around.

Resetting makes each browser display things as similarly as possible.

Without seeing your HTML and CSS there is no sure way to determine what your problem attribute is.

Solution:

Your problem is this line:

max-width: 68.571428571rem;

It is on ine 1967 of your css. It is overriding your 960 width, because that value is actually smaller than 960px, because it comes second. Not even sure why you have that in there...

sharf
  • 2,123
  • 4
  • 24
  • 47
  • That sounds right, I will add a reset on to it to see if that helps, if not I will reply back with the site and code. – zeeb44 Jul 10 '14 at 17:44
  • @zeeb44 I can't update my answer with a fix without seeing the code (not the website) for the affected area. However, I did look at the site and your problem is that in IE your `entry-content` class is only 955.4px wide, instead of 960px. – sharf Jul 10 '14 at 23:11
0

After looking at your site, you have this style in your style sheet

.site {
    margin: 0 auto;
    max-width: 960px;
    max-width: 68.571428571rem;
    overflow: hidden;
}

beware of em as it's calculated differently in different browsers, in IE it calculates to around 955.4px, which is why you're getting the wrapping.

Change the style to

.site {
    margin: 0 auto;
    max-width: 960px;
    overflow: hidden;
}

and you should be fine.

Smeegs
  • 9,151
  • 5
  • 42
  • 78
  • Yup that was it. Duh, I should have seen that. Wordpress likes using EM, and I don't usually use it. Thanks a bunch. – zeeb44 Jul 16 '14 at 15:04