Re: [css-d] 120DPI system fonts wreak havoc in certain browsers

2008-02-21 Thread Gunlaug Sørtun
Felix Miata wrote:
 On 2008/02/18 13:15 (GMT-0500) Jeff Blaine apparently typed:

 Can anything be done from the CSS/XHTML end?
 
 CSS has no way to know DPI.

It does, actually...
http://www.w3.org/TR/css3-mediaqueries/#resolution
...and it already works in a few browsers.

Constructions like this...

@media screen and (min-device-width: 1650px) and (min-resolution: 100dpi) {
html body #wrapper {font-size: 115%;}
}

...will give better control over the final result - once support grows.
Latest Opera(beta) and Safari are ready for testing now.

What that control is used for is another matter, as control is
relative and applying too much control is often counter-productive and
tends to lead to failure.
In-depth knowledge of the wide range of combinations of
hardware/software/user-options before trying to control anything, is a
must in web design.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] Is this a CSS problem?

2008-02-21 Thread Kevin Stevens
I have some time on my hands at the moment so I have decided to update 
some of my old site, replacing tables with CSS. One of these sites, 
http://www.compvoltalk.co.uk/ , is to be used by visually impaired 
people so I decided to add a switcher that enlarges the text. To do this 
I built on an ASP script that I already use on the site to change the 
contrast. The switcher works perfectly in FireFox and Safari, but not in 
any version of IE I have tried, and I have no idea why. The URL changes, 
but the text size does not, and what I can't figure out is if this is a 
CSS bug with IE or a problem with my ASP. Apologies if it is the latter, 
I realise this would not be appropriate for this list, but I posted this 
up on the Evolt list and didn't get a satisfactory answer.
   So, is this a CSS problem and, if so, any ideas how I can solve it?

Thanks

-- 
Kevin Stevens
www.ratking.co.uk



__
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] Is this a CSS problem?

2008-02-21 Thread Jukka K. Korpela
Kevin Stevens wrote:

 I have some time on my hands at the moment so I have decided to update
 some of my old site, replacing tables with CSS.

In general, it's more fruitful to design new pages or redesign pages 
than to change existing code just to clean it up (which is what 
replacing tables with CSS tends to mean).

 One of these sites,
 http://www.compvoltalk.co.uk/ , is to be used by visually impaired
 people so I decided to add a switcher that enlarges the text.

Even IE users can change the basic font size, and users of other 
browsers usually have even better controls. There's the drawback that on 
IE, you can only select between five sizes, but users to whom this is a 
problem have needed to find out to use various auxiliary tools, like 
user style sheets or zooming. So in effect, separate size controls on a 
per-site or per-page basis don't really help much. And, in fact, they 
may confuse and distract.

If you do that, then it's probably best to use a presentation for the 
controls that resembles things your visitors may have seen elsewhere. 
The most common presentations I've seen are
a) a row of icons (images) indicating different sizes
b) icons with symbols like plus and minus, or other icons indicatíng 
increase or decrease
c) dropdown menus.
Any of these can easily be formatted in a fairly compact way, so that 
the size controls don't eat up half of the available space.

 The URL changes, but the text size does not, and what I can't
 figure out is if this is a CSS bug with IE or a problem with my ASP.

It's even more difficult to us, since we cannot see the ASP code. The 
switching takes place there, and we cannot know how - CSS has no direct 
access to data passed in the URL.

But wait I think this _is_ a CSS problem after all, since e.g. 
selecting the default size and the smallest of the sizes*) results in a 
page containing the element

link rel=alternative stylesheet href=default_text.css media=all 
type=text/css

The correct spelling is rel=alternate stylesheet, but you really want 
rel=stylesheet, since IE does not support alternate stylesheets at 
all, so far. Logically, it's alternat(iv)e, but technically, in the CSS 
sense, it should be declared just a style sheet for the page 
(technically, a persistent style sheet, which will always be used, not 
just selectable by the user via browser controls).

*) Note: There are vision impairments that make a font size _smaller_ 
than the common default preferable. However, people with such an 
impairment, if it is serious, have probably already set their browser to 
use a suitable small size, and since you set the font size to 1em in the 
default style sheet (100% is better since it avoids some browser bugs), 
they will see your page in their preferred font size and won't any need 
font size controls there.

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/


Re: [css-d] Is this a CSS problem?

2008-02-21 Thread David Laakso
Kevin Stevens wrote:
 http://www.compvoltalk.co.uk/
So, is this a CSS problem and, if so, any ideas how I can solve it?

 Thanks

   

I doubt it.
You may want to start here, though...
http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.compvoltalk.co.uk%2FDefault.asp%3FtextrCSS%3Ddefault_text%26%3DChange%2Btext%2Bsize
aside: I have a sneaking suspicion that someone I know who uses a 
computer and has an 80% vision loss would have a real party for himself 
zeroing in on one of those buttons.
Best,
~dL

-- 
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] Simulating IE's disabled look

2008-02-21 Thread Ray Costanzo
Hi list,

IE allows for the nonstandard usage of disabled in seemingly any html tag.
I'm working on cleaning up of some html and trying to eliminate anything I
find that deviates from standards.  Is there a way that I can still get that
same disabled look on an a tag, for instance?  Right now I just have it
using a light shade of gray for the font-color, but it'd be nice if I could
get that look of disabled that IE gives.  I'm not aware of any sort of text
drop-shadow in CSS though!

Thanks




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


Re: [css-d] dropdown menu issue with IE6

2008-02-21 Thread Chris Kavinsky
Sorry, I forgot to add the links to the site and CSS file. Here they are:

HTML page: 
http://209.235.208.145/cgi-bin/WebSuite/tcsAssnWebSuite.pl?AssnID=OHSOYDBCode=410110Action=DisplayTemplatePage=AWS_OHSOY2_osc_index.html

CSS file: http://209.235.214.238/css/2008styles.css



On Tue, Feb 19, 2008 at 11:08 AM, Chris Kavinsky [EMAIL PROTECTED] wrote:
 I've run into a real poser with using drop down menus and IE6 (real
  surprise). Here's the scenario:

  -I have two horizontal navigation areas using Son of Suckerfish dropdowns
  -the 2nd area is also using background image replacement
  -one page has a Flash file where the 2nd level dropdowns were getting
  hidden even with a transparency setting on the Flash file (solved
  using {position:relative;z-index: 999;} in the CSS)
  -problem now is that the dropdown menu is pushed off to the far right
  in IE6 (fixed if I remove the above additional CSS, but then back to
  the original problem)

  Personally, I would love to say screw IE6 users but I'm not in a
  position to do that. Anyone have any suggestions on how to resolve the
  above problem?

__
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] Absolutely positioned div breaking out of parent in IE

2008-02-21 Thread Hayley Kinash
It's in Standards mode.

-Original Message-
From: Richard Grevers [mailto:[EMAIL PROTECTED] 
Sent: Wednesday, February 20, 2008 7:26 PM
To: Hayley Kinash
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Absolutely positioned div breaking out of parent in IE

On 2/20/08, Hayley Kinash [EMAIL PROTECTED] wrote:
 I've got an absolutely positioned div inside a relatively positioned 
 div,  but in IE the child div is breaking out of the parent and uses 
 the body as  its parent.  There's a width and a height on the parent 
 div, and all divs  above the parent have position:relative and a 
 width.  It behaves as expected  in FF and Safari.

  I can't post the site URL right now, so I'll post code.  Thanks for 
 any  help!

  div id=container
div id=wrapper
  div id=menu
 (inside is Macromedia's mm_menu, which is what is jumping out 
 of the  parent div, but is absolutely positioned)
  /div
/div
  /div

  #container {
 margin-left: auto;
 margin-right: auto;
 width: 761px;
 background-color:#ff;
 position:relative;
  }

  #wrapper {
 width:577px;
 float:right;
 text-align:left;
 position:relative;
  }

  #menu {
 position:relative;
 width:538px;
 height:30px;
 text-align:left;
 padding-left:10px;
 padding-right:29px;
 background-color:#318b4d;
 }

Is your doctype one that will trigger quirks mode rendering in IE?
From memory, getting the parent wrong for absolute positioned elements was
an IE5 / 5.5 bug, and might have only been fixed for standards mode in IE6.


--
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/


[css-d] Static background at bottom of browser window?

2008-02-21 Thread Inês Teles
Hi all

This is my first post though I've been reading the emails for a few weeks
now - I've picked up a lot of tips!

I'm still learning CSS and I wanted to create an effect but I'm not sure how
to go about this:
I want to have a picture of grass across the bottom of the website (which is
always at the bottom of the browser window, no matter what the user does) -
it then fades up into the sky, so that the whole website is on a solid blue
background excepting the grass at the bottom.

What I really would like to ask is how do I code the css so that the piece
of grass is always at the bottom of the browser, no matter how big the
browser is or how much content there is further down?

The ideal would be for the grass to always be at the bottom of the window
that the user can see, even if there is still more content that requeires
the user to scroll down.

So far I have:
body{
background-color: #CCE7FA;
background-image: url(images/grass.jpg);
background-repeat: repeat-x;
background-position: bottom;
}

which only gives me the basics. Plus, if the content doesn't fill up the
browser window, the solid blue background continues underneath the grass!

The catch is that it very definitely needs to work in IEx...

Thanks in advance!
Ines
__
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] dropdown menu issue with IE6

2008-02-21 Thread Jeff Gates
   -I have two horizontal navigation areas using Son of Suckerfish dropdowns
   -the 2nd area is also using background image replacement
   -one page has a Flash file where the 2nd level dropdowns were getting
   hidden even with a transparency setting on the Flash file (solved
   using {position:relative;z-index: 999;} in the CSS)
   -problem now is that the dropdown menu is pushed off to the far right
   in IE6 (fixed if I remove the above additional CSS, but then back to
   the original problem)
 
   Personally, I would love to say screw IE6 users but I'm not in a
   position to do that. Anyone have any suggestions on how to resolve the
   above problem?
 

FYI, the dropdown menus are hidden under the flash when I view it on 
Firefox 2 (Mac). And in my IE6, I'm not getting any dropdown menus. 

Jeff

__
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] Static background at bottom of browser window?

2008-02-21 Thread David Laakso
Inês Teles wrote:



 The ideal would be for the grass to always be at the bottom of the window
 that the user can see, even if there is still more content that requeires
 the user to scroll down.

 The catch is that it very definitely needs to work in IEx...


 Ines
   


Welcome to the list!

You might look at the 1st and 3rd implementation methods toward the 
bottom of this page [1] and assign the grass to the footer.
Others on the list may have less advanced examples and suggestions to offer.

Best,
~dL

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

-- 
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] Auto scale images?

2008-02-21 Thread Jason Pruim
Hi Everyone,

I'm working on a little bit of a test for me... Not a live site just  
trying to get ready for one.

Here's the issue, I have in the past been able to scale the size of  
the images when you scale the text of the website (Nice effect!) but  
today I noticed that if I remove a height attribute on the containing  
div, the pictures don't scale.. Is that expected? Here's what I'm  
talking about:

Doesn't work:

.header {

top: 0em;
width: 100%;
margin-bottom: -4em;
font-size: 150%;
}

Does work:
.header {
height: 1em;
top: 0em;
width: 100%;
margin-bottom: -4em;
font-size: 150%;
}
.floatleft {float: left; margin: 5px;}

HTML:

div class=header
Pimg class=floatleft src=UltimateEarth.jpg height=50%  
width=auto 
My Company, My Town! MIBR
Phone:BR
Fax:BR
Email:BR/P
/div!-- End of header div --

Also... for anyone that wants to see the ugly test page with the css  
included: HTTP://www.raoset.com/tests/global7/

Any help would be appreciated!


--

Jason Pruim
Raoset Inc.
Technology Manager
MQC Specialist
3251 132nd ave
Holland, MI, 49424
www.raoset.com
[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] divs not centering in Firefox

2008-02-21 Thread Cory Shubert
Hi list memebers, maybe someone can help me figure out why this won't
work in Firefox but does in IE6.
 
This is splash page that is called via Java in a booking process..
 
CSS:
 
style type=text/css
#splash {
 width:100%;
 margin:0 auto;
 margin-top:60px;
 text-align:center;
}
#splash .box {
 width:400px;
 height:auto;
 background:#112643;
 border:solid; 
 color:#aab7ca; 
 border-width:1px;
 text-align:center;
}
#splash .box p { 
 padding:5px; 
}
.splashlogo {
 padding:15px 0 0 0;
}
/style
 
XHTML;
 
div id=splash
 div class=box
  p class=font_phonePlease wait while we complete your
request.../p
  p
   object classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354
codebase=//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=7,0,19,0 width=200 height=200
param name=movie
value=../_masterfiles/wv/images/splash/earth_v2.swf /
param name=quality value=high /
embed src=../_masterfiles/wv/images/splash/earth_v2.swf
quality=high pluginspage=//www.macromedia.com/go/getflashplayer
type=application/x-shockwave-flash width=200 height=200/embed
   /object
  /p
  pimg src=../_masterfiles/wv/images/splash/animation_1.gif alt=
name=ImgAnim width=144 height=20 border=0 id=ImgAnim //p
 /div
 p class=splashlogoimg
src=../_masterfiles/wv/images/splash/nwa_wv_white.gif alt=
width=225 height=43/ /p
/div
 
I know I have a Flash issue with validation, but I am working on that as
well.
 
Thanks,
 
Cory Shubert
__
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] Float list items

2008-02-21 Thread Brian Jones
Hi,

I have a list
div
 ul
  liitem 1   price1/li
  liitem 2   price2/li
  liitem 3   price3/li
 /ul
/div

How can I contruct my css so that the 'item' is to the left of the div
and the 'price' floats to the far right of the div


-- 
-Bdot
There are only 10 kinds of people in this world. Those who understand
binary and those who don't
__
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] Static background at bottom of browser window?

2008-02-21 Thread Jeff Gates
 What I really would like to ask is how do I code the css so that the piece
 of grass is always at the bottom of the browser, no matter how big the
 browser is or how much content there is further down?
 
 The ideal would be for the grass to always be at the bottom of the window
 that the user can see, even if there is still more content that requeires
 the user to scroll down.
 
 So far I have:
 body{
 background-color: #CCE7FA;
 background-image: url(images/grass.jpg);
 background-repeat: repeat-x;
 background-position: bottom;
 }
 
 which only gives me the basics. Plus, if the content doesn't fill up the
 browser window, the solid blue background continues underneath the grass!
 

I have done something like this on my blog: http://life.outtacontext.com. 
My css is similar to yours:

body {  margin: 0px 0px 20px 0px;
background-color: #33;
background-image: url(images/oranges_bottom.jpg);
background-position: left bottom;
background-attachment: fixed;
background-repeat: repeat-x;
text-align: center;
}

The background image I use matches at the left/right seam so that when 
it repeats it's seems continuous. I also position it left bottom, rather 
than just bottom. 

But I also have a content area that essentially sits above my background. 
The background is static but when the viewer scrolls s/he is scrolling the 
content area. I also added some spacing to the bottom of the content area 
so that someone could scroll up enough to see the image. 

BTW, the margin and text-align is used to help center the content area 
however large the browser window is (the text-align is so that it will 
work in IE6). 

Jeff

__
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] Gap between divs in IE6

2008-02-21 Thread Paul Jinks
I've been trying to fix this till I can't remember my own name:

I have a page that looks just as I want in FF but which misbehaves in IE6,
showing a gap between divs.
Link: http://www.pauljinks.co.uk/test/contentTemplate2.html

I've stripped down everything to identify the offending code, which looks
like this:

div id=container
div id=main-top/div
div id=objective/div
div id=objectiveBot/div
/div

The  idea is that the content of #objective appears in a nice rectangle
with rounded corners, the top and bottom of said rectangle being contained
by #main-top and #objectiveBot.

here's my css:

body {
margin: 0px;
padding: 0px;
}

#container {
width: 770px;
margin: auto;
}

#main-top {
height: 16px;
width: 770px;
background-image: url(..);
background-repeat: no-repeat;
}

#container #objectiveBot {
background-image: url(..);
background-repeat: no-repeat;
width: 770px;
height: 23px;
}

#container #objective {
background-image: url(...);
background-repeat: repeat-y;
width: 770px;
}
I know it's something pretty obvious, but I can't see the wood for the
wotsits here.

Please help.

Paul

__
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] Absolutely positioned div breaking out of parent in IE

2008-02-21 Thread David Hucklesby
On Tue, 19 Feb 2008 09:31:53 -0600, Hayley Kinash wrote:
 I've got an absolutely positioned div inside a relatively positioned div, but 
 in IE the
 child div is breaking out of the parent and uses the body as its parent.  
 There's a
 width and a height on the parent div, and all divs above the parent have
 position:relative and a width.  It behaves as expected in FF and Safari.

[code snipped]

See this article at PositionIsEverything.net for the lowdown on this bug:

 http://www.positioniseverything.net/abs_relbugs.html

Hopefully this helps.

Cordially,
David
--

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


Re: [css-d] Gap between divs in IE6

2008-02-21 Thread Gunlaug Sørtun
Paul Jinks wrote:
 I have a page that looks just as I want in FF but which misbehaves in
  IE6, showing a gap between divs. 
 http://www.pauljinks.co.uk/test/contentTemplate2.html

The simplest and most reliable solution is to put an html comment in the
empty divs, to prevent IE/win from seeing whitespace in there.

div id=main-top!-- --/div
div id=objective!-- --/div
div id=objectiveBot!-- --/div


IE6 will otherwise treat those divs as if they're one line-height tall,
since that and older IE/win versions don't respect declared dimensions
and will auto-expand the divs in height to make room for an imaginary space.

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] divs not centering in Firefox

2008-02-21 Thread Usamah M. Ali
On Thu, Feb 21, 2008 at 8:17 PM, Cory Shubert [EMAIL PROTECTED] wrote:
 Hi list memebers, maybe someone can help me figure out why this won't
  work in Firefox but does in IE6.

  This is splash page that is called via Java in a booking process..

  CSS:

  style type=text/css
  #splash {
   width:100%;
   margin:0 auto;
   margin-top:60px;
   text-align:center;
  }

It could be that the latter margin-top declaration is overwriting the
former one.
You should have margin: 60px auto 0 auto;

Firefox is more strict that IE6 in these issues.
__
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] Text Resizing Causes Small Movement in Images

2008-02-21 Thread Chris Akins
Hi - not sure what's causing my image based mainNav tabs to move slightly
when text is resized in this header:

www.springfieldmo.gov/newSite/index4.html
www.springfieldmo.gov/newSite/mainStyles_take4.css

The page is based on Matthew James Taylor's perfect 3-col liquid layout,
though the 3 columns aren't yet coming to bear on the above.

Basically, when sizing text up or down more than just one level, the tabs
start moving around, thus breaking the separating line between the white and
maroon.  I've tried various permutations of margins and padding on #crumbs
and #mainNav to no avail.

Thanks for any input and insight.

Christopher Akins
Web Coordinator
City of Springfield, MO
__
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] divs not centering in Firefox

2008-02-21 Thread Cory Shubert
Yes, that is it.
 
Thank you very much.
 
C



From: Tim Palac [mailto:[EMAIL PROTECTED] 
Sent: Thursday, February 21, 2008 11:34 AM
To: Cory Shubert
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] divs not centering in Firefox


Cory,

In #splash .box, replace text-align:center; with margin: 0 auto;.
This works for me in both Firefox and IE6/7.

Tim
AIM: TymArtist
www.timpalac.com


On Thu, Feb 21, 2008 at 11:17 AM, Cory Shubert
[EMAIL PROTECTED] wrote:


Hi list memebers, maybe someone can help me figure out why this
won't
work in Firefox but does in IE6.

This is splash page that is called via Java in a booking
process..

CSS:

style type=text/css
#splash {
 width:100%;
 margin:0 auto;
 margin-top:60px;
 text-align:center;
}
#splash .box {
 width:400px;
 height:auto;
 background:#112643;
 border:solid;
 color:#aab7ca;
 border-width:1px;
 text-align:center;
}
#splash .box p {
 padding:5px;
}
.splashlogo {
 padding:15px 0 0 0;
}
/style

XHTML;

div id=splash
 div class=box
 p class=font_phonePlease wait while we complete your
request.../p
 p
  object classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354

codebase=//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=7,0,19,0 width=200 height=200
   param name=movie
value=../_masterfiles/wv/images/splash/earth_v2.swf /
   param name=quality value=high /
   embed src=../_masterfiles/wv/images/splash/earth_v2.swf
quality=high
pluginspage=//www.macromedia.com/go/getflashplayer
type=application/x-shockwave-flash width=200
height=200/embed
  /object
 /p
 pimg src=../_masterfiles/wv/images/splash/animation_1.gif
alt=
name=ImgAnim width=144 height=20 border=0 id=ImgAnim
//p
 /div
 p class=splashlogoimg
src=../_masterfiles/wv/images/splash/nwa_wv_white.gif alt=
width=225 height=43/ /p
/div

I know I have a Flash issue with validation, but I am working on
that as
well.

Thanks,

Cory Shubert

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



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


Re: [css-d] Text Resizing Causes Small Movement in Images

2008-02-21 Thread Gunlaug Sørtun
Chris Akins wrote:
 Hi - not sure what's causing my image based mainNav tabs to move
 slightly when text is resized in this header:
 
 www.springfieldmo.gov/newSite/index4.html

Images are inline-elements by default, which means there will be
provided space for text-descenders and this space will change with
font-resizing.

The easiest solution is probably to float all relevant images, since
floating turns all elements into block-elements and allow arranging in
lines - like in the following example...

http://www.gunlaug.no/tos/alien/ca/test_08_0221.html
http://www.gunlaug.no/tos/alien/ca/test_08_0221_files/mainStyl.css

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] Several problems with template

2008-02-21 Thread David Hucklesby
On Wed, 20 Feb 2008 15:30:32 +0100, Thijs Hakkenberg wrote:
 Dear List,

 For my site I use the following template, but there are serveral things that 
 go awry in
 IEX (including 7):

 http://ebrius.nl/fileadmin/template/ebrius.nl/index.html

 1. The footer and header are placed too much to the left 2. The footer 
 overlays the
 content if the content exceeds 100%


Did you fix this footer/header offset, Thijs? I am not seeing the
problem here.

I *do* see a problem in IE 7 -- when you apply page zoom the
background does not enlarge, making for an odd-looking display.
This is a known IE 7 bug. I suggest adding an extra (IE-only?)
wrapper around the entire contents, and putting your background
image on that. It's only backgrounds on BODY that IE 7 does not
zoom.

Cordially,
David
--

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


Re: [css-d] Float list items

2008-02-21 Thread Gunlaug Sørtun
Usamah M. Ali wrote:

 My normal approach would be using a table. ;~)

For tabular data - yes, but not if it was just a visual effect I were after.

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] Float list items

2008-02-21 Thread Usamah M. Ali

  My normal approach would be something like...

  ul
  lispanitem 1/span   price1/li
  lispanitem 2/span   price2/li
  lispanitem 3/span   price3/li
  /ul

  li {text-align: right;}
  li span {float: left;}

  ...as CSS can only target elements, not the content within them ... at
  least not yet.


My normal approach would be using a table. ;~)

Usamah
__
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] Still Having Problem with Menu Line Break

2008-02-21 Thread David Hucklesby
On Tue, 19 Feb 2008 20:33:08 -0600 (CST), Jeff Gates wrote:
 Page in question: http://inourpath.com/intro.html

 I am still having problem with the bottom menu line breaking to a second line 
 in IE 6
 and IE7. The MAP is breaking to a second line. The menu is in the nav div 
 which is
 centered within the bottom_menu div (the bottom_menu div is exactly the width 
 of the
 content area (530px). To center the nav div I set the width and made the left 
 and right
 margins auto.

 I feel the problem might be with the size of the text in IE. I've got the 
 menu items
 set at a font size of x-small.

 If the problem is because IE is making the size of the text a bit bigger (and 
 therefore
 moving the last menu item to a second line) how can I get the menu to have 
 some
 breathing room and expand width if it needs to, but still stay centered?

Jeff,
Try changing the width on #nav to a suitable em value. In general,
font sizes do not correspond to any particular number of pixels-- only
in particular cases, such as in IE on an OS set to 96 DPI is that so.

FWIW - The menu breaks to two lines in all my browsers this end;
IE and Opera put both Commentary and Maps on the
second line, probably due to my having large fonts installed.

Although you have frozen the font-size to 12px in IE, note that
other browsers allow you to boost this value at will, so be sure to
test using browser text size controls.

Cordially,
David
--

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


Re: [css-d] Static background at bottom of browser window?

2008-02-21 Thread David Hucklesby
On Thu, 21 Feb 2008 14:33:10 +, Inês Teles wrote:
 Hi all

 This is my first post though I've been reading the emails for a few weeks now 
 - I've
 picked up a lot of tips!

 I'm still learning CSS and I wanted to create an effect but I'm not sure how 
 to go
 about this:
 I want to have a picture of grass across the bottom of the website (which is 
 always at
 the bottom of the browser window, no matter what the user does) - it then 
 fades up into
 the sky, so that the whole website is on a solid blue background excepting 
 the grass at
 the bottom.

 What I really would like to ask is how do I code the css so that the piece of 
 grass is
 always at the bottom of the browser, no matter how big the browser is or how 
 much
 content there is further down?


I suggest using an (extra?) wrapper DIV around the entire content of
BODY and putting your background image on that. This has the added
advantage of overcoming an IE 7 bug, which does not expand backgrounds
on BODY when page zoom is used.

Cordially,
David
--

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

Re: [css-d] Simulating IE's disabled look

2008-02-21 Thread David Hucklesby
On Thu, 21 Feb 2008 07:43:12 -0500, Ray Costanzo wrote:
 Hi list,

 IE allows for the nonstandard usage of disabled in seemingly any html tag. 
 I'm
 working on cleaning up of some html and trying to eliminate anything I find 
 that
 deviates from standards.  Is there a way that I can still get that same 
 disabled look
 on an a tag, for instance?  Right now I just have it using a light shade of 
 gray for
 the font-color, but it'd be nice if I could get that look of disabled that IE 
 gives.  
 I'm not aware of any sort of text drop-shadow in CSS though!


Don't know how to imitate Internet Explorer in other browsers, but
one way I use to indicate disabled is to apply a suitable opacity
value to the element. IE has its own version of opacity so you
have a choice of using IE' s filter: alpha(opacity=75); (for 75%)
for example, or using disabled.

Not exactly what you are after, but an alternative suggestion.

Cordially,
David
--

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


Re: [css-d] Still Having Problem with Menu Line Break

2008-02-21 Thread Jeff Gates
 Try changing the width on #nav to a suitable em value. In general,
 font sizes do not correspond to any particular number of pixels-- only
 in particular cases, such as in IE on an OS set to 96 DPI is that so.
 
 FWIW - The menu breaks to two lines in all my browsers this end;
 IE and Opera put both Commentary and Maps on the
 second line, probably due to my having large fonts installed.
 
 Although you have frozen the font-size to 12px in IE, note that
 other browsers allow you to boost this value at will, so be sure to
 test using browser text size controls.

Thanks David. Ems! Why didn't I think of that! -g Let me try. 

The font size I stipulated wasn't 12px but x-small. I'd like to know more 
about how that works. Is it more like ems, which change depending on the 
user's prefs? How did you come up with 12px in IE?

As to users being able to increase the size of fonts, is there anything we 
can really do about that, especially in a situation like this menu? Having 
the menu on one line is my goal. And if there are tips to make it happen 
in as many situations as possible, I want to know. But when does one say: 
I've done my best? (A rhetorical question, I'm sure we've all asked 
ourselves --any concrete solutions, let me know.)

Jeff

__
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] Still Having Problem with Menu Line Break

2008-02-21 Thread Jason Pruim

On Feb 21, 2008, at 1:52 PM, Jeff Gates wrote:

 Try changing the width on #nav to a suitable em value. In general,
 font sizes do not correspond to any particular number of pixels--  
 only
 in particular cases, such as in IE on an OS set to 96 DPI is that so.

 FWIW - The menu breaks to two lines in all my browsers this end;
 IE and Opera put both Commentary and Maps on the
 second line, probably due to my having large fonts installed.

 Although you have frozen the font-size to 12px in IE, note that
 other browsers allow you to boost this value at will, so be sure to
 test using browser text size controls.

 Thanks David. Ems! Why didn't I think of that! -g Let me try.

 The font size I stipulated wasn't 12px but x-small. I'd like to know  
 more
 about how that works. Is it more like ems, which change depending on  
 the
 user's prefs? How did you come up with 12px in IE?

 As to users being able to increase the size of fonts, is there  
 anything we
 can really do about that, especially in a situation like this menu?  
 Having
 the menu on one line is my goal. And if there are tips to make it  
 happen
 in as many situations as possible, I want to know. But when does one  
 say:
 I've done my best? (A rhetorical question, I'm sure we've all asked
 ourselves --any concrete solutions, let me know.)


If it's that important to put it on one line for you, you COULD set  
specific sizes on the menu which would freeze it for scaling I  
believe...  I used that technique (I think) on a old website header I  
did... I didn't need the company name to get HUGE so I just specified  
the size in pixels and then that stuck at that size :)


--

Jason Pruim
Raoset Inc.
Technology Manager
MQC Specialist
3251 132nd ave
Holland, MI, 49424
www.raoset.com
[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/


Re: [css-d] problem with borders

2008-02-21 Thread vwf
On Wed, Feb 20, 2008 at 07:42:46PM +, vwf wrote:
 Hello,
 
 I try to make new layout for my website. The first hurdle is a
 horizontal navigation bar that does not behave like I want: I get
 unwanted borders, and the background does not shift on hover.
 Can someone help?

Thank you for all the replies. They will definitely help to fix all
errors. 

I am looking into the timeout error reported, but I do not know
the cause. I suspect the hardware.
__
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] dropdown menu issue with IE6

2008-02-21 Thread Chris Kavinsky
The dropdowns are there, but they're showing up off the screen to the
right. You should be able to see a portion of the About OSC
dropdown. The rest are off somewhere. IE7 works fine, as well as
Safari and FIrefox (Windows and Mac). With Firefox on the Mac, it
sometimes hides behind the Flash until you hover over it. Not
consistent, but annoying. Anyone know a fix for this as well, I'm all
ears.



On Thu, Feb 21, 2008 at 10:30 AM, Jeff Gates [EMAIL PROTECTED] wrote:
-I have two horizontal navigation areas using Son of Suckerfish dropdowns
 -the 2nd area is also using background image replacement
 -one page has a Flash file where the 2nd level dropdowns were getting
 hidden even with a transparency setting on the Flash file (solved
 using {position:relative;z-index: 999;} in the CSS)
 -problem now is that the dropdown menu is pushed off to the far right
 in IE6 (fixed if I remove the above additional CSS, but then back to
 the original problem)
   
 Personally, I would love to say screw IE6 users but I'm not in a
 position to do that. Anyone have any suggestions on how to resolve the
 above problem?
   

  FYI, the dropdown menus are hidden under the flash when I view it on
  Firefox 2 (Mac). And in my IE6, I'm not getting any dropdown menus.

  Jeff


__
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] alignment problem on Firefox

2008-02-21 Thread Big Moxy
url - http://www.zanalysts.net/

css - http://www.zanalysts.net/styles/zanalysts.css

 

If you look at the display on IE 7 you will see what I want.

 

Can someone please help me with the alignment of the list items on the right
hand side of the page? I set padding-left: 42px to the list items and as you
can see the graphic extends below the title and therefore the padding on the
list item pushes the first couple to the left and out of alignment.

 

If I set the height of the div around the image and title that solves my
problem but does not give the appearance I want. I tried some other things
but the whole page got messy.

 

Can someone please advise my own how to accomplish my objective? 

 

Thank you,

 

Tim

__
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] Absolutely positioned div breaking out of parent in IE

2008-02-21 Thread Hayley Kinash
On Tue, 19 Feb 2008 09:31:53 -0600, Hayley Kinash wrote:
 I've got an absolutely positioned div inside a relatively positioned 
 div, but in IE the child div is breaking out of the parent and uses 
 the body as its parent.  There's a width and a height on the parent 
 div, and all divs above the parent have position:relative and a width.  It
behaves as expected in FF and Safari.

[code snipped]

 See this article at PositionIsEverything.net for the lowdown on this bug:

 http://www.positioniseverything.net/abs_relbugs.html

 Hopefully this helps.

 Cordially,
 David
 --

The PIE article indicates that the fix for IE is to put a width and/or
height on the parent - it has both, and position:relative.

__
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] alignment problem on Firefox

2008-02-21 Thread Usamah M. Ali
  Can someone please help me with the alignment of the list items on the right
  hand side of the page? I set padding-left: 42px to the list items and as you
  can see the graphic extends below the title and therefore the padding on the
  list item pushes the first couple to the left and out of alignment.



Your approach is complicating the matters for you. You should be using
background images instead of putting presentational images right into
the markup. Instead of having:

divimg width=32 height=30 class=image title=Image
alt=windows logo src=/images/windows-logo.gif/
a class=title href=/windows/ASP.NET 3.5 Hosting/a/div

you could have:

h4a class=title href=/windows/ASP.NET 3.5 Hosting/a/h4

and have the following in the CSS:

h4 {
background: transparent url(/images/windows-logo.gif) no-repeat center center;
}

This is the minimal code needed, but of course you could play on the
CSS as much as you wish to get the needed effet with precise detail
level.

Usamah
__
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] alignment problem on Firefox

2008-02-21 Thread Usamah M. Ali
  Your approach is complicating the matters for you. You should be using
  background images instead of putting presentational images right into
  the markup. Instead of having:

  divimg width=32 height=30 class=image title=Image
  alt=windows logo src=/images/windows-logo.gif/
  a class=title href=/windows/ASP.NET 3.5 Hosting/a/div

  you could have:

  h4a class=title href=/windows/ASP.NET 3.5 Hosting/a/h4

  and have the following in the CSS:

  h4 {
  background: transparent url(/images/windows-logo.gif) no-repeat center 
 center;
  }

  This is the minimal code needed, but of course you could play on the
  CSS as much as you wish to get the needed effect with precise detail
  level.

  Usamah


I'm sorry; I forgot to declare the left padding on the level 4 heading:

h4 {
background: transparent url(/images/windows-logo.gif) no-repeat center center;
padding-left: 42px;
 }

Just ditch the floating altogether. It's not needed.

Usamah
__
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] Tab menu: using descendant selectors to create active tab

2008-02-21 Thread Julie Wetherill
For my horizontal tab menu, I'm working on markup and css to produce an 
active tab effect. For various reasons, I need to use descendant 
selectors to trigger the active tab rather than add a special selector to 
the active tab (e.g., id=active). But, using descendant selectors doesn't 
work unless I change the selector on an element that is not involved in tab 
activation. And when I *do* change the selector on the unrelated element, 
the tabs start misbehaving in Firefox. The details follow.

I have some test pages in which I've inserted a generic version of Eric 
Meyer's tabbed navbar.  Here is the navbar markup (fyi, the tab_wrapper div 
is local and not part of Eric's tab markup):

div id=tab_wrapper class=select_tab_1
div id=navcontainer
ul id=navlist
li id=tab_1 class=tab_1a href=# id=activeItem one/a/li
li id=tab_2 class=tab_2a href=#Item two/a/li
li id=tab_3 class=tab_3a href=#Item three/a/li
li id=tab_4 class=tab_4a href=#Item four/a/li
li id=tab_5 class=tab_5a href=#Item five/a/li
/ul
/div
 etc. etc. 

==Test page #1: using the default navbar and the id=active approach. The 
active tab works:
http://hul.harvard.edu/oisnew/support/docs-test-active.html

The rule that controls active tab is:

#navlist li a#active
{
background: white;
border-bottom: 1px solid white;
}

This rule produces an active tab with a 1px white bottom border on the a, 
which obscures the default 1px black bottom border provided by the ul.

==Test page #2: using descendant selectors instead. Active tab does NOT work:
http://hul.harvard.edu/oisnew/support/docs-test-descendant-id.html

The rule that controls active tab is:

div.select_tab_1 .tab_1 a, div.select_tab_2 .tab_2 a, div.select_tab_3 
.tab_3 a,
div.select_tab_4 .tab_4 a, div.select_tab_5 .tab_5 a, div.select_tab_6 
.tab_6 a,
div.select_tab_7 .tab_7 a, div.select_tab_8 .tab_8 a, div.select_tab_9 
.tab_9 a,
div.select_tab_10 .tab_10 a {
background: white;
border-bottom: 1px solid white;
}

==Test page #3: uses same descendant selectors as #2. But I discovered 
thru tweaking that if the ul has a class selector instead of id, the 
active tab works.

http://hul.harvard.edu/oisnew/support/docs-test-descendant-class.html

However, in Firefox, this arrangement leads to a bug when screen text size 
increases. As size increases, the ul's height grows out of proportion with 
the li's and a's and as a result, the 1px black border on the ul is no 
longer hidden by the active tab's 1px white border.

Can anyone help me understand why changing to a class selector on the ul 
allows the descendant selector to activate the tab? And why the Firefox 
behavior? FYI, the surrounding layout uses ems in many places to control 
size. I suspect the navbar ul is inheriting an ems setting from elsewhere 
in the css, but I haven't found the cause. I've used FF/Firebug and 
WebDeveloper, but haven't found the culprit.

Thanks.  --julie 


__
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] Markup for image URL in CSS rule

2008-02-21 Thread Cory Shubert
 
h4 {
background: transparent url(/images/windows-logo.gif) no-repeat
center center;
padding-left: 42px;
 }

Question on markup code in CSS.  I have seen markup as above, where the
image tag inside parenthesis has quotation marks and sometimes without.

Which is it, q.marks or not?

Thanks,

Cory
__
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] alignment problem on Firefox

2008-02-21 Thread Usamah M. Ali
On Thu, Feb 21, 2008 at 11:51 PM, Big Moxy [EMAIL PROTECTED] wrote:
 I'm sorry but that didn't work. The image is not displaying now.



Try using the absolute path to the image and don't forget the left padding.

h4 {
background: transparent url(http://absolute/path/to/the/image)
no-repeat center center;
left-padding: 42px;
}

Usamah
__
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] Markup for image URL in CSS rule

2008-02-21 Thread Big Moxy
Great catch Cory! I don't think background image is the right solution
though. Look at it now. www.zanalysts.net

Tim

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Cory Shubert
Sent: Thursday, February 21, 2008 12:55 PM
To: CSS Discussion
Subject: [css-d] Markup for image URL in CSS rule

 
h4 {
background: transparent url(/images/windows-logo.gif) no-repeat
center center;
padding-left: 42px;
 }

Question on markup code in CSS.  I have seen markup as above, where the
image tag inside parenthesis has quotation marks and sometimes without.

Which is it, q.marks or not?

Thanks,

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

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


Re: [css-d] Markup for image URL in CSS rule

2008-02-21 Thread Usamah M. Ali
On Thu, Feb 21, 2008 at 11:54 PM, Cory Shubert
[EMAIL PROTECTED] wrote:

  h4 {
  background: transparent url(/images/windows-logo.gif) no-repeat
  center center;
  padding-left: 42px;
   }

  Question on markup code in CSS.  I have seen markup as above, where the
  image tag inside parenthesis has quotation marks and sometimes without.

  Which is it, q.marks or not?

  Thanks,

  Cory

Firstly, I would like to note that CSS in NOT a markup language; it's
a styling language. If you have some images for presentatioal purposes
then they should be in the CSS. Images that are part of the content
are the ones that should be marked up. An example, an image of Hillary
Clinton on a newpaper website is content, and therefore should be
marked up with HTML's element img:

img src=hillary.jpg alt= title=Hillary Clinton /

An image of say, Email this article link is presentational as it's
not part of the content, and therefore should go in the CSS:

a href=article.php?send_articleSend Article/a

CSS could be:

a {

background: url(email.gif) no-repeat top left;
padding-left: 12px;
}

Using double or single quotations or not using them at all doesn't
make a difference but for IE5 for Mac which doesn't support single
quotes.

Usamah
__
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] Markup for image URL in CSS rule

2008-02-21 Thread Big Moxy
Isn't my issue a presentational one? I would compare my objective to your
Email this article example.

Tim

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Usamah M. Ali
Sent: Thursday, February 21, 2008 1:12 PM
To: Cory Shubert
Cc: CSS Discussion
Subject: Re: [css-d] Markup for image URL in CSS rule

On Thu, Feb 21, 2008 at 11:54 PM, Cory Shubert
[EMAIL PROTECTED] wrote:

  h4 {
  background: transparent url(/images/windows-logo.gif) no-repeat
  center center;
  padding-left: 42px;
   }

  Question on markup code in CSS.  I have seen markup as above, where the
  image tag inside parenthesis has quotation marks and sometimes without.

  Which is it, q.marks or not?

  Thanks,

  Cory

Firstly, I would like to note that CSS in NOT a markup language; it's
a styling language. If you have some images for presentatioal purposes
then they should be in the CSS. Images that are part of the content
are the ones that should be marked up. An example, an image of Hillary
Clinton on a newpaper website is content, and therefore should be
marked up with HTML's element img:

img src=hillary.jpg alt= title=Hillary Clinton /

An image of say, Email this article link is presentational as it's
not part of the content, and therefore should go in the CSS:

a href=article.php?send_articleSend Article/a

CSS could be:

a {

background: url(email.gif) no-repeat top left;
padding-left: 12px;
}

Using double or single quotations or not using them at all doesn't
make a difference but for IE5 for Mac which doesn't support single
quotes.

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

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


Re: [css-d] Markup for image URL in CSS rule

2008-02-21 Thread Big Moxy
Thank you for the correction, Usamah! I also added height:37px to ensure the
full image was being displayed. What do I do about the extra image behind
the image title? It's not even full-size?

Regards,
Tim


-Original Message-
From: Usamah M. Ali [mailto:[EMAIL PROTECTED] 
Sent: Thursday, February 21, 2008 1:22 PM
To: Big Moxy
Cc: Cory Shubert; CSS Discussion
Subject: Re: [css-d] Markup for image URL in CSS rule

On Fri, Feb 22, 2008 at 12:06 AM, Big Moxy [EMAIL PROTECTED] wrote:
 Great catch Cory! I don't think background image is the right solution
  though. Look at it now. www.zanalysts.net

  Tim



I'm very sorry, but the background positioning should be left center
NOT center center.

When you do this, the image is perfectly put on the left and the link
next to it, but you would see duplicated image because you're setting
the anchor to inherit the background properties of its parent, which
is the div contacting the background image.

I altered these in Firebugand it looks just perfect.

Usamah

__
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] Markup for image URL in CSS rule

2008-02-21 Thread Usamah M. Ali
On Fri, Feb 22, 2008 at 12:34 AM, Big Moxy [EMAIL PROTECTED] wrote:
 Thank you for the correction, Usamah! I also added height:37px to ensure the
  full image was being displayed. What do I do about the extra image behind
  the image title? It's not even full-size?

  Regards,
  Tim


You have this in the CSS:

a {
color: #3F2C57;
background: inherit;
text-decoration: none;
}

a:hover {
color: #808080;
background: inherit;
}

Remove the two background: inherit instances.

Usamah
__
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] Float list items

2008-02-21 Thread Rick Faircloth
What difference does it make?

Rick

 -Original Message-
 From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
 Behalf Of Gunlaug Sørtun
 Sent: Thursday, February 21, 2008 1:35 PM
 To: Usamah M. Ali
 Cc: Brian Jones; CSS Discuss
 Subject: Re: [css-d] Float list items
 
 Usamah M. Ali wrote:
 
  My normal approach would be using a table. ;~)
 
 For tabular data - yes, but not if it was just a visual effect I were after.
 
   Georg
 --



__
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] Markup for image URL in CSS rule

2008-02-21 Thread Usamah M. Ali
Once you grasped the basic concept of using background images, then
it's a matter of trial  error until you get the perfect look you're
after. Try changing the background position to left top or left bottom
or applying padding the a links in the CSS or a combination of all
these and others.

Good luck,
Usamah

On Fri, Feb 22, 2008 at 12:54 AM, Big Moxy [EMAIL PROTECTED] wrote:
 Great! Thank you! Is it possible to get the text positioned so that it
  aligns with the bottom of the image?

__
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] Float list items

2008-02-21 Thread Gunlaug Sørtun
Rick Faircloth wrote:
 What difference does it make?

The difference is (already made) at the most basic level: what it is,
and what it can be made to look as when we add a bit of styling.

- An HTML table will always be a table and nothing but a table, no
matter how it's styled.
- Some text in a list will always be some text in a list and can not be
anything but some text in a list, no matter how it's styled.

For instance, this...
http://www.gunlaug.no/tos/moa_11g.html
...is not a table, regardless of its appearance in CSS capable browsers
and a few others.

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] Float list items

2008-02-21 Thread Rick Faircloth
Your example below is impressive, Georg, for sure.

But just look at the CSS hoops you had to jump through
just to get what looks like a simple table.

Why go to so much trouble avoid using table ?
Just because you can or is there a more compelling reason?

I'm relatively new to the CSS scene, so these are sincere questions.

Rick



/* almost equal height in IE7/win - standard compliant mode */
htmlbody .row div {min-height: 
expression(parseFloat(this.parentNode.offsetHeight)-33);}

/* almost equal height in IE6/win - mode independency */
* html .row div {height: expression(eval(document.compatMode 
document.compatMode=='CSS1Compat') ?
(parseFloat(this.parentNode.offsetHeight)-33)
:(parseFloat(this.parentNode.offsetHeight)-1));}

/* almost equal width in IE/win - mode independency */
.row .three {width: expression(eval(document.compatMode 
document.compatMode=='CSS1Compat') ?
154
:158);}

/* border-width compensation - mode independency */
.row .one {margin-left: expression(eval(document.compatMode 
document.compatMode=='CSS1Compat') ?
-1
:0);}

/* vertical centering in IE/win */

html body div.vam p {
margin-top: expression(((this.parentElement.offsetHeight/2)
-(parseInt(this.offsetHeight)/2) -2) 0 ? 0 : 
(this.parentElement.offsetHeight/2)
-(parseInt(this.offsetHeight)/2) -2 +'px') ;}
/* see: http://www.gunlaug.no/contents/wd_additions_20.html for more info on 
vertical centering */


}

/* overriding IE-expressions used on screen, so they do not apply when document 
is printed */
@media print {
html .row div {height: auto!important;}
html .row div {min-height: 0!important;}
.row .three {width: auto!important;}
.row .one {margin-left: 0!important;}
#three p {margin-top: 6px!important;}
}









 -Original Message-
 From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
 Behalf Of Gunlaug Sørtun
 Sent: Thursday, February 21, 2008 5:53 PM
 To: 'CSS Discussion'
 Subject: Re: [css-d] Float list items
 
 Rick Faircloth wrote:
  What difference does it make?
 
 The difference is (already made) at the most basic level: what it is,
 and what it can be made to look as when we add a bit of styling.
 
 - An HTML table will always be a table and nothing but a table, no
 matter how it's styled.
 - Some text in a list will always be some text in a list and can not be
 anything but some text in a list, no matter how it's styled.
 
 For instance, this...
 http://www.gunlaug.no/tos/moa_11g.html
 ...is not a table, regardless of its appearance in CSS capable browsers
 and a few others.
 
 regards
   Georg
 --



__
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] Auto scale images?

2008-02-21 Thread Philippe Wittenbergh

On Feb 22, 2008, at 12:55 AM, Jason Pruim wrote:

 Here's the issue, I have in the past been able to scale the size of
 the images when you scale the text of the website (Nice effect!) but
 today I noticed that if I remove a height attribute on the containing
 div, the pictures don't scale.. Is that expected? Here's what I'm
 talking about:

 Doesn't work:

   .header {

   top: 0em;
   width: 100%;
   margin-bottom: -4em;
   font-size: 150%;
   }

 Does work:
   .header {
   height: 1em;
   top: 0em;
   width: 100%;
   margin-bottom: -4em;
   font-size: 150%;
   }
   .floatleft {float: left; margin: 5px;}

 HTML:

 div class=header
 Pimg class=floatleft src=UltimateEarth.jpg height=50%
 width=auto 
 My Company, My Town! MIBR
 Phone:BR
 Fax:BR
 Email:BR/P
 /div!-- End of header div --

Percentage heights compute to 'auto' when the height of the parent box  
is _not_ specified.
http://www.w3.org/TR/CSS21/visudet.html#propdef-height

also, I would be better to specify the height or width in your  
stylesheet instead of in in the html code.

Philippe
---
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] Still Having Problem with Menu Line Break

2008-02-21 Thread David Laakso
Jeff Gates wrote:

 As to users being able to increase the size of fonts, is there anything we 
 can really do about that, especially in a situation like this menu? Having 
 the menu on one line is my goal. And if there are tips to make it happen 
 in as many situations as possible, I want to know. But when does one say: 
 I've done my best? (A rhetorical question, I'm sure we've all asked 
 ourselves --any concrete solutions, let me know.)

 Jeff

   



Concrete solution, sure. Make a screen capture of your entire page with 
the menu on one line. Save it as index.gif and upload it to your server 
in place of your index.html.

Seriously, though, the real solution, as in most things in life, is far 
more difficult.  It is a matter of attempting to comprehend and embrace 
the essence and nature of the Web. This, by comparison,  makes 
understanding CSS look like child's play.

Have a pleasant journey on your goal toward the real solution.

Best,
~dL

-- 
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] Float list items [medium]

2008-02-21 Thread Rafael
Rick Faircloth wrote:
 Your example below is impressive, Georg, for sure.

 But just look at the CSS hoops you had to jump through
 just to get what looks like a simple table.

 Why go to so much trouble avoid using table ?
 Just because you can or is there a more compelling reason?

 I'm relatively new to the CSS scene, so these are sincere questions.

 Rick
   
Hi, Rick.
George's example is a quite complex one (from my point of view, 
anyway), so that, and the lack of standard support by IE (and some 
others?), is probably the reason why you see such code.

Anyway, back to your question: Why not using a table? As George said 
before, that's simply because the data shown is not tabular data. For 
tabular data we will understand that which has no sense if not seen in 
such a way (tabulated), e.g. a calendar. Now, aside from this, tables 
are actually complex elements, and as such, they have been problematic 
or expensive to deal with by browsers and other softwares (like 
screen-readers).

There are cases, though, where the desired layout calls for the help 
of a table, and although basically everyone here would ask you not to 
use it (or simply to use another layout) it could be your best or even 
only choice. If I recall correctly, George had to make use of JavaScript 
to make IE's behave as desired.

But I went beyond the topic, the point here (and what semantic 
markup is about) is to use the actual HTML elements that are supposed to 
enclose your data, like using address for addresses (of course), kbd 
for keyboard sample, code for code (duh!), samp for sample output, 
def for definitions, abbr for abbreviations, p for paragraphs, 
dl+dt+dl for definition lists (such as glossaries), etc. And not 
using blockquote just because you want to indent the code, or using 
pbr/p to add some spacing.

I hope this helped, and sorry if I bored you along the way.
Rafael.
__
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] Float list items

2008-02-21 Thread Gunlaug Sørtun
Rick Faircloth wrote:
 Your example below is impressive, Georg, for sure.
 
 But just look at the CSS hoops you had to jump through just to get 
 what looks like a simple table.
 
 Why go to so much trouble avoid using table ? Just because you can 
 or is there a more compelling reason?
 
 I'm relatively new to the CSS scene, so these are sincere questions.

In addition to the reasons I've given in the relevant article...
http://www.gunlaug.no/contents/wd_additions_22.html
...it's because...

1: that type of content doesn't fit the description tabular data, I
just wanted it to appear in a certain way. Its appearance can be changed
and restyled (for different media for instance) without touching the
actual document, which is impossible if a table had been used.

2: one day a version of that MS-excuse for a browser may support the
relevant CSS, and not be in need of proprietary MS-garbage like
IE-expressions for simulating standard CSS.
Maybe IE8 (with an opt-in)...

3: by always pushing and testing what can and can not be done with CSS
today to the limits across browser-land in test-cases like that, I learn
what choices I have and how to make things work whenever I need to for
real-world cases. Such knowledge sure comes handy at times :-)

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] Float list items [medium]

2008-02-21 Thread Rick Faircloth
Not boring at all!
Thanks for the explanation, Rafael!  :o)

Rick

 -Original Message-
 From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
 Behalf Of Rafael
 Sent: Thursday, February 21, 2008 10:32 PM
 To: Rick Faircloth
 Cc: 'CSS Discussion'
 Subject: Re: [css-d] Float list items [medium]
 
 Rick Faircloth wrote:
  Your example below is impressive, Georg, for sure.
 
  But just look at the CSS hoops you had to jump through
  just to get what looks like a simple table.
 
  Why go to so much trouble avoid using table ?
  Just because you can or is there a more compelling reason?
 
  I'm relatively new to the CSS scene, so these are sincere questions.
 
  Rick
 
 Hi, Rick.
 George's example is a quite complex one (from my point of view,
 anyway), so that, and the lack of standard support by IE (and some
 others?), is probably the reason why you see such code.
 
 Anyway, back to your question: Why not using a table? As George said
 before, that's simply because the data shown is not tabular data. For
 tabular data we will understand that which has no sense if not seen in
 such a way (tabulated), e.g. a calendar. Now, aside from this, tables
 are actually complex elements, and as such, they have been problematic
 or expensive to deal with by browsers and other softwares (like
 screen-readers).
 
 There are cases, though, where the desired layout calls for the help
 of a table, and although basically everyone here would ask you not to
 use it (or simply to use another layout) it could be your best or even
 only choice. If I recall correctly, George had to make use of JavaScript
 to make IE's behave as desired.
 
 But I went beyond the topic, the point here (and what semantic
 markup is about) is to use the actual HTML elements that are supposed to
 enclose your data, like using address for addresses (of course), kbd
 for keyboard sample, code for code (duh!), samp for sample output,
 def for definitions, abbr for abbreviations, p for paragraphs,
 dl+dt+dl for definition lists (such as glossaries), etc. And not
 using blockquote just because you want to indent the code, or using
 pbr/p to add some spacing.
 
 I hope this helped, and sorry if I bored you along the way.
 Rafael.
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


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


Re: [css-d] Float list items

2008-02-21 Thread Rick Faircloth
Thanks for the explanation, Georg!  :o)

Rick

 -Original Message-
 From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
 Behalf Of Gunlaug Sørtun
 Sent: Thursday, February 21, 2008 10:34 PM
 To: 'CSS Discussion'
 Subject: Re: [css-d] Float list items
 
 Rick Faircloth wrote:
  Your example below is impressive, Georg, for sure.
 
  But just look at the CSS hoops you had to jump through just to get
  what looks like a simple table.
 
  Why go to so much trouble avoid using table ? Just because you can
  or is there a more compelling reason?
 
  I'm relatively new to the CSS scene, so these are sincere questions.
 
 In addition to the reasons I've given in the relevant article...
 http://www.gunlaug.no/contents/wd_additions_22.html
 ...it's because...
 
 1: that type of content doesn't fit the description tabular data, I
 just wanted it to appear in a certain way. Its appearance can be changed
 and restyled (for different media for instance) without touching the
 actual document, which is impossible if a table had been used.
 
 2: one day a version of that MS-excuse for a browser may support the
 relevant CSS, and not be in need of proprietary MS-garbage like
 IE-expressions for simulating standard CSS.
 Maybe IE8 (with an opt-in)...
 
 3: by always pushing and testing what can and can not be done with CSS
 today to the limits across browser-land in test-cases like that, I learn
 what choices I have and how to make things work whenever I need to for
 real-world cases. Such knowledge sure comes handy at times :-)
 
 regards
   Georg
 --
 http://www.gunlaug.no
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


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


Re: [css-d] Float list items [medium]

2008-02-21 Thread Rick Faircloth
Hi, Peter, and thanks for the reply!  :o)

Rick

 -Original Message-
 From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
 Behalf Of Peter Hyde-Smith
 Sent: Thursday, February 21, 2008 10:55 PM
 To: 'CSS Discussion'
 Subject: Re: [css-d] Float list items [medium]
 
 
 - Original Message -
 From: Rafael [EMAIL PROTECTED]
 To: Rick Faircloth [EMAIL PROTECTED]
 Cc: 'CSS Discussion' css-d@lists.css-discuss.org
 Sent: Thursday, February 21, 2008 9:32 PM
 Subject: Re: [css-d] Float list items [medium]
 
 
  Rick Faircloth wrote:
  Your example below is impressive, Georg, for sure.
 
  But just look at the CSS hoops you had to jump through
  just to get what looks like a simple table.
 
  Why go to so much trouble avoid using table ?
  Just because you can or is there a more compelling reason?
 
  I'm relatively new to the CSS scene, so these are sincere questions.
 
  Rick
 
 Hi, Rick.
 George's example is a quite complex one (from my point of view,
  anyway), so that, and the lack of standard support by IE (and some
  others?), is probably the reason why you see such code.
 
 Anyway, back to your question: Why not using a table? As George said
  before, that's simply because the data shown is not tabular data. For
  tabular data we will understand that which has no sense if not seen in
  such a way (tabulated), e.g. a calendar. Now, aside from this, tables
  are actually complex elements, and as such, they have been problematic
  or expensive to deal with by browsers and other softwares (like
  screen-readers).
 
 There are cases, though, where the desired layout calls for the help
  of a table, and although basically everyone here would ask you not to
  use it (or simply to use another layout) it could be your best or even
  only choice. If I recall correctly, George had to make use of JavaScript
  to make IE's behave as desired.
 
 But I went beyond the topic, the point here (and what semantic
  markup is about) is to use the actual HTML elements that are supposed to
  enclose your data, like using address for addresses (of course), kbd
  for keyboard sample, code for code (duh!), samp for sample output,
  def for definitions, abbr for abbreviations, p for paragraphs,
  dl+dt+dl for definition lists (such as glossaries), etc. And not
  using blockquote just because you want to indent the code, or using
  pbr/p to add some spacing.
 
 I hope this helped, and sorry if I bored you along the way.
 Rafael.
  __
 
 02/21/2008
 
 Hello Rick:
 
 As a follow on to Rafal, it is a case of using the right tool for the right
 job. HTML for structural markup, CSS for layout and style. The business end
 of the tools aren't broken, it's the handles (the browsers) that tend to
 have ergonomic problems.
 
 Peter
 www.fatpawdesign.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-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] Float list items [medium]

2008-02-21 Thread Peter Hyde-Smith

- Original Message - 
From: Rafael [EMAIL PROTECTED]
To: Rick Faircloth [EMAIL PROTECTED]
Cc: 'CSS Discussion' css-d@lists.css-discuss.org
Sent: Thursday, February 21, 2008 9:32 PM
Subject: Re: [css-d] Float list items [medium]


 Rick Faircloth wrote:
 Your example below is impressive, Georg, for sure.

 But just look at the CSS hoops you had to jump through
 just to get what looks like a simple table.

 Why go to so much trouble avoid using table ?
 Just because you can or is there a more compelling reason?

 I'm relatively new to the CSS scene, so these are sincere questions.

 Rick

Hi, Rick.
George's example is a quite complex one (from my point of view,
 anyway), so that, and the lack of standard support by IE (and some
 others?), is probably the reason why you see such code.

Anyway, back to your question: Why not using a table? As George said
 before, that's simply because the data shown is not tabular data. For
 tabular data we will understand that which has no sense if not seen in
 such a way (tabulated), e.g. a calendar. Now, aside from this, tables
 are actually complex elements, and as such, they have been problematic
 or expensive to deal with by browsers and other softwares (like
 screen-readers).

There are cases, though, where the desired layout calls for the help
 of a table, and although basically everyone here would ask you not to
 use it (or simply to use another layout) it could be your best or even
 only choice. If I recall correctly, George had to make use of JavaScript
 to make IE's behave as desired.

But I went beyond the topic, the point here (and what semantic
 markup is about) is to use the actual HTML elements that are supposed to
 enclose your data, like using address for addresses (of course), kbd
 for keyboard sample, code for code (duh!), samp for sample output,
 def for definitions, abbr for abbreviations, p for paragraphs,
 dl+dt+dl for definition lists (such as glossaries), etc. And not
 using blockquote just because you want to indent the code, or using
 pbr/p to add some spacing.

I hope this helped, and sorry if I bored you along the way.
Rafael.
 __

02/21/2008

Hello Rick:

As a follow on to Rafal, it is a case of using the right tool for the right 
job. HTML for structural markup, CSS for layout and style. The business end 
of the tools aren't broken, it's the handles (the browsers) that tend to 
have ergonomic problems.

Peter
www.fatpawdesign.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] Float list items

2008-02-21 Thread Thierry Koblentz
 -Original Message-
 From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
 discuss.org] On Behalf Of Rick Faircloth
 Sent: Thursday, February 21, 2008 5:47 PM
 To: 'CSS Discussion'
 Subject: Re: [css-d] Float list items
 
 Your example below is impressive, Georg, for sure.
 
 But just look at the CSS hoops you had to jump through
 just to get what looks like a simple table.
 
 Why go to so much trouble avoid using table ?
 Just because you can or is there a more compelling reason?
 
 I'm relatively new to the CSS scene, so these are sincere questions.

It is about semantic markup, we should use HTML elements for the information
they convey, not for how they display.
Another option here could be to use a DL (Definition List), as it is a list
of item/price pairs.

-- 
Regards,
Thierry | http://www.TJKDesign.com




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