Chrome Container Shift

[seven37us]

Hi everyone -

This is my first post, so please be gentle :)

I am having a problem on a website I recently built in which the entire container is shifting just a few pixels to the right on some of the pages of the sites. Not all of the pages, but some.

On the pages, there are two left-floated divs (total of widths/margins/paddings do not exceed container width). In comparing the pages, the only thing that appears to be different (aside from the text) is that the left floated div on the page is shorter than the right floated div. There is a clear div below both before the end of the container.

I have tried a min-height on the left floated div, but that didn't do it. Any ideas?

[JRM]

test it on the w3 validator.

[seven37us]

Thanks for the suggestion JRM. Both the HTML and CSS validate just fine.

[JRM]

You didn't post the code, so I can only throw out a few things that have given me trouble in the past.
1) browser quirks
2) negative numbers
3) mixing px and percentages in a layout ( works most of the time , but there are instances where it can cause trouble with different resolutions/sizings)
It's a bit like "apples and oranges" since it's difficult to know EXACTLY how they will interact.

[george61]

Use this javascript to detect the browser if it is a chrome browser you should use another CSS where you manually adjust the pixels(It shold be the same stylesheet and you just change the lines about the container). Let's your chrome CSS file is called stylechr.css

<script type="text/javascript">
if (navigator.userAgent.toLowerCase().match('chrome')
document.write('<link rel="stylesheet" type="text/css" href="stylechr.css">');
</script>

[JRM]

Thats' all well and good, but is it really a Chrome issue that requires a custom CSS or something else in the code that is causing the problem?

[george61]

There are many issues with CSS and IE. Because of this Microsoft has created conditional comments. The solution is different CSS for different browsers. I personally prepare few CSS files. I also had some issues with chrome and created different CSS for the chrome with just few different lines from the Mozilla CSS.