Joe1 0

Hello,

I'm currently working on a site with a left-hand side bar menu. The problem comes when I try to insert another menu on the opposite side of the page at the same level as the left-hand menu.

The site is http://parisvertical.hitdesign.fr

I first tried a floating right-hand div. It worked in everything but IE7 where it pushed it down beneath the left-hand one.

I then tried a position:absolute solution:

<div style="position: absolute; left: 719px; width: 61px; height: 34px; top: 9px;">

which again, worked in everything I tried apart from IE7. You can see the problem in the attached screenshot : it renders way beneath where it should be.

All help much appreciated!

Adam

5 answers

Joe1 0
-1
points
This was chosen as the best answer

Thanks very much, I've tried floating inline but it hasn't made a difference.

The CSS is :

<div style="position:absolute; display:inline; top:425px; left:719px; width: 276; height: 23;"><a id="estimation" href="#"></a></div>

This is written within the left-hand side bar div (position:relative).

Thank you

Answered almost 5 years ago by Joe1
danwellman 5600
2
points

it sounds like a classic hasLayout bug, try setting some style properties that force hasLayout such as zoom:1. Or if this doesn't work, I find setting display:inline-block often fixes issues such as this

With floats instead of having a left floated menu and a right-floated menu, have a left floated menu, then float the middle content section left as well, then float the right hand column left. The width on the center column can be used to push the right column into it's proper place, then you have you header and footer above and below respectively

Answered almost 5 years ago by danwellman
1
point

Position Absolute takes its placement from the nearest position:relative parent element. maybe the dimensions you are setting are unsuitable? try adding borders to the elements so you can see what's happening. is the left hand side bar in the proper place?

Answered almost 5 years ago by Tony Crockford
0
points

You have set width on floated elements. This triggers bugs in Internet Explorer, without studying your CSS in detail it's hard to be precise, but a good rule to follow is that if an element has a set width and also is floated then declare display:inline; for it as well.

generally that makes the float bugs in IE go away.

Answered almost 5 years ago by Tony Crockford
0
points

something else that might be an issue is that the elements are empty - and I recall IE not behaving properly in that instance.

try adding a &nbsp; inside the empty link elements and see if that helps.

Answered almost 5 years ago by Tony Crockford