Re: [css-d] Getting round missing Child Selectors in IE67
Aaron Gray wrote: ... IE, even IE 7 does not support CSS Child Selectors ! As Philippe said, IE7 does in Standardsmode. I was wondering whether there is a work around at all Does this help, including the comments section? http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ But I think this is what David meant. You may have to upload a simplified reduction of the problem. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] Safari Page Break below header
On Fri, 12 Sep 2008 10:46:36 +1200 Karl Hardisty increased personal carbon footprint by exciting electrons the world over with these memorable words: Does anyone else have the page break below the header, and dance from left to right in Safari when reloading? Something I've not seen before. If it's not just me I'll send the person responsible an email. You are likely only to get half of the people on this mailing list pay any attention to your issue. The reason is that they will have the list emails threaded and will no longer be observing this thread as it is of no interest to them. On a mailing list best practise is to start a new thread (by not replying to an existing email) for every new topic. Tacking your question right on the bottom of an off topic branch of the thread reduces your chances further. Not changing the Subject of the email reduces your chances further still. I have done this for you in the hope that it may increase the number of responses to your question but your best move is to still re-ask your question on a new email to the list. Please note also that on many lists it is considered rude to hijack a thread in this way, and other people will not answer hijacks on principle, for the above reasons. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ 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] Styling the hr / element
I have read the long thread on this subject from last April, but I found it confusing and inconclusive. I've tried using an empty div only 1px high, with background, but IE still insists on transparent spacing. Please keep in mind that for empty DIVs you better insert an empty comment for IE: div!-- --/div Best regards, Christian Kirchhoff *Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin www.digitale-bibliothek.de AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737 Geschäftsführer: Ralf Szymanski __ 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] Styling the hr / element
Christian Kirchhoff wrote:
I have read the long thread on this subject from last April, but I found it
confusing and inconclusive. I've tried using an empty div only 1px high,
with
background, but IE still insists on transparent spacing.
div.hrline hr{ /* take out the troublemaking HR */
display:none;
}
div.hrline { /* DIV that wraps and replaces the HR */
background: transparent url(images/1pixel_hex_939393.gif) repeat-x
center center;
height: 30px;
}
div.onepixel {
height: 1px;
}
That should do the trick.
__
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] Unwanted margin in IE7 when applying border to an image
I have a page which has two full width images in the header, one below the
other. I want to have a thin white line between the two. I tried hr / but
ran into problems in IE, so tried a border-top on the lower image.
No problem in FF3, but IE7 is introducing extra space (margin ?) above the
border. I've not tried IE6 yet.
http://www.holidaymullandiona.co.uk/pages/home1.php
The CSS for the border (styled on the page) is:
img {border: 0; margin: 0; padding: 0;} /* just in case it were set differently
elsewhere */
img#sl {border-top: 1px solid #FFF;}
The DOCTYPE is xhtml transitional, and the HTML and CSS validate.
I wondered about a box model problem, but thought these were fixed in IE7 ?
Any suggestions, please ?
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
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] Unwanted margin in IE7 when applying border to an image
Perhaps you should try display:block; for the two images. Otherwise they
will be displayed as inline elements.
Regards,
Simone
2008/9/12 Tim Dawson [EMAIL PROTECTED]
I have a page which has two full width images in the header, one below the
other. I want to have a thin white line between the two. I tried hr /
but
ran into problems in IE, so tried a border-top on the lower image.
No problem in FF3, but IE7 is introducing extra space (margin ?) above the
border. I've not tried IE6 yet.
http://www.holidaymullandiona.co.uk/pages/home1.php
The CSS for the border (styled on the page) is:
img {border: 0; margin: 0; padding: 0;} /* just in case it were set
differently
elsewhere */
img#sl {border-top: 1px solid #FFF;}
The DOCTYPE is xhtml transitional, and the HTML and CSS validate.
I wondered about a box model problem, but thought these were fixed in IE7 ?
Any suggestions, please ?
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
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/
--
Simone Haider
Nullstars OG
Westbahnstrasse 19
A-1070 Vienna
Phone: +43 650 44 77 655
Email: [EMAIL PROTECTED]
Web: www.nullstars.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] Unwanted margin in IE7 when applying border to an image
--- On Fri, 9/12/08, Simone Haider | Nullstars [EMAIL PROTECTED] wrote: 2008/9/12 Tim Dawson [EMAIL PROTECTED] No problem in FF3, but IE7 is introducing extra space (margin ?) above the border. I've not tried IE6 yet. Perhaps you should try display:block; for the two images. Otherwise they will be displayed as inline elements. If you're aligning other elements alongside the image, this might not be ideal. You could also check out vertical-align: bottom on the image - see the following for a bit of info. http://www.fiveminuteargument.com/image-space __ 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] Table formatting and the 'empty-cells' property
In my continuing quest to test current CSS implementations to the limit, I'm investigating the various properties available for styling tables. It's early days, but they seem to be the poorest cross-browser-implemented feature since styling of form elements. Specifically, I'm looking at the 'empty-cells' property which is supposed to control the display of table cells containing no content. IE fails all round, refusing to render empty table cells whatever the value. Opera seems to have a semi-complete implementation, hiding borders but not backgrounds. It's Firefox and WebKit that I'm really interested in, though, in relation to the following from the spec: Furthermore, if all the cells in a row have a value of 'hide' and have no visible content, then the row has zero height and there is vertical border-spacing on only one side of the row. I'm a /little/ sketchy on exactly how to interpret there is vertical border-spacing on only one side of the row, but, at minimum, I would expect an overall table height difference when switching between 'hide' and 'show' values for this property. Firefox and WebKit do not change the height at all, and I'm not sure whether this is a misreading of the spec (certainly possible) or an implementation issue (less likely, but equally possible!). For a demo, see: http://www.fiveminuteargument.com/table-formatting You can use the toggle if you have javascript enabled. All comments and any clarifications will be gratefully received. Cheers, - Bobby __ 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] separating submenu width from parent width
Hi all, I cant find a relative thread for predicament so here goes!
Im working on the menu at www.eyetonline.com/terrafirma and on the what we
can do for you bit where it pops out I cant for the life of me get the width
to how I want it.. as you will see the text flies off the end.. I dont want
to change the width of the main menu on the left though if poss.
I think the main problem is I cant get the submenu to have its own defined
column width and the fact the page has two css scripts!
Css and html below
Richard.
Apologies if its a bit lengthy!
/* CSS Popout menuv */ /* THIS MENU IS JUST FOR THE WHAT WE CAN DO FOR YOU
HOVER MENU THE REST IS COMMANDED BY MM.CSS */
/* Fix IE. Hide from IE Mac \*/
* html #menuv ul li{float:left;height:1%;}
* html #menuv ul li a{height:1%;}
/* End */
#menuv a
{
width: 193px;
display:block;
padding-top:
0.1em; /*
expands menu box vertically*/
padding-bottom: 0.2em; /* adds bottom border */
white-space:nowrap;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #5C743D;
}
#menuv a, #menuv a:visited /*
all menus at rest */
{
color: white;
background-color: #5C743D;
text-decoration:none;
/* removes underlines from links */
}
#menuv a.parent, #menuv a.parent:hover /* attaches parent-arrow on all
parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: repeat-x;
}
#navigation td
{ /* keeps it
in with other css menu (mm_health_nutr.css) */
border-bottom: 1px solid #F4FFE4;
}
#navigation a {
color: #D5EDB3;
line-height:16px;
letter-spacing:.1em;
text-decoration: none;
display:block;
padding:8px 6px 10px 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
#menuv a:hover /* all
menus on mouse-over */
{
color:#993300;
background-color: #99CC66;
}
#menuv li
{
list-style-type:none; /* removes
bullets */
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 16px;
font-weight: bold;
text-decoration: none;
position: absolute;
}
#menuv ul li
{
position:relative;
}
#menuv li ul
{
position: absolute;
top: 0;
left: 19.84em;
/* distance from left menu (this should be the same as width
value in #menuv [1]) above */
display: none;
}
div#menuv ul, #menuv ul ul, #menuv ul ul ul
{
margin:0;
/* keeps the menu parts together */
padding:0;
width: 100*; /*
width of sub menus (this should be the same as width value in #menuv [1])
above */
}
div#menuv ul ul, div#menuv ul ul ul, div#menuv ul li:hover ul ul, div#menuv
ul li:hover ul ul ul
{
display: none;
}
div#menuv ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul
li:hover ul
{
display: list-item;
}
**HTML**
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html
head
titleTerra Firma Environmental Ltd/title
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
link rel=stylesheet href=mm_health_nutr.css type=text/css /
script language=JavaScript type=text/javascript
//--- LOCALIZEABLE GLOBALS ---
var d=new Date();
var monthname=new
Array(January,February,March,April,May,June,July,August,Sep
tember,October,November,December);
//Ensure correct for language. English is January 1, 2004
var TODAY = monthname[d.getMonth()] + + d.getDate() + , +
d.getFullYear();
//--- END LOCALIZEABLE ---
/script
style type=text/css
!--
@import url(menuv.css);
.style3 {font-size: 12px}
#apDiv1 {
position:absolute;
left:366px;
top:128px;
Re: [css-d] Table formatting and the 'empty-cells' property
On Sep 12, 2008, at 6:00 PM, Bobby Jack wrote: I'm a /little/ sketchy on exactly how to interpret there is vertical border-spacing on only one side of the row, but, at minimum, I would expect an overall table height difference when switching between 'hide' and 'show' values for this property. Firefox and WebKit do not change the height at all, and I'm not sure whether this is a misreading of the spec (certainly possible) or an implementation issue (less likely, but equally possible!). For a demo, see: http://www.fiveminuteargument.com/table-formatting As far as Gecko is concerned, it is considered a bug, atm. Note that Opera 9.52 has exactly the same behaviour as Gecko and WebKit. Philippe --- Philippe Wittenbergh http://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] Getting round missing Child Selectors in IE67
On Sep 11, 2008, at 4:03 AM, Aaron Gray wrote: ... only to find out the IE, even IE 7 does not support CSS Child Selectors ! IE 7 supports child selectors just fine. You document _must_ be in standards mode, however (that is, start with a valid doctype). If your document lacks a doctype, then IE 7 behaves the same way a IE 6. Ah ! DOCTYPE again, I must remember to do this. Feeling silly. Thanks, Aaron __ 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] separating submenu width from parent width
Richard Johnson wrote:
Im working on the menu at www.eyetonline.com/terrafirma and on the
what we can do for you bit where it pops out I cant for the life of
me get the width to how I want it.. as you will see the text flies
off the end.
You can add any width-value you want to the submenu, by targeting it
down the selector-chain - like so...
#menuv li ul li a {width: auto;}
...and auto works well there too.
The submenu ends up out of reach when page is subjected to the slightest
font-resizing though. Mixing 'em' in with 'px' tends to cause such problems.
#menuv li ul {left: 100%;}
...will work better and keep the submenu in place.
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] Getting round missing Child Selectors in IE67
Aaron Gray wrote: ... IE, even IE 7 does not support CSS Child Selectors ! As Philippe said, IE7 does in Standardsmode. I was wondering whether there is a work around at all Does this help, including the comments section? http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ But I think this is what David meant. You may have to upload a simplified reduction of the problem. No I have tied that. The only thing that worked was to do all binary combinations for upto a certain depth but that was lengthy (doubleing in size for each new level) and would only work to a certain depth. Aaron __ 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] ie/6.0 right-side of right col clip 600 window
Now what I'll do? Affected selector is .four. http://www.chelseacreekstudio.com/ca/cssd/test-40.html Best, Melinda PS Correction, suggestion, or comment on any other issues I am not aware of at the moment are always welcome... -- 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] ie/6.0 right-side of right col clip 600 window
David Laakso wrote:
Now what I'll do? Affected selector is .four.
http://www.chelseacreekstudio.com/ca/cssd/test-40.html
Cause is auto-expansion of .two. For testing (only), add...
* html .primary p {width: 100%; overflow-x: hidden; }
Difficult to add the usual fix for bad overflow-handling in IE6, since
.two has no declared width. You can however prevent .two from expanding
.one - which has a width - by declaring...
.one {overflow-x: hidden;}
...and this will go a long way towards keeping all columns inside the
clipping .wrapper even in IE6.
--
I'll also suggest using these styles...
* html #nav ul li {width : 25.1%; margin-right: -.2%;}
...to counteract IE6' weak percentage calculations. No flickering with
this - at my end at least.
regards
Georg (and Molly 't.c.')
--
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] ie6 killing my l/h nav
IE6 is adding more height to my l/h nav and is showing the rest of my sliding images. IE7 is displaying the l/h correctly and is okay on the mac side. Any thoughts on why IE6 is extending the nav? beta site here: http://www.kucia.com/bcs/BCS_08B/insights/index.html CSS: http://www.kucia.com/bcs/BCS_08B/css/main_new.css Thanks Eric __ 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] HT Conditional CSS
On Tue, 09 Sep 2008 12:01:31 +0200, Luis Speciale wrote: Hi ; Looking for a way to make Opera behave in a certain manner, I googelised this http://conditional-css.com/ Did you know about that ? With new browsers coming out, and older browsers continually updated to behave better, why would you do this? I would think it would be more productive to file a bug report if you come across an issue, rather than make a fix of your own that may become unnecessary with the browser's next release, no? A different matter if your site's visitors are using an old browser. But in the case of Opera users, I think most of us keep fairly up-to-date. 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] ie6 killing my l/h nav
Eric Heitz wrote:
IE6 is adding more height to my l/h nav and is showing the rest of my
sliding images.
http://www.kucia.com/bcs/BCS_08B/insights/index.html
Strengthen specificity on the individual list-item IDs, like so...
ul#insights_container li#audioVideo {...}
...as IE6 doesn't support max-height and therefore is locked onto...
ul#insights_container li {height:49px;}
...from higher up.
Once the specificity issue is solved, 'max-height' won't make a
difference in any browser. They will all obey individually declared
'height' on those list-items.
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] border of relatively positioned container div ignores contained absolutely positioned div
Greetings; It's amazing how much CSS one can forget in a few months! I'm sure there's a very simple answer to this -- but I've forgotten it! My containing div has a border. It also contains three other divs: two that are within the normal flow, and one (class=rightside) that is absolutely positioned. Rather than figuring the absolutely-positioned div in its own border calculations, the containing div's border ignores it. 1) Why? 2) The proper way around this CSS fact-of-life? Here's where you can see the problem, and the css behind it: http://members.distributel.net/~leibson/tests/border_problem.html Many thanks, in advance. - Michael __ Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.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] overflow: auto does not behave as I thought it would
Well, yes, if I remove the padding, it shows up in SeaMonkey, but I need the padding. And I also checked the page on IE, it works just fine as I expect it to work. The issue I'm having is with SeaMonkey, so I suspect it is also showing with FireFox 2 Anyone has any idea? Thanks Olivier Susan Grossman wrote: On Wed, Sep 10, 2008 at 1:15 PM, Olivier Sannier [EMAIL PROTECTED] wrote: Hi all, I have a test page here: http://obones.free.fr/cssbox/ The miniadmin box should contain links that are visible inside an inner div that shows up a vertical scroll bar. However, as it is, the links are not visible at all and I don't really know how to make it behave the way I want. Any help would be much appreciated. Regards Olivier I think the issue is in box-title h1 If you remove padding: 10px;, then the text is visible.(you have padding declared, which covers right, and then padding-right declared again BTW) There's probably another issue since I don't know why. HTH Susan -- Susan R. Grossman [EMAIL PROTECTED] __ 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] [Slightly OT] Font sizes
On Thu, 11 Sep 2008 17:13:45 -0400 Felix Miata increased personal carbon footprint by exciting electrons the world over with these memorable words: On 2008/09/12 08:41 (GMT+1200) Michael Adams composed: On Wed, 10 Sep 2008 17:12:01 -0400 David Laakso increased personal carbon footprint by exciting electrons the world over with these memorable words: Michael Adams wrote: Does anyone have a good article, and/or a reference to WCAG, that i can use to support the idea that default text size should not be less than the browser default. A Dao of Web Design http://www.alistapart.com/articles/dao Not sure i can use this one as a reference. It is designed for us to read and learn from. Plus it does not conform to 100% body text size. Would be good if its CSS was consistent with its message. 100e2r http://informationarchitects.jp/100e2r/ This is great and has many worthwhile comments I thought so too when it was first published, but it later changed its site styles and no longer practices what it preaches. Several weeks ago I started a rewrite of it that isn't finished and may never be. http://fm.no-ip.com/auth/tmp/new100e2r.html You might want to look through the following, where you might find a link to something appropriate to those artists but doesn't use mousetype to convey an inconsistent message: http://fm.no-ip.com/auth/wauth2.html http://fm.no-ip.com/auth/wauth1.html http://fm.no-ip.com/auth/refmarks.html Among them, http://tobyinkster.co.uk/article/web-fonts/ is my recent favorite, while http://www.w3.org/QA/Tips/font-size ought to be more authoritative, and http://www.lighthouse.org/accessibility/top-10/ arguably a good business approach. http://cssliquid.com/ might be something to point those with an artistic priority to. These are great and may take me a day or two to work through. I have in this last week come across the idea that the last word on web site design perhaps should be given to the typographer, not the graphics designer. This is probably a concept that you CSS Gurus are familiar with, but it is new to me. It may also be one that i was unknowingly using given that my websites are mainly using WCAG techniques within the markup and CSS (the issue i am raising here is an accessibility one of setting body font at 100% with all other font settings in Ems). It is the graphics designer in us all that want's to reduce the font size because we feel it makes the page look tidier. So the secret now becomes designing the best looking website we can around the 100% font content, which ends up being an exciting challenge in itself. I may post a case study of the reasoning behind the website i am working on as an example as this is what i am writing for the client. Thankfully Eric has allowed this thread to continue to date, it does involve CSS design principles, i hope many CSS designers are gaining something from it. But i do expect it to dry up naturally soon, so please bear with us or ignore the thread if you are not interested. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ 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] border of relatively positioned container div ignores contained absolutely positioned div
Michael Leibson wrote: It's amazing how much CSS one can forget in a few months! I'm sure there's a very simple answer to this -- but I've forgotten it! Happens at times. My containing div has a border. It also contains three other divs: two that are within the normal flow, and one (class=rightside) that is absolutely positioned. Rather than figuring the absolutely-positioned div in its own border calculations, the containing div's border ignores it. 1) Why? You mean: absolute positioned elements take up no layout-space ? Well, they don't, so the .rightside element has no impact on .container's dimensions, and will overflow. 2) The proper way around this CSS fact-of-life? We would most often float .rightside and _contain_ the float. Maybe this way... http://www.gunlaug.no/tos/alien/ml/test_08_0912.html http://members.distributel.net/~leibson/tests/border_problem.html BTW: is it your intention to trigger quirks mode in all browsers... http://hsivonen.iki.fi/doctype/ ...or did you just paste in the wrong doctype declaration for this test-page by mistake? Mode will affect a few things - especially in IE/win, but doesn't affect how A:P 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/
Re: [css-d] [Slightly OT] Font sizes
Michael Adams wrote: I have in this last week come across the idea that the last word on web site design perhaps should be given to the typographer, not the graphics designer. This is probably a concept that you CSS Gurus are familiar with, but it is new to me. Graphic designers can ruin any web design in their attempt to make it perfect. It pays to expose designs to real-world challenges - before they are released. It may also be one that i was unknowingly using given that my websites are mainly using WCAG techniques within the markup and CSS (the issue i am raising here is an accessibility one of setting body font at 100% with all other font settings in Ems). It is the graphics designer in us all that want's to reduce the font size because we feel it makes the page look tidier. I think one may be allowed to ask: tidier in who's browser? Your accessible font-size settings look reasonable. However, I've seen so many layouts blow apart in my browsers, that I'll just throw in my thoughts on the issue, for good measure... http://www.gunlaug.no/contents/wd_1_03_04.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] Unwanted margin in IE7 when applying border to an image
Bobby Jack wrote: --- On Fri, 9/12/08, Simone Haider | Nullstars [EMAIL PROTECTED] wrote: 2008/9/12 Tim Dawson [EMAIL PROTECTED] No problem in FF3, but IE7 is introducing extra space (margin ?) above the border. I've not tried IE6 yet. Perhaps you should try display:block; for the two images. Otherwise they will be displayed as inline elements. If you're aligning other elements alongside the image, this might not be ideal. You could also check out vertical-align: bottom on the image - see the following for a bit of info. http://www.fiveminuteargument.com/image-space Thank you, both. 'display: block;' seems to have done the trick for IE7 at least. The images are the full width of the page, so there's nothing to display beside them. Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ 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] ie/6.0 right-side of right col clip 600 window
Gunlaug Sørtun wrote:
David Laakso wrote:
Now what I'll do? Affected selector is .four.
http://www.chelseacreekstudio.com/ca/cssd/test-40.html
.one {overflow-x: hidden;}
...and this will go a long way towards keeping all columns inside the
clipping .wrapper even in IE6.
* html #nav ul li {width : 25.1%; margin-right: -.2%;}
regards
Georg (and Molly 't.c.')
Excellent! Done deal. Thanks.
Best,
Melinda (and Bill)
PS
We decided to feed .one {overflow-x: hidden;} to IE/6 only. Mac Safari
objects. At least for now. But we could be wrong, and often are...
--
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] Faux column - check on high res please + accessibility problems
Good afternoon list, A few snags, i'm running in: [1] I'm using the faux column technique to achieve the following: avoiding that on high res monitors the borders are stretched all the way down the viewport regardless the content. In other words, to avoid e.g. putting a bottom border on the wrapper so users know it's the end. I'm assuming that this technique is the 'easiest' x-browser. Could somebody check for me if the borders stretch until the bottom of the viewport on high res (above 1440 x 900) and that the footer sticks to the bottom? [2] Besides that i have a huge accessibility problem: The page falls apart on: Mozilla 1.7.13 : at 200% IE6 and IE7 also Opera is ok at + 300% and Firefox also with 8 times ctrl + How do i resolve that? Has this to do with the widths applied on the #contentleft and #contentright? Seems weird that 2 out of 6 get it right (but hey, what do i know?). [3] And to top it all off, after changing the width on those divs from pixels to ems, the left and right borders on the li items didn't stretch anymore until the bottom-border. Adding the height: 1%; trick on the #navcontainer li resolved that but as a result, the distance between the li are 2px wider in IE as opposed to Opera, Moz and FF. Do i have to feed IE 6 and IE 7 other paddings through a hack for this? http://www.dzinelabs.com/sandbox/MP/Pages/original.html css embedded -- 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. And how is 'education' supposed to make me smarter? - The Simpsons. __ 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] Faux column - check on high res please + accessibility problems
Luc wrote: [1] I'm using the faux column technique to achieve the following: avoiding that on high res monitors the borders are stretched all the way down the viewport regardless the content. In other words, to avoid e.g. putting a bottom border on the wrapper so users know it's the end. I'm assuming that this technique is the 'easiest' x-browser. Could somebody check for me if the borders stretch until the bottom of the viewport on high res (above 1440 x 900) and that the footer sticks to the bottom? Border stretches down. Footer stays below content. You can check this yourself by zooming down in Opera and/or Firefox. Page-zoom: 20% in Opera should give you a clear picture. [2] Besides that i have a huge accessibility problem: The page falls apart on: Mozilla 1.7.13 : at 200% IE6 and IE7 also Opera is ok at + 300% and Firefox also with 8 times ctrl + Page-zoom, yes. Font-resizing, no. How do i resolve that? Has this to do with the widths applied on the #contentleft and #contentright? Seems weird that 2 out of 6 get it right (but hey, what do i know?). Page-zoom scales, font-resizing doesn't. Better go back to using all px for dimensions, margins and paddings, as mixing px and em as you do now rarely ever works well. [3] And to top it all off, after changing the width on those divs from pixels to ems, the left and right borders on the li items didn't stretch anymore until the bottom-border. Adding the height: 1%; trick on the #navcontainer li resolved that but as a result, the distance between the li are 2px wider in IE as opposed to Opera, Moz and FF. Do i have to feed IE 6 and IE 7 other paddings through a hack for this? See above. http://www.dzinelabs.com/sandbox/MP/Pages/original.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/
