[css-d] Once again, IE6 positioning woes...

2008-04-14 Thread Darren Best
I have posted here a couple of times before.  I'm overhauling a non-profit's
table-based site to CSS.  I've now posted my testing pages to their site:
their old (and still real) site is
http://www.unemployedhelp.on.ca/clientswelcome.htm, while my version is
http://www.unemployedhelp.on.ca/clientswelcome.html (the suffix .html is
the only difference in the names).  My (bloated) stylesheet is at
/images/clientstyle.css.

My biggest headache is at http://www.unemployedhelp.on.ca/vrc/index.html.  I
wanted to make the h3 headers have a 46x46 px graphic on the left, then
position the text of the h3s to the immediate right of their respective
graphics.  In Firefox, it works.  In IE6, of course, it doesn't.  The
graphics show up in the right place, but the h3s get knocked down to the
bottom of the page.

Here is the relevant portion of the XHTML:

div id=vrcResumes
 h3spanReacute;sumeacute;s/span/h3
 /div

 (Repeated for vrcCoverLetters and vrcInterviews)


And here is the relevant portion of CSS code:

#vrcResumes, #vrcCoverLetters, #vrcInterviews {
 position: relative;
 }

 #vrcResumes h3, #vrcCoverLetters h3, #vrcInterviews h3 {
 height: 46px;
 margin: 0 0 0 0;
 }

 #vrcResumes h3 {
 background: url('vrc_resumetitle.png') left top no-repeat;
 }

 #vrcCoverLetters h3 {
 background: url('vrc_covertitle.png') left top no-repeat;
 }

 #vrcInterviews h3 {
 background: url('vrc_inttitle.png') left top no-repeat;
 }

 #vrcResumes h3 span, #vrcCoverLetters h3 span, #vrcInterviews h3 span {
 display: inline;
 font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
 font-size: large;
 position: absolute;
 left: 46px;
 bottom: 0;
 padding-left: 5px;
 vertical-align: middle;
 letter-spacing: 2px;
 height: 28px;
 width: 90%;
 color: #FF;
 background-color: #0F3063;
 border-top: 1px solid #4E688D;
 }


I know it has something to do with my use of absolute positioning in the
spans, but I don't know how to go about it in another way.  Any tips on
how to whip IE6 into shape, or do I just bite the bullet and do a full image
replacement on the entire h3 element?  Thanks in advance.

Darren Best
__
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] Once again, IE6 positioning woes...

2008-04-14 Thread Bill Brown
Darren Best wrote:
[snip]
 My biggest headache is at http://www.unemployedhelp.on.ca/vrc/index.html.  I
 wanted to make the h3 headers have a 46x46 px graphic on the left, then
 position the text of the h3s to the immediate right of their respective
 graphics.  In Firefox, it works.  In IE6, of course, it doesn't.  The
 graphics show up in the right place, but the h3s get knocked down to the
 bottom of the page.
[snip]

Hi Darren,

Beginning on lines 87 (ish), you have these elements:
#vrcResumes H3 SPAN
#vrcCoverLetters H3 SPAN
#vrcInterviews H3 SPAN

Removing the position:absolute from those elements and replacing it 
with display:block should help, if not fix the issue.

Let me know how you get on.

--Bill Brown
TheHolierGrail.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] Once again, IE6 positioning woes...

2008-04-14 Thread Bill Brown
[snip]
 My biggest headache is at http://www.unemployedhelp.on.ca/vrc/index.html.  I
 wanted to make the h3 headers have a 46x46 px graphic on the left, then
 position the text of the h3s to the immediate right of their respective
 graphics.  In Firefox, it works.  In IE6, of course, it doesn't.  The
 graphics show up in the right place, but the h3s get knocked down to the
 bottom of the page.
[snip]

Hi (again) Darren,

After further analysis, seems this (more complete) solution might be 
more helpful to you:

#vrcResumes H3 {
   margin:0px;
   padding-left:  46px;}
#vrcCoverLetters H3 {
   margin:0px;
   padding-left:  46px;}
#vrcInterviews H3 {
   margin:0px;
   padding-left:  46px;}
#vrcResumes H3 {
   background:url(vrc_resumetitle.png) no-repeat left 
bottom;
   padding-top:   25px;}
#vrcCoverLetters H3 {
   background:url(vrc_covertitle.png) no-repeat left 
bottom;
   padding-top:   25px;}
#vrcInterviews H3 {
   background:url(vrc_inttitle.png) no-repeat left bottom;
   padding-top:   25px;}
#vrcResumes H3 SPAN,
#vrcCoverLetters H3 SPAN,
#vrcInterviews H3 SPAN {
   background-color:  #0f3063;
   border-top:#4e688d 1px solid;
   display:   block;
   padding-left:  5px;
   font-size: large;
   color: #ff;
   font-family:   'arial narrow', arial, helvetica, sans-serif;
   letter-spacing:2px;}

If I'm way off-base here, let me know. Otherwise, it looks good from 
what I can see on my system (wirelessly Terminal Server Client-ed from 
my Ubuntu Desktop into my Toshiba Tablet running IE6/WinXP-SP2 in 
Multiple IE Standalone mode, -- don't ask, it gets weird).

Hope it helps!
Bill
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Once again, IE6 positioning woes...

2008-04-14 Thread Gunlaug Sørtun
Darren Best wrote:

 http://www.unemployedhelp.on.ca/vrc/index.html.

 I wanted to make the h3 headers have a 46x46 px graphic on the left, 
 then position the text of the h3s to the immediate right of their 
 respective graphics.  In Firefox, it works.  In IE6, of course, it 
 doesn't.  The graphics show up in the right place, but the h3s get 
 knocked down to the bottom of the page.

Position the span relative to its own headline...

#vrcResumes h3, #vrcCoverLetters h3, #vrcInterviews h3 {
height: 46px;
margin: 0;
position: relative;
}

...and IE/win will cooperate.

IE/win needs for an element to have Layout[1], so it can't absolute
position anything relative to the divs surrounding those headlines. The
'height: 46px' acts as perfect 'hasLayout' triggers on the headlines.

The divs surrounding the headlines are superfluous anyway, and may as
well be deleted. Just reassign the ID selectors to the relevant
headlines in markup and CSS, so you hit the right elements with your styles.


BTW: the 'display: inline' on all those off-screen positioned spans
has no purpose. An absolute positioned element is always 'display:
block', no matter what you declare on it.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
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] Font Sizes

2008-04-14 Thread Michael Adams
On Tue, 08 Apr 2008 18:43:14 -0500
Alan Gutierrez wrote:

 I'm noticing that when I specify font sizes using em, they are  
 slightly smaller in Firefox than in Safari. This becomes a problem  
 when the font sizes get smaller. In Safari they are the right size,  
 but in Firefox they are almost illegible.
 
 I couldn't dig anything up on Google, probably searching with the  
 wrong terms. Could anyone point me to a discussion of or article on  
 this particular quirk?
 

In theory this is part of the users right to control how large the font
is they are viewing themselves[1]. In practise this is not often reality
as most users are not aware they can control the default browser font
size.

To a web developer the optimum for accessibility is to not use a font
under 1em. In practise space in areas like sidebars can force many
developers to set a pixel font size[2]. What i try to do is specify my
fonts in ems and check that degredation is ok in IE at Largest font
setting and in Firefox for at least 3 Larger settings (found in the view
menu of both browsers) before becoming unreadable. Trying to have too
fine-grained control over fonts is a hangover many print designers
persist in hanging on to. Designing for the internet is a compromise on
many fronts.

One last thing you may wish to take into account is that different
monitors use different DPI[3] or PPI[4] settings. What may look good on
your LCD monitor may not look as good on an 800X600 15 CRT monitor,

These references (below) are less authoritative than illustrative, but
among them you will probably find the compromise that suits your
demonstration page. Zen Garden designers before you have employed
various methods to constrain fonts on their pages, many examples may be
found in the CSS there. Because it is demonstrative one should consider
if the techniques used there are techniques that should be employed in
practical sites, which also perhaps gives you permission to use more
fixed methods there as it is for demonstration purposes.

[1] http://kb.iu.edu/data/aiwf.html
[2] http://www.netmechanic.com/news/vol2/html_no11.htm
[3] http://en.wikipedia.org/wiki/Dots_per_inch
[4] http://en.wikipedia.org/wiki/Pixels_per_inch
-- 
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] Once again, IE6 positioning woes...

2008-04-14 Thread Darren Best
On 14/04/2008, Gunlaug Sørtun [EMAIL PROTECTED] wrote:


 Position the span relative to its own headline...

 #vrcResumes h3, #vrcCoverLetters h3, #vrcInterviews h3 {
height: 46px;
margin: 0;
position: relative;
 }

 ...and IE/win will cooperate.

 IE/win needs for an element to have Layout[1], so it can't absolute
 position anything relative to the divs surrounding those headlines. The
 'height: 46px' acts as perfect 'hasLayout' triggers on the headlines.


Bingo, thanks!  That did the trick.  After adding the relative positioning
for the h3s, the text started staying put.  After adding padding-top of
17px to the h3, and margin-left of 46px and display:block to the h3 spans
(thanks to Bill Brown for those!) I have what I was looking for!

The divs surrounding the headlines are superfluous anyway, and may as
 well be deleted. Just reassign the ID selectors to the relevant
 headlines in markup and CSS, so you hit the right elements with your
 styles.


Yes, I know that a bunch of my markup is pointless, and as I get a bit more
confident with my skills, I'll be able to get leaner with the code.
Sometimes I think that adding elements will make it more flexible, but I
think it often just ends up confusing me as I have to wade through more
possibilities as to what is messing up in the stylesheet.  Hopefully, I
haven't introduced too many bad habits for myself on my first try.

BTW: the 'display: inline' on all those off-screen positioned spans
 has no purpose. An absolute positioned element is always 'display:
 block', no matter what you declare on it.


Thanks, good to know and I appreciate it.  Positioning seems to be the
hardest thing about CSS to comprehend (at least for me), but I'm getting
there.

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
 --


An interesting read.  Explains a lot, too!

Darren Best
__
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] Combining multiple stylesheets and a padding question

2008-04-14 Thread Kenoli Oleari
Two questions:

Re combining multiple stylesheets--

Can someone provide me with the exact syntax for linking multiple  
stylesheets so they can be linked in an html head with a single link  
call.  What I want to do is to have one link in the head of my html  
document that links to a number of stylesheets or to one stylesheet  
that is somehow linked to a number of other stylesheets.

I need both the syntax for linking the stylesheets to a single  
stylesheet and the syntax that needs to be in the html head.

I've found references that say that this can be done using @import  
within a stylesheet linking it to others or link tags within a  
stylesheet with a common title attribute but I can't figure out the  
correct syntax at each end for doing this.

Re padding --

Why do the dimensions of a div get bigger when I change the padding  
in the div?  I thought padding simply indented content from the outer  
dimension of a div.  Is there any way to create padding in a div  
and keeping the outer dimensions of the div the same without  
decreasing the size of the div by the amount of the padding?

Here is the style where the padding is causing the size of the div to  
expand:

.titleDiv {
position:relative;
float: left;
width: 451px;
height:87px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 12px;
background-color: #FF00FF;
}

Thanks,

--Kenoli



Kenoli Oleari
1801 Fairview Street
Berkeley, CA  94703
Neighborhood Assemblies Network
510-601-8217, [EMAIL PROTECTED]
http://www.sfnan.org, http://www.horizonsofchange.com








Kenoli Oleari
1801 Fairview Street
Berkeley, CA  94703
Neighborhood Assemblies Network
510-601-8217, [EMAIL PROTECTED]
http://www.sfnan.org, http://www.horizonsofchange.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] Special how-to request

2008-04-14 Thread cj
On 4/12/08, Alan Gresley [EMAIL PROTECTED] wrote:
  IE8: A disaster. Broken pieces here and there. I would say this is since
   you have this.

just my two cents, but you might think twice about taking the time to
make your site display correctly in IE8 at this point because IE8 is
still in its first beta.  many changes will be made to IE8 before it's
released, and you'd have to go back through your site again to update
it.
__
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] Combining multiple stylesheets and a padding question

2008-04-14 Thread Alan K Baker
- Original Message - 
  From: Kenoli Oleari 
  To: CSS Mailing List 
  Sent: Monday, April 14, 2008 2:27 PM
  Subject: [css-d] Combining multiple stylesheets and a padding question


  Two questions:

  Re combining multiple stylesheets--

  Can someone provide me with the exact syntax for linking multiple  
  stylesheets so they can be linked in an html head with a single link  
  call.  What I want to do is to have one link in the head of my html  
  document that links to a number of stylesheets or to one stylesheet  
  that is somehow linked to a number of other stylesheets.

  I need both the syntax for linking the stylesheets to a single  
  stylesheet and the syntax that needs to be in the html head.

  I've found references that say that this can be done using @import  
  within a stylesheet linking it to others or link tags within a  
  stylesheet with a common title attribute but I can't figure out the  
  correct syntax at each end for doing this.

  Re padding --

  Why do the dimensions of a div get bigger when I change the padding  
  in the div?  I thought padding simply indented content from the outer  
  dimension of a div.  Is there any way to create padding in a div  
  and keeping the outer dimensions of the div the same without  
  decreasing the size of the div by the amount of the padding?

  Here is the style where the padding is causing the size of the div to  
  expand:

  .titleDiv {
  position:relative;
  float: left;
  width: 451px;
  height:87px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  padding: 12px;
  background-color: #FF00FF;
  }

  Thanks,

  --Kenoli


  Kenoli.

  I think what you want is in this example:

  @import 'global.css';
  @import 'nav.css';
  @import 'right.css';
  @import 'left.css';

  which can be in the top a stylesheet which is linked in the HTML.

  The reason that the div size increases with the padding (and margins) is 
because the browser calculates the over-all size of the div as the sizes you 
state for the div and then adds the padding and margins to work out the 
over-all size. If you want to keep the div to your chosen size, then subtract 
any padding and margins from the appropriate width or height.

  i.e.

  .divsize {
  width:100px;
  height:100px;
  margin:0;
  padding:0;
  }

  will give you a box of exactly 100px wide x 100px high.

  .divsize {
  width:100px;
  height:100px;
  margin:10px 0 10px 0;
  padding:0 5px 0 5px;
  }

  will give you a box of 110px wide x 120px high.

  so using your example to get back to the size you actually state, you'd have 
to redefine like:

  .titleDiv {
  position:relative;
  float: left;
  width: 427px; /* was 451px */
  height:63px; /* was 87px */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  padding: 12px; /* Don't forget that this is padding on all sides so has 
to be counted double in the width/height calc! */
  background-color: #FF00FF;
  }

  I hope this helps.

  Regards, 
   
  Alan.
   
  www.theatreorgans.co.uk
  www.virtualtheatreorgans.com
  Admin: ConnArtistes, UKShopsmiths, 2nd Touch  A-P groups
  Shopsmith 520 + bits
  Flatulus Antiquitus
__
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] Changing font-size for individual font-family items

2008-04-14 Thread Zack Frazier

There is no way to do this without scripting - at least not in non-IE  
browsers.

While you don't have access to the user's fonts, on page load you  
could insert an element with a single character inside and measure the  
height. You could determine the height for your preferred font and  
compare the values. If the values don't match you could assume they  
don't have your font and then adjust the size accordingly - all with  
scripting, of course.

This technique, however, is not fail-safe as users may have changed  
the font size manually which will return you different values.

Overall though, I would recommend against using that font in favor of  
a more common one (see http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html) 
 If that is not possible, you might try Verdana as your fall back  
instead of Arial - it also appears slightly larger at 16px.

Good luck.

Zack Frazier
--
Senior Developer
VSA Partners, Inc.
1347 South State Street
Chicago, Illinois 60605
http://www.vsapartners.com


 Does CSS provide any way to do something like this:

 if (TW Cen MT is available) then 16px else 13px
 or even
 if (TW Cen MT) then 16px elseif (Arial) then 13px elseif (Helvetica)  
 then
 13px elseif (sans-serif) then (13px) endif
__
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] Special how-to request

2008-04-14 Thread Alan Gresley
cj wrote:
 On 4/12/08, Alan Gresley [EMAIL PROTECTED] wrote:
  IE8: A disaster. Broken pieces here and there. I would say this is since
   you have this.
 
 just my two cents, but you might think twice about taking the time to
 make your site display correctly in IE8 at this point because IE8 is
 still in its first beta.  many changes will be made to IE8 before it's
 released, and you'd have to go back through your site again to update
 it.


I never said anything about fixing the problems in IE8. I said that 
style rules meant for IE6 or IE7 bug behavior should not be given also 
to IE8. These could be from [if IE] Conditional comments or CSS hacks. 
The current bugs with IE8 is for MS to fix.


Alan

http://css-class.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] z-index issue

2008-04-14 Thread corey deep
Hi,

I am working on a layout which involves element overlapping and i'm
concerned that I am not setting the stack order correctly.
The reason I need to set stack order is that I have overlapping interface
elements which must display above of the other content.


example:

/* CSS */

#step_two_heading_wrapper {
position: relative;
height: 20px;
}

#step_two_heading {
background: transparent url(../images/step_two_heading.png) no-repeat
top left;
* background: none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='../images/step_two_heading.png',sizingMethod='scale');
width: 443px;
height: 29px;
margin-left: 1px;
margin-top: -8px;
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}

!-- HTML --

 div id=step_two_heading_wrapper
div id=step_two_heading
h3Step two Heading /h3
/div
/div
__
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] Font-Family: Calibri, Verdana, ...

2008-04-14 Thread Sam Carter

Font-family: Calibri, Verdana, Ariel, sans-serif;

Is there a solution which will size Calibri so it roughly matches Verdana
and Ariel (which works cross-browser)?

(Calibri is a new MS font which renders about 20% smaller than Verdana.)

__
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] Font-Family: Calibri, Verdana, ...

2008-04-14 Thread Jukka K. Korpela
Sam Carter wrote:

 Font-family: Calibri, Verdana, Ariel, sans-serif;

A strange list. Note that a font called Ariel probably does not exist; 
Arial does.

 Is there a solution which will size Calibri so it roughly matches
 Verdana and Ariel (which works cross-browser)?

No (because font-size-adjust does not work on the majority browser). 
Scripting might give a partial answer.

 (Calibri is a new MS font which renders about 20% smaller than
 Verdana.)

Well, maybe, for some values of %. But I think

font-family: Calibri, sans-serif;

is OK. I know that Calibri is good when available. If not, I can't 
really tell whether Arial is an improvement over the browser's generic 
sans-serif. Verdana isn't.


Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/ 

__
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] Superfish/Sprites IE6 navigation menu problems

2008-04-14 Thread D
Hi all,

I'm back to the list that taught me all I know today. I used to read this list 
every day 4 or 5 years ago and learned a lot. Now I'm back and I need a little 
help.

A client of mine asked for a menu which has subnavs that appear when you roll 
over the main nav. Well, I have this all created and finished, in 
Firefox/Safari/any other decent browser, but IE6 is really giving me a hard 
time. The subnavs do not appear at all in ie6. I kind of see why not but I 
still can't get it working. The sprite main navs all have widths on them of 
150px. IE6 is passing that width on somehow to the subnav li elements. I have 
tried redeclaring the subnavs to have a width of auto but that isn't working. I 
tried playing with the floats and display: inlines and blocks but am getting 
nowhere.

I also know it's not a sfHover/jQuery/Superfish javascript bug as liek i said 
if you change the width from 150px to say 50px you'll see the subnavs but not 
in the right place.

I also realize IE7 is a little mangled with the sub menus but for the most part 
is working ok.

Any help and I would greatly appreciate it so much, thanks in advance,
David

Testpage set up here:
http://rossinteractive.com/projects/testnav/

CSS here:
http://rossinteractive.com/projects/testnav/css/screen.css



__
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] Inconsistent behavour with z-index in IE6/7

2008-04-14 Thread Alan K Baker
Hi all.

I just came across another discrepancy with IE6 and IE7.

I'm using some gradients as borders/separators and some even have a border 
color set.

To get the effect that I want, it's important that they overlap in the right 
order, so I'm using z-index to set the priority.

The stylesheet is fairly conventional with a site container, navbar, header and 
main contents.

I've put the home page up for inspection at:

http://www.webbwize.co.uk/Test_Area/TEP/index.htm

and the CSS is at:

http://www.webbwize.co.uk/Test_Area/TEP/scripts/stylesheet.css


What should be seen is the header with a top horizontal gradient border with 
appropriate white and gray border colors set, along with two vertical gradient 
borders, also with appropriate white and gray border colors set. Under this 
there should be a header bottom gradient border with appropriate white and gray 
border colors set, and lastly there should be an empty main container, which is 
described in the div #homecontent {}. All of the gradient borders should be 
fully visible apart from where they overlap each other. This is the case in 
Firefox, Opera and Safari.

In IE6 and IE7 the #homecontent box is being drawn over the lower gradient 
border, even though its z-index is set to 0 and all of the gradient borders are 
set above 0. I've given #homecontent a red border (which would not normally be 
there) to demonstrate the top edge of the lower div. If there was no 
background color set and no border on #homecontent, the effect would not be 
seen. The only way to make IE6/7 behave is to set z-index to -1 (or [I think] 
any negative number) or to set the header container ( #homehead ) z-index to 1 
(probably the right solution).

I wonder if this has been documented anywhere?

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch  A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus

__
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] Font size

2008-04-14 Thread Hayden's Harness Attachment
I do not know if this is the right list for this question. I use the following 
in the CSS for a web site I maintain.

* {
margin: 0;
padding: 0;
}
html {
height: 100%;
font-size: 80%;
}
body {
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 10px 10px;
padding: 5px 0px 10px;
}
#wrapper {
}
#header {
min-height:142px;
}
h1 {
color: #F0;
background: #8B;
font-size: 1.5em;
text-align: center;
line-height: 72px;
white-space: nowrap;
display: block;
}

And I am told repeatedly that my fonts are to larger. I use a screen reader 
with Firefox so I am not really concerned with font size. I have a lot of 
viewers from perfect site to totally blind like myself. What is your advice on 
font size? I have alot of IE and Firefox users.

Angus MacKinnon
Infoforce Services
http:ééwww.infoforce-services.com

It is impossible to rightly govern the world without God and the Bible.
George Washington

__
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] Font-Family: Calibri, Verdana, ...

2008-04-14 Thread Bill Brown
Sam Carter wrote:
[snip]
 Font-family: Calibri, Verdana, Ariel, sans-serif;
 
 Is there a solution which will size Calibri so it roughly matches Verdana
 and Ariel (which works cross-browser)?
 
 (Calibri is a new MS font which renders about 20% smaller than Verdana.)
[snip]

Hi Sam.

You could use a javascript-ed solution which works in conjunction with 
CSS in this manner (pseudo-code ...ish):

You create a span in your source code.
In your CSS, style it with {font-family:Calibri,monospace;}.
Then, create another span with the same content.
Set your CSS for this box to be {font-family:monospace;}.
Do a quick javascript test: if those two spans have equal width, then 
the user does not have Calibri on their system. Act accordingly (like 
load a different stylesheet, adjust font-size, and so on).

If you need help writing something that'll work for you, let me know.

Best,
Bill Brown
TheHolierGrail.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] Font size

2008-04-14 Thread Bill Brown
 And I am told repeatedly that my fonts are to larger. I use a screen
 reader with Firefox so I am not really concerned with font size. I
 have a lot of viewers from perfect site to totally blind like myself.
 What is your advice on font size? I have alot of IE and Firefox
 users.


Hi Angus.

Your site looks just fine to me. Additionally, you've wisely allowed the 
user (especially IE users) the ability to change their font size. Using 
a pixel based setup would have locked some IE users out of their browser 
widget functionality.

I use a similar system on TheHolierGrail.com with a site-based text 
re-sizer which you're welcome to use if you like. Might help calm the 
rowdy masses.

Best Regards,
Bill Brown
TheHolierGrail.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] Font size

2008-04-14 Thread Jens Brueckmann
 I am told repeatedly that my fonts are to larger. I use a screen reader with
 Firefox so I am not really concerned with font size. I have a lot of viewers 
 from
 perfect site to totally blind like myself. What is your advice on font size?

Hi Angus,

presumably the site in question has a similar font size to your site
Infoservice.

This site is indeed difficult to read for me as a sighted user; but
the font size itsself is not what troubles me, it is the line height
and line length. The height being too small so that lines are too
narrowly spaced and the line length to long.

If you would add something like

p {
max-width: 60em;
margin: 1.5em auto;
line-height: 1.6em;
  }

to your CSS, the page becomes far more readable (at least for me).

Cheers,

jens

-- 
Jens Brueckmann
http://www.yalf.de
__
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] Font size

2008-04-14 Thread Felix Miata
On 2008/04/14 11:56 (GMT-0700) Hayden's Harness Attachment apparently typed:

 html {
...
 font-size: 80%;
 }
 body {
...
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
...
 And I am told repeatedly that my fonts are to larger. I use a screen reader 
 with Firefox so I am not really concerned with font size. I have a lot of 
 viewers from perfect site to totally blind like myself. What is your advice 
 on font size? I have alot of IE and Firefox users.

 Angus MacKinnon
 Infoforce Services
 http:ééwww.infoforce-services.com
 It is impossible to rightly govern the world without God and the Bible.
 George Washington

Do you think Jesus would use CSS like that? By using it, you're in essence
saying to each visitor You have incorrectly determined the best family,
weight and size text for yourself to read comfortably using your web browser,
so I'm going use my CSS power to usurp your decision.

Even though Jesus would actually know the best size for each visitor,
something you as webmaster or designer are incapable of knowing, I think he'd
probably leave it up to each visitor to make his own mistakes, and set
neither family, nor size, nor weight for you in either _body_ or _html_
elements. To do otherwise is simply rude. Some non-zero portion of the
universe does in fact have them correctly set, whether done passively or
actively. You can't know how many, which shouldn't matter anyway.

Visitors who complain about text size on sites where you have set body and/or
html font-size to 100% need to be told it's their own job to choose the best
size within their own viewing environment, because you are incapable of
knowing what's best outside your own environment. The closest thing there is
to a safe assumption is that each and every visitor has in fact set the best
size for his or herself, and that this decision needs to be respected, by
virtually never setting any size other than 100%/1em/medium on either html or
body.

http://www.informationarchitects.jp/100e2r?v=4

All the above does not imply that text size should never be set on elements
other than html or body. There are perfectly valid reasons to vary _portions_
of web pages from the users' preferences for text size, family  weight, but
not for blanket overrides cascading from html  body.
-- 
Either the constitution controls the judges, or the
judges rewrite the constitution. Judge Robert Bork

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.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] Inconsistent behavour with z-index in IE6/7

2008-04-14 Thread Gunlaug Sørtun
Alan K Baker wrote:

 I just came across another discrepancy with IE6 and IE7.

 http://www.webbwize.co.uk/Test_Area/TEP/index.htm

 In IE6 and IE7 the #homecontent box is being drawn over the lower 
 gradient border, even though its z-index is set to 0 and all of the 
 gradient borders are set above 0.

 I wonder if this has been documented anywhere?

#homehead {
z-index: 1;
}

... _is_ the right solution in your case, since IE/win can't stack
children higher than their own A:P or R:P parents relative to elements
outside their parents, no matter what.

This IE/win stacking bug has been around since forever. It is often
mentioned (and lost) in articles about something else, since one has to
work around this bug for all sorts of constructions that rely on
stacking. Can't remember where I read about it first - around 10 years
ago, so google around.

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] Inconsistent behavour with z-index in IE6/7

2008-04-14 Thread David Laakso
Alan K Baker wrote:
 I just came across another discrepancy with IE6 and IE7.

 I'm using some gradients as borders/separators and some even have a border 
 color set.

 To get the effect that I want, it's important that they overlap in the right 
 order, so I'm using z-index to set the priority.


 http://www.webbwize.co.uk/Test_Area/TEP/index.htm


 http://www.webbwize.co.uk/Test_Area/TEP/scripts/stylesheet.css

  
  
 Alan.
  
   





I think you may want to evaluate your priorities. Produce a structurally 
sound page that withstands user discretion, and the gradient issue you 
wrote about will be exactly what it is-- a trivial and insignificant 
pursuit.

-- 
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] Site Check Please: IE 6 / CSS Zen Garden Project

2008-04-14 Thread Elli Vizcaino
Hello,

I was given the CSS Zen Garden project as a design
test and I have something up on my server that I'm
working on:
http://e7flux.com/csszengarden/chaoticspring.html 

I've checked across IE6, 7,  8, FF Windows  Mac and
Safari Mac. They all seem fine except in IE6. The last
time I checked via www.browsershots.org the layout was
completely broken and looks like this in IE6:
http://e7flux.com/csszengarden/ie6.png - Is this the
haslayout bug? Haven't been able to get a screenshot
from  browershot.org in over an hour. Can someone
check and tell me if it's still broken and if so, how
can I fix it?

TIA,
Elli 


  

Be a better friend, newshound, and 
know-it-all with Yahoo! Mobile.  Try it now.  
http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ
__
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] Column width different in IE6

2008-04-14 Thread Ronnie Ugulano
Dear All,

I'm redesigning my website to phase out the few lingering tables, and I've 
run into a problem. On this page, in IE6

http://test.priswell.com/new/enable.htm

The main center column (div id col1) doesn't quite hit up against  the farthest 
right column that contains the menu (div id col2)

but on this page, 

http://test.priswell.com/new/cskools.htm

even though the column width is set to the same width, it's too wide for the 
space allowed and so it's bumped to below col1.In Firefox, there is no 
difference. How do I get the pages to display the same in IE6?

Style sheet:
http://test.priswell.com/new/style2.css~Ronnie  [EMAIL 
PROTECTED]://homeschool.priswell.com/Improving the community one kid at a time
__
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] Inconsistent behavour with z-index in IE6/7

2008-04-14 Thread Alan K Baker
As I already have a fix, I agree that it's no big deal, but in the interests of 
knowledge furtherance, I don't believe that it's a trivial pursuit. :-)

Had there not been a fix, it would have been a major issue.

Regards, 
 
Alan.
 
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch  A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus


  - Original Message - 
  From: David Laakso 
  To: Alan K Baker 
  Cc: css-d 
  Sent: Monday, April 14, 2008 9:21 PM
  Subject: Re: [css-d] Inconsistent behavour with z-index in IE6/7

  I think you may want to evaluate your priorities. Produce a structurally 
  sound page that withstands user discretion, and the gradient issue you 
  wrote about will be exactly what it is-- a trivial and insignificant 
  pursuit.

  -- 
  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] when are 2 external css called for?

2008-04-14 Thread Bill Brown
John wrote:
[snip]
  This has been an excellent thing for me to learn in my
  greenhorn-hood..
 
  As I adjust my pages to work with this new combined style sheet, I'm
   adding id=index to every instance of my p tags; my space
  after design employs a pparagraph's worth of text/p
  pparagraph's worth of text/p, so every p needs adjusting.
 
  Is there a way to say All of these p are now p id=index?
[snip]

Hi John,

Id's are kinda like database indexes, and they must be unique (like a 
primary key). Your choices are to ignore this and do it anyway (the 
glory and freedom of the internet); change to class=index; or add an 
auto incrementing value to the id: id=index1,id=index2,id=index3.

If it was me, I'd change them to classes and then use a Javascript 
function to change any non-index-class ps into p class=index with 
a little javascript like this:

var convertParasToIndexParas = function () {
   var allParas = document.getElementsByTagName(P),
   i = allParas.length;
   while (i--) {
 if (allParas[i].className.indexOf(index)1) {
   allParas[i].className = allParas[i].className +  index;
 }
   };
};
window.onload=convertParasToIndexParas;

Ideally, the window.onload function should be routed through an Event 
Manager (google:addEvent). I like Dean Edwards' solution for this.

Anyway, then, style away in your style sheet like so:
p{
   background: #e1;
   border: 1px solid #ccc;
   margin-top: 0;
   padding: 2px 5px;}

Hope it helps!
Bill Brown
TheHolierGrail.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] when are 2 external css called for?

2008-04-14 Thread Ryan Doherty

On Apr 14, 2008, at 4:29 PM, Bill Brown wrote:
 John wrote:
 [snip]
 This has been an excellent thing for me to learn in my
 greenhorn-hood..

 As I adjust my pages to work with this new combined style sheet, I'm
 adding id=index to every instance of my p tags; my space
 after design employs a pparagraph's worth of text/p
 pparagraph's worth of text/p, so every p needs adjusting.

 Is there a way to say All of these p are now p id=index?
 [snip]

 Hi John,

 If it was me, I'd change them to classes and then use a Javascript
 function to change any non-index-class ps into p class=index  
 with
 a little javascript like this:

 var convertParasToIndexParas = function () {
   var allParas = document.getElementsByTagName(P),
   i = allParas.length;
   while (i--) {
 if (allParas[i].className.indexOf(index)1) {
   allParas[i].className = allParas[i].className +  index;
 }
   };
 };
 window.onload=convertParasToIndexParas;

 Ideally, the window.onload function should be routed through an Event
 Manager (google:addEvent). I like Dean Edwards' solution for this.

I would strong advise against something like this just to add a css  
class to all instances of an element on a page. When you do something  
like this, you should be taking advantage of what CSS was meant for:  
cascading. It's also a bunch of unnecessary javascript that will be  
run on every page load.

I'd recommend attaching a class to a parent container (usually the  
body tag or a wrapper div) called 'index' and use css to style your p's:

body class=index
 phere's my text/p
/body

.index p {
 //styles here
}

This is similar to other replies on this thread.

Ryan Doherty
[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-d] img referencing another page has a border. How to lose border?

2008-04-14 Thread John Griessen
I'm using restructuredtext to generate html and get a colored border
around an image link, but don't want it.

I have an example at

http://ecosensory.com/

which uses style sheets http://ecosensory.com/default.css
ecosensory_leo_rst.css, silver_city.css

The .css files have just one use of :link and :visited, and I can make the
color change, but not lose the blue border.

I tried border-width: 0;
in a selector without getting the result I expected from reading w3c.org docs 
on css 2.1.

I can make docutils restructuredtext generate html and also pass along 
unchanged html,
so for a case where it fails to give me usable html, I can just output some as 
is.



Have I got a cascading precedence order affecting me?

Thanks,

John Griessen
-- 
Ecosensory   Austin TX
__
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] img referencing another page has a border. How to lose border?

2008-04-14 Thread Philippe Wittenbergh

On Apr 15, 2008, at 9:26 AM, John Griessen wrote:
 I'm using restructuredtext to generate html and get a colored border
 around an image link, but don't want it.

 I have an example at

 http://ecosensory.com/

 which uses style sheets http://ecosensory.com/default.css
 ecosensory_leo_rst.css, silver_city.css

 The .css files have just one use of :link and :visited, and I can  
 make the
 color change, but not lose the blue border.

img, a img {border:none;}

Throughout your stylesheet I saw the use of cm (centimetre, for  
margins), pt (point). Those are not suitable for screen usage - use em  
or px.

color:none is invalid
http://www.w3.org/TR/CSS21/colors.html#propdef-color

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] Full-height left column in fluid layout.

2008-04-14 Thread Richard Grevers
On 4/10/08, David Laakso [EMAIL PROTECTED] wrote:
 Richard Grevers wrote:

  http://www.vine.org.nz/index.php/services uses a
 negative-margin based
   How can I make the left-column
  (which is sized in ems) full height?
 
  http://www.vine.org.nz/index.php - complicated by the
 presence of
  the two-column masthead, which may mess up 100% heights.
 
  This is one way to do it  (providing this link is not totally mangled in
 transmission):
 http://www.fu2k.org/alex/css/onetruelayout/example/interactive?order=2-1-3width=33-34-33equal_height=1longest=1time=1207745223288
  -- and check the make columns equal height box.

  And also:
  http://www.satzansatz.de/cssd/companions.html

Having had problems with onetruelayout before, I tried Gunlaug's
companion column example.
Footerstickalt is now working correctly on both short and long pages,
but .leftcol still doesn't appear full length

In Opera and Firefox, the long page example (
http://www.vine.org.nz/index.php/adult-classes ) shows a gap between
content and footer, and the sample text and outline I included in the
companion column for testing purposes are visible, but not its
background.
Any further clues?
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] Full-height left column in fluid layout.

2008-04-14 Thread Bill Brown
 In Opera and Firefox, the long page example (
 http://www.vine.org.nz/index.php/adult-classes ) shows a gap between
 content and footer, and the sample text and outline I included in the
 companion column for testing purposes are visible, but not its
 background.
 Any further clues?

Not to be entirely self-promoting, but have you taken a look at 
theholiergrail.com? I can send you the ZIP/RAR if it looks like it might 
meet your needs.

Lemme know if it can help.

Bill Brown
TheHolierGrail.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] Full-height left column in fluid layout.

2008-04-14 Thread Richard Grevers
On 4/15/08, Richard Grevers [EMAIL PROTECTED] wrote:
 On 4/10/08, David Laakso [EMAIL PROTECTED] wrote:
   Richard Grevers wrote:
  
http://www.vine.org.nz/index.php/services uses a

And also:
http://www.satzansatz.de/cssd/companions.html
  

 Having had problems with onetruelayout before, I tried Gunlaug's
  companion column example.
  Footerstickalt is now working correctly on both short and long pages,
  but .leftcol still doesn't appear full length

  In Opera and Firefox, the long page example (
  http://www.vine.org.nz/index.php/adult-classes ) shows a gap between
  content and footer, and the sample text and outline I included in the
  companion column for testing purposes are visible, but not its
  background.
  Any further clues?

Aaaargh! After playing around for 2 hours I finally post to the list,
then 2 minutes later I find an errant background-color which is
overriding .leftcol

But I still have the problem of the gap (stripe of background colour)
in FF/Opera, plus the client will want the left column to go all the
way to the bottom (or a narrow footer)

-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
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] Font Sizes

2008-04-14 Thread David Hucklesby
On Tue, 8 Apr 2008 18:43:14 -0500, Alan Gutierrez wrote:
 I'm noticing that when I specify font sizes using em, they are slightly 
 smaller in
 Firefox than in Safari. This becomes a problem when the font sizes get 
 smaller. In
 Safari they are the right size, but in Firefox they are almost illegible.

 I couldn't dig anything up on Google, probably searching with the wrong 
 terms. Could
 anyone point me to a discussion of or article on this particular quirk?


Yes. I have noticed that, even using carefully calculated EMs or percents,
there are differences between browsers. But this is usually only by one
pixel, and seems to be due to (1) the number of decimal places a browser
actually uses, and (2) how a particular browser rounds the calculated
resulting font-size to come up with a whole number of pixels.

This is also affected by a number of other factors, of which only the
font-size on the outermost container is under a designer's control.
While the size also depends on the actual fonts available on a visitor's
machine, you can mitigate somewhat by selecting a list of fonts of
comparable size. Avoid, for example, using Verdana with Arial.

For this and other reasons, I suggest you use a base font-size of 100%.
(By base font-size I mean that specified on, say, the HTML selector,
although you can also defer this to a container further in.)

I also recommend you use nothing smaller than 75%, and that only for
copyright notice, document date, or such.

Michael Adams already sent you some useful additional information.
Hopefully these help.

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/


[css-d] 2 col linked, single list element

2008-04-14 Thread Brian Cummiskey
Hi Guys,


I need a list with 2 columns, all as one anchor, ala:
http://tinypic.com/view.php?pic=rby7f6s=3


I'm currently using
lia href=span class=catsection 1/spanspan 
class=prodsection 2/span/a/li


On hover, the whole background needs to swap the full width of the li 
(the list is superimposed over a bg image, and on hover, the background 
of the anchor gets a 'hilight' state of the bg)


I've tried everything from floats to relative positions to inline-block 
and nothing works 100%.

Anyone have any ideas?

__
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] Font Sizes

2008-04-14 Thread Felix Miata
On 2008/04/14 19:52 (GMT-0700) David Hucklesby apparently typed:

 On Tue, 8 Apr 2008 18:43:14 -0500, Alan Gutierrez wrote:

 I'm noticing that when I specify font sizes using em, they are slightly
 smaller in Firefox than in Safari. This becomes a problem when the font
 sizes get smaller. In Safari they are the right size, but in Firefox
 they are almost illegible.

 Yes. I have noticed that, even using carefully calculated EMs or percents,
  there are differences between browsers. But this is usually only by one 
 pixel, and seems to be due to (1) the number of decimal places a browser 
 actually uses, and (2) how a particular browser rounds the calculated 
 resulting font-size to come up with a whole number of pixels.

Browser rounding differs not only by browser, but also by platform. Now that
Safari exists on both doz and Mac, one must be specific discussing what
Safari does. Safari (v3.x) seems to round on doz identically to FF, while
on Mac noticeably not identical: http://fm.no-ip.com/SS/Fnt/rounding-SS.html

Hopefully this FF difference will disappear in FF3, but not having a new
enough OS X version to run FF3, I can't test for any difference.
-- 
Either the constitution controls the judges, or the
judges rewrite the constitution. Judge Robert Bork

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.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/