I am currenty making a new look and system for my website, However, I am stuck with the line/text height problem.I have tried using line-height, But no luck, As it started to overlap on to the div and other text, And didn't seem normal.Current CSS [#Content is the main container I'm talking about ]\[code\]body { background:#000 url(/Media/Background.png) top center; } #Wrap { width:100%; height:100%; } #Header { position:absolute; width:100%; height:100px; left:0px; top:0px; background-color:#000; color:#FFF; text-align:center; } #Logo { background:url(/Media/TeknikkInfo.png) left no-repeat; position:absolute; height:100px; width:452px; left:10px; cursor
ointer; } #Navigation { position:absolute; width:100%; height:50px; left:0px; top:100px; background:#1f1f1f; line-height:10px; text-align:center; } #Content { border:1px solid #000; background:url(https://8b300d69518d5a96e5de-3852609c222273912115f7d2fbf93e19.ssl.cf1.rackcdn.com/BackgroundTeknikk.png); position:relative; margin:0px auto 0px auto; width:900px; top:152px; background-color:#000; text-align:center; color:#FFF; line-height:0px; font-size:20px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .Button { min-width:100px; height:40px; position:relative; top:5px; line-height:40px; margin:0px auto 0px auto; text-align:center; background:url(https://8b300d69518d5a96e5de-3852609c222273912115f7d2fbf93e19.ssl.cf1.rackcdn.com/Button.png); cursorointer; display:inline-block; border:1px solid #000; } #Title { width:400px; height:27px; margin:-22px auto 0px auto; -moz-border-radius: 15px; border-radius: 15px; background:#FFF; color:#000; top:0px; text-align:center; } #Seal { position:absolute; top:150px; width:132px; height:70px; left:0px; background:#1f1f1f top; text-align:left; } #Seal > span { display:inline-block;}\[/code\]How it looks like with line-height:0px;
It has been a problem as having text and links causes issues.And it also applies to input fields like this.
When i remove the line-height, It will look something like this.
And when i turn display_errors on for PHP, it looks normal.So, What Is the problem, I wanted it to be normal, And not like a 1000px long website of the spaces whenI have been stuck with this before too, but Didn't care about it, as it was for some Small sites.So, How can I make the height be right, Without having it overlap with text so hyperlinks is half clickable?https://teknikk.info/teknikk.info/ Is the dev so If you need to look at all the code.
ointer; } #Navigation { position:absolute; width:100%; height:50px; left:0px; top:100px; background:#1f1f1f; line-height:10px; text-align:center; } #Content { border:1px solid #000; background:url(https://8b300d69518d5a96e5de-3852609c222273912115f7d2fbf93e19.ssl.cf1.rackcdn.com/BackgroundTeknikk.png); position:relative; margin:0px auto 0px auto; width:900px; top:152px; background-color:#000; text-align:center; color:#FFF; line-height:0px; font-size:20px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .Button { min-width:100px; height:40px; position:relative; top:5px; line-height:40px; margin:0px auto 0px auto; text-align:center; background:url(https://8b300d69518d5a96e5de-3852609c222273912115f7d2fbf93e19.ssl.cf1.rackcdn.com/Button.png); cursorointer; display:inline-block; border:1px solid #000; } #Title { width:400px; height:27px; margin:-22px auto 0px auto; -moz-border-radius: 15px; border-radius: 15px; background:#FFF; color:#000; top:0px; text-align:center; } #Seal { position:absolute; top:150px; width:132px; height:70px; left:0px; background:#1f1f1f top; text-align:left; } #Seal > span { display:inline-block;}\[/code\]How it looks like with line-height:0px;