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 12
Like Tree5Likes

Thread: A problem with height around different browsers

  1. #1
    Junior Member
    Join Date
    Jan 2016
    Posts
    8
    Member #
    52916

    A problem with height around different browsers

    Hello,
    I am trying to build a website from scratch (my first website) and I am facing a little problem
    I have a form that has a certain width and height, and it looks perfectly fine in Firefox, but when I open the same page in chrome, the form's height is bigger than the window's height, so the the 'submit' button doesn't appear unless the user scrolls down,
    I know I can solve this by using JavaScript to get the size of the window and then calculate the size of the form based on it, but is there any way around this using only CSS?
    Thanks

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    No. There's also no way around it with Javascript, even though you found something that works in certain circumstances...and good on you for at least trying to figure it out. That's how you learn stuff...by screwing with it. So keep doing that.

    The simple explanation comes from three things: plain text, your cell phone, and your browser window. Your cell phone...and I say "yours" because pretty much everyone over the age of 12 has one now...has a screen that is 320 x 480 pixels wide. Whatever you've designed and calculated for height is on a desktop, which means that you've going to get scrolling regardless.

    Plain text is the other factor because plain text is resizable and pages are "zoomable". Get a Windows mouse with a scroll wheel and you can make a page twice the size with very little effort. Text can also be resized within Windows itself...not sure about Macs or Linux machines, but I'd imagine similar things happen.

    So the best thing you can do is not to worry too much about something like vertical scrolling. People are generally okay with that. It's horizontal scrolling that causes grief.
    Christo95 likes this.
    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)

  4. #3
    Junior Member
    Join Date
    Jan 2016
    Posts
    8
    Member #
    52916
    Quote Originally Posted by TheGAME1264 View Post
    No. There's also no way around it with Javascript, even though you found something that works in certain circumstances...and good on you for at least trying to figure it out. That's how you learn stuff...by screwing with it. So keep doing that.

    The simple explanation comes from three things: plain text, your cell phone, and your browser window. Your cell phone...and I say "yours" because pretty much everyone over the age of 12 has one now...has a screen that is 320 x 480 pixels wide. Whatever you've designed and calculated for height is on a desktop, which means that you've going to get scrolling regardless.

    Plain text is the other factor because plain text is resizable and pages are "zoomable". Get a Windows mouse with a scroll wheel and you can make a page twice the size with very little effort. Text can also be resized within Windows itself...not sure about Macs or Linux machines, but I'd imagine similar things happen.

    So the best thing you can do is not to worry too much about something like vertical scrolling. People are generally okay with that. It's horizontal scrolling that causes grief.

    Thanks for the reply,
    I don't see why you can't solve it with JavaScript, all you have to do is get the client browser size, and take a percentage of it, for example if the client height is
    X, X*0.8 would be a good height for the form. the only problem is that you will have to include the style sheet in the page instead of a separate file, or am I missing something?
    Also, it's not just about the vertical scrolling, it also ruins the design of the page, I am sorry but I am perfectionist, and I would like the page to look exactly the same in every browser.and I know it's possible because we always see it, (facebook for example)
    As for the the cell phone, that's another problem, I am just concentrating on the desktop right now.
    Last edited by Christo95; Jan 02nd, 2016 at 12:30 PM.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Please understand that I'm not trying to discourage you. I'm trying to point something out to you, that's all.

    You're missing the rest of your form. Depending on where you position the button, you're going to end up with one of two scenarios:

    1) Your form submit button overlaps one of your other fields (or vice versa).
    2) You end up with a scenario whereby at least one of your height of your form or the height of your submit button necessitates a scrollbar.

    You're making a quite understandable mistake as well...most of my clients make it. It's your first website, so I fully understand why you're trying to do it. You're trying to be pixel perfect with a medium where being pixel perfect is not really an option. Web pages aren't like Photoshop documents, where you have set coordinates for width and height and you can design accordingly. Comparing what a small section of sites do with your device to what you're trying to do with your device is not going to get you anything other than frustrated, either; the optimal approach is to try and get your work to be at least functional in as many devices as possible.

    Screen resolutions, the placement of taskbars, and window sizes mean that you're going to see different results across different screens. I'm not even factoring in cell phones at this point, either...this is true of desktops as you can have resolutions such as 1024x768, 1366x768 (typical laptop screen resolution), 1440x900, 1280x1024, 1680x1050, 1920x1080, and others I've probably missed. Some people also put their taskbar on the top, the bottom, the left, the right, and then they resize it...so your browser window area is affected by this as well.

    What I would suggest to you, if the submit button is really that important to you, is to try and minimize the amount of vertical space your form and any surrounding elements take up. If you're using double lines for form elements (label + field), put them on the same line. Reduce padding if you can. If you have some sort of header graphic/background, get rid of it. Things like that. Personally, though, I wouldn't spend a lot of time on this.

    Responsive Web Design An A List Apart Article <-- this is a somewhat dated article, but it's the best example I can come up with that explains the concept of where you'll ultimately have to go with all of this. Read the article and play with your browser window while you look at the examples.

    https://chrome.google.com/webstore/d...cgefonfh?hl=en <-- here's a Chrome extension that you can use to resize your window to various sizes to see more of what I'm talking about.

    Short version: positioning a button is not an effective use of your time.
    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
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I partially, and this rarely happens, but I partially disagree with you GAME. While this cannot be done with CSS, it can absolutely be done with JavaScript. Sizing and positioning elements based on the viewport isn't difficult, though it is a bit tedious and requires a lot of math that one would inevitably get wrong multiple times before getting it right.

    However, and this is directed at the OP, the question isn't "could", it's "should". This is where I agree with GAME. Imagine a UI on a large, say 1440 or 4K monitor where everything were sized that way. The form elements would be unwieldy and huge. It would look frankly ridiculous. Imagine on a mobile browser how painfully tiny the form elements would be. Your best bet is to fit for width and let some vertical scrolling happen. It doesn't look bad. Users expect such things.
    TheGAME1264 and Vapr_Arts like this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Junior Member
    Join Date
    Jan 2016
    Posts
    8
    Member #
    52916
    Quote Originally Posted by TheGAME1264 View Post
    Please understand that I'm not trying to discourage you. I'm trying to point something out to you, that's all.

    You're missing the rest of your form. Depending on where you position the button, you're going to end up with one of two scenarios:

    1) Your form submit button overlaps one of your other fields (or vice versa).
    2) You end up with a scenario whereby at least one of your height of your form or the height of your submit button necessitates a scrollbar.

    You're making a quite understandable mistake as well...most of my clients make it. It's your first website, so I fully understand why you're trying to do it. You're trying to be pixel perfect with a medium where being pixel perfect is not really an option. Web pages aren't like Photoshop documents, where you have set coordinates for width and height and you can design accordingly. Comparing what a small section of sites do with your device to what you're trying to do with your device is not going to get you anything other than frustrated, either; the optimal approach is to try and get your work to be at least functional in as many devices as possible.

    Screen resolutions, the placement of taskbars, and window sizes mean that you're going to see different results across different screens. I'm not even factoring in cell phones at this point, either...this is true of desktops as you can have resolutions such as 1024x768, 1366x768 (typical laptop screen resolution), 1440x900, 1280x1024, 1680x1050, 1920x1080, and others I've probably missed. Some people also put their taskbar on the top, the bottom, the left, the right, and then they resize it...so your browser window area is affected by this as well.

    What I would suggest to you, if the submit button is really that important to you, is to try and minimize the amount of vertical space your form and any surrounding elements take up. If you're using double lines for form elements (label + field), put them on the same line. Reduce padding if you can. If you have some sort of header graphic/background, get rid of it. Things like that. Personally, though, I wouldn't spend a lot of time on this.

    Responsive Web Design An A List Apart Article <-- this is a somewhat dated article, but it's the best example I can come up with that explains the concept of where you'll ultimately have to go with all of this. Read the article and play with your browser window while you look at the examples.

    https://chrome.google.com/webstore/d...cgefonfh?hl=en <-- here's a Chrome extension that you can use to resize your window to various sizes to see more of what I'm talking about.

    Short version: positioning a button is not an effective use of your time.

    I know you are not trying to discourage me, also thanks for the time and effort, I really appreciate it
    Well you are actually right, I am trying to be pixel perfect, but it looks that it just doesn't work that way, I also spoke to a friend of mine who has some experience with web design, and he suggested that I put the first name and last name inputs in one block to reduce the height, which is what I did, now the submit button appears without having to scroll down, but now I am faced with another problem : the footer. the footer appears completely in chrome, but in Firefox, only half of it appears, which ruins the 'beauty' of the page, is there anything you can suggest?
    Also thanks for the article, it opened my eyes to media queries that I didn't know about.

  8. #7
    Junior Member
    Join Date
    Jan 2016
    Posts
    8
    Member #
    52916
    Quote Originally Posted by Ronald Roe View Post
    I partially, and this rarely happens, but I partially disagree with you GAME. While this cannot be done with CSS, it can absolutely be done with JavaScript. Sizing and positioning elements based on the viewport isn't difficult, though it is a bit tedious and requires a lot of math that one would inevitably get wrong multiple times before getting it right.

    However, and this is directed at the OP, the question isn't "could", it's "should". This is where I agree with GAME. Imagine a UI on a large, say 1440 or 4K monitor where everything were sized that way. The form elements would be unwieldy and huge. It would look frankly ridiculous. Imagine on a mobile browser how painfully tiny the form elements would be. Your best bet is to fit for width and let some vertical scrolling happen. It doesn't look bad. Users expect such things.
    I do agree with you, but my problem here isn't the resolution, it's just the client browser height, it differs from a browser to a browser, and from a user to another user, for example some users in firefox activate the menu bar, which makes the window size smaller, affecting the appearance of your page.
    as for the resolutions, I think the best way to approach it is to write different style sheets for different resolutions, use JavaScript or media queries (that I just found out about thank to GAME) to get the devices resolution and include the best style sheet for that resolution, or is there a better way? (I am just a beginner at this).
    Last edited by Christo95; Jan 03rd, 2016 at 09:38 AM.

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The viewport is measured in pixels. That's where resolution comes in. Oh, and here's the funny thing: pixels aren't all created the same. There are physical pixels, device pixels and CSS pixels. All of them are different, and vary by device, screen, browser and video hardware.

    There's a couple of ways to do this, if you must.

    A) Thinking more on it, it can be done with CSS. If you use vh units for heights and vw units for width, you can painstakingly make everything fit. And on smaller screen sizes, everything will be painfully tiny to read or will overflow the containers. You will have to use media queries to reconfigure the page based on size, device pixel ratio and orientation. Oh, and don't use px. Use em, en or rem units.

    B) JS is probably the better option, here, but will yield similar results. You need to grab the height and width of the viewport using these statements:
    Code:
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    Then, you'll need to use them to calculate the screen orientation. From there, you can calculate the size of everything, and when I say everything, I mean EVERYTHING. The font sizes, element heights, widths, padding, margins, whether there's multiple form elements on one line, how that's affected by height, width and orientation, and a slew of other things I'm probably forgetting to mention. Then, you need to apply all of those calculated sizes to the items. You'll run that on a window load event and you'll need to re-run it on a resize event so it recalculates and reapplies everything every time the user resizes their browser or changes the orientation of their device. Oh, and you'll need to also make sure nothing breaks when they zoom in because everything is way too small, so use em, en or rem units, not pixels.

    In fewer words, and as I originally said, it isn't a question of can. It's a question of should. You technically can do it...
    TheGAME1264 and Christo95 like this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I thought of the vh solution and I use it on one of my sites, but it hasn't reached "full" support yet (although nothing ever really does).

    Can I use... Support tables for HTML5, CSS3, etc

    Use it if you know your traffic stats and you can say with a reasonable degree of certainty that over 95% will be able to view it...but be careful.
    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
    Jan 2016
    Posts
    8
    Member #
    52916
    Quote Originally Posted by TheGAME1264 View Post
    I thought of the vh solution and I use it on one of my sites, but it hasn't reached "full" support yet (although nothing ever really does).

    Can I use... Support tables for HTML5, CSS3, etc

    Use it if you know your traffic stats and you can say with a reasonable degree of certainty that over 95% will be able to view it...but be careful.
    No, I don't think I will be using them, it's like Ronald said, it will make the page look ridiculously big (or small) in (or smaller) devices.


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