Re: [css-d] Text positioning in FF and Chrome - They go opposite ways
On Tue, Feb 14, 2012 at 2:35 PM, Andrew C. Johnston attyjohns...@yahoo.com wrote: Hi All, wonder if I can tap into the wetware database with a question. I have a lot of teaser boxes that entice users to click on them, with text in the boxes. Nothing shaking or flashing or anything (yet). Due to my design's limitations (or my own) I need to keep this box fairly short, I guess not anything over 100 px. The problem is that FF and Chrome seem to handle the spacing I am doing in completely opposite ways, which makes the text in the box never quite centered. Check it out, newest Chrome and FF (Linux version): http://www.rayxi.com/lsat-exam-information-rayxi In FF the text is a little too low, almost to the bottom border. In Chrome, a little too high. Any workaround for this? Smaller box or bigger? Bigger box and smaller text? Maybe my margins and spacing are working at odds? Set the height, font-size, and line-height to the same value. In an inline element, text is vertically centered on its line-height. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Any help would be appreciated. Thanks in advance, Andrew __ css-discuss [css-d@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] Text positioning in FF and Chrome - They go opposite ways
Hi All, wonder if I can tap into the wetware database with a question. I have a lot of teaser boxes that entice users to click on them, with text in the boxes. Nothing shaking or flashing or anything (yet). Due to my design's limitations (or my own) I need to keep this box fairly short, I guess not anything over 100 px. The problem is that FF and Chrome seem to handle the spacing I am doing in completely opposite ways, which makes the text in the box never quite centered. Check it out, newest Chrome and FF (Linux version): http://www.rayxi.com/lsat-exam-information-rayxi In FF the text is a little too low, almost to the bottom border. In Chrome, a little too high. Any workaround for this? Smaller box or bigger? Bigger box and smaller text? Maybe my margins and spacing are working at odds? Any help would be appreciated. Thanks in advance, Andrew __ css-discuss [css-d@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] text positioning
Philippe Wittenbergh wrote: On Mar 7, 2009, at 2:17 PM, Jim Albert wrote: I have an example of a table defined with a height to one of the cells and I would like some text to be aligned to the right and bottom of that cell. Here is the example: http://www6.netrition.com/anchor_bottom.html I would like the blue text lower right to be anchored to the bottom and right of its surrounding table cell. Obviously, there is no additional information in the above html that would produce what I want, but that's the base of the simple example I am using. I tried applying a style of position:absolute;bottom:2px;right:2px in this example: http://www6.netrition.com/anchor_bottom_position_absolute.html but you can see the blue text gets anchored to the lower bottom corner of the browser not the table cell. That is to be expected. The containing block for that absolute positioned element is the root element. To achieve what you want, in your simple example above, you'd need to make the parent div the containing block (relative positioning it): DIV style=overflow:hidden;height:300px; position: relative Thank you. The position:relative on the parent div solved it. How can I anchor that text to the lower right corner of its cell? If the cell has a declared height (e.g. td {height:300px;}), you can then wrap the contents of the cell in a div, set the height to 100%, and then just as in the above example. PS - try to present test cases with valid html please. Was there something other than the lack of a DOCTYPE tag that you noticed? That was the only thing the w3 validator showed. -- Jim Albert __ 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] text positioning
I have an example of a table defined with a height to one of the cells and I would like some text to be aligned to the right and bottom of that cell. Here is the example: http://www6.netrition.com/anchor_bottom.html I would like the blue text lower right to be anchored to the bottom and right of its surrounding table cell. Obviously, there is no additional information in the above html that would produce what I want, but that's the base of the simple example I am using. I tried applying a style of position:absolute;bottom:2px;right:2px in this example: http://www6.netrition.com/anchor_bottom_position_absolute.html but you can see the blue text gets anchored to the lower bottom corner of the browser not the table cell. How can I anchor that text to the lower right corner of its cell? Thank you. -- Jim Albert __ 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] text positioning
On Mar 7, 2009, at 2:17 PM, Jim Albert wrote: I have an example of a table defined with a height to one of the cells and I would like some text to be aligned to the right and bottom of that cell. Here is the example: http://www6.netrition.com/anchor_bottom.html I would like the blue text lower right to be anchored to the bottom and right of its surrounding table cell. Obviously, there is no additional information in the above html that would produce what I want, but that's the base of the simple example I am using. I tried applying a style of position:absolute;bottom:2px;right:2px in this example: http://www6.netrition.com/anchor_bottom_position_absolute.html but you can see the blue text gets anchored to the lower bottom corner of the browser not the table cell. That is to be expected. The containing block for that absolute positioned element is the root element. To achieve what you want, in your simple example above, you'd need to make the parent div the containing block (relative positioning it): DIV style=overflow:hidden;height:300px; position: relative How can I anchor that text to the lower right corner of its cell? If the cell has a declared height (e.g. td {height:300px;}), you can then wrap the contents of the cell in a div, set the height to 100%, and then just as in the above example. PS - try to present test cases with valid html please. Philippe --- Philippe Wittenbergh http://l-c-n.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] text positioning
On Thursday 29 January 2009 9:31:54 pm you wrote: David McGlone wrote: I'm thinking that even though there are more than 1 words, closing the tag after each word does not make it a whole new box that can be moved individually. Am I thinking correctly? No, I'm afraid your thinking is flawed for positioning bits of text on top of a fixed background (image). For the left column only: if you want to use a fixed background for your text - links or whatever, this is the most steady method... http://www.gunlaug.no/tos/alien/dmg/test_09_0130.html http://www.gunlaug.no/tos/alien/dmg/test_09_0130_files/styles00.css ...where individual paragraphs are absolute positioned. Those paragraphs will adjust vertically for font resizing, but long lines will overflow horizontally pretty quickly. If you want links instead, just replace the ps with as. Sidenote: The entire http://www.dmcentral.net/eweb/ shows that you're relying on what you see for browser-defaults at your end - your layout has no flexibility. Not a good idea since that means your layout is doomed to fail... http://www.gunlaug.no/contents/wd_additions_37.html ...and I do not think you want that :-) You're correct. I make changes and look at it with firefox. I'm aware it probably will not look the same in different versions of IE, Opera, etc, but I haven't figured out what to do to fix this. What would you recommend? You're also declaring a number of properties/values back to their default-values. Although there's no harm in doing so, you get a lot of unnecessary declarations in there. All those other declarations on the page are just junk. I started experimenting with an old CSS file from 2003. It's been years, but that is what happens when one has kids. LOL -- David M. __ 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] text positioning
David McGlone wrote: You're correct. I make changes and look at it with firefox. I'm aware it probably will not look the same in different versions of IE, Opera, etc, but I haven't figured out what to do to fix this. What would you recommend? Apart from with IE6-7-8, don't mind browser _versions_ too much. There are too many... Unless you experiment heavily with CSS3 and/or proprietary CSS, the latest versions of Firefox, Opera, Safari etc. will pretty much handle all reasonably well thought-out and standards compliant layouts/designs the same. The major browsers are available on win-XP and up for testing, and if you run on another OS you still can get hold of most. Always good to see for yourself what's going on. What you _should_ do is to stress-test your layouts and final designs/pages a bit in Firefox - since that's your preference. At least 200% font resizing (not page zooming) usually reveals most weaknesses in a layout/design/finished page, and is a good starting-point for checking design quality and basic accessibility - see: WCAG2 standard. All those other declarations on the page are just junk. I started experimenting with an old CSS file from 2003. It's been years, but that is what happens when one has kids. LOL Maybe better to start with a clean sheet then, and catch up on CSS 2.1 now that you have a chance :-) Tip: avoid absolute positioning for major elements (containers) in a page, and don't fix vertical dimensions on them. 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/
Re: [css-d] text positioning
On Friday 30 January 2009 9:01:39 am Gunlaug Sørtun wrote: David McGlone wrote: You're correct. I make changes and look at it with firefox. I'm aware it probably will not look the same in different versions of IE, Opera, etc, but I haven't figured out what to do to fix this. What would you recommend? Apart from with IE6-7-8, don't mind browser _versions_ too much. There are too many... Unless you experiment heavily with CSS3 and/or proprietary CSS, the latest versions of Firefox, Opera, Safari etc. will pretty much handle all reasonably well thought-out and standards compliant layouts/designs the same. The major browsers are available on win-XP and up for testing, and if you run on another OS you still can get hold of most. Always good to see for yourself what's going on. What you _should_ do is to stress-test your layouts and final designs/pages a bit in Firefox - since that's your preference. At least 200% font resizing (not page zooming) usually reveals most weaknesses in a layout/design/finished page, and is a good starting-point for checking design quality and basic accessibility - see: WCAG2 standard. All those other declarations on the page are just junk. I started experimenting with an old CSS file from 2003. It's been years, but that is what happens when one has kids. LOL Maybe better to start with a clean sheet then, and catch up on CSS 2.1 now that you have a chance :-) Tip: avoid absolute positioning for major elements (containers) in a page, and don't fix vertical dimensions on them. Thanks Georg, You've been a great help! Your responses have also helped me keep my confidence. -- David M. __ 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] text positioning
David McGlone wrote: I've been doing a lot of CSS coding lately and I'm having a slight problem with text positioning. I cannot seem to position any of the words after the first word. RE: http://www.dmcentral.net/eweb/ Georg Sortun has answered your question. Taking it a step further, making it happen, takes grace, dignity, and above all else, a fast car.[1] http://www.chelseacreekstudio.com/ca/cssd/test-107.html Notes on file. Strict doctype. Primary content precedes navigation. May holds at twice user default. Ouick checked IE 6/7, Opera, Safari, Camino, Firefox. http://www.chelseacreekstudio.com/ca/cssd/test-107.html [1] http://www.youtube.com/watch?v=dl6yilkU1LI Tracy -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.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] text positioning
On Friday 30 January 2009 9:26:46 pm David Laakso wrote: David McGlone wrote: I've been doing a lot of CSS coding lately and I'm having a slight problem with text positioning. I cannot seem to position any of the words after the first word. RE: http://www.dmcentral.net/eweb/ Georg Sortun has answered your question. Taking it a step further, making it happen, takes grace, dignity, and above all else, a fast car.[1] http://www.chelseacreekstudio.com/ca/cssd/test-107.html Notes on file. Strict doctype. Primary content precedes navigation. May holds at twice user default. Ouick checked IE 6/7, Opera, Safari, Camino, Firefox. http://www.chelseacreekstudio.com/ca/cssd/test-107.html [1] http://www.youtube.com/watch?v=dl6yilkU1LI Tracy Wow David, it looks great! can the source be downloaded? I'm actually excited to see how you did this. -- David M. __ 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] text positioning
On Friday 30 January 2009 9:26:46 pm David Laakso wrote: David McGlone wrote: I've been doing a lot of CSS coding lately and I'm having a slight problem with text positioning. I cannot seem to position any of the words after the first word. RE: http://www.dmcentral.net/eweb/ Georg Sortun has answered your question. Taking it a step further, making it happen, takes grace, dignity, and above all else, a fast car.[1] http://www.chelseacreekstudio.com/ca/cssd/test-107.html Notes on file. Strict doctype. Primary content precedes navigation. May holds at twice user default. Ouick checked IE 6/7, Opera, Safari, Camino, Firefox. http://www.chelseacreekstudio.com/ca/cssd/test-107.html [1] http://www.youtube.com/watch?v=dl6yilkU1LI Tracy never mind my last e-mail, I was so flabbergasted I forgot that I can look at the page source. -- David M. __ 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] text positioning
David McGlone wrote: http://www.chelseacreekstudio.com/ca/cssd/test-107.html Tracy Wow David, it looks great! can the source be downloaded? I'm actually excited to see how you did this. David is out to lunch (most of the time). Do whatever you want with it or to it. But me myself I got nothing to prove -- Tracy Chapman -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.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] text positioning
Check out http://css.maxdesign.com.au/listamatic/index.htm for useful list/nav tips :) ~Mx http://www.mxdx.co.uk 2009/1/30 Martyn Merrett mx.css...@googlemail.com: Would it not be much easier to have a single button as each links background? i.e. ul li class=btna href=foo.phpFoo link/a/li li class=btna href=bar.phpBar link/a/li /ul CSS: .btn { display: block; width : 200px; height : 30px; margin: 5px 0px 0px 0px; background: url('button.png'); } This way you can play around with the margins to get them spaced perfectly. ~Mx http://www.mxdx.co.uk 2009/1/30 David McGlone da...@dmcentral.net: On Thursday 29 January 2009 7:22:31 pm you wrote: From what I guess you are trying to do is have multiple words in a specific layout. You'd need to provide individual styles for each one. Something like: div id=text p class=pos1Hello/pp class=pos2World!/p /div CSS: #text { font-weight: bold; font-family: helvetica, impact, san-serif; font-size: 14pt; } .pos1 { padding: 0px 0px 10px 5px; position: relative; left: 10px; bottom: 2px; top: 2px; } .pos2 { padding: 0px 0px 10px 5px; position: relative; left: 20px; bottom: 5px; top: 5px; } Maybe? You got the idea right. What I did was made some images of buttons and positioning the text on them. look here. http://www.dmcentral.net/eweb If I have to make a bunch of CSS tags, I'll just move the buttons to fit the default, but that isn't something I want to do because I can't get the buttons to look good if they are closer together. 2009/1/30 David McGlone da...@dmcentral.net: Hi everyone. I've been doing a lot of CSS coding lately and I'm having a slight problem with text positioning. I cannot seem to position any of the words after the first word. Here's the code I'm using: #text { padding: 0px 0px 10px 5px; position: relative; left: 10px; bottom: 2px; top: 2px; font-weight: bold; font-family: helvetica, impact, san-serif; font-size: 14pt; } I'm thinking that even though there are more than 1 words, closing the tag after each word does not make it a whole new box that can be moved individually. Am I thinking correctly? -- David M. __ 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] text positioning
David McGlone wrote: Hi everyone. I've been doing a lot of CSS coding lately and I'm having a slight problem with text positioning. I cannot seem to position any of the words after the first word. Here's the code I'm using: #text { padding: 0px 0px 10px 5px; position: relative; left: 10px; bottom: 2px; top: 2px; font-weight: bold; font-family: helvetica, impact, san-serif; font-size: 14pt; } I'm thinking that even though there are more than 1 words, closing the tag after each word does not make it a whole new box that can be moved individually. Am I thinking correctly? thanks, It would yield four blocks flush left stacked vertically (and would be invalid html unless you change the id to a class). You could use multiple classes to move the individual blocks. Something like this (off the top of my head and not tested) css p {margin: 0;} .text {border: 1px solid red;} .c1 {margin: 0 0 0 20px;} .c2 {margin: 20px 0 0 100px;} .c3 {margin: 100 px 0 0 50px;} .c4 {margin: 30px 0 0 75px;} html div class=text c1pone/p/div div class=text c2ptwo/p/div div class=text c3pthree/p/div div class=text c4pfour/p/div As always a clickable link to your attempt or and image that shows whatever it is you are trying to do will get you better answers... -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.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] text positioning
David McGlone wrote: I'm thinking that even though there are more than 1 words, closing the tag after each word does not make it a whole new box that can be moved individually. Am I thinking correctly? No, I'm afraid your thinking is flawed for positioning bits of text on top of a fixed background (image). For the left column only: if you want to use a fixed background for your text - links or whatever, this is the most steady method... http://www.gunlaug.no/tos/alien/dmg/test_09_0130.html http://www.gunlaug.no/tos/alien/dmg/test_09_0130_files/styles00.css ...where individual paragraphs are absolute positioned. Those paragraphs will adjust vertically for font resizing, but long lines will overflow horizontally pretty quickly. If you want links instead, just replace the ps with as. Sidenote: The entire http://www.dmcentral.net/eweb/ shows that you're relying on what you see for browser-defaults at your end - your layout has no flexibility. Not a good idea since that means your layout is doomed to fail... http://www.gunlaug.no/contents/wd_additions_37.html ...and I do not think you want that :-) You're also declaring a number of properties/values back to their default-values. Although there's no harm in doing so, you get a lot of unnecessary declarations in there. 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/
Re: [css-d] Text positioning
Kim Brooks Wei wrote: Hi people, I haven't been able to get a couple of my type elements to behave as they ought to. http://blackboxnyc.com/soulsearching/ The h1 in topper I couldn't get to vertically center to my logo on its left, and I can't get the list items in colrightthin in the first copy block to behave like block elements. I want each item on its own line. I tried getting this right for a couple of 3 hours but no joy. All help appreciated, as always. Have a great night . . . Kimi Half the battle (for me) is understanding the question(s). Regarding only the h1 problem, does this put it where you want it? #topper h1 { /*display: inline;*/ /*margin-left: .4em;padding-top: .3em;delete all*/ margin: 42px auto 30px auto/*add*/; display: table/*add*/; width: 140px/*add*/; border-top: 6px solid #000; /*font: 700 1.4em/120% tahoma, sans-serif;delete all*/ font: bold 180%/1.4 helvetica, arial, sans-serif;/*add*/ color: red; background: transparent; } #topper h2 { text-align: center; /*margin: 1.6em 0 0; delete*/ margin: 0; padding: 0; color: #000; background: transparent; font: 900 1.7em/135% tahoma, sans-serif; } If so, validate the markup. And bring it back. Someone will try to answer the other question you asked. And maybe some questions that you did not ask... -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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] Text positioning
Hi people, I haven't been able to get a couple of my type elements to behave as they ought to. http://blackboxnyc.com/soulsearching/ The h1 in topper I couldn't get to vertically center to my logo on its left, and I can't get the list items in colrightthin in the first copy block to behave like block elements. I want each item on its own line. I tried getting this right for a couple of 3 hours but no joy. All help appreciated, as always. Have a great night . . . Kimi -- This email sent by Kimi Wei http://thewei.com 201-475-1854 __ css-discuss [EMAIL PROTECTED] 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] text positioning - need help
Hello list! Another simple question... id like to align the text, in fact, the text ident some pixels to the right, to avoid it to be overlap by the other div. Here's the page: http://www.arcbr.org/testes/layout1-test.html thanks... btw, Me alinha, bastardo! means Align me, you bastard -- http://www.arcbr.org - blog sobre rpg, hq´s, ccg´s, livros, filmes... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text Positioning
Shaun Saxon wrote: How do I get a p or h1 element to display the same distance from the top of cells and/or divs in both IE and Firefox? On this page http://www.uflib.ufl.edu/docs/ in particular, I want each browser to begin the paragraph the same distance below the banner image. (text in a table cell) I'm also having the same problem on a page with no image at all. IE wants to display text much lower on the page--even with a padding attribute set. Every browser applies default margins to various elements. What you are probably seeing is slight variations with these defaults. The way to gain control is strip all the defaults and set your own. Like this: http://leftjustified.net/journal/2004/10/19/global-ws-reset/ -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/