Re: [css-d] Font stack article
On Sat, Jan 10, 2009 at 3:48 AM, Richard Mason wrote: Reference [1] says The example given clearly shows that the browser knows the x-height of Times New Roman to do the calculation.. That's wrong. Browsers do not know the x-height of a font because the Operating System doesn't know. http://www.emdpi.com/css3font.html Hello Richard, Your article is interesting, but I do not fully agree on your conclusion that browsers do not know the x-height. The x-height is used as 'ex' measurement unit and at least in Gecko this is pretty accurate. I don't know exactly how Gecko determines it (reading metrics info from the font file, rendering glyphs, ...) but it knows it. If you ask Gecko a box with width 1ex, it gets it correctly, and of course the result depends on the font and the size. Indeed I've a page that can exactly reproduce the tables in your article [1], when seen with Gecko: the page shows (using javascript) the width in px of a box having width:1ex (at various font sizes). About the 'aspect ratio' oscillations depending on font size, this is in part unavoidable due to the necessity to round to an integer number of pixels. I've sometimes seen more oscillations than expected at small font sizes, but of course they damp down at increasing sizes. Bruno [1] http://brunildo.org/test/normal-lh-plot.html -- Bruno Fassino http://www.brunildo.org/test __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Strangely positioned table
Can someone have a look at this page for me and let me know what I've done wrong? The table seems to be going to the right of its container when viewed in Firefox, Safari or Chrome, but it's fine in Opera and IE. It was fine before when there was another div above the one which contains the table. That just displayed a simple image. When removing it, this problem happens. http://killingcupid.avengedsevenfold.co.uk/shows/ Thanks Thom __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strangely positioned table
Thom Brown wrote:
Can someone have a look at this page for me and let me know what I've done
wrong? The table seems to be going to the right of its container when
viewed in Firefox, Safari or Chrome, but it's fine in Opera and IE. It was
fine before when there was another div above the one which contains the
table. That just displayed a simple image. When removing it, this problem
happens.
http://killingcupid.avengedsevenfold.co.uk/shows/
Hi Thom:
#menu{overflow:hidden}
...should do the trick.
Hope it helps.
--Bill
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strangely positioned table
Thanks, that works. Could you explain exactly what the problem was?
2009/1/11 Bill Brown macnim...@gmail.com
Thom Brown wrote:
Can someone have a look at this page for me and let me know what I've done
wrong? The table seems to be going to the right of its container when
viewed in Firefox, Safari or Chrome, but it's fine in Opera and IE. It
was
fine before when there was another div above the one which contains the
table. That just displayed a simple image. When removing it, this
problem
happens.
http://killingcupid.avengedsevenfold.co.uk/shows/
Hi Thom:
#menu{overflow:hidden}
...should do the trick.
Hope it helps.
--Bill
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strangely positioned table
Hmm, well I've seen that I've put a line-height in for the list item
elements, and I'm not sure why. I removed that, and the overflow: hidden
and it appears to be okay again. I take it that was causing them to push
outside their ul container?
2009/1/11 Bill Brown macnim...@gmail.com
Thom Brown wrote:
Can someone have a look at this page for me and let me know what I've done
wrong? The table seems to be going to the right of its container when
viewed in Firefox, Safari or Chrome, but it's fine in Opera and IE. It
was
fine before when there was another div above the one which contains the
table. That just displayed a simple image. When removing it, this
problem
happens.
http://killingcupid.avengedsevenfold.co.uk/shows/
Hi Thom:
#menu{overflow:hidden}
...should do the trick.
Hope it helps.
--Bill
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] the correct way to declare textarea width
A nice way to get a textarea to be the exact size that you want it to be is to forget about setting its width and instead use a container div with the same background color. Use the cols attribute of the textarea to set it to some value that will put it just inside the container div's boundary, and that will make it appear to be the exact width that you need it to be. This technique is useful for making a textarea appear to be the exact same width as other text inputs that may be on the same form for a more uniform appearance. Michael On Fri, Jan 9, 2009 at 2:28 PM, Eric Cash etc...@gmail.com wrote: I hate form elements... I've run into this problem before, I don't think I've ever actually understood it. On this page http://scotaganda.com/work/MineKey/opinionsBoard.html the Express your opinion textarea is fine in firefox, but both safari and ie place control on the right hand side of the textarea, which makes it grow about 8px, and break the layout. I'm not sure of the correct way to get this thing to behave, and I'd rather not keep poking around in the dark here I have a div wrapped around it, with the correct width, and I'm not sure why just setting the textarea's width to 100% won't correctly display, any help here? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Issues with a:hover
Hello everyone,
I come to you with a very peculiar problem that I can't seem to find the
solution to. I know that the order of appearance of pseudo-classes for doing
hover effects must be :link, :visited, :hover, :active. That is the order I
have them appearing, as you see in the code below:
.content a, a:link, a:visited {
text-decoration: none;
color: #D1E000;
}
.content a:hover {
color: #EODCDC;
}
.content a:active {
color: #3B0B0B;
}
However, even with this code I am having an issue where the text is not
changing when the mouse hovers over the text. The active effect is working
perfectly fine, as is the normal a,a:link,a:visited effect. The HTML I have
for this section is as follows:
div class=content
pHere is some sample text. *a href=#This is a sample link./a* And
yet again more example text. And yet again more example text. And yet again
more example text. And yet again more example text. And yet again more
example text. And yet again more example text. And yet again more example
text. And yet again more example text. And yet again more example text./p
/div
The test page can be found at http://itzmattu.ath.cx/Paradigm and the CSS
file controlling it is http://itzmattu.ath.cx/Paradigm/css/style.css
Any help to finding why this is occurring would be greatly appreciated.
Thank you,
Matt Fielding
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Issues with a:hover
Hi Matt,
On Sun, Jan 11, 2009 at 1:14 PM, Matt Fielding itzma...@gmail.com wrote:
.content a:hover {
color: #EODCDC;
}
Validating your markup via http://jigsaw.w3.org/css-validator/ shows
that the color you've used for your a:hover is invalid - looks like
you're using an O instead of a 0, and there aren't any Os in hex. I
think that's probably the root of your problem.
Best,
-JR
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Issues with a:hover
Matt Fielding wrote:
However, even with this code I am having an issue where the text is not
changing when the mouse hovers over the text. The active effect is working
perfectly fine, as is the normal a,a:link,a:visited effect. The HTML I have
for this section is as follows:
Try:
.content a:hover {
color: /*#EODCDC*/fuchsia;
}
(validate the CSS)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Issues with a:hover
On Sunday 2009-01-11 16:14 -0500, Matt Fielding wrote:
.content a:hover {
color: #EODCDC;
}
The character after the capital E is an uppercase letter O
rather than a number 0. That's causing the declaration to be
discarded, since it is syntactically incorrect.
See
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fitzmattu.ath.cx%2FParadigm%2Fcss%2Fstyle.cssprofile=css21usermedium=allwarning=1lang=en
-David
--
L. David Baron http://dbaron.org/
Mozilla Corporation http://www.mozilla.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Issues with a:hover
Oh goodness, I've certainly been at this for too long...
Thank you very much!
On Sun, Jan 11, 2009 at 4:20 PM, JR Heard ewingpatria...@gmail.com wrote:
Hi Matt,
On Sun, Jan 11, 2009 at 1:14 PM, Matt Fielding itzma...@gmail.com wrote:
.content a:hover {
color: #EODCDC;
}
Validating your markup via http://jigsaw.w3.org/css-validator/ shows
that the color you've used for your a:hover is invalid - looks like
you're using an O instead of a 0, and there aren't any Os in hex. I
think that's probably the root of your problem.
Best,
-JR
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE and background colour
2009/1/11 Elle Meredith li...@designbyelle.com.au Hello again, I've got quick 2 more questions -- and again problems with IE. 1. Background colour is not appearing on #quote and #bookings it does what ie.css says: #f2f3e6 2. .mini-gallery last floated li falls below. I tried to specify a smaller margin for IE but it still does not help. probably display: inline-block for li helps. The site is at: http://farmpeacelove.com/italiano/alloggio Ingo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE and background colour
1. Background colour is not appearing on #quote and #bookings it does what ie.css says: #f2f3e6 Silly me. True and fixed. 2. .mini-gallery last floated li falls below. I tried to specify a smaller margin for IE but it still does not help. probably display: inline-block for li helps. This did not work. The thumbnails do not float anymore. Any suggestion? The site is at: http://farmpeacelove.com/italiano/alloggio Thanks Ingo. Elle __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE and background colour
On 12/01/2009, at 12:17 PM, Elle Meredith wrote: 2. .mini-gallery last floated li falls below. I tried to specify a smaller margin for IE but it still does not help. probably display: inline-block for li helps. This did not work. The thumbnails do not float anymore. Any suggestion? The site is at: http://farmpeacelove.com/italiano/alloggio Actually decreasing margin-right fixed the problem in IE6 but not IE7. Do you think it has anything to do with using outline? Elle __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image in center of text wrap question.
CSS Gurus, Like many I'm trying to learn CSS so I can replace all use of tables with it. The following is what I want the final product to look like but instead of using tables I want to use CSS. http://bsaroundtable.org/wrapxample.html I would like to put text at places other than 0,90,180 and 270 degrees around an object too, say at 45 degrees etc. Maybe this is one of those layouts that CSS just can't do very well, but if that is so please tell me that too. I've scoured the Internet for a solution but all the example put the image on the right border or the left border or the top... you get the idea. I want the image to be in the center and all the text (links) to be like you see. Thanks in advance for putting up with some of us less talented coders. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font stack article
On Sun, 11 Jan 2009, Bruno Fassino wrote Hello Bruno, Your article is interesting, but I do not fully agree on your conclusion that browsers do not know the x-height. Badly phrased perhaps. I meant that it is not possible programmatically to directly read the x-height font metric. This page http://msdn.microsoft.com/en-us/library/ms534014(VS.85).aspx shows the parameters that can be read, by a call to the appropriate Operating System function, for an installed font. Note otmsXHeight which is the x-height and the comment further down Not supported. It's immaterial whether the OS is just being awkward, or the x-height is not stored in the font file - if the OS can't _directly_ retrieve a value then neither can a browser. For a browser to get a value for x-height the only logical choices would be seem to be some sort of Look-Up-Table or rendering and measuring the character. If you ask Gecko a box with width 1ex, it gets it correctly, I'll have a closer look at the correspondence between ex box dimensions and results from my pixel counting program :-) I'll never quite understand why CSS spec writers put in a requirement that browser authors determine x-height and then, instead of leaving the programmers to implement the requirement, they tell them what the answers going to be - and get it wrong. -- Richard Mason http://www.emdpi.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image in center of text wrap question.
Keith Kaiser wrote:
The following is what I want the final product to look like
but instead of using tables I want to use CSS.
http://bsaroundtable.org/wrapxample.html
I would like to put text at places other than 0,90,180 and 270 degrees
around an object too, say at 45 degrees etc.
This one intrigued me so I played with it. I thought it could be done
with position relative and indeed got it working somewhat in FF 3.0.5
for WindowsXP.
http://www.stoneladder.ca/sandbox/css/positionrelative-001.html
Screenshot for those who don't have Firefox is at:
http://www.stoneladder.ca/sandbox/css/image/positionrelative-001.jpg
Which shows that it /can/ be done with css. However, it only works for
me when I set the links to {white-space: nowrap}.
Opera and IE7 show a mess and it seems as though its because those
browsers don't honor the white-space.
Surely, this can be done a better way.
I watch with great interest. ;-)
Brian
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image in center of text wrap question.
Keith Kaiser wrote: Like many I'm trying to learn CSS so I can replace all use of tables with it. Don't take that too far, as the often misused and/or misunderstood HTML table is the only sensible option at times. The following is what I want the final product to look like but instead of using tables I want to use CSS. http://bsaroundtable.org/wrapxample.html I would like to put text at places other than 0,90,180 and 270 degrees around an object too, say at 45 degrees etc. Absolute positioning and float manipulation will come handy. Simple A:P example... http://www.gunlaug.no/contents/wd_chaos_25.html ...and basic float manipulation... http://www.gunlaug.no/contents/wd_demo_float_03.html You can basically position any element anywhere out of any container, and the only factor you have to take into account is the effect of font resizing in browsers and available size (width) in browser windows - none of which are known or controllable. Maybe this is one of those layouts that CSS just can't do very well, but if that is so please tell me that too. CSS can, but IE can't. We have CSS table... http://www.w3.org/TR/CSS21/tables.html ...which works just fine for layout in all browsers but IE7 and older. I've scoured the Internet for a solution but all the example put the image on the right border or the left border or the top... you get the idea. I want the image to be in the center and all the text (links) to be like you see. A perfect job for CSS table, but since IE blocks that option you're left with regular in-flow, A:P and floats. Think I'd use cross-over A:P positioning for something like that - positioning the left-side links from the right side of the image and the other way round for the right-side links. One container the size of the image, and links positioned out of it in all directions. That'll prevent links overlapping the image with font resizing. More important than the layout is your new window pop-ups, as they are easily caught by pop-up blockers and thrown out - they are at my end. However, blocked pop-ups is not a CSS problem. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
