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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 15
  1. #1
    Junior Member
    Join Date
    Mar 2011
    Location
    Missouri, US
    Posts
    6
    Member #
    27056
    [COLOR=rgb(51, 153, 102)]Problem fixed![/COLOR]

    [COLOR=rgb(51, 153, 102)]Summary: I had min-width specified manually on each element in the design (ie. header, navigation, content, footer, footnotes) instead of applying it once to the div-wrapper that those elements contained in. By fixing that, and changing 'margin' to 'padding' that was already applied to the div-wrapper, this resolved the problem altogether. (Both adjustments had to be made.)[/COLOR]

    CSS issue @ http://www.hlrse.net/Qwerty/xhtml/Ea...0v3/index.html
    Do not have your browser window maximized. Adjust the window width to something small (anything under 1020px). Scroll to the right side of the window, and compare it to the left side. For the life of me, as good I may be with XHTML/CSS, I cannot figure out a proper way to get 80px margin on the right side. I have tried a lot of things without success.

    Anyone? Thanks!

    Sincerely,
    Joshua Szanto

    EDIT: Some details about the design here:
    * Left and right margins should be 80px
    * Top and bottom margins should be 120px
    * The design should be centered (ie. with margin: 0 auto;) in the cases when there is not enough content to expand the design beyond window size, or when there is too little content for a higher resolution monitor
    * The design is meant to be able to expand to insane widths for huge tables

  2.  

  3. #2
    Member RiDunne's Avatar
    Join Date
    Feb 2011
    Posts
    75
    Member #
    26964
    Liked
    6 times
    First of all, I LOVE Andy's! Best custard EVER.

    As for the code, I know this sounds dumb, but have you added a margin-right to the same thing you added the margin-left to? If so, did you somehow cancel the margin-right in the HTML via inline style, or with another tag's/div's style in your CSS? I don't have time to check the code at the moment.

  4. #3
    Junior Member
    Join Date
    Mar 2011
    Location
    Missouri, US
    Posts
    6
    Member #
    27056
    Quote Originally Posted by RiDunne, post: 199891
    First of all, I LOVE Andy's! Best custard EVER.

    As for the code, I know this sounds dumb, but have you added a margin-right to the same thing you added the margin-left to? If so, did you somehow cancel the margin-right in the HTML via inline style, or with another tag's/div's style in your CSS? I don't have time to check the code at the moment.
    There is no margin-left. However, there is a margin: 80px 120px on body.

    EDIT: My bad, it isn't on body but rather on .wrapper, which is a div that the entire thing is contained in.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I'm confused as to what it is that you want and more importantly why. Are you trying to center the site itself? Or do you really need 80px on the right side for an as-yet-unknown reason?
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Member RiDunne's Avatar
    Join Date
    Feb 2011
    Posts
    75
    Member #
    26964
    Liked
    6 times
    Quote Originally Posted by BlueToast, post: 199899
    There is no margin-left. However, there is a margin: 80px 120px on body.
    Why does it have two values?

  7. #6
    Junior Member
    Join Date
    Mar 2011
    Location
    Missouri, US
    Posts
    6
    Member #
    27056
    Quote Originally Posted by TheGAME1264, post: 199900
    I'm confused as to what it is that you want and more importantly why. Are you trying to center the site itself? Or do you really need 80px on the right side for an as-yet-unknown reason?
    The website needs to have 80px margin on both left and right sides, and must be able to expand to something insane like 9999px width while retaining those margins. In cases when there is not enough content to expand beyond the browser window width, the design should be centered.

    Quote Originally Posted by RiDunne, post: 199902
    Why does it have two values?
    Left and right should be 80px.
    Top and bottom should be 120px.

    margin has two values because it is shorthand for [left/right] [top/bottom]. Are you not familiar with CSS?

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    That's messed up. I get the idea behind a liquid layout, but that's just plain messed up. I can't even begin to fathom the reasoning behind that. I'm guessing that you got an order to do it that way so I'm not blaming you, but still...that makes no sense to me at all.

    At any rate, change margin: 80px 120px; to padding: 80px 120px; . Your margins are being ignored anyway (otherwise, the whole page would be 120 pixels from the top), and padding is usually handled more consistently across browsers for this sort of thing.

    The other thing you could do is to define a min-width on wrapper. This won't work for IE6, but it would cover the rest of the browsers. I'd suggest 844px (since 844 + 160 = 1004 = the width of the browser viewing area on a 1024 x 768 monitor maxed out.)
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Member RiDunne's Avatar
    Join Date
    Feb 2011
    Posts
    75
    Member #
    26964
    Liked
    6 times
    Quote Originally Posted by BlueToast, post: 199903
    margin has two values because it is shorthand for [left/right] [top/bottom]. Are you not familiar with CSS?
    Ouch, that sounded rude. Not sure if that's how you intended to come across. In any case, I just wasn't aware you could define multiple margins like that. Thanks for the link.

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Yeah, that is true. You can even define all margins with one value like this:
    Code:
    #this-is-some-element {margin:  50px;}
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Junior Member
    Join Date
    Mar 2011
    Location
    Missouri, US
    Posts
    6
    Member #
    27056
    Quote Originally Posted by TheGAME1264, post: 199905
    That's messed up. I get the idea behind a liquid layout, but that's just plain messed up. I can't even begin to fathom the reasoning behind that.

    At any rate, change margin: 80px 120px; to padding: 80px 120px; . Your margins are being ignored anyway (otherwise, the whole page would be 120 pixels from the top), and padding is usually handled more consistently across browsers for this sort of thing.

    The other thing you could do is to define a min-width on wrapper. This won't work for IE6, but it would cover the rest of the browsers. I'd suggest 844px (since 844 + 160 = 1004 = the width of the browser viewing area on a 1024 x 768 monitor maxed out.)
    A min-width of 1020px was already imposed, but I just took a look and found that instead of applying that to .wrapper I did it as .content, .footer, .footnotes, .navigation { min-width: 1020px; }. Fixed that.

    Also changed margin: 80px 120px; to padding: 80px 120px; for .wrapper. Doesn't fix the problem.

    Aha, and that fixed the problem. A very small mistake on my part. Every once in a while this happens.

    [COLOR=rgb(51, 153, 102)]Problem fixed![/COLOR]

    [COLOR=rgb(51, 153, 102)]Summary: I had min-width specified manually on each element in the design (ie. header, navigation, content, footer, footnotes) instead of applying it once to the div-wrapper that those elements contained in. By fixing that, and changing 'margin' to 'padding' that was already applied to the div-wrapper, this resolved the problem altogether. (Both adjustments had to be made.)[/COLOR]

    [COLOR=rgb(51, 153, 102)][COLOR=rgb(0, 0, 0)]Thank you TheGAME1264! [/COLOR][/COLOR]


Page 1 of 2 1 2 LastLast

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 06:51 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com