SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pushing over when i show img

    hi all

    i have a few pages and have some divs with padding-top: 5px; but on my photo page i wanted a photo to fill the div with out space so i created a new id and replaced it with the excisting 1.

    but now when i load this page the whole wrapper seem to strecth/jump to the left slightly, yes so i deleted the img just to check and the page is fine with out the img????

    i replaced #M1 - #M1photo
    Code:
    css:
    *{margin:0;padding:0;}
    	
    .m{float:left;width:400px;margin: 0px 13px;}
    
    #M1, #M1photo{margin-top: 20px;}
    #M1, #M2 {padding-top: 5px;}
    #M1 img, #M1photo img {display:block;}
    #M1, #M1photo, #M2 { border: 1px solid #333;}
    html:
    HTML Code:
    <div class="m">
    <div id="M1photo">
    <img src="images/ma3.jpg" width="398" height="265">
    </div>
    <div id="M2">
    <h1>Comments</h1>
    </div>
    </div>
    any suggestions???

    THANKS!!!

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if it helps its ok in IE but not FF????

    thanks!!

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could it be the 13px margin you've added left and right on your .m class container. That would make the img ( 398px) and the margin (13px) too big for the 400px wide container.....It works in IE because of its interpretation of the box model.

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sortd it well a bit anyway, had a h1 tag in my code which had sum padding to it.

    now if i show imgs at

    w 398px
    h 265px

    they show ok but if i show a img at

    w 398 px
    h bigger than 265px

    the whole page moves about 5px to the left when i show the img

    ???
    thanks

    cheers aswell all4nerds just not quite with u on that one.
    Last edited by computerbarry; Aug 9, 2006 at 16:21.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give us an url to look at it?

    Ok in IE but not in FF......

    Just a thought, might it be that the page before you add the image is less than your screen height, and thus there is no vertical scroll bar to the right in FF. When you add the image the page gets longer than your screen and a scroll bar pops up to the right of the screen. If your content is centered, then the page shifts left by one half the width of the scroll bar...

    If that is the problem (and it has caught me several times in the past, take a look at www.catours.com for an example of an early site I wrote that does this (memo to self 'go fix it'!), the 'fix is to add the code below to your CSS, and a vertical scroll bar will appear on short pages too. This works & fixes the problem of left shifting in Firefox. IE sticks a vertical scroll bar in anyway I believe, so doesn't have the problem.

    Code:
    html   	{height: 105%;}
    Last edited by colinmcc; Aug 9, 2006 at 18:15.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your a god sent! thank u!!! thats exactally what its doing

    i just added

    html {height: 105%;} sorted everything thanks!!!!

    so thats it? by adding html {height: 105%;} everthing gets sorted??

    THANK AGAIN!!!

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Iritated the heck out of me last year on a site 'till I realized what was happening too!

    Yes, you're just telling the browser that the page is longer than your screen (even if the bits you want to display on the screen aren't) so the browser pops up a scroll bar.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    100.1% would do

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers every1!!!!!!!!!!


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
  •