CODEWITHSUNDEEP
htmlcsscss-position
Major Productions
Major Productions

Reputation: 6042

Absolutely positioned element in a different position in Chrome than other browsers

I have an image/link that I'm trying to absolutely position with the following:

HTML:

<div id="content">
    <a href="/calendar"><img id="calendar" src="/bundles/majorproductionsadisite/images/calendar.jpg" alt="calendar" /></a>

    <div class="blogEntry">
        <h2>Blog title</h2>

        <div>Blog text</div>
    </div>
</div>

CSS:

#calendar {
    position: absolute;
    top: 210px;
    left: 420px;
    z-index: 9000;
}

In Chrome, this puts the calendar image flush to the left of the blog:

Chrome

In contrast, in Firefox and IE, the calendar is positioned much further to the left:

Firefox

IE

Any suggestions on how I can get either Chrome to fall in line with the other two, or vice versa?

Upvotes: 0

Views: 98

Answers (2)

Melinda
Melinda

Reputation: 76

Did you try using a CSS reset to zero out all of your margins and paddings? Resets are meant to prevent cross-browser differences as much as possible.

Why Use CSS Resets

Upvotes: 0

PhoenixWing156
PhoenixWing156

Reputation: 392

You need a common reference point on the page for the absolutely positioned element. Otherwise, the element is positioned relative to the browser window, so the position can change depending on the browser size, etc. Try positioning the content div relatively.

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Upvotes: 3

Related Questions