Background image element falls outside of margins in Firefox 3

[stats]

The navigation bar on the RHS of www.insidedesi.com is slightly skewed in Firefox 3 (the contents are displayed outside of the grey box... this also pushed the left hand side in slightly).

I have the img set using a div tag with the following css:

sideimg{

background-image: url('images/side_img.png');
background-repeat: no-repeat;
background-position: 530px 0px;
margin: 0pt 0 0px;
padding: 0px 0 0;
float: right;
}


removing the float variable seems to reposition the left hand side, but side_img.png disappears.

Any suggestions on how I may solve this is much appreciated.

stats

[Nile]

I don't see what your seeing, because I'm using Firefox 3, and I don't see anything wrong, can send a screen shot, and circle the out of space spot please?

[stats]

Hi Nile,


Many thanks for your response.

I've uploaded the image here (I'm darkened it to make the edges more clear):



On the LHS is how it should look (and how it looks in firefox 2 and IE7), on the RHS is how it looks in Firefox 3 and Opera.

The red ellipses show how the grey box is shifted to the right, along with the left hand div element.

stats

[boogyman]

margin: 0pt 0 0px;
padding: 0px 0 0;

this seems peculiar to me. Either assign all 4 sides separately or assign them as one. You are like in the middle, and you also miss-matched the type.

margin: 0;
padding: 0

or

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

with px being optional in all styles.

now I know that's not the root cause of your situation, and I am seeing the same "shift" so to speak.
If you have the web-developer extension try doing an Outline > Outline Block Level Elements to see the dimensions of those columns...

removing the float variable seems to reposition the left hand side, but side_img.png disappears.

depending on how you have written the elements, the float may apply to the elements surrounding it. Hence... if I float something left, the next element after that will want to start at the top right corner (taking margins/padding) into account of that element / image. So I am going to assume that since taking the float out of the equation corrects the problem, that it has to do with the styling of the left / right columns and the interaction between them.

Now as for the background image not displaying if you remove the float: property, that is something you might want to report to Mozilla for debugging ???
they feedback form is located at http://hendrix.mozilla.org/

[stats]

this seems peculiar to me. Either assign all 4 sides separately or assign them as one. You are like in the middle, and you also miss-matched the type.

margin: 0;
padding: 0

or

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

with px being optional in all styles.

The original wordpress template which I modified was very badly coded.

now I know that's not the root cause of your situation, and I am seeing the same "shift" so to speak.
If you have the web-developer extension try doing an Outline > Outline Block Level Elements to see the dimensions of those columns...


depending on how you have written the elements, the float may apply to the elements surrounding it. Hence... if I float something left, the next element after that will want to start at the top right corner (taking margins/padding) into account of that element / image. So I am going to assume that since taking the float out of the equation corrects the problem, that it has to do with the styling of the left / right columns and the interaction between them.

Now as for the background image not displaying if you remove the float: property, that is something you might want to report to Mozilla for debugging ???
they feedback form is located at http://hendrix.mozilla.org/

I don't think it's a bug as opera is exhibiting the same behavior. Is there anoither means I can use to position the background image?

[stats]

It's no longer an issue.

Was pointed this method: http://www.positioniseverything.net/easyclearing.html by a friend. Seems to have resolved it.

Many thanks for the help.