SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Page display differs with Browser Window Size

    Hi,

    I'm trying to correct the display my site. Currently, when a browser window is set to "maximize" the page looks fine. When the browser window is set to "Restore Down", and some of the width of the browser window is removed, the modules on my pages shift below content, or split apart and do not look correct.

    Please see my site at: infinitesolutionsonline(.)com

    I cannot even post my URL because of the intense anti-spam on this site. That's ridiculous.

    Please resize your browser window, so you may see what it is that I'm talking about. The modules I'm concerned with are the top left(subscribe) and top right(search) modules

    How can I correct the position of these modules when the browser window is resized?

    Any help is greatly appreciated. Thanks very much.

    Ty

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Everyone got tired of the spam, but yeah, I think newbs should be able to post links in the web design forum, as they often have them in their code when posting code (image urls, etc).

    This may not seem terribly helpful at the moment, but before you do anything else, I urge you to throw your site (or a page of it) through the html validator and fix the validation errors. validator.w3.org

    And then just because, go ahead and run your CSS through the CSS validator to check for any syntax errors. jigsaw.w3.org/css-validator

    It's a sure road to hair loss looking for bugs while you have invalid code. While fixing the invalid code may not fix your problem (I don't think it affects your problem too much but I didn't dig too deeply), it means anyone looking through your pages for bugs can rest assured that the problem isn't caused by simple HTML or CSS errors.

    Then we can take a closer look.

  3. #3
    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)
    Hi, when the browser is smaller the input fields don't have enough room to be on one line.

    So thus one drops and increases the overall height of the form, which increases the overall height of the div holding it. Howeve,re you set height:105px and then overflow:hidden; on the div containing the form, so anything over 105px is going to be chopped off, which is what is happening . On "div#header_r" remove the height
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Or the box holding the inputs set always wide enough so they don't drop.

    I was also unclear how wide was wide enough as far as the browser. I have 16" on hubby's laptop now.

  5. #5
    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)
    The biggest the screen can be while the issue still appears is 910px (for me)

    I have a 20 inch monitor

    The closest parent of the form has a 20% width (sidebar div) so .. yeah
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys are awesome!

    I've removed overflow:hidden and increased the width of div.search input to 55%.. This looks pretty accurate!

    The only thing I dislike now is that the search & find bar moves toward the center of the page with the browser window reduced..

    But I can live with that.

    Thank you very much Stomme poes & RyanReese!

    PS - I will also validate my site very soon. Thanks for that recommendation!

    Goodluck in 2010 RyanReese!

  7. #7
    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)
    Glad it worked, thanks and you're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is also a related issue, so I thought I'd ask:

    The text now shifts above the images on the left side when the browser is restored down. I've applied margin and padding to the div containing the text, however I'm not getting results I'm looking for.

    Here is an example of the current issue:
    infinitesolutionsonline(.)com/internet-services.html
    Notice, with the page at maximize, the alignment is centered. When the page is restored down, the text overlays the images on the left.

    Now, please see:
    infinitesolutionsonline(.)com/computer-repair-and-maintenance.html

    Here, I've applied:
    #computermargin {
    margin-left:5%;
    margin-top:-5%;
    padding-left:5%;
    }

    When the page is reduced down, the text looks almost decent. With the page set to maximize, the text has too much distance from left side.

    How can I get the best of both worlds?

    Thanks for the help.

    Ty


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
  •