SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    strict 100% height

    Someone put me out of my misery!

    OK, I thought that under the strict box model that using a percentage would calculate it correctly based on the containing box size.

    But my code is not working under strict, when I use 100% under the strict box model I get a div wider than the screen unless I have no padding.

    Strict: http://www.livingdreams.co.uk/journey/index1.html
    Loose: http://www.livingdreams.co.uk/journey/index2.html

    I want it to look like index2.html, but I would like to do it the strict way.

    Help!
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Recall that under the CSS box model, padding, border, and margin are ADDED to the overall width/height of a box element. So in your example,
    100% (width or height) + 1px (border) + 10px (padding) = more than 100%, which is causing the scrollbars. Your index2.html file has no DTD, throwing IE in "quirks" mode, using their box model which SUBTRACTS from the width/height value you give, which is why there's no scroll on that page. Maybe try something like this:
    Code:
    <style type="text/css">
    div.Main {
    margin: auto; /*won't affect the height/width, just centers */
    width: 93%;
    height: 93%;
    padding: 5%;
    border: 1px solid #ccc;
    }
    </style>
    in my example, you have
    93% (width/height) + 5% (padding) + 1px (border), which is less than 100% and won't give you the outer scrollbars around the browser window. Play with the width/height and padding values until you get more of the effect you want.

    Here's a link explaining the box model problems you'll come across:
    http://www.tantek.com/CSS/Examples/boxmodelhack.html

    Hope this helps!

  3. #3
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... Does that mean that it is impossible to get a precise padding in a case such as this? I can't ever get a consistent 10px for example, it can only every be a percentage, which will vary according to window size?
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Whatever you do, just make sure your content+padding+border+margin < 100%. You can do something like this:
    Code:
    <style type="text/css">
    div.Main {
      width: 95%;
      height: 95%;
      padding: 10px;
      border: 1px solid black;
    }
    </style>
    In this case, your browser window won't show scrollbars unless your browser window is smaller than 220px width 220px height. Even on handhelds (Palm OS, Pocket PC) the screen resolution is 320240! Try my style rules above in a page, then write this command into your browser's address bar:
    Code:
    javascript:window.resizeTo(320,240);
    You'll see that even at a res that small your browser window will still not show scrollbars. Since many of your visitors will be browsing at 800600 or greater this will most likely not be an issue.

  5. #5
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand, I just hate to not have precise control...
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dale_burrell
    I understand, I just hate to not have precise control...
    I can understand that, and it was a battle I tried to fight when I first got into CSS layouts, but it goes against the whole notion of XHTML/CSS. Those two are about being flexible and not necessarily needing everything to be pixel-perfect. I still live in both worlds (pixel-perfect at work because the corporate clients won't listen to anything else, but XHTML/CSS for personal sites and any client I can convince while freelancing), but I find XHTML/CSS much easier to work with than "how many pixel.gifs do I need to make this work in Netscape 4 too?".

  7. #7
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems there is a lot I don't know about what can be entered in the address bar. What else can be put in there?
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    All kinds of javascript commands. Also, if you use Mozilla, you have a few other things at your disposal, like about:config (will let you know what your Mozilla preferences are) and about:mozilla (info about the mozilla project).

  9. #9
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    I can understand that, and it was a battle I tried to fight when I first got into CSS layouts, but it goes against the whole notion of XHTML/CSS. Those two are about being flexible and not necessarily needing everything to be pixel-perfect.

    Oooooh.... I just have to disagree with you there!

    Pixel perfect is one of the things that CSS is much better at than pre-CSS days.

    It's why CSS has two positioning schemes, relative and absolute. If you use relative, then asking for pixel perfect is asking for trouble, but use position: absolute; and you are away. Set margin, padding and borders to 0, and you can use top/left/width in NN4 even!

    The notion of XHTML+CSS is to separate style from content, so if your user wants the content, they can see it however they want. Your default style can be as pixel-perfect or as un-pixel-perfect as you like

    Douglas
    Hello World

  10. #10
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DougBTX
    Pixel perfect is one of the things that CSS is much better at than pre-CSS days.
    Just what I wanted to hear - so how do I solve my problem then?
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  11. #11
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dale_burrell
    Just what I wanted to hear - so how do I solve my problem then?
    Cheat

    Clues:

    - I can only think of a way to do it, but it will put the scroll bar out of the box. You can handle that?

    - Think of where borders come from, you are not limited to anything here.

    - Think about z-index's, they could help you.

    - Absoute and semi-relative positions are usefull. Use two margins and 4 positioned divs for effect.

    - Finally, I say just dump the background images totally, the way I described won't handle them very well...

    Good luck (it works),
    Douglas
    Hello World

  12. #12
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DougBTX
    Good luck (it works),
    Douglas
    Sorry, but my brain isn't up to the cryptic stuff today. All I want is to have a 20px space between the browser and my div.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  13. #13
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dale_burrell
    Sorry, but my brain isn't up to the cryptic stuff today. All I want is to have a 20px space between the browser and my div.
    Sorry but I'm not bothered with spelling out how to think creativly today

    Douglas
    Hello World

  14. #14
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DougBTX
    Sorry but I'm not bothered with spelling out how to think creativly today Douglas
    The concept of thinking creatively is such that 2 people are unlikely to have the same creative approach - hence the beauty of these forums where we can share our different creative approaches - or not!
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  15. #15
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Arg... I'm just getting the overall impression that people are tending to post before they think, nothing personal.

    This is a case where it may be best to literally think outside the box.

    hth,
    Douglas
    Hello World

  16. #16
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DougBTX
    Arg... I'm just getting the overall impression that people are tending to post before they think, nothing personal.

    This is a case where it may be best to literally think outside the box.

    hth,
    Douglas
    You'd have saved us both time if you just answered straight-forwardly in the first place. I did think, and have thought again about what you've said and I still don't know what you're talking about. Sounds like you've got an interesting idea, but I can't read your mind. Don't assume someone is dumb just because they can't think of something that appears simple to you - as I'm sure the roles will reverse soon enough.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  17. #17
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True, it would be easier and faster to just deal out code, but I don't really see the point in doing that. There is enough lying around the net already. I see the forums as a way for people to discuss ideas, not as an automated code writing factory.

    It's just that this seems to be a one sided conversation...

    OK: Width is easy, but (as far as I know) height is impossible.

    Where does that leave us? (or me rather?)

    Try using margins for width, don't set it 100%. Just cover up the top and the bottom with more divs. You will hit a problem with IE6. Fix it. Try putting borders on these two divs. Then cover them up with two vertical ones. That is what will mess up your BG images though...

    Douglas
    Last edited by DougBTX; Mar 3, 2003 at 10:27.
    Hello World


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
  •