SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Browser image not aligned?

    Hey guys,

    Recently, I've been developping and coding a site and it's been turning out great, everything seems to be fine, except for buttons on a particular page (50px square .pngs). I've coded the css for firefox, and therefore it works fine and aligns fine in this browser. With that being said, after taking a look at it in Safari, Chrome, etc, I noticed the button is off. Every image aligns fine except for the button for some odd reason (It moves to the left).

    My current css code for it is;


    Code:
    #download img {
    position: absolute;
    margin-left: 330px;
    margin-top: 10px;
    }
    If anyone can think of why it may be doing this, or can provide a quick fix, I'd be grateful I know I haven't provided a ton of information, but if need be, I can grab more code. I basically just need the button to move over to the right ~150px or so, whilst keeping it the same in firefox (The current code aligns it in firefox)

    Thanks,

    Element

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    To help, we also need the HTML, and preferably the whole page context. A live link would be best.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,354
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Ralph said we need more code and a contert to test the code out.

    Using absolute positioning without co-ordinates mens that you can never ne exactly certain where the element will end up because it is removed from teh flow at the position it would normally occupy in the floaw and that will vary of things like text-size, text-alignment and whether the line has wrapped or not or many other things.

    Indeed in IE7 and under the position will be completely out if the parent has text-align center or text-align:right.

    If you want accurate placement of absolute elements then set position:relative on the parent and then use co-ordinates and not margins to place them. Of course sometimes this is not possible in certain situations which is why we need to see the full code

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey guys, thanks for the replies, I don't have the site up and running (hosted) at the moment, but when I do I'll be sure to post if it has not been sorted out. However, setting display: block seems to have fixed it?

    Element


Tags for this Thread

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
  •