Suppose I have a div, which can't hold all its contents, so it has a vertical scrollbar.
I have fixed the div height at 400 pixels.
So if it contains the Gettysburg address, then when I look at it in IE-11 with normal zoom, I might see 10 lines of the address.
If I look at it in Chrome, the same Div might show me 12 lines.
If I change the zoom in Chrome, it might show me yet another number of lines.
Is there any way to make all these options show the same number of lines?
For instance, if I use "em" instead of "pixels" for height of the Div, would that help?
And if "em" did help, would it cope with images or would they also be non-standardizable.
You're trying to design for print. This is the web
Why ever would you want a fixed height container? The user gets to choose his own fonts and font size if he wants. He can always override any styles you specify. The web is designed to serve the functionality of whichever User Agent is being used.
Work with the system, not against it.
In a word, the answer to your question is 'no', you cannot make your page look the same on all browsers. You cannot even make it look the same in the same browsers if the user has configured it differently from the next guy's.
I actually have an
I actually have an application where it makes sense to have a fixed amount of html visible. Imagine a slideshow, where the frames are not pictures, but rather containers of html.
Suppose that I invite a user to comment on slide #5. If slide #5 shows different text and images on one browser than another, or even in the same browser, then I don't know what the user is commenting on.
For example, suppose I have a really big lecture, with pictures and links etc. I want to chop it into little bite size pieces, display each piece sequentially, and then have the user comment on a particular piece.
The way I've been doing that is showing it in a div, where the div is smaller than the entire lecture, but it has a vertical scrollbar.
I'd like to know that if I move to scrollTop of 800, and the height of the div is 400, then each user sees the same thing.
Or if he moves 50% of the way down, he sees the same thing.
But as you say, this approach is impossible.
I'll have to either give up or think of some alternate method.
Could you not use a [nested?] css counter? It would create a document outline, which could be the common reference. I suggested the method to Joanne Nova for threaded comments on her blog. See, for example, Jo Nova's blog.
nested css counter
I don't think a nested css counter would allow me to count pages. The problem is that the html that shows up in the slides originates from the users of my website. I clean it up a little, to remove dangerous tags (such as 'script') and dangerous attributes (such as onmouseover), but I have no real control of what appears in it. Because of this, I don't see what I can do to count the heights of tags, or the number of tags, or the number of "pages", etc.
But thanks for the idea.