Re: [css-d] Laying out a form, adjacent graphic causing me headache

[Jukka K. Korpela]

Darren Best wrote:

> The desired look for the
> form is to have the labels to the left of the data fields, the labels
> right-justified, the data fields left-justified (pretty standard).

In markup, use a table with the labels in one column, the fields in 
another. (This is the logical markup and also by far the easiest for 
styling purposes.) E.g.,


Your name:

...


In CSS, set text-align: right for the first column, text-align: left 
(the default, but it does not hurt to specify it explicitly) for the 
second, and vertical-align: top for both.

The class="lbl" attributes wouldn't really be needed, since you could 
use contextual selectors to refer to the first column, but they make it 
easier to cope with IE 6 and older that don't support such selectors.

E.g.,

td { text-align: left; vertical-align: top; }
td.lbl { text-align: right; }

This approach does no create problems arising from floating, so the 
adjacent graphic problem should vanish. Since you don't use any floating 
to present tabular data in tabular appearance, you're free to use it for 
other purposes, like floating the table as a whole or floating something 
on the right side of it.

>> width: 100px;

Using a table, you also avoid such nasty problems (100px might not be 
enough, for the user-selected font size, and anything you set might be 
too wide too), since a browser automatically decides on column widths 
that are just sufficient for the content.

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] Beyond CC's, targeting Mozilla, Safari and Opera

[Manfred Staudinger]

Hi list,

Currently I'm thinking about a consistent and simple method for CSS to
target not only IE's but also Mozilla, Safari and Opera, each of them
separately and standards compliant.

Up to now the CSS language actually available for developing web sites
is limited by the weakest browser to be supported (IE 6, IE 7). Many
great techniques have been generated and documented by web developers
to overcome bugs and shortcomings.

These constrains will not go away for years to come. But if we had a
method to target the most advanced browsers, we would be able to _add_
something new to the (technically) minimalistic approach dictated by
MS. Web sites would then look differently in different browsers while
functionally still equivalent (a must, I suppose).

What are your pros and cons?

Regards,

Manfred
__
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] Laying out a form, adjacent graphic causing me headache

[Darren Best]

Hello, folks.  You've been a great help on previous questions.  I find the
"positioning" issue to be very difficult to master, and I hope that you are
able to see a simple solution that I'm missing on this one.

I'm putting in a form for submitting questions to the site that I'm re-doing
(http://www.unemployedhelp.on.ca/clientask.html).  The stylesheet is at
"/images/clientstyle.css".  The desired look for the form is to have the
labels to the left of the data fields, the labels right-justified, the data
fields left-justified (pretty standard).

My XHTML markup for the content goes like such:


> Your Name:
>  />
> 
>

(repeat similar 2 more times)

My relevant CSS is:

div.formRow {
> clear: both;
> padding-top: 5px;
> }
>
> .formRow span.formRowLabelNarrow {
> float: left;
> width: 100px;
> text-align: right;
> }
>
> .formRow span.formRowDataNarrow {
> float: right;
> width: 345px;
> text-align: left;
> }
>

My problem is the graphic to the right of the page (in the stylesheet under
"#sidebar").  To be consistent with the rest of the site, the graphic
belongs in this location.  When I put the "clear:both" declaration for
"div.formRow", of course I get my form down below the graphic.  Having just
"clear: left" messes up the vertical alignment.

Do I have to start messing around with trying to change the graphic (on all
pages of the site) to something like "position: absolute" in order to get
the form to gracefully slot in to the left of the graphic?  Or is there an
elegant solution staring me in the face that I just don't see?  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] CSS Drop-Down in IE6?

[Highpowered]

Victor Subervi wrote:
> On Thu, Apr 17, 2008 at 11:29 AM, Highpowered <[EMAIL PROTECTED] 
> > wrote:
>
> IE6's lack of multi-elemental :hover support makes Javascript a
> necessity for any mouseover-triggered menu to work the same as it does
> in 7. Apologies if I am misinterpreting your question.
>
>  
> That´s what I thought, but the above-mentioned page *does* work in IE6 
> w/o JS!
> Victor
You're right. I usually don't delve too deeply into the MS proprietary 
stuff like .htc files, so I hadn't even thought about that. It does make 
sense to use a proprietary MS solution to a strictly MS 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] :: drop down menus ::

[Highpowered]

Amrinder wrote:
> Hi
>
> I am stuck with dropdown menus. They are working fine in IE-7, and firefox 
> and the evil IE6 doesn't render it.
> Should I use javascript or CSS for this.
>
> Here is my code:
>
> **  XHTML code ** 
> 
>   
>   Home
>About Us
>Retail Products
> 
>  Milk Powders
>  UHT Milk
>  Butter
>  Cheese
>  Liquid Products
>  Juices
> 
>
>Dairy Ingredients
>
> Milk Powder
>  Whey Powder
>  Milk Proteins
>  Butter Fat Products
>  Cheese
> 
>
>Exports/Imports
>Contact Us
>   
>
>   
>  
>  
>
>
> ** CSS Code **
>
> #main_nav {
>  clear: both;
>  position: relative;
>  margin-top: 3px;
>  border: 1px solid red;
> }
>
> #menu li {
>  float: left;
>  position: relative;
> }
> #menu li ul {
>  position: absolute;
>  left: 0px;
>  top: 31px;
>  display: none;
>  background-color: #309DCF;
> }
>
> #menu a {
>   background: #309DCF url(../images/menubck_18.gif) scroll repeat-x left top;
>   }
>   
> li ul li {
>  background: url(../images/menubck_18.gif) repeat-x left top;
>  border:1px solid #fff;
>  }
> ul li a {
>  display: block;
>  text-decoration: none;
>  padding: 6px 40px;
>  border-left-width: 1px;
>  border-left-style: solid;
>  border-left-color: #FFF;
> }
> li li a {
>  padding:4px 5px 4px 37px;
>  width:120px;
>  border-left:none;
>  }
> ul  #nav_home  a {
>  width: 30px;
>  border-left: none;
> }
>
> * html li a {
>  width:auto;
>  }
>
> /*  Fix IE. Hide from IE Mac \*/
> * html ul li { float: left;}
> * html ul li a {height:1%;}
> /* End */
>
> #menu li:hover ul, #menu li.over ul {
>  display:block; 
> }
>
> #menu a:hover {
>  background-attachment: scroll;
>  background-image: url(../images/menuhoverbck_18.gif);
>  background-repeat: repeat-x;
>  background-position: left top;
>  background-color: #de5a03;
>  }
>
> ** javascript code **
>
> startList = function() {
>  if (document.all&&document.getElementById) {
>   navRoot = document.getElementById("nav");
>   for (i=0; inode = navRoot.childNodes[i];
>if (node.nodeName=="LI") {
> node.onmouseover=function() {
>  this.className+=" over";
>  }
> node.onmouseout=function() {
> this.className=this.className.replace(" over", "");
> }
>}
>   }
>  }
> }
> window.onload=startList;
>
>   
You need to change you main  id to "nav"  or change the JS navroot 
variable declaration line to read:

navRoot = document.getElementById("menu");

This will allow the JavaScript to work properly. As it stands, the 
script can't target the proper DOM node.
__
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] CSS Drop-Down in IE6?

[Victor Subervi]

On Thu, Apr 17, 2008 at 11:29 AM, Highpowered <[EMAIL PROTECTED]> wrote:

> IE6's lack of multi-elemental :hover support makes Javascript a
> necessity for any mouseover-triggered menu to work the same as it does
> in 7. Apologies if I am misinterpreting your question.


That´s what I thought, but the above-mentioned page *does* work in IE6 w/o
JS!
Victor
__
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] CSS dropdown menus tutorial

[John]

I'd intended this for the whole list on the subject of CSS dropdown  
menus which work with IE, but I haven't actually done the tute yet,  
nor am I experienced enough to *know* whether it will work with IE 6  
or 7.

thanks!

John

tutorial link:

http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp#hs7
__
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

[Bob Meetin]

Felix et al, my scribblings at the end...
> 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.
>   

This is an area that I suggest more of us are overly scratching bald 
spots about than might like to admit.  Seems very simple, don't mess 
with font sizes (and other) and customers will be in control and happy, 
right?  I rarely use IE, but in Firefox the audience can certainly set 
default font sizes, including a minimum.  Are FF users more adaptive? 
Anyhow, IMHO this all works based upon what are default, fresh 
expectations and standards.  It has been such a long time - I no longer 
know what my default browser settings are in Firefox. 

For the sake of argument in FF I set the default font size to 12 but in 
Advanced I set the minimum font size to "None".  I made up a sample page 
with various font sizes at:

http://dottedi.biz/codesamples/misc/font-sizes.html

Here you can compare units, em, pixels and percent.  Mixed expectations 
- maybe it's just me but I would have expected a default setting 
(actually no size set) to be equivalent to 1em, perhaps 12px, and 100%.  
Eyeballing it, it looks like about 1.5em.  Where am I falling short here?

The real question is: "Is it our job to educate our audience or simply 
to educate our clients regarding font-size?"

Second  thing - I'm seeing some really oddball behavior is on my PC with 
IE6 installed.  Fonts on regular websites display as expected, however 
with this particular page, absolutely everything is showing the same 
size.  Not even the red color I attached to default is being read.  
However the table/td/p CSS is displaying fine. What might be the cause?

-Bob


__
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] CSS Drop-Down in IE6?

[Highpowered]

Victor Subervi wrote:
> Hi:
> Has anyone come up with a css drop-down menu that works in both IE7 *and*
> IE6? 
>
>   
IE6's lack of multi-elemental :hover support makes Javascript a 
necessity for any mouseover-triggered menu to work the same as it does 
in 7. Apologies if I am misinterpreting your question.

- HP
__
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] Good javascript list like this on?

[Alex Robinson]

At 08:51 -0700 17/4/08, John wrote:
>I apologize for any off-topicness this question represents..
>Can anybody recommend a javascript mail list of the same caliber as
>this list?

Have a look at the wiki's Off Topic page - it has useful links to 
other mailing lists

http://css-discuss.incutio.com/?page=OffTopic

__
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] Good javascript list like this on?

[David Laakso]

John wrote:
> Can anybody recommend a javascript mail list of the same caliber as 
> this list?
>
>
>
> John
>
> _




See bottom list:


-- 
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] Good javascript list like this on?

[John]

I apologize for any off-topicness this question represents..
Can anybody recommend a javascript mail list of the same caliber as 
this list?

thank you!

John

__
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] Suckerfish navigation Versus Slideshow JS images

[Gunlaug Sørtun]

Jack Timmons wrote:
> On Thu, Apr 17, 2008 at 9:39 AM, Krystian - Sunlust 
> <[EMAIL PROTECTED]> wrote:

>> http://www.720taxis.com/test

> I think z-index: 1 on myGallery and z-index 2> on the UL will fix it.

Make that...

#sideBox {
position : relative;
z-index: 6 /* or higher */;
}

...instead, as R:P with z-index on the UL will disturb IE6.

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] Suckerfish navigation Versus Slideshow JS images

[Jack Timmons]

On Thu, Apr 17, 2008 at 9:39 AM, Krystian - Sunlust <[EMAIL PROTECTED]>
wrote:

> Hey guys/girls,
>
> I have a really big problem, I'm desiging a website and I placed
> suckerfish dropdown menu which I copied from html dog, and it works
> great on it's own.
> Problem is, there's my slideshow stuff on the right of it, and when I
> hover "Special Services" the submenu opens partly under the slideshow,
> you can see for yourself:
> http://www.720taxis.com/test
>
> I'm not sure if this can be solved.
> XHTML doesn't validate because of missing alt tags on images (website
> is under heavy construction, so I didn't add all the detail into it),
> and because of the weather widget and it's elements, but it doesn't
> concern the slideshow and my problem.
> CSS validates.
>
> Hope that someone can help me out on this one.
>
> Regards,
>
> --
> Krystian - Sunlust
> Freelance on the side: Sunlust Designs - http://sunlust.net
> Full time Website Designer at SME System Solutions Ltd
> __
>

I think z-index: 1 on myGallery and z-index 2> on the UL will fix it.

-- 
-Jack Timmons
http://www.trotlc.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] Suckerfish navigation Versus Slideshow JS images

[Krystian - Sunlust]

Hey guys/girls,

I have a really big problem, I'm desiging a website and I placed
suckerfish dropdown menu which I copied from html dog, and it works
great on it's own.
Problem is, there's my slideshow stuff on the right of it, and when I
hover "Special Services" the submenu opens partly under the slideshow,
you can see for yourself:
http://www.720taxis.com/test

I'm not sure if this can be solved.
XHTML doesn't validate because of missing alt tags on images (website
is under heavy construction, so I didn't add all the detail into it),
and because of the weather widget and it's elements, but it doesn't
concern the slideshow and my problem.
CSS validates.

Hope that someone can help me out on this one.

Regards,

-- 
Krystian - Sunlust
Freelance on the side: Sunlust Designs - http://sunlust.net
Full time Website Designer at SME System Solutions Ltd
__
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] CSS Drop-Down in IE6?

[David Laakso]

Victor Subervi wrote:
> Has anyone come up with a css drop-down menu that works in both IE7 *and*
> IE6? Is it even possible? I see Chris Case tried as much, and no one seems
> to have responded to his post...
> TIA,
> Victor
>   

Drop-downs are sometimes problematic and difficult to execute.
Here are two I 've had luck with...



-- 
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] CSS Drop-Down in IE6?

[Victor Subervi]

Hi:
Has anyone come up with a css drop-down menu that works in both IE7 *and*
IE6? Is it even possible? I see Chris Case tried as much, and no one seems
to have responded to his post...
TIA,
Victor
__
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] Wierd formatting issue in one laptop using IE6

[Nancy Johnson]

Thank you all for all of your answers and suggestions.  Bruno and Ryan
were right on with the source of the problem. Adding margin-right:
-1em;  fixed the problem.

I really liked seeing our site on browsercam.com.  I forwarded the
link to my supervisor and others who may have some interest.

Nancy Johnson

On Wed, Apr 16, 2008 at 6:15 PM, Bruno Fassino <[EMAIL PROTECTED]> wrote:
> Nancy Johnson wrote:
>  >
>  > My supervisor is home sick and I got a call from him telling me that
>  > the dark gray content area on the right displayed below the left nav
>  > on the left ONLY on his laptop when using IE6 and  ONLY if the
>  > text-size was medium.  It worked fine in larger, largest, smaller,
>  > and smallest text-size.
>  >
>  > Any suggestions?
>  >
>  > Here is one of the pages that appear broken to him
>  > http://www-odi.nhtsa.dot.gov/downloads/index.cfm.  The others are
>  > mostly in this section: http://www-odi.nhtsa.dot.gov/ewr/
>
>
>  As Ryan guessed, I see indeed that problem in a 120 dpi configuration.
>  You could try adding a negative "back-side" margin to your last float:
>
>  .contentcopy { margin-right: -1em; }
>
>
>  Hope this helps,
>
>  Bruno
>
>
>  --
>  Bruno Fassino http://www.brunildo.org/test
>
>
__
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/