Fixed DIV Positioning Issues

HTML & CSS
1

Hi there,

I have a problem with this DIV element of mine that is fixed to the top of the page.
It seems that if I give my fixed element a “left” value, it will act weird…
What I mean is, the element’s position will change depending on the user’s screen size or if zooming occurs.

Here are my codes:

HTML Codes

<div id="navigation">
<a href="index.php" onmouseover="document.home.src = home_2.src" onmouseout="document.home.src = home_1.src" onmousedown="document.home.src = home_1.src"><img name="home" src="http://www.sitepoint.com/forums/images/home_button_1.png" height="29px" width="83px" alt="Home" title="Home"></a>
</div>

CSS Codes

div#navigation {
position:fixed;
top:7px;
left:10px;
width:500px;
height:29px;
z-index:4;
}

This doesn’t seem to occur if I assign the “left” value to be equaled to “auto”…
But I need it to the left without changing positions!

How could I fix this issue?

Thanks!

2

Seems to work ok here, but your post just leads to more questions than answers.

The biggest question being which browser are you seeing this behavior in?

I do know that many browsers do not move fixed elements properly when you resize the screen — it’s called a “redraw bug” and is common in older versions of Opera and FF. That could be what you are seeing.

Of course that scripting on the anchor doesn’t look like anything I’d be doing on a website either… That’s either using scripting to do CSS’ job, or… I don’t know what… Also looks like IE only code.

That said, I would just avoid using position:fixed; there’s a REASON you don’t see it on a lot of websites – it’s unreliable and buggy in pretty much every browser.

A possible workaround is to leave the div to the left, and apply your width and other styles to the anchor instead…

Do you have a full page we could look at? Snippets rarely give you the whole picture and the problem could be rooted in something else on the page interfering with it; or just an overall flawed sitebuilding method.

3

Thanks for the quick reply!

I am using the latest version of Google Chrome.
And it’s not an IE only code.

I have changed the “left” alignment to “auto” and have added a “padding” value instead…
It works great!

Thanks. :smiley: