CSS problems, misalignment, and 100% is not 100%?

I am working on a small project, and am having two tiny problems with CSS.

I have played around with everything to no avail.

1) In IE6 the content and logo is not lining up correctly.

2) In Firefox, the tooltip box fixed at the bottom of the page (which degrades in IE6) although styled as width:100%; is not spanning the whole screen. There is a gap on the left hand side.

These problems can be seen by viewing http://gua.com/wd/ in the respective browsers.

If anyone could advise as to what has gone wrong, and why, it would be greatly app开发者_Go百科reciated. Thanks

---

for firefox: Yyou can add left:0; for #bottom

for internet explorer: I see your menu to be wrong not the logo. To solve this just add margin:0 for #top-nav

---

You should ideally be using some sort of css reset stylesheet to overcome specific browser idiosyncrasies.

In your case appending a margin: 0px; to your body should do the trick (For Firefox). IE6, well, its usually best left to a IE6 specific conditional stylesheet.

---

"100%" means "100% of the parent box's client space". Not "100% of the entire viewport".

And IE6's CSS support is f*cked beyond sanity. If it doesn't work, use absolute positioning or whatever else it takes in a special stylesheet and include it with conditional comments.