I have been writing my own web page creator. When I enter text it displays properly on my windows screen. When I preview the page in my browser it appears that the line height is greater in the browser forcing my text to descend lower than it should, often over writing the next paragraph. What should line height be set to so the text does not over write the text below. I currently have it set to “normal”. By the way I am using pixel heights.
Thanks
Texas Pete
Hi TexasPete. Welcome to the forums. 
Are you saying that you are creating a new page creation tool, or just using one?
Anyhow, what you are describing sounds a little worrying. Lines shouldn’t overlap like that. Setting heights on elements is mostly a really bad idea. Could you post a code example of what you are describing? Here are tips on doing that:
Browsers tend to have default line heights, but you can change those via CSS.
Yes, Ralph it is a new page creation tool. Simple and easy to use. I thought that printing to the screen in a standard manner would be duplicated in the browsers, but it is not. That is why I am looking at line-height. I assume that some browsers have their own separate settings. I have reset the padding on all elements to zero and that did not work. I will print and xhtml example and send it to you.
Thanks
Texas Pete Ye ha!
Ralph , You can see the page at www.treecare.tv/testpage.html
The page shows the over writing of lines on Opera. and Explorer.
Thanks
Texas Pete
Hi pete
the good news is, line-height isn’t causing any problems here.
You are only placing absolutely positioned divs on top of each other.
You can see this if you give them some fugly background colours in your CSS. The div covering up will be a problem with absolute positioning because it won’t be able to skooch further down if the box above it gets more content and grows.
Ok, How can I solve my problem and use div and absolute positioning. I have already collapsed the padding to 0. It looks just fine on my windows screen before I compile it to xhtml. The browser is not duplicating my windows screen. How do I make the browser do that.
Texas Pete
My advice is to wrap up absolute positioning in some newspaper, drive it out to some remote location, douse it in gasoline, drop it in a deep hole, set it alight and fill in the hole. Really, this is the wrong way to go.
As a rule, DON’T use absolute positioning for layout—except in very rare situations for minor styling effects. Abs pos removes content from the natural document flow, making it hopless for regular content layout.
Ralph, Everything I have been reading on line over the years has praised pixel positioning as the way to go. I have five thousand lines of code in my program doing it this way. I have seen other programs that are written that do it this way. I need something that would be a little more constructive for my situation.
Thank You for your reply,
Texas Pete
What you’ve been reading is quite different from what I’ve been reading. Wraps explain a bit more about what you are doing, or post an example. Truly, absolute pos for layout is not a goer. It will just be a world of pain for you. It’s rarely used on modern sites.
I experienced a problem like this in the past! You need to know that if you are using <p> browsers behave different. Some put a margin of 10px other of 20px. So you should add this in yout stylesheet in order to have a standard behaviour:
p{
margin:0px;
}
The chances of you wanting your paragraphs to have a zero margin is not very high. Why not just set the margin you actually want on the paragraph?
Ralph,
Thank you again for your reply. I had the margins set to 0px already. I keep playing with it and when I set the line-height the same height as the px height the problem resolved it self . I have read several explanations of Line-Height and both were a bit confusing. Especially when I set the line-height to the pixel height of the character height and it resolved the problem. Thank you for your assistant . If you have and further insight, I would appreciate it.
Texas Pete
Line height itself can be a bit tricky, yeah. Somewhere I have an old bookmark to a post by David Baron about inline elements, with some drawings, which at the time I found it I thought it was very useful.
Ah, found it: http://dbaron.org/css/2000/01/dibm
This post is from when people were discussing what inline elements and line-height and font-size etc should do in browsers, which is why the article is old. It’s still useful.
Usually we set line-height to something larger than the pixel height of the character. For example, a common setup is font: 12px/15px fontname fontname fontfamily; We usually don’t want the tops of the letters on one line to touch the bottoms of the letters in the line above.
Agreed.
I wouldn’t set p margins to 0, but if you want everyone to show the same amount of margin, you can simply set something and you get teh same effect: they’re all the same and you’ll know how large they’ll be anywhere.
I personally tend to set margins on p’s to 0 0 something 0; that is, only a bottom margin.
I’m also going to (of course) agree with ralph about not setting up page layouts with absolute positioning. However, the practical solution to not using absolute positioning means a bunch of time and technique learning CSS positioning, which isn’t going to fix your immediate goal.
I’d say, if you’re planning on doing more of this sort of thing, you need to learn CSS for positioning, because every screen is different and every device is different and every browser/user agent is different, and absolute positioning is very brittle (it can’t adjust to these things). If this is a one-time thing, then just go with what you have, but I’d set the top position of the lower box even a bit further down just to compensate a bit more for any browser adding a bit of height to the first box for any reason.
Ralph, Everything I have been reading on line over the years has praised pixel positioning as the way to go.
My first impression there is perhaps that’s either old material (before modern positioning methods actually worked, which once upon a time, they did not), or more geared for print people. In print, you know exactly your sizes and dimensions of everything, and pixel-perfection to any machine that exactly agrees with your definition of a pixel can be assumed to show you exactly what you tell it. Browsers and computer screens don’t fall under that category today, however.
The place I see the most absolute positioning nowadays is coming from the Javascript world. Quite often I am removing it from plugins our shops use and replacing them with CSS for better control based on what’s happening on the screen. Abso-po is also quite common in popups/lightboxes/overlays, dropdown menus (the sub menus), and clever tricks like Gilder-Levin image replacement (which I often use as well). It has its place and is very useful. But it’s a tool best used when you know its limitations.
Stomme Poes,
Thank you for your reply. I will read the information at the link that you provided for me. I am writing my code in such a way as to provide Liquid Layouts. I have also read that converting from pixels to em will also resolve much of this conflict. My program is supposed to be a wysiwug type program. It has been difficult to wright this type of program but others have done so. Webdwarf is one such program.
Thank you Texas Pete
My program is supposed to be a wysiwug type program. It has been difficult to wright this type of program
Indeed, they are difficult. I can only wish you luck there.