Re: [css-d] Companion columns obscured in IE6
Barney Carroll wrote:
http://hangnail.textmatters.com
I can't work out why the #contentarea div is blotting out the excess
padding on the #backgrounds children divs, which IE acknowledges
being tall enough. It might not even be that – maybe the companions
are being clipped for some reason. I've stared at this to the point
of losing context, tried various applications of zoom:1, Etc. –
nothing seems to work.
Could someone give a quick look at the DOM and tell me if they see
what's wrong?
IE6 can't properly escape the trap provided by its own 'hasLayout' bug.
Delete 'width: 100%;' on #backgrounds so it becomes...
#backgrounds {
clear:both;
position:relative;
z-index:1;
}
...and/or improve IE6' stacking by adding...
#backgrounds div {
position: relative;
}
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] Companion columns obscured in IE6
Gunlaug Sørtun wrote:
IE6 can't properly escape the trap provided by its own 'hasLayout' bug.
Delete 'width: 100%;' on #backgrounds so it becomes...
#backgrounds {
clear:both;
position:relative;
z-index:1;
}
Georg, this worked a treat. Just goes to show I'm still miles away from
understanding the mechanics behind IE's box model. Thanks!
Regards,
Barney
__
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] Five Column Form Layout
Hi all, I've read several tutorials from sitepoint and bought a video about forms without css but I'm still not able to produce a five columns form :-( Could someone provide me a raw example such as.: label1 label2 label3 label4 label5 TextBox1 TextBox2 TextBox3 TextBox4 TextBox5 Thank you very much!!! -- Marcos H. W. Softing Systems Systems Analyst __ 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] IE6 Non-Existant Class Bug
Bob Rosenberg wrote:
Yes. Embed the correct version of the rule on the page. ID has to be
unique on the page so IE6 is correct in stopping on the mismatch since
when it finds the ID'ed tag with the wrong class on it since there can
not be another tag with that ID to match. While it is theoretically
valid to have more than one possible match, this would only be valid if
the rules occur in a *.css Style Sheet. In that case, at least in
theory, the rules could be intended to apply to different pages and
should thus the rules should be fully parsed. Also, again at least in
theory, if you rewrite the DOM text (and thus alter the class), the
mismatch should NOT stop the parse.
First, I originally experienced this issue using an external stylesheet,
so that is clearly not the issue.
Second, ID has to be unique in the HTML, not within the CSS. It is
perfectly valid to have a single ID and give that element two classes, eg:
div id=myDiv class=content specialFoo/div
And also valid to style this div using:
#myDiv.content {
border: 1px solid black;
}
#myDiv.special {
background-color: yellow;
}
If however, you keep those same style rules and change the html to be:
div id=myDiv class=specialFoo/div
Just because #myDiv.content isn't found on the page doesn't mean that
@myDiv.special can't exist. The browser should still follow the second rule.
__
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] Floated elements have unwanted padding-bottom in FF
I'm only seeing this issue in FireFox (Mac PC)...
I have the following markup:
div class=tableTabs
ul
lia href=...Tab 1/a/li
lia href=...Tab 2/a/li
lia href=...Tab 3/a/li
/ul
/div
And the following related CSS:
* {
padding:0;
margin:0;
}
.tableTabs {
float:left;
padding:3px 6px 0px 0;
}
.tableTabs ul {
list-style:none;
}
.tableTabs li {
float:left;
}
.tableTabs li a {
display:block;
float:left;
padding:0 5px;
border-width:1px 1px 0 1px;
border-color:#7F82C7 #515492 #515492 #7F82C7;
border-style:solid;
}
Can someone tell me why there's an extra 3px or so of padding at the
bottom of the parent DIV...and only in FF? i'm using FireBug to try
and figure it out, but nothing is being inherited. I'm at a loss. Is
this a rendering bug possibly??
__
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] Previous Layout Issues
J Hodge wrote: David, I always appreciate your input when I approach the CSS list for ideas / hints / helps, even when we don't necessarily agree on approach. That said, I've spent the last few days re-coding the site on which I am working, with a specific aim towards making it function better upon text-enlargement...trimmed] http://www.lostinxlation.net/sandbox3/index.html http://www.lostinxlation.net/sandbox3/css/primary.css ~~J. (treswife at gmail dot com) J Hodge wrote me off-list regarding Re: [css-d] Cross-browser Display Issue / Problem With NOSCRIPT Validation J, You are still having some text enlargement issues. Probably it is the absolute positioning and setting height to the wrong elements that's throwing you off. Perhaps this will help to at least get you started [1] (very quick tested at +2 in compliant browsers and at text-size largest in IE6 and 7). [1] http://www.chelseacreekstudio.com/ca/cssd/hodge01.html hth, ~dL PS I don't think you can divide a pixel. And while hacks are sometimes necessary, becoming dependent on them is seldom a good practice. -- 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] Floated elements have unwanted padding-bottom in FF
Brian Campbell wrote: Can someone tell me why there's an extra 3px or so of padding at the bottom of the parent DIV...and only in FF? Same in all Gecko on windows. Looks like the non-floated ul is given a margin-bottom. I'm at a loss. Is this a rendering bug possibly?? Bug/difference/variation ... don't know. Seems to be easy enough to control though... http://www.gunlaug.no/tos/moa_26a.html 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] Floated elements have unwanted padding-bottom in FF
On Oct 1, 2007, at 4:37 PM, Gunlaug Sørtun wrote: Brian Campbell wrote: Can someone tell me why there's an extra 3px or so of padding at the bottom of the parent DIV...and only in FF? Same in all Gecko on windows. Looks like the non-floated ul is given a margin-bottom. I'm at a loss. Is this a rendering bug possibly?? Bug/difference/variation ... don't know. Seems to be easy enough to control though... http://www.gunlaug.no/tos/moa_26a.html Perfect! thanks for the fix! __ 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] Site Check
http://www.extravaganzadesign.com/work/mbn/test2.html After years of dabbling in CSS and (pretty much) silently reading this list I have put together a site that relies about 90% on CSS for positioning. (I used tables for some forms.) This is my first hardcore attempt at a page like this ... any advice is very much welcomed. (None of the links work and I am still fussing a few things with the design.) Thanks! __ 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] Site Check
It looks ok on IE7 Firefox 2.0.0.7 Thanks Hakan http://dominor.com On 10/1/07, Jenn K [EMAIL PROTECTED] wrote: http://www.extravaganzadesign.com/work/mbn/test2.html After years of dabbling in CSS and (pretty much) silently reading this list I have put together a site that relies about 90% on CSS for positioning. (I used tables for some forms.) This is my first hardcore attempt at a page like this ... any advice is very much welcomed. (None of the links work and I am still fussing a few things with the design.) Thanks! __ 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] Site Check
Hallo Jenn, It looks magic! Well done. Mac Safari and Firefox Just a note though, it explodes after only a minimal 150% font enlargement, i.e. My grandmother has way poor sight and enlarges it to 250%, but by then it is almost illegible to her. The white text on the green background disappears once it hits the white body background... I hope those constructive criticisms are not too harsh Well done. T * * * * * TAG /* --- [EMAIL PROTECTED] --- */ On 02/10/2007, at 9:17 AM, Jenn K wrote: http://www.extravaganzadesign.com/work/mbn/test2.html After years of dabbling in CSS and (pretty much) silently reading this list I have put together a site that relies about 90% on CSS for positioning. (I used tables for some forms.) This is my first hardcore attempt at a page like this ... any advice is very much welcomed. (None of the links work and I am still fussing a few things with the design.) Thanks! __ 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] Site Check
Hi Jenn,the page looks good in IE 6,no problem with the white text on the green background. You might consider using em or % to size the font instead of px. Pixels ignore any preferences users may have,and this could be a serious accessibility problem for those viewers who need to make text larger in order to read it clearly. Well done, Ernie.:) Date: Mon, 1 Oct 2007 19:25:58 -0400 From: [EMAIL PROTECTED] To: [EMAIL PROTECTED] CC: css-d@lists.css-discuss.org Subject: Re: [css-d] Site Check It looks ok on IE7 Firefox 2.0.0.7 Thanks Hakan http://dominor.com On 10/1/07, Jenn K [EMAIL PROTECTED] wrote: http://www.extravaganzadesign.com/work/mbn/test2.html After years of dabbling in CSS and (pretty much) silently reading this list I have put together a site that relies about 90% on CSS for positioning. (I used tables for some forms.) This is my first hardcore attempt at a page like this ... any advice is very much welcomed. (None of the links work and I am still fussing a few things with the design.) Thanks! __ 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/ _ Explore the seven wonders of the world http://search.msn.com/results.aspx?q=7+wonders+worldmkt=en-USform=QBRE __ 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] Site Check
Jenn K wrote: http://www.extravaganzadesign.com/work/mbn/test2.html Advice: don't rely on, or use, fixed font-sizes (in pixel). 1: all browsers have font-resizing options, so it doesn't work too well. 2: it is making things unnecessary complicated for some of the visitors who can't read small-ish text. 3: text tend to break out of containers and overlap other content, because layouts with fixed font-sizes are also often based on fixed-size containers - as is yours. Add 'clear: left' or use some other means to keep #content away from the navigation, as elements inside that container get hooked up on navigation-elements in non-IE browsers when page is subjected to font-resizing. IE/win is partly saved by its own bugs, as the screen-shot shows... http://www.gunlaug.no/tos/alien/jk.png Build in some more flexibility, like 'height: auto' and containment on all containers - using 'min-height' as base-height, so your layout can take a little bit of stress without breaking. Other than that it looks like an ok start, with only a couple of source-code errors that need addressing... http://validator.w3.org/check?uri=http://www.extravaganzadesign.com/work/mbn/test2.html 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] refining text-align: justify
Hello;
Is there any way to refine the use of {text-align: justify;} so that one can,
for
example, prevent the last word of the last line from appearing on its own line
- like
this?
Thanks, in advance, for any tips.
- Michael
Get news delivered with the All new Yahoo! Mail. Enjoy RSS feeds right
on your Mail page. Start today at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
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] Centering help
Hi, Working on a Perl script that puts out a page. I have the script working, except in IE my footer isn't centered. Seems to work in Firefox, so I must be missing something stupid, but haven't figured this out in a couple of hours. Anyway, here's the page: http://www.econocaribe.com/cgi-bin/agt1.pl and the involved css file is at: http://www.econocaribe.com/css/pl.css Thanks for any tips. I know I have a lot more to learn with CSS so far. __ 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] refining text-align: justify
On Oct 2, 2007, at 12:36 PM, Michael Leibson wrote:
Is there any way to refine the use of {text-align: justify;} so
that one can, for
example, prevent the last word of the last line from appearing on
its own line - like
this?
Thanks, in advance, for any tips.
No. Not with CSS 2.1, and not with CSS 3, I think (1).
You'll probably need to inject a non-breaking space between the last
to words of your block using Javascript or whatever server side
language is fashionable today. But that is OT.
(1) http://www.w3.org/TR/css3-text/#justification
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.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] Centering help
Ken Weise wrote:
Working on a Perl script that puts out a page. I have the script
working, except in IE my footer isn't centered.
http://www.econocaribe.com/cgi-bin/agt1.pl
Browsers have different defaults and need complete commands, and
relations must be established between elements before you can
absolute-position anything reliable across browser-land.
Adding the following after what you've already got, will give you a
properly positioned footer in IE, and other browsers...
#body { position: relative; }
* html #body {height: 100%;}
#footer {left: 0; width: 990px; margin: 0;}
...but the layout-method you've chosen is extremely fragile, and can't
take any amount of stress in any browser.
Whatever created that source-code is also in need of some serious
quality-upgrades...
http://validator.w3.org/check?uri=http://www.econocaribe.com/cgi-bin/agt1.pl
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] Centering help
On Mon, 1 Oct 2007 18:39:57 -0400, Ken Weise wrote: Hi, Working on a Perl script that puts out a page. I have the script working, except in IE my footer isn't centered. Seems to work in Firefox, so I must be missing something stupid, but haven't figured this out in a couple of hours. Anyway, here's the page: http://www.econocaribe.com/cgi-bin/agt1.pl Well, the footer is not centered in other browsers, either! That's because it is 920 pixels wide, absolutely positioned, inside a 990 pixel wide DIV called #body. The auto margins won't affect an absolutely positioned element. What you are missing is a left: 0; declaration on that footer. Or, if you retain the present widths, use left: 35px; to center it. You also need to establish the #body DIV as the containing block for this. Adding position: relative; to the rule for the #body should do the trick for all browsers ... even IE. :) Cordially, David -- __ 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] Site Check
Thanks to everyone who responded. This was really helpful! To save list some hits I will only reply to Georg who covered most of the main points people had. (Tigdh had a really good point though about what happens when white text breaks out of a background - I didn't think of that.) Advice: don't rely on, or use, fixed font-sizes (in pixel). I have been afraid of ems but I will give it a try. I am going to try the 62.5% solution mentioned at http://www.clagnut.com/blog/348. I guess it is unrealistic to believe that I can expand all of my buttons to keep up with expanded text - or is it? Or should I really lock it in and use image for text on buttons? Build in some more flexibility, like 'height: auto' and containment on all containers - using 'min-height' as base-height, so your layout can take a little bit of stress without breaking. Since I am using background images, am I correct to assume that I will need to add header, body and footer background images to some elements in each container (I guess using 3 divs instead of just 1?) with only a couple of source-code errors that need addressing... I noticed that too. I will pass that along to backend developer. Thanks again for help!!! __ 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/
