Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Google Chrome vs. FF and IE

    Well I can't believe this but somehow my page works well in both Firefox and IE but it is Google Chrome that is causing me issues.

    I am positioning an image and for some reason Chrome is putting the image around 180 pixels to the left.

    You can see a screenshot here - note the flowers:
    http://dl.dropbox.com/u/565673/screenshot.jpg

    The CSS for the image reads:

    .upperheaderimg {
    position:relative;
    top:-16px;
    left:300px;
    border:0;
    }


    and the HTML is a unique div

    <div>
    <img class='upperheaderimg' src='uploads/site-images/sunflower-header.png' />
    </div>



    Am I missing something obvious here? (I suspect I am.)

    Thanks!

  • #2
    Regular Coder
    Join Date
    Sep 2009
    Posts
    167
    Thanks
    15
    Thanked 1 Time in 1 Post
    a good thing to do is perform a global whitespace reset in your css file. that will make the upper left corner of your viewport be 0-0, the way it should be.

    not sure of chrome in particular. but it's always good to force the vendor to call the upper left hand corner 0-0 pixels, rather than having it start at 50 pixels to the right or something ridiculous like that.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    A good thing to start with is by checking your code for errors.
    Then a relative position is always relative to its original position in the natural flow of elements. How dows it look without the positioning applied?

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good comments. Thanks.

    Yup, no errors and the issue is still showing.

    and yes, there is a reset in the css for body of padding and margin.. (Is that what you menat?)

    Check it out here. (still in progress)

    http://flywheelstudios.com/eco-stream/services/

    Any other things to look at are much appreciated!
    Last edited by flyboysd; 05-14-2010 at 08:30 PM.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    <img alt="right header image" src="http://flywheelstudios.com/eco-stream/wp-content/uploads/site-images/sunflower-header.png" id="flowers">
    Code:
    #flowers{
    clear: both; float: right; margin-top: -16px;
    }
    PS: Are you suffering from divitis?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's great for the cross browser issue. Thanks! (although there looks to be a few pixel difference in vertical placement. I'll check padding and margin.)

    However, now the height of this image is pushing down the whole next div (#sub_page_header) which pushes down the content. Would it help to implement this header image as a background image?


  •  

    Posting Permissions

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