[css-d] Menu problem with IE6+7
Hi, I have a problem in IE (6+7) when mouse-over the menu where there's a sub-menu (dreamweaver- spry), It shows a white cell under the sub menu. This doesn't show wither in FF, Safari and IE mac. Any help will be greatly appreciated here is the site: http://wendyrichmond.com thanks -- Sh __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu problem with IE6+7
Sh wrote:
Hi,
I have a problem in IE (6+7) when mouse-over the menu where there's a
sub-menu (dreamweaver- spry), It shows a white cell under the sub
menu.
This doesn't show wither in FF, Safari and IE mac.
Any help will be greatly appreciated
Ah, SpryMenus. Hate's too strong a word, but it's close. What you're
seeing isn't actually a white cell, but rather an iframe hack included
by the SpryMenu JavaScript. It's frequently more harmful than helpful.
Your best solution is probably to remove the iframe creation part of the
javascript, or simply comment it out.
Another possible solution would be adding this to your site head tag:
!--[if lte IE 6]style type=text/css
.Menue iframe
{
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
/style![endif]--
That's completely untested for your site, but it works quite well on my
(home-grown, non-Spry) menus.
Best of luck.
Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font size dilemma
Kathy Wheeler wrote: I know the mantra: let the user decide, set font-size to 100% but ... Looking at major general news sites, popular public blogging etc sites, they ALL seem to have fonts set much smaller. This being the case surely the visually impaired surfer, being otherwise perfectly normal individuals frequenting popular public news, blogging, social sites etc, will have already set their font preferences to suit those sites they frequent. Rather than blindly (bad term, I know) accepting the 100% font size, wouldn't a better approach be to settle on a font-size that doesn't make a client's site look like a kindergarten reader (compared to major news sites for eg) In what browsers on what OSes installed on what particular hardware? You have no control over the hardware a visitor is using to view your site. I could be running a 19 monitor at 640x480 resolution because that's what I need in order to see things. Or I could be like a friend of mine who ran his 17 monitor at 2048x1536 resolution. (I even once ran a 15 monitor at 1600x1200.) and just make sure it doesn't break under common techniques used by the visually impaired? That's the important thing, and easiest if you start with the assumption that the visitor already has their preferred font size set. And what common techniques are in use? Firefox has at least 2 different Zoom options with very different results, then there's minimum font size ... what are those who alter their browsers actually using? What should we be checking by? I think that the most likely browser settings you'll encounter in general public use are the browser's stock, default settings. So keep a test system around with your chosen browsers installed with their unchanged installation defaults ... I would imagine setting a browser minimum font size to bring (say) cnn.com back to 100% font size equivalent would have no effect on a site set to 100% font size; very little effect on one set to say 85%; but running the browser in some zoom mode to get cnn to 100% equiv would blow our font-size 100% sites out to 150% equiv or similar!! Or have I missed something? You're still trying to prescribe the visitor's font sizes. You have no control over it, so why spend any time bothering with it? And who says that CNN or any other particular site is doing it right? Way too many sites are designed by Graphic Designers Who Must Look Kewl At Any Cost - and media companies are some of the worst offenders in that area. (An aside: some of the most Absolutely Totally Kewl - and completely unusable - sites I've seen have been the home sites of web design firms ... ) I don't adjust my font sizes so that any particular site's font looks my chosen size. I set my chosen size, and kick the font size up or down if needed by some particular site. I have almost never encountered a web site where I had to kick the font size DOWN. -- David gn...@hawaii.rr.com authenticity, honesty, community __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font size dilemma
--- On Fri, 3/13/09, Kathy Wheeler kat...@home.albury.net.au wrote: Looking at major general news sites, popular public blogging etc sites, they ALL seem to have fonts set much smaller. This being the case surely the visually impaired surfer, being otherwise perfectly normal individuals frequenting popular public news, blogging, social sites etc, will have already set their font preferences to suit those sites they frequent. Kathy, I sympathise: it's difficult to get over the 'small is cool' mindset that seems to be prevalent nowadays. Even on respectable 'design sites', I very rarely see body text at my browser's default font size. I've chosen to design my personal site around the default size, so I hardly use the font-size CSS property at all - only percentages greater than 100 for headings, etc. It's very tempting to use a smaller font somewhere, but I'm holding out for the moment. My target audience is probably 'better sighted' than the general public, but I've chosen to go this way to also handle different resolutions which, as others have pointed out, make font-sizing a very tricky thing. I don't think browsers help - the general features such as page zoom / text zoom / minimum font size are pretty poorly implemented, IMO (see http://www.fiveminuteargument.com/blog/minimum-font-size, for example). Combined with poorly chosen font sizes, I really sympathise with anyone whose eyesight is worse than mine. Having said all that, I don't think we need to be too dogmatic about it. Web pages are NOT the same as books - I believe there should be more of a visual identity to a site than just a logo and a couple of images. If browsers did a better job of handling font-sizing, every web site could easily be readable by all whilst maintaining a unique look of its own, even in regards to the 'base' font size. - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Eric Meyer on CSS project 6 and 7 combined getting gray outlined image box under menu bar option
Hello,
I am trying to combine chapter 6 and 7 things to make a horizontal bar of
options with stylish rounded options that also has drop-down menu options. The
problem is that if if use something like:
ul id=nav
lia href=/empower/weblogic/createDataSource.jspWeblogic
Deployment/a/li
lia href=/sasshare/Share Administration/a/li
lia href=/dax/Rock Administration/a/li
lia href=/gidb/Moon Administration/a/li
lia href=/outage/Schedule Outage/a/li
/ul
The bar looks fine. But, if I use:
div id=nav
ul
lia href=/empower/index.jspHome/a/li
/ul
ul class=level1
li class=submenua href=Profile/a
ul class=level2
lia
href=/empower/weblogic/deleteProfile.jspDelete/a/li
/ul
/li
/ul
ul class=level1
li class=submenua href=Datasource/a
ul class=level2
lia
href=/empower/weblogic/createDataSource.jspCreate/a/li
lia
href=/empower/weblogic/deleteDataSource.jspDelete/a/li
/ul
/li
/ul
ul
lia href=/empower/weblogic/help.jspHelp/a/li
/ul
/div
The last item on the menu bar has a gray box outline. I do not know how to get
rid of the gray image outline (is that an image border?)
The css I use:
CHARSET ISO-8859-1;
html, body {margin: 0; padding: 0; background: #FFF; color:#4A4344;
font-family: Verdana, Arial, sans-serif;
behavior: url(/empower/csshover.htc);
} /* WinIE behavior call */
h1 {
color: #FFF;
background: rgb(0%,56%,84%);
font: bold 200%/1em Arial, Verdana, sans-serif;
padding: 1em 1em 0; margin: 0;
border: 1px solid rgb(0%,31%,46%);
border-width: 2px 0;
}
#main {
font-size: small;
color: #AAA;
background: #FFF;
margin: 0;
padding: 2.5% 12.5%;
clear: left;
}
#nav {margin: 0; padding: 0;}
#nav li {
list-style: none; float: left;
margin-left: 1px; padding-left: 16px;
font-size: 10px; line-height: 20px; white-space: nowrap;
background: #BBB url('/empower/images/tabs2-big.gif') 0 100% no-repeat;
}
#nav a {
display: block; float: left; padding: 0 16px 0 0;
text-decoration: none; font-weight: bold;
background: #DDD url('/empower/images/tabs2-big.gif') 100% 100%
no-repeat;
color: #333;
width: .1em;
}
htmlbody #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac hack \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {color: rgb(62%,35%,22%);}
#nav #current, #nav #current a {
color: #FDB;
background-image: url('/empower/images/tabs2-big-ct.gif');
}
img{border-style: none;}
#ds table { margin: 0; padding: 0; width=100%}
#ds td { font-weight: bold; font-size: 12px; align=right; }
.cssform nbb {
font-variant:small;
color:#369;
background:#fff;
border:2px;
}
.cssform p{
width: 305px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}
.cssform label{
font-weight: bold;
font-size: 12px;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to
create some right margin*/
}
.cssform input[type=text]{ /*width of text boxes. IE6 does not understand
this attribute*/
width: 305px;
border: 1px solid gray;
}
.cssform input[type=password]{ /*width of text boxes. IE6 does not understand
this attribute*/
width: 305px;
border: 1px solid gray;
}
.cssform textarea{
width: 250px;
height: 150px;
}
/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug:
http://www.positioniseverything.net/explorer/threepxtest.html
*/
* html .threepxfix{
margin-left: 3px;
}
div#nav h2 { font: 2em/1em Times New Roman, serif; letter-spacing: 0.1em;
text-transform: lowercase; text-align: center;
margin: 1.25em 1em 0; padding: 0.5em 0.25em;
}
#content { margin: 0 2em 2.5em; padding: 1.5em;
border: 1px solid black;
background: url(/images/wildwind.jpg) 0 0 no-repeat;
}
#cpdefaults {
position: relative; top: 0px; left: 0px; wrap;
padding: 0.75em; border: 1px solid #600; border-width: 2px 1px 2px 1px;
}
#cpdefaults ul { list-style: none; margin: 1em; padding: 0; font-size: small; }
#cpdeftitle { text-decoration: underline; font-size: medium; font: Arial,
Verdana, Helvetica, sans-serif; }
/* drop down menu system */
div#nav { margin:0; padding: 0; float: left;
/* margin: -1px 0 0 7em; */
background: #FFF; border: 1px solid #AAA;
}
div#nav ul { margin: 0; padding: 0; background: white; border: 1px solid
[css-d] Q and A (Question and Answer) format using ul
Hello,
I saw a FAQ page where it listed a question followed by an answer as
follows (fictional question and answer below):
Q. How do I login?
A. You log in by clicking on the login link.
The HTML markup is an unordered list (ul), where the list (li) have
background images for the Q. and A.
ul.QandA li.Q {
background:transparent url(../images/img_Q.gif) no-repeat scroll 0 2px;
padding:0 0 0 20px;
}
ul.QandA li.A {
background:transparent url(../images/img_A.gif) no-repeat scroll 0 2px;
padding:0 0 16px 20px;
}
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
I know the background image technique is well-known
(http://css.maxdesign.com.au/listutorial/introduction.htm), but since
in this example, it's just Q and A, I was hoping there is a way
not to use images.
Thanks,
Stephen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Stephen Tang wrote: I know the background image technique is well-known (http://css.maxdesign.com.au/listutorial/introduction.htm), but since in this example, it's just Q and A, I was hoping there is a way not to use images. I think that Q and A should be part of the content, not the styling. Without CSS and without images, the content of the page should still make sense, so I reckon you'll want to have the images for Q and A with alt text, or just plain text, in the HTML? -- Els __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] My layout needs your help
Hi List Friends, Here are the problems I'm having with my own site's layout. Perhaps you can help me resolve them. My h1 doesn't appear inline as I want it to in the page's first paragraph. Side navigation is giving me a bit of trouble. The content type scrolls up and down, but I want the navigation to stay in place in one spot on the page (like the tiger does). I tried a few ways to get this effect without success. The content type will need to indent on the right as it passes by the side navigation bars - as the bars protrude into the content type space. Solutions accepted with gratitude. Be well! Kimi -- This email sent by Kimi Wei 201-475-1854 | k...@thewei.com | thewei.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] My layout needs your help
Kim Brooks Wei wrote: Here are the problems I'm having with my own site's layout. Perhaps you can help me resolve them. Kimi Link? -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
Sure. It's even easy.
li.Q:before {
content:Q: ;
}
li.A:before {
content:A: ;
}
http://www.w3.org/TR/CSS21/generate.html#before-after-content
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
-- On Fri, 3/13/09, Els el...@tiscali.nl wrote:
I think that Q and A should be part of the content, not the
styling.
Without CSS and without images, the content of the page
should still
make sense, so I reckon you'll want to have the images
for Q and A
with alt text, or just plain text, in the HTML?
IMO, a list of question and answer pairs still makes sense, even if they're not
explicitly labelled 'Q' and 'A'. Each question will, presumably, be suffixed
with a question mark, and, if structured as a dl, each answer following it,
indented, will pretty obviously be a response.
dl.qanda dt:before { content: 'Q. '; }
dl.qanda dd:before { content: 'A. '; }
is a basic approach.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] My layout needs your help
The link is mentioned in the footer: thewei.com Best regards, Christian *Editura Gesellschaft für Verlagsdienstleistungen mbH* Tempelhofer Damm 2 · 12101 Berlin www.editura.de AG Berlin-Charlottenburg · HR B 81823 · USt.Id. DE217180548 Geschäftsführer: Ralf Szymanski David Laakso schrieb: Kim Brooks Wei wrote: Here are the problems I'm having with my own site's layout. Perhaps you can help me resolve them. Kimi Link? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] My layout needs your help
--- On Fri, 3/13/09, Kim Brooks Wei kimi@kimbwei.com wrote: (The link's in the signature, David ;) My h1 doesn't appear inline as I want it to in the page's first paragraph. Your h1 is inline, but your paragraph isn't. Side navigation is giving me a bit of trouble. The content type scrolls up and down, but I want the navigation to stay in place in one spot on the page (like the tiger does). Note that your tiger image has a position: fixed. You'll want something similar for your #mainnav and you'll probably want to move that element's position in your source document, depending on exactly where you want it to appear on screen. As you say, you'll probably want to add some space for it by narrowing your body copy. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 and whitespace.
Hi guys, Last throw of dice before the weekend. Trying to get elements to line up across the page. Just about sorted in FF/IE8, Opera, Safari and have fix in for IE6, but IE7 just won't play ball. See http://www.dbadvertising.co.uk/dev/home-test3.html The address image has extra space between it and the nav2 div above. Any thoughts? BTW As it is a work in progress the png images are not all fettled for IE6. Ian Young Director IY e-Solutions __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] My layout needs your help
Kim Brooks Wei wrote:
My h1 doesn't appear inline as I want it to in the page's first paragraph.
I think that you want h1 { display: run-in; } - but when I last looked,
only Safari and Opera supported it. I imagine you have tried display:
inline? FWIW I bailed and used h1 { float: left; width: whatever; } -
nasty. I know.
Side navigation is giving me a bit of trouble. The content type
scrolls up and down, but I want the navigation to stay in place in
one spot on the page ...
Use { position: fixed; } for that. IE 6 does not support position:
fixed, so you may want to look at emulating it:
http://www.gunlaug.no/contents/wd_additions_17.html
Solutions accepted with gratitude.
Can you post a link?
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu problem with IE6+7
thanks! the white iframe did go away, all works perfect on IE 6 but in
IE 7 the menu expands and only when rollover the sub menu it shrinks
back. Any idea how to fix that?
(I added both the head hack tag plus deleted the iframe from the JS)
thanks!!
Sh
On Fri, Mar 13, 2009 at 4:46 AM, Bill Brown macnim...@gmail.com wrote:
Sh wrote:
Hi,
I have a problem in IE (6+7) when mouse-over the menu where there's a
sub-menu (dreamweaver- spry), It shows a white cell under the sub
menu.
This doesn't show wither in FF, Safari and IE mac.
Any help will be greatly appreciated
Ah, SpryMenus. Hate's too strong a word, but it's close. What you're seeing
isn't actually a white cell, but rather an iframe hack included by the
SpryMenu JavaScript. It's frequently more harmful than helpful.
Your best solution is probably to remove the iframe creation part of the
javascript, or simply comment it out.
Another possible solution would be adding this to your site head tag:
!--[if lte IE 6]style type=text/css
.Menue iframe
{
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
/style![endif]--
That's completely untested for your site, but it works quite well on my
(home-grown, non-Spry) menus.
Best of luck.
Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
--
Sh
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 and whitespace.
Ian Young wrote: http://www.dbadvertising.co.uk/dev/home-test3.html The address image has extra space between it and the nav2 div above. Can't see any extra space _there_ in IE7 compared to in other browsers. However, it would be a good idea to prevent IE7 from seeing those IE6 fixed (the extra stylesheet), as those IE6 styles ruin the layout in IE7. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Hi Stephen,
Personally, I like to use dl for QA features with the dt tag as the question
and the dd tag as the answer. It gives me control over how the two different
elements appear (Q in bold for ex) without assigning id's.
Another method could be the alternating table rows trick, just with a ul
though. Example: li class=odd and alternate with li class=even and then
assign those classes with whatever styling you want.
Hope this helps!
Jenn Mears-Nickerson
Jenn Mears Web Design LLC
39B Northey Street
Salem, MA 01970
617-816-1209
LinkedIn
Facebook
Twitter
From: Stephen Tang clowwizarder...@gmail.com
Sent: Friday, March 13, 2009 11:37 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] Q and A (Question and Answer) format using ul
Hello,
I saw a FAQ page where it listed a question followed by an answer as
follows (fictional question and answer below):
Q. How do I login?
A. You log in by clicking on the login link.
The HTML markup is an unordered list (ul), where the list (li) have
background images for the Q. and A.
ul.QandA li.Q {
background:transparent url(../images/img_Q.gif) no-repeat scroll 0 2px;
padding:0 0 0 20px;
}
ul.QandA li.A {
background:transparent url(../images/img_A.gif) no-repeat scroll 0 2px;
padding:0 0 16px 20px;
}
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
I know the background image technique is well-known
(http://css.maxdesign.com.au/listutorial/introduction.htm), but since
in this example, it's just Q and A, I was hoping there is a way
not to use images.
Thanks,
Stephen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 and whitespace.
Ian Young wrote: I have fixed the conditional. That did the trick. It must be the IE tester then that is not displaying properly as the address png is most definitely down more than other browsers in the IE7 rendition. I compared side-by-side with the line-up in other browsers, but I can't see any deviation in in IE7 in IETester v.0.2 or v.0.3 (on XP) at my end. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 and whitespace.
To: Ian Young Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] IE7 and whitespace. Ian Young wrote: http://www.dbadvertising.co.uk/dev/home-test3.html The address image has extra space between it and the nav2 div above. Can't see any extra space _there_ in IE7 compared to in other browsers. However, it would be a good idea to prevent IE7 from seeing those IE6 fixed (the extra stylesheet), as those IE6 styles ruin the layout in IE7. Thanks Georg I have fixed the conditional. It must be the IE tester then that is not displaying properly as the address png is most definitely down more than other browsers in the IE7 rendition. Cheers Ian __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font size dilemma
Kathy Wheeler wrote:
Rather than blindly (bad term, I know) accepting the 100% font size,
wouldn't a better approach be to settle on a font-size that doesn't
make a client's site look like a kindergarten reader
I'm not sure why one's page should not be better than the crowd in
legibility. But assuming the goal you describe - which is surely what many
people and especially their bosses and clients call for - I'd like to
suggest one particular CSS technique for it.
Leave aside the font-size, as a CSS property, or as a propery of a font, for
a moment. What those people want is not small font size but small letters.
Then you could set, say,
body { font-family: Calibri, Vrinda, sans-serif; }
* { line-height: 1.2; }
At font-size 100%, assuming typical browser defaults, this should result in
a rendering that is acceptable to above-mentioned people. It may look too
small to many people who have not changed browsers from their defaults, but
simple change of font size, even on IE, should help them.
The point is that Calibri and Vrinda have letters that are small with
respect to the font size, so the text looks considerably smaller than, say,
Arial of the same size. Either of these fonts is available on the great
majority of computers, and regarding others, let's hope their sans-serif
pleases the user.
It seems that Vrinda has a large inherent line-height, so setting
line-height explicitly to 1.2 or even to a somewhat smaller value should be
helpful.
The biggest problem might be that Vrinda has a fairly limited character
repertoire (rather few accented characters, though ISO Latin 1 is covered)
and an oddly long hyphen (though the hyphen is clearly shorter than the end
dash). Calibri is much better in these respects, but it's less common.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font size dilemma
-Original Message-
From: Jukka K. Korpela [mailto:jkorp...@cs.tut.fi]
Sent: Friday, March 13, 2009 12:23 PM
To: CSS discuss
Subject: Re: [css-d] Font size dilemma
Leave aside the font-size, as a CSS property, or as a propery of a font, for
a moment. What those people want is not small font size but small letters.
Then you could set, say,
body { font-family: Calibri, Vrinda, sans-serif; }
* { line-height: 1.2; }
The point is that Calibri and Vrinda have letters that are small with
respect to the font size, so the text looks considerably smaller than, say,
Arial of the same size. Either of these fonts is available on the great
majority of computers, and regarding others, let's hope their sans-serif
pleases the user.
--
Working in the Graphic Design field I've seen and heard of a lot of fonts.
Calibri I have but do not have installed all the time and use it maybe a
couple times a month. And I've never heard of Vrinda. Because of the
inherent problems with calling out REAL typefaces I rarely do it. A few
exceptions might be:
{font-family: Helvetica, Helvetica55, Helvetica 55, HelveticaNeue, Helv,
Swiss721, Swiss721BT, Arial, Arial, sans-serif;}
{font-family: Garamond, GarmondITC, Garamond ITC, ITCGaramond, ITC
Garamond, Gatineau, serif;}
{font-family: Palatino, PalatinoLinotype, Palatino Linotype, Book
Antiqua, PalmSprings, Palm Springs, serif;}
But I usually only define them as serif or sans-serif. Less worrying that
way...
Your theory is an interesting one, though.
Mike
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 and whitespace.
Subject: Re: [css-d] IE7 and whitespace. I have fixed the conditional. That did the trick. It must be the IE tester then that is not displaying properly as the address png is most definitely down more than other browsers in the IE7 rendition. I compared side-by-side with the line-up in other browsers, but I can't see any deviation in in IE7 in IETester v.0.2 or v.0.3 (on XP) at my end. Thanks Georg, The layout had changed due to designer using a different strapline png. There are a couple of other things that I think will make a difference and may not need fixes Thanks as always for your input. Cheers Ian __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Hi Tim,
Thanks for that. I had forgotten about :before and :after
pseudo-classes. That would work, except in IE browsers. You answered
my question though. :-)
Thanks,
Stephen
On Fri, Mar 13, 2009 at 11:43 AM, Climis, Tim tcli...@indiana.edu wrote:
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
Sure. It's even easy.
li.Q:before {
content:Q: ;
}
li.A:before {
content:A: ;
}
http://www.w3.org/TR/CSS21/generate.html#before-after-content
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Hi Jenn,
Thanks for those ideas. I had not thought about just getting rid of
the bullet motif entirely. Both of your suggestions are worth
experimenting.
Thanks,
Stephen
On Fri, Mar 13, 2009 at 2:32 PM, Jenn Mears-Nickerson
j...@jennmearswebdesign.com wrote:
Hi Stephen,
Personally, I like to use dl for QA features with the dt tag as the
question and the dd tag as the answer. It gives me control over how the two
different elements appear (Q in bold for ex) without assigning id's.
Another method could be the alternating table rows trick, just with a ul
though. Example: li class=odd and alternate with li class=even and then
assign those classes with whatever styling you want.
Hope this helps!
Jenn Mears-Nickerson
Jenn Mears Web Design LLC
39B Northey Street
Salem, MA 01970
617-816-1209
LinkedIn
Facebook
Twitter
From: Stephen Tang clowwizarder...@gmail.com
Sent: Friday, March 13, 2009 11:37 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] Q and A (Question and Answer) format using ul
Hello,
I saw a FAQ page where it listed a question followed by an answer as
follows (fictional question and answer below):
Q. How do I login?
A. You log in by clicking on the login link.
The HTML markup is an unordered list (ul), where the list (li) have
background images for the Q. and A.
ul.QandA li.Q {
background:transparent url(../images/img_Q.gif) no-repeat scroll 0 2px;
padding:0 0 0 20px;
}
ul.QandA li.A {
background:transparent url(../images/img_A.gif) no-repeat scroll 0 2px;
padding:0 0 16px 20px;
}
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
I know the background image technique is well-known
(http://css.maxdesign.com.au/listutorial/introduction.htm), but since
in this example, it's just Q and A, I was hoping there is a way
not to use images.
Thanks,
Stephen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 and whitespace.
Ian Young wrote:
http://www.dbadvertising.co.uk/dev/home-test3.html
The address image has extra space between it and the nav2 div above.
The page looks completely blank on my IE 7. No idea why. No fancy browser
settings right now, and other pages work normally.
On Firefox, I see the warning
Varoitus: Odotettiin ,- tai {-merkkiä, mutta löytyi html.
Sääntökokoelma jätetty huomiotta virheellisen valitsijan vuoksi.
Lähdetiedosto: http://www.dbadvertising.co.uk/dev/includes/style-new.css
Rivi: 51
I guess that's Greek to you, but your copy of Firefox, or a CSS checker,
would probably give a report in English.
(Yes, I know it's some trick purported to hide something from naughty
browsers, but such tricks have their risks. It's easy to outsmart oneself in
CSS.)
Oh, and a markup validator finds some errors. There seems to be a /div tag
missing, and that could cause almost anything, even in CSS.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Els, I could make Q and A part of the content, but then if the content is more than one line, the second and subsequent lines would be right under the letter Q or A, which isn't what I had in mind. I was thinking of replacing a list bullet with the letter Q and A without using an image. --Stephen On Fri, Mar 13, 2009 at 11:45 AM, Els el...@tiscali.nl wrote: Stephen Tang wrote: I know the background image technique is well-known (http://css.maxdesign.com.au/listutorial/introduction.htm), but since in this example, it's just Q and A, I was hoping there is a way not to use images. I think that Q and A should be part of the content, not the styling. Without CSS and without images, the content of the page should still make sense, so I reckon you'll want to have the images for Q and A with alt text, or just plain text, in the HTML? -- Els __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Stephen Tang wrote:
Els,
I could make Q and A part of the content, but then if the content
is more than one line, the second and subsequent lines would be right
under the letter Q or A, which isn't what I had in mind. I was
thinking of replacing a list bullet with the letter Q and A without
using an image.
You could use something like dt, dd { text-indent: -1em; }
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Suckerfish in Wordpress - 'current page' in sub menu inheriting primary page's colors
I've put a bit of a hack in my CSS to achieve a current state on my top
horizontal navigation -- I'm using the Multilevel navigation plugin in
wordpress, which uses a version of suckerfish. The issue is that while the
current state is working fine for the top level, it is cascading down to
the sub levels as well. Please see
http://www.indivumed.com/wp.indivumed.com/?page_id=69 for an example --
hovering over Products and Services, the sub menu item Full pathology
service is highlighted in the same dark blue - but if should be highlighted
with a light blue. My code:
#suckerfishnav li.current_page_item,
#suckerfishnav li.current_page_parent,
#suckerfishnav li.current_page_ancestor { background:#4c90cc ; } // dark
blue background
#suckerfishnav ul li ul li.current_page_item,
#suckerfishnav ul li ul li.current_page_parent,
#suckerfishnav ul li ul li.current_page_ancestor {
background:#e4e7f3; } // light blue background
What am I missing?
Anne
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
