Re: [css-d] help: three columns with the same height
Alyda Gilmore wrote: http://test.aroundtheblock.net/tutorials/columns/tall-left.php http://test.aroundtheblock.net/tutorials/columns/tall-center.php http://test.aroundtheblock.net/tutorials/columns/tall-right.php --- Alyda 404 0n all. -- 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] The 1 px terror - Help.
Ok. I've manage to make 3 columns layout with same height, using CSS only. THANKS. :) After some other reply's I was able to put my navigation over the right side. THANKS. :) Now I have a pixel problem!!! Or a math problem. I don't know yet. Please take a look at the NAVIGATION MENU (a UL list) here: http://www.cantinho.org/test3.html The corresponding CSS is here: http://www.cantinho.org/css/teste_V3.css You will notice that: In IE the bottom margin of the navigation buttons it's OK. In Firefox the bottom margin of the navigation buttons it's 1px to much larger! In Safari the bottom margin of the navigation buttons it's 1px less shorter! I want them to look similar in all Browsers. I've never use a conditional IF on CSS, is this the case ? Or it's is possible to correct this without a conditional if? I really don't want to use them. Till now, everything, but this div, works fine on all browsers. What I'm doing wrong. Kind regards to all, Márcio __ 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/
Re: [css-d] Conceptual Guidance - content outside viewport
WEZ! wrote: I haven't tried it with your code but the inner div you added to the left if applied to the right hand side will probably produce a scoll bar. No, it won't, because there isn't anything outside the content-div on narrow windows. I thought that was the whole idea, and you would have found that much out yourself if you had bothered to shrink the window on it... :-) Remember: backgrounds don't occupy space, they just disappear when there's no space left for them to occupy. So i'm not seeing any way to actually implement the concept I was after on a variable width content. Can you define what you mean by variable width content a little better? Either you introduce one or more variables, or the width depends more or less on the window-width itself. Which combination are you talking about? regards Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] Conceptual Guidance - content outside viewport
WEZ! wrote: What I'm coding is a flexible width content with fixed width left and right columns. The layout is limited in width through min/max- widths. I'm after something that fits next to that inner content block. If the backgrounds on both sides of the inner content block can disappear behind the fixed-width left and right columns, then it shouldn't really be much of a problem. A too wide container around the content block and negative backside margins on floated side columns, should work. My site has had such overlapping elements for 4 years now, but it doesn't show since I don't use the too wide containers for backgrounds - only alignment. However, since I don't want to create examples from scratch, or modify my own site, maybe you have something half-made we can all look at. Link? regards Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] Conceptual Guidance - content outside viewport
Thanks for your reply and assistance as per usual Georg. Much appreciated. I've been tinkered with the idea over the last couple days. Trying different ideas but still no luck. You have some interesting avenues of attack on your site but the issue with the right hand background not making scroll bars with a div still exists. I haven't tried it with your code but the inner div you added to the left if applied to the right hand side will probably produce a scoll bar. Your code is still based on a static scaled content based on the the em (good implementation btw) so I still can't master the scaleable content on the the window size. Some conclusions I have come up with. if anyone can confirm or deny: A div outside the right side of the viewport will always create a scroll bar. A div moved through any means (margins(+/-), left/right, content overflowing etc will always create a scroll bar. Content moved to the Left won't create scroll bars So i'm not seeing any way to actually implement the concept I was after on a variable width content. If anyone can suggest any other avenue I'm all ears (well eyes really) Wesley Lamont At the moment all I need is a direction of attack. I'm sure it is possible to produce the effect I'm after i just don't know the technique and can't find it so far. This method may be a place to start... http://www.gunlaug.no/tos/moa_40.html - Only content-container creates horizontal scroll-bars. - Content-container can scale - I've used em-width. - Visual background positions adjusts horizontally relative to content-container on both sides. - Can easily handle multiple backgrounds inside/outside viewport. regards Georg -- http://www.gunlaug.no __ 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-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/
Re: [css-d] The 1 px terror - Help.
Can you answer me some questions, if it's not too much work.
Why we have to change from pixel to em measure units? It's more browser
friendly or W3C friendly?
It's only for height values?
We should use line-height instead of what? Why do we have to use line-height
and height, all together?
If it's fast and easy for you, answer me back please, If not, I will dig in
a little on gooracle. :)
Regards,
Márcio
-Original Message-
From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED]
Sent: segunda-feira, 3 de Novembro de 2008 14:46
To: MEM
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] The 1 px terror - Help.
MEM wrote:
Now I have a pixel problem!!! Or a math problem. I don't know yet.
http://www.cantinho.org/test3.html
At the moment all browsers fall back on their defaults for line-height,
and they are different - even between versions of the same browser.
Tell all browsers exactly what you want, and they'll do it for you.
Not a single conditional or other browser-specific solutions needed.
Go through your styles and add/modify _only_ the following...
.linksprincipais#navigation {
height: 1.7em; -- change to this
}
.linksprincipais#navigation ul li a {
padding: 0 10px; -- change to this
height: 1.7em; -- add this
line-height: 1.7; -- add this
}
.linksprincipais#navigation ul li a:hover {
padding-bottom : 4px; --- delete this
}
...and the entire range of browsers you have, or don't have, problems
with will get the message, and line up your navigation in accordance
with your wishes.
You can modify the height/line-height on those elements if you wish, but
you have to make sure they all have the same value and that that value
is large enough.
Also: avoid values that you see introduce rounding-differences in your
range of browsers.
regards
Georg
--
http://www.gunlaug.no
__
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] CSS tables
What do members of this list think about CSS-table styles for page layout now that IE 8 finally supports them? I'm sure many of you are aware of the new Sitepoint book focusing on these styles and the future of CSS and suggesting that Microsoft's coming on board standards-wise with IE8 is ushering in a whole new era in web site design. --Kenoli __ 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] how to get rid of scroll bar?
Greetings! I can't figure out why I have a horizontal scroll bar at http://www.shopkeepers-r.us or how to get rid of it. The current plan is for the browser window to be maximized with the screen resolution set at 1024x768. I'd sure appreciate help. Resource pointers that would help me understand why this is happening would _really_ be appreciated. TIA, Bill __ 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/
Re: [css-d] The 1 px terror - Help.
MEM wrote:
Now I have a pixel problem!!! Or a math problem. I don't know yet.
http://www.cantinho.org/test3.html
At the moment all browsers fall back on their defaults for line-height,
and they are different - even between versions of the same browser.
Tell all browsers exactly what you want, and they'll do it for you.
Not a single conditional or other browser-specific solutions needed.
Go through your styles and add/modify _only_ the following...
.linksprincipais#navigation {
height: 1.7em; -- change to this
}
.linksprincipais#navigation ul li a {
padding: 0 10px; -- change to this
height: 1.7em; -- add this
line-height: 1.7; -- add this
}
.linksprincipais#navigation ul li a:hover {
padding-bottom : 4px; --- delete this
}
...and the entire range of browsers you have, or don't have, problems
with will get the message, and line up your navigation in accordance
with your wishes.
You can modify the height/line-height on those elements if you wish, but
you have to make sure they all have the same value and that that value
is large enough.
Also: avoid values that you see introduce rounding-differences in your
range of browsers.
regards
Georg
--
http://www.gunlaug.no
__
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/
Re: [css-d] CSS tables
On Tue, Nov 4, 2008 at 3:21 AM, Kenoli Oleari [EMAIL PROTECTED] wrote: What do members of this list think about CSS-table styles for page layout now that IE 8 finally supports them? I'm sure many of you are aware of the new Sitepoint book focusing on these styles and the future of CSS and suggesting that Microsoft's coming on board standards-wise with IE8 is ushering in a whole new era in web site design. We've been held back by IE6 and IE7 for a decade and I don't see them disappearing anytime soon. -- Blake Haswell http://www.blakehaswell.com/ | http://blakehaswell.wordpress.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/
Re: [css-d] how to get rid of scroll bar?
Bill Walton wrote: Greetings! I can't figure out why I have a horizontal scroll bar at http://www.shopkeepers-r.us or how to get rid of it. The current plan is for the browser window to be maximized with the screen resolution set at 1024x768. I'd sure appreciate help. Resource pointers that would help me understand why this is happening would _really_ be appreciated. TIA, Bill __ 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/ Hi Bill, It's because of these elements: #customer_search_form, #walkin_customer_button, #purchase_return_button ...and maybe others. The explanation is that you positioned them relatively with a large left offset but forgot to change them the width value which right now is 100% of the body width - 1264px in FF3. My advice is to float them left instead of positioning them relatively. If you float them left, don't forget to also add a display:inline; after the float: left; declaration. It's for Internet Explorer's double margin floating bug[1]. Cheers, Ionut [1] http://www.positioniseverything.net/explorer/doubled-margin.html __ 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/
Re: [css-d] The 1 px terror - Help.
MEM wrote: Can you answer me some questions, if it's not too much work. Not much work ... but I'm not in front of a computer-screen all day so can't always respond quickly :-) Why we have to change from pixel to em measure units? It's more browser friendly or W3C friendly? It's only for height values? Goes better with font-size/line-height. Font-size/line-height defaults differ across browser-land, which is basically what caused the 1px off problem in the first place. By letting all browsers know that they should calculate dimensions to font-size no matter what that font-size actually is, they'll cover up for their differences. We should use line-height instead of what? Why do we have to use line-height and height, all together? Not instead of anything, really, although it replaces vertical padding in your case. The right line-height automatically introduces vertical adjustment to text in those short lines, so adjusting the text with vertical paddings becomes unnecessary. Vertical padding would otherwise be added to height and throw off any alignment. regards Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] how to get rid of scroll bar?
- Original Message -
From: Ionut Gabriel Stan [EMAIL PROTECTED]
To: Bill Walton [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: Monday, November 03, 2008 6:18 PM
Subject: Re: [css-d] how to get rid of scroll bar?
Bill Walton wrote:
I can't figure out why I have a horizontal scroll bar at
http://www.shopkeepers-r.us or how to get rid of it. The current plan is
for the browser window to be maximized with the screen resolution set at
1024x768. I'd sure appreciate help. Resource pointers that would help
me understand why this is happening would _really_ be appreciated.
Ionut wrote
It's because of these elements:
#customer_search_form,
#walkin_customer_button,
#purchase_return_button
...and maybe others.
My advice is to float them left instead of positioning them relatively.
If you float them left, don't forget to
also add a display:inline; after the float: left; declaration. It's for
Internet Explorer's double margin floating bug[1].
Bill:
I would say definitely others, including the header, as outlining elements
in WebDeveloper show a number of elements wider than my screen width of
1280px. Are you trying for a max page width of 1024px (~78em)? You'd set
that through CSS, such as
#somewrapper{width: 98%; max-width: 78em;}, as well as using float
technique above.
IMO, you've got a ton of CSS; maybe want to more distinctly separate basic
layout CSS from fiddley-bits. Also, recommend setting font-size in % instead
of fixed pixels, for browser friendly resizing.
Best,
Peter
www.fatpawdesign.com
developing in: WinXP/SP2 + FF3.0.3 at 1024x768 and 1280x1024
checking in: IE8.0beta/O9.61/Av11.6/Cr0.2/Orca1.1
In God we trust, all else bring data...
__
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/
Re: [css-d] The 1 px terror - Help.
MEM wrote: Thanks. I will give a try on your solution. I will see what do I get after the changes. I know what you'll get if you do it right: the intended line-up. I test before responding :-) And... With all the margin and padding and height and pixel and em... maybe what you have said: Also: avoid values that you see introduce rounding-differences in your range of browsers, leads me to a math problem. :) The math is most often best left to the browser-engines. Most of them are better at it, and they are doing the rendering-jobs anyway. So you're right about you having a math problem. Pixel and restricted height rarely ever go well together with font-size and line-height. Pixel are fixed - font-size and line-height are not. Em are most often better suited when dealing with text in tight line-ups, since they reflect font-size. So, if you get your numbers right you can play with em and pixel mixes on various declarations on same or related elements, and all browsers will play nicely along. If you get numbers and/or units wrong, or simply don't include all variables that affect elements' line-up, you're likely to end up with a mess. regards Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] help: three columns with the same height
From: David Laakso [EMAIL PROTECTED] Date: Mon, 03 Nov 2008 02:51:40 -0500 To: Alyda Gilmore [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] help: three columns with the same height Alyda Gilmore wrote: http://test.aroundtheblock.net/tutorials/columns/tall-left.php http://test.aroundtheblock.net/tutorials/columns/tall-center.php http://test.aroundtheblock.net/tutorials/columns/tall-right.php --- Alyda 404 0n all. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ Oops... Please substitute www for test: http://www.aroundtheblock.net/tutorials/columns/tall-left.php http://www.aroundtheblock.net/tutorials/columns/tall-center.php http://www.aroundtheblock.net/tutorials/columns/tall-right.php --- Alyda __ 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/
Re: [css-d] The 1 px terror - Help.
Sorry, I'm really newbie on this. If you believe that, for answering this questions, you will need to explain what CSS actually IS or something like that, don't bother. :) You said that: Goes better with font-size/line-height. Font-size/line-height defaults differ across browser-land, which is basically what caused the 1px offproblem in the first place. But: I haven't use font-size/line-height (I believe)... So the 1px off problem should came from other things? Or not? By letting all browsers know that they should calculate dimensions to font-size no matter what that font-size actually is, they'll cover up for their differences. But I thought that let the browsers do the calculations was a BAD thing... The right line-height automatically introduces vertical adjustment to text in those short lines, so adjusting the text with vertical paddings becomes unnecessary. Ok. So why browsers do it right with line-height and they don't do it right with vertical-padding? It's because, for some reason, on vertical-padding they add that to the height value, and when they add that value to the height value they do some rounded calculations, while when then use the line-height they add nothing to the height? Pixel and restricted height rarely ever go well together with font-size and line-height. But in the code I gave you, I don't recall having mixed Pixel and restricted height with font-size and line-height... About the em and the pixel... Without changing the pixel to em, but doing the other changes that you have said, I get this page that doesn't look good, BUT, looks equal on all pages: http://www.cantinho.org/test4.html So, in principle, the fixed pixel should be accurate if we have the right math hm? I'm not yet getting why we should use em over pixel. You have state that: Em are most often better suited when dealing with text in tight line-ups, since they reflect font-size, what do you mean by reflect font-size? I'm really sorry about all this questions, the code will work as you said, I'm sure of it, but I'd like to know how this works so I can understand instead of just copying it. Thanks once again, Márcio -Original Message- From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] Sent: segunda-feira, 3 de Novembro de 2008 19:43 To: MEM Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] The 1 px terror - Help. MEM wrote: Thanks. I will give a try on your solution. I will see what do I get after the changes. I know what you'll get if you do it right: the intended line-up. I test before responding :-) And... With all the margin and padding and height and pixel and em... maybe what you have said: Also: avoid values that you see introduce rounding-differences in your range of browsers, leads me to a math problem. :) The math is most often best left to the browser-engines. Most of them are better at it, and they are doing the rendering-jobs anyway. So you're right about you having a math problem. Pixel and restricted height rarely ever go well together with font-size and line-height. Pixel are fixed - font-size and line-height are not. Em are most often better suited when dealing with text in tight line-ups, since they reflect font-size. So, if you get your numbers right you can play with em and pixel mixes on various declarations on same or related elements, and all browsers will play nicely along. If you get numbers and/or units wrong, or simply don't include all variables that affect elements' line-up, you're likely to end up with a mess. regards Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] CSS tables
Kenoli Oleari wrote: What do members of this list think about CSS-table styles for page layout now that IE 8 finally supports them? CSS table comes handy if one wants to replicate the old/new HTML table designs. Other than that table is a bit too inflexible design-wise, regardless of support, IMO. CSS table got its uses though... http://www.gunlaug.no/tos/moa_11f.html http://www.gunlaug.no/tos/moa_11g.html ...and it is much easier to turn a CSS table into something else when one wants/needs to, than to break up an HTML table. I'm sure many of you are aware of the new Sitepoint book focusing on these styles and the future of CSS and suggesting that Microsoft's coming on board standards-wise with IE8 is ushering in a whole new era in web site design. Well, web design trends tend to go in circles, so decade-old design methods may look all new again to some. Personally I'm hoping to see something better than table for layout before too long, so we can have some progress. regards Georg -- http://www.gunlaug.no __ 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] relationship between headings - can't seem to clear my head
Good afternoon list, Page: http://www.dzinelabs.com/sandbox/MP/Pages/Contactbad.php Problem: the 'fale conosco' heading is to close to the ones above. What i need is what you see here: http://www.dzinelabs.com/sandbox/MP/Pages/Contact.php Obviously something is wrong in my sheet: When i leave the 'Transporte com eficiência e segurança' heading in my html, i get the desired result. As soon as i remove that, i get the undesired result and i need to remove that heading on that page. I tried padding/margin on the 'fale conosco' heading to get it to lower but to no avail css: http://www.dzinelabs.com/sandbox/MP/Stylesheets/MP.css -- Best regards, Luc Using the best e-mail client: The Bat! version 4.0.18 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. The brain is a wonderful organ; it starts working the moment you get up in the morning and doesn't stop until you get into the office! - Dogbert (from Scott Adams' Dilbert) __ 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/
Re: [css-d] CSS tables
On Tue, Nov 4, 2008 at 12:41 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Personally I'm hoping to see something better than table for layout before too long, so we can have some progress. Honestly I don't feel that restricted by current specs. Could you explain where you believe progress is necessary as far as layout is concerned? -- Blake Haswell http://www.blakehaswell.com/ | http://blakehaswell.wordpress.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/
Re: [css-d] help for an IE bug
ray wrote:
Look at this page http://www.soundbowl.com/test.html in IE7. The
outer div has a padding of 6px, but the inner div seems not respect
to this padding, its background covers the left padding of its parent
div.
Add a 'hasLayout' trigger to #inner...
#inner {
height: 1%;
}
...so IE/win understands that it should relate to its own parent and
cover a defined area inside it.
Sounds like a great explanation, doesn't it? :-)
More important: it works.
regards
Georg
--
http://www.gunlaug.no
__
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] Suggestion
Suggestion: Can I suggest that I we move from a mailing list to a Newsgroup. :D I know is quite a request but... thinks may be more organized in a answer. question way. :) Just my 2 cents on this. Kind Regards, Márcio __ 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/
Re: [css-d] relationship between headings - can't seem to clear my head
Luc wrote:
http://www.dzinelabs.com/sandbox/MP/Pages/Contactbad.php
Problem: the 'fale conosco' heading is to close to the ones above.
Not sure-- looks as though you have an unnecessarily complicated
construct with headings nested within headings. Does this help?:
h3 {padding-bottom: 7em; }
--
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/
Re: [css-d] Suggestion
MEM wrote: Suggestion: Can I suggest that I we move from a mailing list to a Newsgroup. :D I know is quite a request but... thinks may be more organized in a answer. question way. :) Márcio Re-read the link I sent you (provided again below) on how to bottom post with gmail (and trimming) and you too can join us in enjoying and helping to keep this list well organized and just as it is. http://css-discuss.incutio.com/?page=GmailAndCssDiscuss http://css-discuss.incutio.com/?page=OffTopic -- 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/
Re: [css-d] The 1 px terror - Help.
MEM wrote: Sorry, I'm really newbie on this. If you believe that, for answering this questions, you will need to explain what CSS actually IS or something like that, don't bother. :) CSS is a command-language we use to override and add to browsers own defaults, and (hopefully) make them treat the source-code (HTML) elements a bit more like we want them to. All browsers have, or act as if they have, their own stylesheets with what we refer to as default styles. If we leave out something, they'll fall back to the relevant default, and no two browsers have the same defaults all through. You said that: Goes better with font-size/line-height. Font-size/line-height defaults differ across browser-land, which is basically what caused the 1px off problem in the first place. But: I haven't use font-size/line-height (I believe)... So the 1px off problem should came from other things? Or not? From the browsers' default styles (see above). When you don't declare font-size and/or line-height, all browsers will use their own default values. By letting all browsers know that they should calculate dimensions to font-size no matter what that font-size actually is, they'll cover up for their differences. But I thought that let the browsers do the calculations was a BAD thing... They'll calculate and recalculate everything we do anyway - they got rendering-engines, so we better give them something that adds up. The right line-height automatically introduces vertical adjustment to text in those short lines, so adjusting the text with vertical paddings becomes unnecessary. Ok. So why browsers do it right with line-height and they don't do it right with vertical-padding? It's because, for some reason, on vertical-padding they add that to the height value, and when they add that value to the height value they do some rounded calculations, while when then use the line-height they add nothing to the height? Browsers (at least try to) do what you tell them to, but, yes, there are differences in at which point various browsers round up or down to meet those screen-pixels or dpi. Add in a variable like font resizing at the user-end, and you'll see why pixel perfection is an unreachable goal in web design. Pixel and restricted height rarely ever go well together with font-size and line-height. But in the code I gave you, I don't recall having mixed Pixel and restricted height with font-size and line-height... You had a 'height:27px' on the container-div for that list, and that is a restriction - a fixed height. BTW: having a height there is necessary since the absolute positioned child - the ul - takes up no space in that div. It is just a question of having the right height, and pixel-values won't adjust to changed conditions. About the em and the pixel... Without changing the pixel to em, but doing the other changes that you have said, I get this page that doesn't look good, BUT, looks equal on all pages: http://www.cantinho.org/test4.html Yes. No point in changing one part of you don't change all parts involved. So, in principle, the fixed pixel should be accurate if we have the right math hm? I'm not yet getting why we should use em over pixel. You have state that: Em are most often better suited when dealing with text in tight line-ups, since they reflect font-size, what do you mean by reflect font-size? Actual font-size is always 1em of itself - and also 100% of itself if that makes it any clearer, and that reflection doesn't change no matter what the font-size actually is. A pixel on the other hand is a fixed-size design pixel no matter what, and has no relation whatsoever to font-size. I'm really sorry about all this questions, the code will work as you said, I'm sure of it, but I'd like to know how this works so I can understand instead of just copying it. That's the right attitude - I applaud that. The learning curve for CSS can be pretty steep, but those who don't want to climb it will always be limited to copy-cat type of designing. Once you're up at a more leveled ground of basic understanding, you can design almost whatever you want and get those browser to play along, and you'll only have a slowly diminishing range of browser-bugs to battle. This is probably the best place to start climbing the CSS ladder... http://www.w3.org/TR/2004/CR-CSS21-20040225/visuren.html ...and from there you're probably best off by crating a few hundred (or at least a few dozen) of your own minimal test-cases to test out and fine-tune your basic understanding on - before going on to more advanced levels. Don't forget to test with all available browser-options while you're at it, as they throw in loads of variables too. Too many designs break because web designers ignore those browser-options, and it is a fact that some end-users actually set their browser-options to something other than defaults. regards Georg --
Re: [css-d] CSS tables
Blake wrote: Honestly I don't feel that restricted by current specs. Could you explain where you believe progress is necessary as far as layout is concerned? We need ways to declare our own dimensional and positional relations between elements, and table is actually preventing rather than allowing us to establish such relations. A couple of points... 1: try to change visual order of columns relative to actual source-code order. Apart from reversing the entire table you'll have a problem. 2; the Gecko family, and maybe others, don't allow absolute positioning relative to actual (HTML) or declared (CSS) table elements. Pretty inconvenient, I'd say. regards Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] The 1 px terror - Help.
Thanks. I will give a try on your solution. I will see what do I get after
the changes.
And... With all the margin and padding and height and pixel and em... maybe
what you have said:
Also: avoid values that you see introduce rounding-differences in your
range of browsers, leads me to a math problem. :)
Thanks once again,
Márcio
-Original Message-
From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED]
Sent: segunda-feira, 3 de Novembro de 2008 14:46
To: MEM
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] The 1 px terror - Help.
MEM wrote:
Now I have a pixel problem!!! Or a math problem. I don't know yet.
http://www.cantinho.org/test3.html
At the moment all browsers fall back on their defaults for line-height,
and they are different - even between versions of the same browser.
Tell all browsers exactly what you want, and they'll do it for you.
Not a single conditional or other browser-specific solutions needed.
Go through your styles and add/modify _only_ the following...
.linksprincipais#navigation {
height: 1.7em; -- change to this
}
.linksprincipais#navigation ul li a {
padding: 0 10px; -- change to this
height: 1.7em; -- add this
line-height: 1.7; -- add this
}
.linksprincipais#navigation ul li a:hover {
padding-bottom : 4px; --- delete this
}
...and the entire range of browsers you have, or don't have, problems
with will get the message, and line up your navigation in accordance
with your wishes.
You can modify the height/line-height on those elements if you wish, but
you have to make sure they all have the same value and that that value
is large enough.
Also: avoid values that you see introduce rounding-differences in your
range of browsers.
regards
Georg
--
http://www.gunlaug.no
__
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/
Re: [css-d] CSS tables
Nearly every design I use that is anything other than pablum ends up needing some kind of trick and often a different treatment for IE. It is true that so many people have been working to get current CSS to work that there is a solution for nearly every problem. This doesn't mean there aren't problems, however, and finding the solution I need is often quite time consuming and frustrating, making projects take much longer than I would like. This situation seems to have driven a lot of people not willing to struggle with CSS and IE back to tables. What I really do hope is that CSS-3 does have some clever and flexible approaches, particularly to positioning, that are as predictable as tables and flexible enough to allow for elegant designs. The Sitepoint book proposes beginning to move away from IE 67, offering several strategies for doing this, all with the goal of pushing people to upgrade to IE8. It suggests that this is the beginning of a new cycle that will push CSS and site design to a new level eventually and sooner if there is a new press toward conforming to an improving CSS standards. --Kenoli On Nov 3, 2008, at 5:52 PM, Blake wrote: On Tue, Nov 4, 2008 at 12:41 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Personally I'm hoping to see something better than table for layout before too long, so we can have some progress. Honestly I don't feel that restricted by current specs. Could you explain where you believe progress is necessary as far as layout is concerned? -- Blake Haswell http://www.blakehaswell.com/ | http://blakehaswell.wordpress.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/
Re: [css-d] relationship between headings - can't seem to clear my head
Hello David,
It was foretold that on 04/11/2008 @ 21:10:42 GMT-0500 (which was
00:10:42 where I live) David Laakso would write:
Not sure-- looks as though you have an unnecessarily complicated
construct with headings nested within headings. Does this help?:
h3 {padding-bottom: 7em; }
Spot on about complicated construct ... at the moment i can't figure
out how to make something that should be simple into really something simple ...
the 7 em makes it much better but a quick test with 3 em gives me the
same result at a first glance ... so the structure is indeed
complicated and bad
--
Best regards,
Luc
_
Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.
__
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] CSS float not working in IE7
http://9dragonsbmx.com/insideaboveall.htm The photo needs to float to the right and it working fine in Firefox, but in IE7, the text and INSIDE ABOVE ALL heading are sitting way underneath and not top/left where they're supposed to. I'm sure it's something simple, but I can't figure it out. It's not the width of the images, I shrunk them down and it's not that. Can someone help me? Joanne __ 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/
Re: [css-d] CSS tables
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Kenoli Oleari Sent: Monday, November 03, 2008 7:10 PM To: CSS Mailing List Subject: Re: [css-d] CSS tables The Sitepoint book proposes beginning to move away from IE 67, offering several strategies for doing this, all with the goal of pushing people to upgrade to IE8. It suggests that this is the beginning of a new cycle that will push CSS and site design to a new level eventually and sooner if there is a new press toward conforming to an improving CSS standards. I read the Sitepoint article as well as the Web-digital one, I really don't think this kind of article will help the community to go forward as they are presented in a purely academic way. And because these demos are not for the real world, people look at them as nothing else than experiments. Imho this goes against what you're saying . Web designers who could have made the effort won't go there because of poor browser support and those who're still living in 1998 are too happy to badmouth the technique as another failure of CSS when it comes to build browser-friendly layouts. Anyway, as some of us have shown before there are other ways to make it work in IE: http://tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no _joke.asp And to answer your other point. As Ingo mentioned in one of the comments following the Sitepoint article [1], the real deal is not display:table, but inline-block! Sorry for the rant :-( [1] http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big -thing/#comment-654940 -- Regards, Thierry | http://www.TJKDesign.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] Fade to black or the standards battle is lost (US election day)
I've just finished to validate the markup and the CSS of the sites of Obama and McCain. The results are horrible: thousands errors! While I'm listening to Fade to black (Metallica), I'm just wondering why the standard are neglected in such a way. do you have an answer that could save my trust in a better web? -- http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://mimicry.css-zibaldone.com (Blog) http://www.flickr.com/photos/[EMAIL PROTECTED]/ (Flickr) __ 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/
