SitePoint Sponsor

User Tag List

Page 54 of 66 FirstFirst ... 44450515253545556575864 ... LastLast
Results 1,326 to 1,350 of 1630
  1. #1326
    SitePoint Zealot lightningstriker's Avatar
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very helpful thread, this thread is huge!

  2. #1327
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Min width problems/not working correctly

    morning,

    Amazing amount of useful information here. Thank you very much for this.

    I have a problem with setting the min width in this fluid layout and I haven't seen this issue come up for anyone else. (I've read the FAQ that relates to IE expressions and I've used "min-width" for the enclosing div).

    In a site I'm building this is not working correctly in both IE, Firefox, etc. I'm targeting the "wrap" div that encloses my layout and there is a problem recognizing the right side of that div although it is definitely the outermost div. The min width is not totally applying to the entire div, it would seem.

    So the result (looking at it in Firefox...I removed the IE expression) is that although the page min width seems to work in terms of limiting the width of the page what you see now with the min-width set in the css is, rather than the gutter being around the main body of the page, it's visible on the top, left and bottom sides. So the right side butts up against the right window edge rather than keeping the gutter when the page is resized past the min I set.

    Why is it not enclosing the entire div? From all I can tell all the divs are closed correctly, etc. At this point I'm at a loss so some help on this would be much appreciated.

    Site/example page is at http://nbstage.sv.publicus.com/apps/...IEW30/70719017

    Just resize and it should be pretty obvious. Any code you need to help me figure this out please let me know and again, thank you.

    Bob H


    All set with this...Got it figured out...thanks...
    Last edited by bobth; Jul 22, 2007 at 15:41. Reason: solved

  3. #1328
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Bob,

    I looked at the page in firefox and I'm not sure I can understand what the problem is. The min width is working and restricting the width of the page as expected. I don't see how it could work otherwise and it seems to be working as I would have expected.

    You can't have a right "buffer" if the window is smaller than the available width. For that to happen the page would have to be fluid (e.g. no min-width set).

    I'm not Sure I'm understanding what you mean.

  4. #1329
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for checking, Paul. It works fine now but when I wrote the message I had attached the min-width to the outer wrap div as opposed to the body. Once done properly all was well. But thank you again for looking.

    Bob

  5. #1330
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I have one other question related to min-width; this in IE 6.

    I'm using the code you posted here in relation to this in the header (<!--[if gte IE 5]><style type="text/css">body {width:expression( documentElement.clientWidth < 950 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 950 ? "950" : "auto") : "950px") : "auto" );}</style><![endif]-->).

    It works fine and sets the min width however if the window is manually made narrower by pulling the side of the browser window the left nav does not seem to stay within it's containing div and shifts into the content area on the right. Hopefully I'm being reasonably clear, if not please let me know. Example page at http://nbstage.sv.publicus.com/apps/...egory=POLITICS

    Thanks again for your time and help, Paul.

    Bob

  6. #1331
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved...what IE wants, at least in this case, in a height set in pixels for the left nav that allows for the content as opposed to "100&#37;" which is how I had it.

  7. #1332
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Glad you sorted it

  8. #1333
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6 resizing issue in left col

    Another question and I don't seem to be able to answer this one on my own, Paul. Problem is when in IE 6 and I resize the browser window smaller the farthest left col div shifts over in the main content area div. When in full screen mode all is well...just this div shifts in IE 6. (The left div has been colored green)

    All pages are doing it in this site. Site http://nbstage.sv.publicus.com/

    Thank you,

    Bob

  9. #1334
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To clarify a bit...what I mean by "...resize the browser window smaller.." Iis by going from full window mode to smaller as in using the buttons at the very top right of the browser. If after that point I refresh browser the left div returns to its proper place and then resizing the window by pulling the edge back and forth all works fine...it's just that initial shift from full screen to smaller is the trouble. Just wanted be clear.

    Bob

  10. #1335
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI Bob,

    Try adding position:relative here:

    Code:
    #allcolswraptwo {
    background:repeat-y left top url("/graphics/images/wrap_back1.gif");
    height:100&#37;;
    width:100%;
    position:relative;
    }

  11. #1336
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, Paul.

    Bob

  12. #1337
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul

    I have been using your 2 column left centered layout and have come across a problem.

    I am trying to add some padding the the content div but it's all going pear shaped. it seems it's not reading the stylesheet properly.

    Could you please take a look and see what the problem is?

    Many thanks

    the link is http://www.jackgodfrey.org.uk/adam/jack

    Also here is the stlesheets I have used....your's is layout.css and the other stylesheet is my own so they don't get mixed up
    Attached Files Attached Files

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

    The easiest way to add padding to the main column is to simply apply the padding to the inner elements.

    Code:
    #content p {padding:10px}
    Of course you will need to do that for all the elements you use there or alternatively apply an inner div and apply the padding to that. You can't just add padding to the main elements unless you also change all the other calculations with the negative margins etc (and do the box model hacks).

    You have an error in the clearfix routine which is stopping mozilla from working properly. There should be no gap after the colon, it should be like this:


    Code:
    /* clear without structural mark-up */
    .clearfix:after {
    You should also add clear both to the news as there is floated content contained there.

    Code:
    .news {
       width: 190px;
       margin-left: 3px;
       margin-top:5px;
       background-color: #E4EFFF; /*#EDF0F6*/
       border: 1px solid #FFFFFF;
    clear:both
    }
    That should fix most of the problems

  14. #1339
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul....I sorted that problem out but just a quick question that you should be able to answer with no problem.

    What I am trying to do is have some sort of spacer between the main content that is is in the content area and the footer so if there is masses of text in the conent div, these is about a 50px gap between the last line and the footer.

    I did think about creating a div with a set height but i couldn't get it to work maybe becuase i never set a z-index.

    Have you any ideas how i can do it? Your layout I'm using is the centered 2 column layout

  15. #1340
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd use a margin instead of extra HTML code. Just put a bottom margin on the content DIV and you should be fine depending on how your HTML is structured.

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

    As Dan said you could use a margin or perhaps some padding would be better in this case:
    Code:
    #content2 {padding-bottom:50px}

  17. #1342
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both Dan and Paul.....that made so much more sense and worked perfectly.

    Paul, I don't mean to burden you with questions but since using the new layout I have come across minor problems.

    The layout works fine but i have a problem with my contact form and I don't know if it's becuase something getting inherited is causing problems. Can you please take a look at this page http://www.jackgodfrey.org.uk/contact which is casuing problems and compare it to http://www.jackgodfrey.org.uk/adam/s...p?page=contact which is how it should look and tell me what i need to do to fix the problem/ I have tried adjusting the padding on the labels and it all goes out of alignment. I have come across this before ages ago and forgot how i fixed it.

    Many thanks

    Adam

  18. #1343
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Adam,

    If i'm looking at the same problem that you are talking about then its simply that you haven't defined the margins for the p tag in that section. When using the global reset (* {margin:0;padding:0} or other reset techniques) then you need to explicitly control the padding and margins for all elements as their will be no default.

    It just looks as though you need some margin on the p tags to space that form out nicely.

    e.g.
    Code:
    #content3 p{margin:1em 0}
    Remember that all elements you use should be controlled by you

  19. #1344
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I did have s style set for #content3 but it was
    Code:
    #content3>p {
    intead of
    Code:
    #content3 p {
    and now it works.

    There is one last problem that has got me baffled.

    I have an image gallery which displays a list of thumbnails (not a complicated gallery) and when i click on an image the larger image is displayed.

    The problem is after the pages has finished loading all the thumbails (you can see them as they're being downloaded), all the images disappear and there is no hyperlink where each image is supposed to be.

    If you have a look here http://www.jackgodfrey.org.uk/gallery/honeylands you will see what I mean

    Here is the CSS file for the gallery

    Code CSS:
    .img-shadow {
      float:left;
      background: url(images/shadowAlpha.png) no-repeat bottom right !important;
      background: url(images/shadow.gif) no-repeat bottom right;
      margin: 10px 0 0 10px !important;
      margin: 10px 0 0 5px;
    }
     
    .img-shadow img {
      display: block;
      position: relative;
      background-color: #fff;
      border: 1px solid #a9a9a9;
      margin: -6px 6px 6px -6px;
      padding: 2px;
    }
     
    .gallerycontainer{
      position: relative;
      /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }
     
    .img-large {
      float:left;
      background: url(images/shadowAlpha.png) no-repeat bottom right !important;
      background: url(images/shadow.gif) no-repeat bottom right;
      margin: 10px 0 0 80px !important;
      margin: 10px 0 0 5px;
    }
     
    .img-large img {
      display: block;
      position: relative;
      background-color: #fff;
      border: 1px solid #a9a9a9;
      margin: -6px 6px 6px -6px;
      padding: 2px;
    }

    and here is the code for the gallery page which I've included becuase you won't see the code

    Code PHP:
    <h2>Image Gallery - Honeylands</h2><hr />
    <?php
    $cat = "honeylands";
     
    define ("NUMCOLS",4);
     
    include_once("includes/connection.php");
     
    $res = mysql_query("SELECT id,thumb,cat FROM image WHERE cat='honeylands'");
     
    $count = 0;
    $counter= 1;
    echo "<table border='0' id='gallery'>";
    while (list($id,$thumb,$cat) = mysql_fetch_row($res)) {
     
        if ($count % NUMCOLS == 0) echo "<tr>\n";  # new row
        echo "<td><div class='img-shadow'><a href='/gallery/$cat/image/$counter'><img src='/images/gallery/thumbs/$thumb' alt='Honeylands' style='border:none' /></a></div></td>\n";
        $count++;
        $counter++;
     
        if ($count % NUMCOLS == 0) echo "</tr>\n";  # end row
    }
     
    # end row if not already ended
    
    if ($count % NUMCOLS != 0) {
       while ($count++ % NUMCOLS) echo "<td>&nbsp;</td>";
       echo "</tr>\n";
    }
    echo "</table>";
    ?>

    It's probably something really simple that I can't see for looking but if you could help, you would sort out a massive problem

    Many thanks


    Adam

  20. #1345
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    It looks like a "haslayout" issue again (see faq).

    Try this:
    Code:
    #content3 {
       position: relative;
       padding: 10px;
        min-height:0;
    }

  21. #1346
    SitePoint Member
    Join Date
    May 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I opened this thread but I think it has it's place here, I didn't read all 54 pages but I haven't found the response so here it is.

    http://www.sitepoint.com/forums/showthread.php?t=498838

  22. #1347
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    answered in other thread

  23. #1348
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pretty Cool post.

  24. #1349
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Need help again Paul.

    I have used the 2 column centered layout helping out someone else redesign their site and have come across a minor problem.

    One of the oage contents is very short so the white background color doesn't stretch to the footer.

    Can you please take a look here http://www.jackgodfrey.org.uk/adam/t...p?page=aboutus and tell me what the problem is?

  25. #1350
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You seem to have omitted the absolute column that holds a background colour for browsers other than IE.

    e.g.

    Code:
    #m{
        position: absolute;
        height: 100&#37;;
        left: 169px;
        background:#fff;
        z-index: 1;
        width: 890px;
        border-left: 1px solid #fff;
        top: 0;
    }
    Code:
        </div>
      <div id="m"></div>
    </div>
    <div id="footer">
    You also need to address haslayout on your leftnav as it is way too long.

    Code:
    * html ul#menu li a,* html .menu2 li a {height:1%}
    You also seem to have a little too much bottom padding on the left nav and the main content.


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
  •