Trouble aligning a div to the right in IE6 and IE5

HTML & CSS
1

The #rightsidebar id in the index page in http://www.nyhungry.com is not aligning well with container4 div. Some how when i move the #rightsiderbar it would move together with the container4 div.

That just happen in internet explorer 6 and 5.5.

Thank you.

2

I’d start with getting the code to validate. And have you seen this in other browsers? IE 5.5, seriously?

3

i have not fixed internet 5.5 at all so it should be a real mess in there.

4

Dont worry about IE 5.5

5

Hi, “#rightsidebar” is falling to the double float margin bug. You set a left margin and a left float on it. So the margin is doubled :). Set display:inline; on it to fix it.

“#wrapper” also has that bug

As Ray says in the other thread you need a restructure…you have absolute/floated/inline-blcoked elements…

6

Ryan I have follow your advice and it is a little bit better now.

Now, IE6 is displaying the #citycontainer id to left of the screen. Now I can just simply add some -em to the left marging and it will comeback to position.

But my question is why is the #container outside the box? I don’t find any marmgins taking it outside the box so why is it outside the box. I would like an explanation thank you.

7

Hi, I don’t know if this is whta you are talking about, but on “#citycontainer” it is appearing too far right (for me).

The problem is is that you absolutely positioned it and you didn’t give coordinates, setting this will work

#citycontainer{left:50.8em;margin-left:0;}

If you don’t give coordinates then it will just let the browser decide where to place it :).

8

Ok sometimes I have seen that when you don’t set certain properties then it will not reset the way you want then as you said the browsers will do it’s own.

9

I’m not quite following you. Can you give me an example?

10

the same example you have set up above when you have to reset margin:0 even though you are not using them.

11

Actually you had margin-left:50.8em.

I figured I could do two jobs at once, and set that same left margin on the left: coordinate, and remove the left margin.

12

I have removed the 50.8 left margin on #cityconatiner and it put in in place and gave a left value of 50.8. I have also rearranged the left of #rightsidebar to 50em but #rightsider seems not to be affected by it. Will I have to use margin-left? I am afraid it will move #citycontainer div as well to the left.

13

hey it won’t move it.

Now the solution is always give coordinates to the properties or set them to cero so that the browser don’t give its own values.

right?

i have set the #rightsidebar left to 0; left0; and 54em in margin-left property

14

No you didn’t :slight_smile:

#citycontainer {
	padding:10px;
	margin:0 0 0 50.8em;
	margin-top:-1.2em;
	margin-bottom:0;
	height:auto;
	width:420px;
	display:block;
	position:absolute;
	
	
}

That should be

#citycontainer {
	padding:10px;
	margin-top:-1.2em;
        left:50.8em;
	width:420px;
	position:absolute;
}
15

when do you know what properties need to have coordinates or be reset to cero to avoid this issue?

16

Generally, as a rule of thumb, all absolute positioned elements should have coordinates, unless what you need to do requires no coordinates set. Otherwise hte browser gets their way with it :).

17

I have a question in IE7 the mouse won’t change it’s state from an error to a hand when hovering over #sidebar div. It seem like it is not picking up the link or if something is above and avoiding the mouse to really hover over the sidebar.

in others words the hand does not activate when hover over the #sidebar div, that only happens in IE7 and IE6.

18

THere is no id=“sidebar” in the HTML. There is a #rightsidebar and #sidebar1 but I didn’t have any trouble with the links there.

Please be more specific :).
Also, clean up your CSS and [url=http://validator.w3.org/]your HTML errors :slight_smile:

19

this is the link

http://nyhungry.com/menu2prueba.php?id=4&register=0

and the sidebar4 div in there won’t change the state of the mouse as I explained in the post above

20

Yup I see it. There is indeed a #sidebar div. Here’s the code, and IE7 probably doesn’t like that it’s not valid:


 <div id="sidebar">
   <ul class="menu" style="width:190px;">
 [b] <span class="letras">[/b]   
    <ul class="nav-categories">	<li><a href="example2.php?subject=1&id=4&register=0">Regular Menu</a></li>
	<li><a href="example2.php?subject=2&id=4&register=0">Lunch Specials</a></li>

	<li><a href="example2.php?subject=3&id=4&register=0">Beverage</a></li>
	<li><a href="example2.php?subject=4&id=4&register=0">Cater Menu</a></li>
	<li><a href="example2.php?subject=5&id=4&register=0">Combos</a></li>
</ul> <!-- end of ul#nav-categories -->

     [b]</span>[/b]
      </ul> </div>

You start out with a ul, then make a span a direct child (illegal), then open another ul… I think you only meant one ul, not two.

IE7 might be seeing the span as covering the whole inner ul, making the links unclickable.

One of those instances where IE7 is the only one right : )

Remove the span (whatever style it’s doing, move to the ul itself) and remove one of the ul tag sets. You only need one. An inline like a span can’t surround a block like a ul, even if you make it a block with CSS.