Page looks different in each browser

1

I spent all day yesterday working on my Random Quote Machine page and had it looking and working how I wanted in Chrome. It being 2016, using Bootstrap and browsers supposedly conforming to standards, I thought the days of having to make a different page for each browser were over. Lo and behold, when I checked my page in Firefox and Internet Explorer, it looked different in each one.

It’s very disheartening to think that when I put all that work into it that I’ll have to do it all over twice more (at least the design part). Does anybody have any advice? Is it even possible to make one design that’ll work across the main browsers without putting in lots of edge cases and hacks? Thanks.

2

Google ‘css reset’.

3

I’ve tried setting “CSS Base” to both Normalize and Reset in CodePen and it made no apparent difference.

4

So I took another look (and googled a bit) and it seems that the problem is caused by padding: 5%; in your css.

Change % to some other measurement (vh, vw, em, rem, px).

1 Like
5

Thanks. That helped a lot but for some reason Internet Explorer still isn’t centring the quote box vertically. Any idea why?

6

I’m on Linux, so I haven’t access to IE, but according to documentation, display: flex is supported only on version 11 and up (and only partially). Also vh is supported partially.

You can check it here: http://caniuse.com/

7

Ahh, okay. Do you know of any other way I could get the quote box div to centre vertically that would work in Internet Explorer?

8

You can try this: https://css-tricks.com/centering-css-complete-guide/

If I were you I wouldn’t stress so much about IE, hopefully in couple years it’ll be dead :ghost:

https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support

1 Like
9

Hi @drguildo & @jenovs,

It’s really hard to center vertically in ie. all other browsers support it via flex-box. I ended up using % based top and bottom padding. Crap solution but it’s the closest I got.

To implement it I used this little bit of css to recognise ie

 //css rules just for Internet Explorer here
}```

I think the vertical centering doesn't work in ie because under the hood it relies on setting auto vertical margins, which ie reads as 0. (i don't know if this is true, its just what I figured out from dev tools)

It's annoying to have to support a browser with 3.4% market share. Can't wait for MS to decide they no longer support it then we can too. Edge is so much better, I rarely have issues getting things right in Edge.
1 Like