Kennet Hayes
Forum Replies Created
-
OK i think got it now. Spend all day experimenting with css values to solve the issue. Probably not the only way but works for now. Here goes:
When using a p- or heading css rule wrapped by a div – container with position:relative and float:left/right the text wont stay in place vertically.
To maintain correct position of the text inside the div these two values must be added to the p- or heading rule (along with general values for font-family, font-size etc):
Type: line-height:100%
Block: display:inlineCould look like this:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 100%;
color: #C00;
display: inline;
}Centering or capitalizing the text can be done by adjusting the values in the div – container that holds the p- or heading rule.
text-align: center;
text-transform: uppercase;Could look like this:
#lineoftext {
background-color: #CCC;
float: left;
height: 30px;
width: 550px;
overflow: hidden;
position: relative;
visibility: visible;
z-index: 1;
text-align: center;
text-transform: uppercase;
} -
Ive found out what causes the trouble:
When applying the values float:left or float:right to a div, the p- and h tags inside the div jumps out of vertical position!
Very strange. Any ideas?
-
Changing fontsize from pixels to ems or % hasnt solved the positioning issue either. I am getting frustrated..
-
Hello Richard. The code posted is what causes the problem. The photos illustrates the posted code in firefox and IE. As you can see the line of text
h1changes position depending on browser.I have tried removing line-height with the result that h1 is ok in IE, but is hardly visible in firefox and safari.
Also ive tried adding “0” to margin and padding with the same result; still different positions depending which browser is used.When im using the “Rule Definitions” in the div to apply the values for font, fontsize, color etc everything is fine in all browsers. The disadvantage of this is that i cant use
pandh1h2etc. Thats reduces SEO availability.I should be able to use the tags and still maintain control over positioning regardless browser choice right?
-
Hello Richard and Fernando. Thx for replies. However neither answers solves my problem. Adding “0” to margin and padding just pushes the line of text a bit further up i the div, but the problem remains the same: The line of text shows differently depending which browser i use.
I’ve tried changing font-size from px to ems or %. No result
Tried removing line-height: 0px; with no resultHeres some code:
#mainwrap {
   background-color: #999;
   height: 670px;
   width: 950px;
   margin-right: auto;
   margin-left: auto;
   overflow: visible;
   position: relative;
   visibility: visible;
   z-index: 1;
   top: 10px;
}
#header {
   float: left;
   height: 60px;
   width: 950px;
   overflow: hidden;
   position: relative;
   visibility: visible;
   z-index: 2;
   border-top-width: 5px;
   border-top-style: solid;
   background-color: #333;
   border-top-color: #FFF;
}
#logowrap {
   float: left;
   height: 52px;
   width: 240px;
   overflow: hidden;
   position: relative;
   visibility: visible;
   z-index: 3;
   background-color: transparent;
   clip: rect(-4px,auto,auto,auto);
}
#headertxt {
   background-color: #FFF;
   float: left;
   height: 22px;
   width: 710px;
   overflow: hidden;
   position: relative;
   visibility: visible;
   z-index: 3;
   line-height: 0px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ive uploaded two screenshots. The correct position in Safari and wrong position in IE
