Hey,
I'm using relative font-sizes to control the layout in different resolutions. And I've notices one very big issue in IE. The following code works as I believed it should in NS:
<div style="position: absolute; display: inline; width: 36em; height: 2em; text-align: center; border: 1px solid blue;">
<img style="width: 5em; height: 1.5em; float: left; margin-top: 0.2em;" src=http://www.webdeveloper.com/forum/archive/index.php/"#" />
<img style="width: 4em; height: 1.5em; float: right; margin-top: 0.2em;" src=http://www.webdeveloper.com/forum/archive/index.php/"#" />
<span style="font-size: xx-small;">
I am trying to center text in between two images.<br />
There are two lines, thus 'xx-small' is needed.
</span>
</div>
However, IE doesn't scale the text the same as NS. It's like IE skips the 'smaller' or 'smallest' text-size depending on what the CSS value is. I had to extend the div container's width by 10em just so that the text wouldn't wrap in the 'smallest' size, thus breaking the div's height.
So I decided to make it 0.6em rather than 'xx-small' and it worked fine, that is until I discovered it becomes the opposite. So know the div would break on 'large' and largest.' It's one or the other, either way it's messed up. The only fix I found was to make the div large enough that the text wouldn't wrap. But then there's a lot of extraspace in NS, even though the text-size is illegible. But I'm thinking someone using 640x480 or 800x600 *might* use the smallest text-sizes available. I thought of setting the div to overflow: hidden, and scaling down the div width, as the site is being optimized for 800x600/1024x768. But, I had to keep that minority in mind and didn't want to lose the bottom line, which contains a link.
Is their a solution? Or is it another IE box model/bug/quirk? I could really use that extra 10em (a sixth of my width) elsewhere....The problem with relative text sizing is that browsers are inconsistent with the base size from which you are scaling. Check out A List Apart for articles related to this issue.Thanx ray326,
Here is one possible article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/sizematters/">http://www.alistapart.com/articles/sizematters/</a><!-- m -->) at ALA. I'm sure there's more.
This is the relevant CSS:
NS4.x :
body, div, p, th, td, li, dd {
/* redundant selectors to help NS4 remember */
font-family: Verdana, Lucida, Arial, Helvetica, sans-serif;
font-size: 11px;
}
Second imported sheet for IE4/5 & Opera :
body, body div, body p, body th,
body td, body li, body dd {
/* more specific to override imported rule */
font-size: x-small;
/* false value for WinIE4/5 */
voice-family: "\"}\"";
/* trick WinIE4/5 into thinking rule is over */
voice-family: inherit;
/* recover from trick */
font-size: small
/* intended value for better browsers */
}
html>body, html>body div, html>body p,
html>body th, html>body td,
html>body li, html>body dd {
font-size: small
/* be nice to Opera */
}
I have yet to test this. And I'm not sure it's worth supporting NN4.x these days anyways.Well, I tested it and it fixed the problem in IE, sort of. When I applied the solution I was able to reduce the width from 36em to 28em. Then I decided to apply ariel, sans-serif and had to reincrease the width to 31em because it was breaking the div with 'largest' text size. So I save 5em, which is better than nothing I guess.
Now the problem is with NS7.1. The text isn't breaking the div height, but it is overflowing. IE places the first line at the top of the div and it looks fine. NS is placing the first line in the middle of the div forcing the second line to be centered on the bottom border of the div. All I need to do is get NS to shift the first line up and it'll be fine.
I've tried zero padding and margin, negative top margin, line height, display block on the span, a top value, and nothing seems to affect the texts position. But it does do all kinds of screwy things to IE. Is it because the div is displayed as inline?
Why does all this crap have to happen to me? Again if anyone knows how to adjust the top positioning of text in a span in Gecko, please let me know. Thanx.
I just realized I should try replacing the span with a block level div and see if I can apply negative margins to that. I just hope it doesn't mangle the inline elements or IE. I'll post the results soon. In the mean time, I'd appreciate any help.
Edit: By replacing all the spans with divs everything was corrected. I didn't even need to reset the display back to block (I assumed that they'd inherit the display inline from the parent div.) Anyone know why NS has such as different application of span from div?Anyone know why NS has such as different application of span from div?
Usually it's because it follows the spec, which I think is the case here, but sometimes it's a different interpretation of an ambiguity and sometimes it's (heavens!) an error in the code. 8)Originally posted by ray326
Usually it's because it follows the spec, which I think is the case here, but sometimes it's a different interpretation of an ambiguity and sometimes it's (heavens!) an error in the code. 8)
Tell me if replacing the span above with a div is an error in coding
.
I think I finally uderstand why I need the extra space on 'smallest.' It's because it isn't scaled, IE won't allow the font size to decrease below 9px, as stated earlier, unless other keywords such as 'smaller, x-small or xx-smaller' are applied. If the font size was truly scaled by percentage, as Gecko does, then the font size would be 8px, and since there is a 1px difference on each character it needs extra space. So if I set the font size to 9px to test how much space is needed in px I should be able to apply a min-width/height. Can you apply a 'width: XXem' and an 'width: expression(XXem)' to the same element?
But if margins and absolutely positioning are used to postion divs won't setting a min-width/height on areas with text affect how the divs around it are positioned? Is it possible to set a min-width/height to the entire page so that all the elements with relative font sizes are not resized below 9px? With the exception of the font-size key words?
For example, I only state the font-size on the body element. Is it possible to have a min-height set on the font-size within the body tag? With/out using JS?
Edit: since I only need to have this ALA fix applied to divs with 'xx-small' keywords I've attempted to turn this into a class. As follows:
.smallText {
/* more specific to override imported rule */
font-size: x-small;
/* false value for WinIE4/5 */
voice-family: "\"}\"";
/* trick WinIE4/5 into thinking rule is over */
voice-family: inherit;
/* recover from trick */
font-size: small;
/* intended value for better browsers */
}
html>.smallText {
font-size: small;
/* be nice to Opera */
}
But I need to know if I did "be nice to opera" right? I don't have any experience with selectors, other than they'll be ignored by IE.
Replacing the previous code in the body element with 'font-size: 100%' (again taken from an ALA article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/elastic/">http://www.alistapart.com/articles/elastic/</a><!-- m -->)) *seems* to work. I still have to test this with examples other than my inline, as the original ALA fix is only being applied to this class rather than the entire document. I'll reply with my findings later.
I'm using relative font-sizes to control the layout in different resolutions. And I've notices one very big issue in IE. The following code works as I believed it should in NS:
<div style="position: absolute; display: inline; width: 36em; height: 2em; text-align: center; border: 1px solid blue;">
<img style="width: 5em; height: 1.5em; float: left; margin-top: 0.2em;" src=http://www.webdeveloper.com/forum/archive/index.php/"#" />
<img style="width: 4em; height: 1.5em; float: right; margin-top: 0.2em;" src=http://www.webdeveloper.com/forum/archive/index.php/"#" />
<span style="font-size: xx-small;">
I am trying to center text in between two images.<br />
There are two lines, thus 'xx-small' is needed.
</span>
</div>
However, IE doesn't scale the text the same as NS. It's like IE skips the 'smaller' or 'smallest' text-size depending on what the CSS value is. I had to extend the div container's width by 10em just so that the text wouldn't wrap in the 'smallest' size, thus breaking the div's height.
So I decided to make it 0.6em rather than 'xx-small' and it worked fine, that is until I discovered it becomes the opposite. So know the div would break on 'large' and largest.' It's one or the other, either way it's messed up. The only fix I found was to make the div large enough that the text wouldn't wrap. But then there's a lot of extraspace in NS, even though the text-size is illegible. But I'm thinking someone using 640x480 or 800x600 *might* use the smallest text-sizes available. I thought of setting the div to overflow: hidden, and scaling down the div width, as the site is being optimized for 800x600/1024x768. But, I had to keep that minority in mind and didn't want to lose the bottom line, which contains a link.
Is their a solution? Or is it another IE box model/bug/quirk? I could really use that extra 10em (a sixth of my width) elsewhere....The problem with relative text sizing is that browsers are inconsistent with the base size from which you are scaling. Check out A List Apart for articles related to this issue.Thanx ray326,
Here is one possible article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/sizematters/">http://www.alistapart.com/articles/sizematters/</a><!-- m -->) at ALA. I'm sure there's more.
This is the relevant CSS:
NS4.x :
body, div, p, th, td, li, dd {
/* redundant selectors to help NS4 remember */
font-family: Verdana, Lucida, Arial, Helvetica, sans-serif;
font-size: 11px;
}
Second imported sheet for IE4/5 & Opera :
body, body div, body p, body th,
body td, body li, body dd {
/* more specific to override imported rule */
font-size: x-small;
/* false value for WinIE4/5 */
voice-family: "\"}\"";
/* trick WinIE4/5 into thinking rule is over */
voice-family: inherit;
/* recover from trick */
font-size: small
/* intended value for better browsers */
}
html>body, html>body div, html>body p,
html>body th, html>body td,
html>body li, html>body dd {
font-size: small
/* be nice to Opera */
}
I have yet to test this. And I'm not sure it's worth supporting NN4.x these days anyways.Well, I tested it and it fixed the problem in IE, sort of. When I applied the solution I was able to reduce the width from 36em to 28em. Then I decided to apply ariel, sans-serif and had to reincrease the width to 31em because it was breaking the div with 'largest' text size. So I save 5em, which is better than nothing I guess.
Now the problem is with NS7.1. The text isn't breaking the div height, but it is overflowing. IE places the first line at the top of the div and it looks fine. NS is placing the first line in the middle of the div forcing the second line to be centered on the bottom border of the div. All I need to do is get NS to shift the first line up and it'll be fine.
I've tried zero padding and margin, negative top margin, line height, display block on the span, a top value, and nothing seems to affect the texts position. But it does do all kinds of screwy things to IE. Is it because the div is displayed as inline?
Why does all this crap have to happen to me? Again if anyone knows how to adjust the top positioning of text in a span in Gecko, please let me know. Thanx.
I just realized I should try replacing the span with a block level div and see if I can apply negative margins to that. I just hope it doesn't mangle the inline elements or IE. I'll post the results soon. In the mean time, I'd appreciate any help.
Edit: By replacing all the spans with divs everything was corrected. I didn't even need to reset the display back to block (I assumed that they'd inherit the display inline from the parent div.) Anyone know why NS has such as different application of span from div?Anyone know why NS has such as different application of span from div?
Usually it's because it follows the spec, which I think is the case here, but sometimes it's a different interpretation of an ambiguity and sometimes it's (heavens!) an error in the code. 8)Originally posted by ray326
Usually it's because it follows the spec, which I think is the case here, but sometimes it's a different interpretation of an ambiguity and sometimes it's (heavens!) an error in the code. 8)
Tell me if replacing the span above with a div is an error in coding
.I think I finally uderstand why I need the extra space on 'smallest.' It's because it isn't scaled, IE won't allow the font size to decrease below 9px, as stated earlier, unless other keywords such as 'smaller, x-small or xx-smaller' are applied. If the font size was truly scaled by percentage, as Gecko does, then the font size would be 8px, and since there is a 1px difference on each character it needs extra space. So if I set the font size to 9px to test how much space is needed in px I should be able to apply a min-width/height. Can you apply a 'width: XXem' and an 'width: expression(XXem)' to the same element?
But if margins and absolutely positioning are used to postion divs won't setting a min-width/height on areas with text affect how the divs around it are positioned? Is it possible to set a min-width/height to the entire page so that all the elements with relative font sizes are not resized below 9px? With the exception of the font-size key words?
For example, I only state the font-size on the body element. Is it possible to have a min-height set on the font-size within the body tag? With/out using JS?
Edit: since I only need to have this ALA fix applied to divs with 'xx-small' keywords I've attempted to turn this into a class. As follows:
.smallText {
/* more specific to override imported rule */
font-size: x-small;
/* false value for WinIE4/5 */
voice-family: "\"}\"";
/* trick WinIE4/5 into thinking rule is over */
voice-family: inherit;
/* recover from trick */
font-size: small;
/* intended value for better browsers */
}
html>.smallText {
font-size: small;
/* be nice to Opera */
}
But I need to know if I did "be nice to opera" right? I don't have any experience with selectors, other than they'll be ignored by IE.
Replacing the previous code in the body element with 'font-size: 100%' (again taken from an ALA article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/elastic/">http://www.alistapart.com/articles/elastic/</a><!-- m -->)) *seems* to work. I still have to test this with examples other than my inline, as the original ALA fix is only being applied to this class rather than the entire document. I'll reply with my findings later.