Question

I have the following issue:

I am making this website… I’m using html and CSS. I’ve been trying to maintain CSS as standard as possible and checking as I go with the three main browsers: chrome, firefox, and ie. In MY pc it seems to be working fine (with the exception of minor details). However, when other people open it in other screen dimensions , things fall out of place. Does anyone know why this might be happening? take a look at what i’m talking about this is the homepage:

http://www.britobmarketing.com/ledtogo/index.html

I bet it will be a little unaligned in some of your computers, but in mine it looks perfect. It’s stressful!!!

Also, as I was saying, I’m trying to keep the CSS standard so that every browser can view it the same. But browsers like Firefox and ie do not recognize the “round edges” effect on the three buttons I have besides the video. It does work on the rest though, which is what confuses me! Anyone has any idea why this might be happening?

Thank you very much for your time and help!!

Answer 1

This is not an issue of browser rendering engines doing things different.

You aren’t taking into account a variable width of the viewport. Your header and footer are centered, and your content is fixed left. So as the viewport gets wider, the header footer stay and the center and slides left.

So for your content, here’s the problem:

#indexcontainter {
  width: 980px;
  height: 390px;
  float: none;
  margin-left: 170px;
}

In your header, margin: auto is what does the centering, making the left and right margin automatically equal each other. But for the content, you hard code a left margin at 170px.

Change that to use automargins and it starts to work great:

#indexcontainter {
  width: 980px;
  height: 390px;
  float: none;
  margin: auto;
}