CSS cross-browser positioning problem

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

What an elegant solution! Cross-browser positioning gives me fits. It is nice to see a simple way to handle it.

Thanks for your help.

ASKER

I guess I spoke too soon. I thought we had it. Here is the code I used for the HTML tag

<!--[if lt IE 7 ]>
	<html class="ie6 ie nojs" xmlns="http://www.w3.org/1999/xhtml">
<![endif]-->
<!--[if IE 7 ]>
    <html class="ie7 ie nojs" xmlns="http://www.w3.org/1999/xhtml"> 
<![endif]-->
<!--[if IE 8 ]>
    <html class="ie8 ie nojs" xmlns="http://www.w3.org/1999/xhtml"> 
<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
	<html xmlns="http://www.w3.org/1999/xhtml" class="nojs"> 
<!--<![endif]-->

And here is the CSS I used.

#right_panel {
	position: absolute;
	left: 594px;
	margin-top: -27px;
	top: 0px;
}
.ie #right_panel{
	position: absolute;
	left: 594px;
	top: 4px;
}

Everything seemed to line up pretty well. But now, after several refreshes, and for no apparent reason, I am back to the old problem again. If I adjust the margin-top property in the #right_pane element, it affects rendering in both IE and other browsers. And if I adjust the top property in the .ie #right_pane element, it seems to have no effect.

This is the same issue I encountered with my original code.

What happened?

#right_panel will affect everything.
.ie #right_panel will affect only ie.

so if you want to tweak the margin-top for ie, you should add it to .ie #right_panel. It will over-ride the first margin-top.

Does that make sense?

adjustment:

margin has no effect on absolutely positioned elements.

you can only use top.

Since the only thing you're changing for IE is the top, all you need is this (sorry, shoulda done that the first time):

#right_panel {
        position: absolute;
        left: 594px;
        top: 0px;
}
.ie #right_panel{
        top: 4px;
}

David S.

While just addressing the symptoms of the problem is sufficient in some cases, in this case it would be much better to just deal with the root of the problem. gpinzino, since you accepted a comment as the answer to this question already, I suggest you ask a "related question".

> margin has no effect on absolutely positioned elements.

Yes, it does. Assuming you're using a left-to-right language, if you don't set the right or bottom properties, then the right and bottom margins won't change the position of the element, however, the top and left margins will change the position of the element regardless of whether the top or left properties are set. However, if the bottom property is set to a value other than "auto", then the top margin won't change the position of the element. The same applies to the left margin if the right property is set to a value other than "auto". If you'd like to see an example, let me know.

@Kravimir: margin is used to offset elements "relative" to other elements. It's counter intuitive to use margins on absolutely positioned elements even if there are cases where it has an effect. And it this case, using margin-top is not a good solution. Having said all that, the whole page page could benefit from some cleanup, and a lot of these problems would not even arise.

ASKER

Thank you both for your discusssion of this issue. Because of your willingness to help, I am going to post a related question and open it up again for points. As you can see, my skills are limited and you are providing greater insight into the complexities of CSS.

Thanks again for your input.

ASKER

OK. I don't think I need a follow-up question. I finally concluded that there must be a syntax error someplace in the HTML tags and my IE 9 browser was not being recognized. I realized that all control over the right panel was coming from the #right_panel element and not the the .ie #right_panel. Here is the revised HTML tags I creaed in place of the last HTML tag I had previously.

<!--[if gte IE 9]>
	<html class="ie+ ie nojs"  xmlns="http://www.w3.org/1999/xhtml" >
<![endif]-->
<!--[if ! IE 9]>
	<html xmlns="http://www.w3.org/1999/xhtml" >
<![endif]-->