Is it okay to position with margins?

This is necessary in IE for Windows and Mac

[aperantos]

Hello,

BACKGROUND:
Within a floated section (to create a column) I have four nested divs to created a curved border using background images. (I do not like adding divs to the markup for a specific styling effect but I can see no other way of achieving this effect in pure CSS). The final div which contains the actual content was set to "position: relative; left: 8px" so that the content appears within the borders.

THE PROBLEM:
IE/Mac adds unwanted margin due to the left property, which means it no longer fits within its container, while in IE/Win (5, 5.5, and 6) renders the relatively positioned invisible!

To resolve both of these I have used "margin-left: 8px; margin-right: -8px"; and it works in all versions of IE as well as Safari and Firefox (neither of which had any problem the original way). I have yet to test Opera.

QUESTIONS:
Although my solution works perfectly (at least in the browsers I have used), it does not feel right to be doing it this way. Should this work and is it likely to cause problems with lesser used browsers or in future?

I am wondering whether I should use relative positioning and then the "* html..." IE hack to cancel this and use the margin for positioning on just these browsers. Maybe this is overkill though and I am just being unnecessarily pedantic?

Thanks,

Michael.

[Longhaired Genius]

CSS is meant to be flexible. While I, personally, don't attempt anything that requires pixel-perfect rendition, if it works and it's valid and it's what you want to do, go ahead with your solution. The hacks are there for when you can't do what you want with straight markup.

Welcome to Webmaster World.