Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey all,
    Having a couple of annoying issues with images aligning up across browsers.
    First example is on this page www.devigneinteriors.com/projects
    You'll that is Safari, Chrome and Firefox the h ref images align up perfectly with the grey box they sit in, however in ie there is a small space.

    Then on this page www.jonnybdesigns.com you'll see that I'm using a similar effect however it only aligns up in Sarafi, in Firefox and Chrome the h ref images sit a couple of pixels below the holding image. Then in ie the holding image is repeated a couple of picels below, in spite of the css stating the size of the image.

    Any help on this would be greatly appreciated!

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Try adding this to the top of your CSS:
    *{margin:0; padding:0;}
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Yea I have that, highly frustrating as nothing is lining up!

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Your first link doesn't work. On your personal site, I couldn't find anything off hand that was throwing it off, but you could just use a conditional comment for IE to push it down a few pixels.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    ...And I'm back. I noticed in both Chromedev and IE's F12 dev tools that if I dorked around with the font size of #pagetext, it pulled #work up and down. Because of the way you're spacing things, you'll need to define heights for those divs so the different browsers don't jack up your layout whed they render your text.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Ah ha, so it is down to the font....
    So in all the Divs that hold the font I call a set height and it should align everything up?
    Spendid!

  8. #7
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey Mate,

    So that all helped, thanks!
    The only thing is internet explorer (surprise surprise) on both the sites it repeating the background holding image taking it lower than the content.
    I've set height on the Div that holds the text, the image, and the container which all add up right but still I'm getting this anomaly. Annoying!

    You got any ideas as to why this might be?

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    set a no-repeat on the background.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    but I need my background to repeat! it's a 50 x 50 images that I designed to repeat...

    what impact is that having??

  11. #10
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I'm talking about setting a no-repeat on this image: http://www.jonnybdesigns.com/images/tabac.gif

    I have to assume the problem is the same with the other page, but I haven't yet been able to get it to load.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:49 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com