SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 84
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post
    In regards to the issue on iphone. It also happens when you simulate it in Safari.

    1. Simulate in safari
    2. Set the width to be standard smartphone width. and scroll to the right.

    The right hand edge of the content division is hard up against the edge of the browser window. The shadow goes on beyond the edge. Why is it doing that on the right hand edge but not on the left? How can this be fixed? Can some padding or margins be added left and right to fix it or not?
    You can't simulate the iphone on a normal safari browser as far as I know. Only the sdk developer package (a massive download) allows iphone simulation as a small part of its whole development package.

    On the emulator your site is scaled to fit as the iphone scales sites based on 960px (iirc). The shadow is evident on either side of the layout. There is no need to scroll unless you zoom the site (which you will probably need to do because the scale factor makes the site quite small). When you zoom the shadow is still evident on the right.

    In normal Safari the right edge is tight against the screen when you scroll but its not really an issue. You could put 1em side padding on the container instead of the body and then it would stay wide.

    Also, now that issue is fixed, another occurs when moving from short pages to longer ones when the right hand scrollbar is introduced.
    Yes - that's the way it works

    Would you rather there was no scrollbar so that your content was unreachable or do you want a scrollbar to be there when there is no need for it?

    You can't have it both ways.

    You can set the height of the html element to 101% and the scrollbar will be present at all time or you can set the overflow.

    e.g.
    Code:
    html{height:100%;overflow-y:scroll}
    However that can cause strange effects at times so will need testing.

  2. #27
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh, I basically wanted to know how to stop the shifting left and right when the scrollbar appears. I did find out by adding html{overflow-y: scroll;} makes the bar always appear and therefore stops the shifting so that is now perfect.

    display:inline works perfectly for the bug in ie6

    I have just made the padding on the container division to have unioform 2em padding all the way around and if i make the browser window to be thinner than the fixed width of the site, I get the 2em padding top and bottom as normal, 2ems on the left side but the right side is different. I don;t know what width it is but it's definiteley different from the padding on the left hand side?

    I know it's a bit of a minor issue but it's annoying me

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post

    I know it's a bit of a minor issue but it's annoying me

    You'll have t post a screenshot so we can see what you mean.

  4. #29
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right,
    It seems to be happening in all browsers and as I was putting the image below together, I think I have discovered what is happening. Basically, the image below shows the site in a smaller width browser screen scrolled to the left and then to the right, the edges are different widths:



    I am guessing that a bit of the right hand edge of the site is being covered up by the scrollbar?

    If so is there anyway to not make it do that as when viewing on mobile devices, it makes everything seem unbalanced.

    Thanks

    Neil

  5. #30
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Somewhere in my posts above I already gave you the answer to this.

    Quote Originally Posted by me
    You could put 1em side padding on the container instead of the body and then it would stay wide.
    Just remove the padding from the body and leave it on the container. That leaves it exactly the same in Firefox and Safari with 32px of space on both sides.

  6. #31
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I ahve just tried that but it does not make any difference whatsoever!

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    This is what I see in safari and Firefox.

    Perhaps we are talking at cross purposes.
    Attached Images Attached Images

  8. #33
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, Apologies, for some reason, it is working now in all browsers!

    No idea why it works now and it didn;t before. Maybe it didn't refresh entirely.

    May I ask what measurement app you are using as it looks better than the one I use.

    Thanks

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rctneil View Post

    May I ask what measurement app you are using as it looks better than the one I use.

    Thanks
    It's this one:

    http://www.iconico.com/caliper/

    They use to do a free one but I'm not sure if they still do.

    I can't live without it now

  10. #35
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Can you gimme a hand to fix the issue present on this site:

    http://log.neiltonge.co.uk/comittee.php

    Basically, the stuff on the right should be in line with the stuff on the left.

    Any ideas?

  11. #36
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you just need two divs, both floating left. Now you give a class to every single element.

  12. #37
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or you could let the divs stack, no floating, left or right, no clearing, and then make them display: inline-block ? they will have the same baseline naturally on each row.

  13. #38
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another problem is that I ahve not decided whether I want them in 2 or 3 columns?

  14. #39
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's solvable by changing 45% width to 30% width using my solution display: inline-block.

  15. #40
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, I have just let the divs stack (on my local copy so it's not online yet so the link above will be the same as before) and removed all floats and clears and, yes they appear inline but the ones on the right are touching the ones on the left. If I add a margin-right to them, then the ones on the left will also get that margin which would not be needed.

    How can this be solved?

  16. #41
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    html code:


    <div class="not_last">Peter f</div>
    <div>Tom f</div>
    <div class="not_last">Claire f</div>
    <div>Mark f</div>
    <div class="not_last">Richard f</div>




    css code


    #cmembers {
    text-align: center;
    }


    #cmembers div
    {
    border: 1px solid black;
    width: 45&#37;;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    margin-bottom: 1em;
    padding: .8em;

    background: #C6D7E9;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    }

    .not_last
    {
    margin-right:2%;
    }





    if you want three columns:

    html code:


    <div class="not_last">Peter f</div>
    <div class="not_last">Tom f</div>
    <div>Claire f</div>
    <div class="not_last">Mark f</div>
    <div class="not_last">Richard f</div>






    css code



    #cmembers div
    {
    border: 1px solid black;
    width: 30%; [...]

  17. #42
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you only want to target a few specific elements and not the whole lot, you'd have to add a class to each of them (if there isn't one already) and target them via that
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #43
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok,

    If I decide I want them in 3 columns, (I don't yet know what content is going in these boxes so when I do get it, it may look better in 3 columns or 2 so I have to decide then.

    If I do have 3, then, I can't geta left and right class being added.

    Sorry, this is becoming a bit confusing.

    Could I try the new CSS3 column layout thingy? and just leave browsers that don't support it to display all the boxes in one long list with 1 box per row?

    EDIT: In regards to adding a class to specific ones to target them all by. The boxes are ebing added by php from a mysql db, So, I am just giving it a template whcih it fills in and creates the right amount of boxes as there are, records in the result set.

  19. #44
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    Ok,

    If I decide I want them in 3 columns, (I don't yet know what content is going in these boxes so when I do get it, it may look better in 3 columns or 2 so I have to decide then.

    If I do have 3, then, I can't geta left and right class being added.
    no, not_last will suffice.

    see the code i posted above you may be needing a smaller width, like width: 29&#37; instead of 45%. but it works, i've tested it with firebug.

  20. #45
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that all these boxes are being made bynamically from a tb result set. Therefore I have no idea of what record will be appearing in which column therefore I have no idea what class to set for each one

  21. #46
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you don't have to know.

    an addition to the server side algorithm that builds the markup from the tb set will do the job for you:

    if i&#37;3 = 0 then class = "" else class = "not_last"

    you get the idea, right?

  22. #47
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this isn't a PHP thread but I wanted to keep it in the same topic.

    My code is having a parse error on the 4th line down in this code snippet:

    PHP Code:
    $i 0;
            while (
    $getMembers mysql_fetch_array($result)) {
                
    $i++;
                if (
    $i &#37; 3 = 0) {
                    
    $class '';
                } else {
                    
    $class 'not_last';
                }
                
    $fname $getMembers['fname'];
                
    $sname $getMembers['sname'];
                
    $name $fname.' '.$sname;
                echo 
    '<div class="'.$class.'">'.$name.'<br /><br /><br /><br /><br /><br /></div>';
            }

    I hope you can help then this might work!  YAY 

  23. #48
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    = is for assigning? if ($i &#37; 3 = 0)
    == is what you look for? if ($i % 3 == 0)

  24. #49
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ARGH! Damn, why does that get me every single time!

    Cheers.

  25. #50
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and you could improve that:


    html code:


    <div>Peter f</div>
    <div>Tom f</div>
    <div class="last">Claire f</div>
    <div>Mark f</div>
    <div>Richard f</div>




    css code


    #cmembers {
    text-align: center;
    }

    #cmembers div
    {
    border: 1px solid black;
    width: 29&#37;;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    margin-right:1%;
    margin-bottom: 1em;
    padding: .8em;

    background: #C6D7E9;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    }

    .last
    {
    margin-right:0;
    }





    php code


    $i = 0;
    while ($getMembers = mysql_fetch_array($result)) {
    $i++;
    if ($i % 3 == 0) {
    $class = 'last';
    } else {
    $class = '';
    }
    $fname = $getMembers['fname'];
    $sname = $getMembers['sname'];
    $name = $fname.' '.$sname;
    echo '<div class="'.$class.'">'.$name.'<br /><br /><br /><br /><br /><br /></div>';
    }



    i'm ashamed i didn't do it like this from the start it seems it's time for me to get some sleep!


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
  •