Member Avatar for Mapper99

I have a simple web page. For some reason, one of my div's (holding a bing map), is shifted way off in the blue. Here is the link:

Looks fine in Chrome/IE.

Thanks in advance,

M

  • 4 Contributors
  • 4 Replies
  • 113 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

Given the reports from and that the page renders correctly on their Firefox installs, the problem is most likely environmental or layout-related rather than a simple browser-wide bug. Common culprits are CSS positioning (absolute/relative), a deprecated <center> wrapper, parent container sizing/overflow, or the map widget initializing before its container has a stable size. The following checklist and examples are focused on narrowing the cause and applying reliable fixes.

Inspect and narrow the problem

  • Use Firefox Developer Tools (Inspector) to look at the map DIV’s computed styles: position, left/top, margin, display, width and any transform rules.
  • Add a temporary outline so container boundaries are obvious, e.g. #MapCan { outline: 1px solid red; }.
  • Toggle suspect rules off (absolute positioning, floats, left margins) to see which rule moves the DIV.
  • If the issue appears only on one machine, test Firefox in safe mode or a fresh profile to rule out extensions or a custom stylesheet (as suggested about environment).

Practical CSS fixes (replace deprecated center usage)

  • Prefer CSS centering to the <center> tag. For a fixed-width block:
    #mapWrap {
width: 700px;
margin: 0 auto;
position: relative;
}
#MapCan {
width: 100%;
height: 400px;
display: block;
}
  • Or center an inline-block:
    .mapWrapper { text-align: center; }
#MapCan { display: inline-block; vertical-align: top; width: 700px; }
  • Use a clearfix or overflow: hidden on parents to contain floats.

Map widgets and timing

  • Many map APIs position tiles when initialized; if the container is hidden or its size isn’t final, tiles can appear offset. After the container becomes visible or after any layout change, trigger the map API’s resize/redraw or reapply the center (common practice with mapping libraries).

Final checks

  • Verify a standards DOCTYPE to avoid quirks-mode layout differences.
  • Search for unintended negative margins, large left values, or transforms on ancestor elements.
    These steps should narrow the cause quickly and lead to a stable fix across browsers.

Recommended Answers

All 4 Replies

Member Avatar for macneato

Works fine on firefox 3.63

Member Avatar for leahmarie

what firefox version are you using? I'm using firefox 3.5.6. and it looks well here.

Member Avatar for MidiMagic

It might be a screen resolution problem, rather than a browser problem. Divs are slippery, and if they won't fit, they move.

Also remember that IE nests the surrounding elements and the sizes in the wrong order.

Member Avatar for macneato

firefox 3.63 working with lower resolutions: 1024x768 and 800x600

Doubt it is a res issue though, his container is relative and #MapCan is relative to that. Dont know why you using the center tag though, isnt it deprecated?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.