SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast cfpmedia.com's Avatar
    Join Date
    Nov 2010
    Location
    California, USA
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed DIV Positioning Issues

    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
    HTML Code:
    <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
    Code CSS:
    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. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast cfpmedia.com's Avatar
    Join Date
    Nov 2010
    Location
    California, USA
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •