[css-d] Getting my CSS-D password...

[Austin, Darrel]

I hate being *THAT* person, but looks like I have to be this time...

I don't have my CSS-D password anymore, so went to the site to get a
reminder and noticed a catch-22:

http://www.css-discuss.org/mailman/listinfo/css-d/

--
To change your subscription profile (set account options, *get a
password reminder*, and so on), enter your subscription email address
and *password*
--

It seems that to get a password reminder, one needs to know their
password.

(Am I missing something obvious? That's certainly likely...)

-Darrel
__
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] 3 column layout. Am I missing the obvoius? (question and commentary)

[Austin, Darrel]

> Hi Darrel,
> This approach used to be very common, but now most authors don't want
> to
> have their content come last.


Good point, Thierry. I do imagine most of the complexity comes from
wanting source order options.

In this case, we're OK, given it's an intranet.

Bill...I just saw your Holier Grail project. Looks nice! 

-Darrel
__
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] 3 column layout. Am I missing the obvoius? (question and commentary)

[Austin, Darrel]

Over the past year or so, my HTML + CSS work has been mostly producing
layouts for other visual designers. CSS has been great and it's been
fairly easy to layout the pages from scratch. Most of these were
2-column layouts where we had control over the content.

I'm now wanting to build a 3-column fluid layout for our CMS. The main
issue is IE6 (still got to support that one) and the fact that we have
little to no control over the content, so column lengths can be
anything.

So, I started grabbing some sample templates online like the Holy Grail
ones, some from Glish, etc.

Invariably, I'd start looking at the CSS and HTML and begin to get
frustrated with the amount of hacks and non-semantic wrappers that are
still being used in all of these. One was a combination of 4 nested
wrappers, negative margins, and offset positioning. To change the width
of one column, you'd have to change margin attributes here, width
attributes there, and then do some math to figure out the wrapper
offsets. Kind of ridiculous, I thought.

I figured I'd start from scratch and quickly came up with a layout like
this:

HTML:


 
 
 


CSS:

Left { float: left, width: 200px;}
Right { float: right, width: 200px;}
Center {margin: 0px 220px;}
columnwrapper {width: 100%; overflow: auto} /* the one 'hack' to get it
to clear floats */

This seems to work just fine in IE6+ up.

My question is: Am I missing something obvious? Is there something wrong
with the above example? Why are most of the 3-column layouts out there
so heavily relying on CSS hacks and nested wrappers? Is it a workaround
for alternative source ordering? Is it remnants of IE < 6 support? A If
so, that makes sense...which leads to the next question...are there any
preferred pre-made CSS layouts that are more IE6+ centric?

-Darrel
__
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] ASP.NET and http://validator.w3.org/

[Austin, Darrel]

> There are some elements of .NET output a developer has no control
over.
> For example, this source code:
> 
> http://www.asp.net/cssadapters/

This article might help, too:

http://msdn2.microsoft.com/en-us/library/aa479043.aspx

-Darrel
__
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] ASP.NET and http://validator.w3.org/

[Austin, Darrel]

> The w3 validator clearly is not compatible with Microsoft ASP.NET
code.
> Here is an example - http://www.cargovango.com/start.aspx. All of the
> code that it flags is generated at run time. It's nothing that a
> developer adds.

That's one way to spin it!

It's probably more accurate to say 'Microsoft, the owner of ASP.net, has
never really made valid XHTML a priority in any of its products'

To be fair, ASP.net 2.0 is eons ahead of 1.1 in that area.

But, then there's SharePoint...eww...

This is a decent ASP.net site that's focuses on web standards:

http://aspnetresources.com/

_Darrel
__
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] Iframe transparency

[Austin, Darrel]

> But I still can't get rid of the yellow and purple.
> Could
> one of you gurus please help? This page does validate.
> 
> http://chekmed.com/test_transparent.html

Test_transparent.html is the page (frameset) you are controlling.

The iFrame contents is a different page: 

http://cpml.fnismls.com/idx/SearchIDX.aspx?RMLS_SESSION_GUID=%7bf36bdb9c
-628f-4e31-a7c8-de2feec02631%7d&MLS=CPML&SUBSCRIBER=3fbd9fd3-f792-4fa9-9
ad9-3f702a5dbcf1&class=1

If you want to modify the colors there, you need to modify the CSS for
that page.

Remember that frames are simply 'containers' for other pages. Any CSS
applied to the frameset will have no bearing on any of the pages loaded
within the frames.

-Darrel
__
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 replace

[Austin, Darrel]

> Site is dynamic, and there would be far too much 
> overhead to parse all the content and append a style to any numbers

Is the site run from a CMS? One could parse the content going into the
CSS with regular expressions and wrap the numbers with Span tags. Of
course, to prevent things getting messed up, you'd also want to strip
that information coming back into the editor.

> Is there any way to use pure CSS to give font-family:Georgia; 
> to everything except numbers?

There's likely a javascript solution. But it's way overkill just to
please a silly request for the boss. I'd say your best solution is to
just install a custom version of Georgia on your boss's computer with
numbers they like. ;o)

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Links on background images

[Austin, Darrel]

> Moving the span isn't a bad idea, however if you're doing this out of
> concern for non-visual browsing, the title tag can do this part of the work.
 
It *should* but AFAIK, many of the common screen readers ignore TITLE 
attributes by default.
 
-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Links on background images

[Austin, Darrel]

> Darrel, create an  with the desired link in the element
> that has the background, and give the following CSS:
 
FYI, Anahita is the one asking. That said, while your solution would work, 
you're left with an empty link (which is neither semantic nor terribly 
accessible). Again, if you want the logo to be a link, then the logo should be 
part of the page content. You could do something like this:
 
Go Home
 
Position the  above the background image, then postition the span 
off-screen. It's work, but still seems messing compared to just linking the 
actual logo image itself.
 
> I don't know too much on this subject but couldn't an image map be used?
 
No, the background image isn't part of the page content, therefore there's 
nothing to map.
 
-Darrel

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Links on background images

[Austin, Darrel]

> I have created a simple website where the logo is inserted as a background 
> image in the CSS.
>However, I would like the logo to be linked to the index page (so that the 
>user can click it). Is there 
> any way to do that with the background image (in other words, is it possible, 
> in any way at all, 
> to have links embedded in the CSS?)?

No. CSS is style, not content.
 
Most folks would probably argue that a logo is content, and, therefore, really 
should be part of the content rather than a decorative background image.
 
-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Properly toggling the positioning of elements in a DD

[Austin, Darrel]

I'm using this very nice bit of javascript and CSS to create a
expandable/collapsible DL:

http://www.tjkdesign.com/articles/toggle_elements.asp

The specific CSS that is used to toggle the positioning of the DD is
this:

#TJK_DL .showDD {position:relative;top:0}
#TJK_DL dd,.hideDD{top:-px;position:absolute}

The problem I am having is that in IE6, I can't seem to get any nested
elements within the DD to also reposition.

For example, this code will work fine in both FF and IE:


   My text


However, this only works in FF:


   My text


In IE, it seems to reposition the DD, as it makes enough space for the
content, but the content contained within the DD doesn't seem to get
repositioned as well.

Is this a CSS issue, and, if so, is there something noticable that is
causing this issue? A fix?

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Gallery from database

[Austin, Darrel]

> So what are the thoughts?

...about what? Not quite sure what you are asking.

I've built an image/portfolio management tool. The front end CSS is
somewhat arbitrary. I could use a CSS template or a table template
interchangeably.

IMHO, a good content management tool does just that...and leaves the
front end up to the individual.

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Double space after a period

[Austin, Darrel]

> I've looked around for a stable solution which doesn't 
> involve putting  ,   etc all over the content 
> (that's presentational :-) ) and can only come up with using 
> the old  tag (for strikeout):
> 
> s{
> padding-right: 1em; 
> text-decoration : none;
> }

Strikeout implies something specific.

This isn't a semantic issue, merely stylistic. As such, I'd use a span
tag instead.

-Darrel

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Double space after a period

[Austin, Darrel]

>   Is there a way in CSS to turn a single space after a 
> period into a double space - without using   (the no 
> break HTML code)?  The drawback to using  , besides 
> having to type it in, is that if a sentence in the middle of 
> a paragraph starts on a new line, that line is indented by a 
> space, which throws off the look of the whole paragraph.

One option just occurred to me...via server-side code, you could search
for every period and replace it with:

.

Then, in your css, you could give that a padding-right of say, 1em. That
should give you what you want without the issue of the   indents.

Granted, it's still not proper typography IMHO. ;o)

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Double space after a period

[Austin, Darrel]

>   Is there a way in CSS to turn a single space after a 
> period into a double space - without using   (the no 
> break HTML code)?  The drawback to using  , besides 
> having to type it in, is that if a sentence in the middle of 
> a paragraph starts on a new line, that line is indented by a 
> space, which throws off the look of the whole paragraph.

With CSS? No. And while you could do it server side or via javascript,
you'd still run into the issue you mention where you could get the odd
indent.

FYI, you shouldn't be doing this anyway. Most agree that it's not proper
typography (though there's a few hold-outs...namely High School English
teachers...)

http://en.wikipedia.org/wiki/French_spacing

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Are CSS Drop-down Menus Searchable

[Austin, Darrel]

> > If you turn of javascript and CSS can you still see the menu items? 
> > If
> > so, then yes, search engines shouldn't have a problem with it.
> 
> I think we're on off-topic ground here, but just wanted to 
> step in on this one point. A menu can indeed have its 
> sub-menus hidden, even with script disabled, and still be 
> fully accessible to search bots.

My wording was poor. I should have said 'If you turn off javascript and
CSS can you still navigate the web site?'.

Indeed, as Al says, in terms of human accessibility, you likely do NOT
want to display every single hidden sub-menu if possible. Thanks for the
clarification, Al.

To bring it back on-topic, Suckerfish seems to be a popular recommeded
menu system. While it's impressive in it's CSSness, I find it lacking in
terms of usability features that typically only Javascript can provide
(menu delays, better keyboard access, etc.)

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Are CSS Drop-down Menus Searchable

[Austin, Darrel]

> I was wondering if "in general", text based submenu(s) would 
> be searchable by search engine spyders or robots?

If you turn of javascript and CSS can you still see the menu items? If
so, then yes, search engines shouldn't have a problem with it.

The main issue is that two popular web tools (Dreamweaver and Fireworks)
have built in fly-out navigation menu systems that make REALLY crappy
and inaccessible fly-out navigation systems.

PVII makes one of the better ones. FYI, here's the list of one that I
can recommend IF you have to use fly-out navigation (which I usually
don't recommend):

http://mnteractive.com/archive/hangover-fly-out-navigation-part-ii/

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css compatible for 600x400 and 1024x640 resolutions

[Austin, Darrel]

> Though I note that it is, somewhat ironically, itself a fixed-width 
> column of text. :)

Not just that, but EXTREMELY wide. Good example of 'do what we say, not
as we do'. FYI, if it bothers anyone else, I built a scriptlet that will
covert ALAP's CSS to a nice liquid-width layout:

http://mnteractive.com/archive/fixing-the-fixed-width-design-again/

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css compatible for 600x400 and 1024x640 resolutions

[Austin, Darrel]

> Does anyone know of good solutions that I could test and try 
> to make the files compatible for both resolutions (600x400 
> and 1024x640) ?

First of all, don't design for screen resolutions. It's mostly
irrelevant. What matters are browser viewport sizes, and that can be
anything and everything.

However, what you are asking is how to make a site that flexes to fit.
The common term is 'liquid layout' or 'fluid layout' with some variants
such as 'jello layout'.

If the site was designed initially for a specific width at 1024, it's
doubtful that a bit of CSS will fix it so that it properly resizes.
You'll likely have to rebuild the pages over again this time with the
liquid layout in mind. For ideas, just google 'css liquid layout' and
you should find plenty of examples.

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] (no subject)

[Austin, Darrel]

> Why not apply that fix to IE only and spare Firefox?  You could do:

Because...uh...umm...well...that's a good point. ;o)

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] 'dropped column' (was: no subject)

[Austin, Darrel]

> Well, I suppose you could just let the software do its thing 
> without intervention :-) ?
> 

I could, but that's not what we want to happen. So that's not a viable
solution.

(and thanks for fixing the 'no subject'...me = embarrassed ;o)

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] (no subject)

[Austin, Darrel]

I'm using a 3-column layout on our new site. To avoid the dreaded
'dropped column' problem in IE where if the total column widths are
greater than the width of the browser, one or more of the column DIVs
will jump down the page, I've set any element in the center column that
may be too wide to get wrapped in a div set to 100% and to have
overflow-scroll set on it:

http://www.mncourts.gov/district/2/?page=60

This works fairly well in both IE and Firefox.

However, in Firefox, the scrollbar will appear and disappear no matter
the specific width of the browser.

For instance, at 600px, 610px, and 615px, you may see the scrollbar, but
at 605px, 611px and 614px, it comes back.

I assume that this is some sort of rounding issue in Firefox? Any fix
for this?

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Getting Tables to overflow with scroll

[Austin, Darrel]

I'm on my 3rd CSS overhaul of our site templates. I'm actually fairly
happy with this latest solution, and took some advice from previous
queries on how to handle content that is too-wide for the columns
(thereby pushing other columns down the page) and decided to set all of
the objects within the content column to overflow: auto.

So, if an image is way too wide, it now is simply cropped and a scroll
bar shows up.

This works great EXCEPT that I can't seem to get overflow: auto to work
with tables. 

In firefox, if the table is too wide, it just ignores the overflow and
overlaps whatever columns are intruding into its space.

In IE, if the table is too wide, it just forces the wrapper DIV to that
width (and I'm back to square one, as it's again pushing other divs down
the page when that happens).

PLEASE tell me there's a way to get overflow: auto to work with tables.
;o) ;o) ;o)

-Darrel

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tables it is! (no luck finding a 3-column layout thatworksin IE...)

[Austin, Darrel]

> I've had much success in avoiding this problem w/ a judicious 
> use of overflow:hidden

Well, we can't HIDE the content ;o)

I did try overflow: scroll, but that, while works, is goofy looking and
I'm afraid will just confuse most folks that encounter it.

There are two main culprits:

 - large images (which I think overflow: hidden would be fine for)
 - semi-large tables (alas, a necessity for some of our data)

The latter is the bigger issue. 

> Don't give up the fight too soon.

;o)  

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tables it is! (no luck finding a 3-column layout that worksin IE...)

[Austin, Darrel]

> In any case, if you cannot control how wide the main content 
> will be then you either
> 
> a) have a very bad CMS that allows the editors too much 
> freedom in designing the page rather than editing content or

It's our own CMS and we can only restrict content editing to a point. If
somone needs to put in a 12 column table because that data NEEDS to be
published, then I'm not in a position to tell them they can't. It's part
politics, part lack of staff/editors, part practicality.

The catch is that tables do this quite well, so in many ways, I guess
that is the better solution in this case. I'm just bummed that I have to
slap a table in there. ;o)

Ideally, if someone WANTS to put in a really wide chunk of content, I'd
like them to be able to do it. Alas, the page would have to scroll
horizontally, but at least they could do it.

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tables it is! (no luck finding a 3-column layout that works in IE...)

[Austin, Darrel]

> well isn't that quite obvious? if you don't wan't it to drop, 
> you simply can't make them too wide.

I'm in control of the template. Not how wide the content inside the
template is on a page-by-page basis.

> i think you should look 
> for something like an "auto resizeable columns" tutorial. not 
> three column layouts

Google returns 0 results. Not sure what you are referring to. Can you
clarify?

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tables it is! (no luck finding a 3-column layout that worksin IE...)

[Austin, Darrel]

 
> What about using a min-width value to prevent the problem?

Because I'm not in control of the content, therefore, someone can always
put something wider in the content area than any min-width attribute I
set.

Seems like all the 3-column layouts work great if one is also in control
of the content. Alas, this being a CMS that, while we try to 'police' we
simply can not enforce to the fullest extent of the 'content law' ;o)

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Understanding 'enclosing' divs (my wrapper 'leaks')

[Austin, Darrel]

I'm stumped on my layout. I have a div that surrounds all my page
content:

#pageFrameRight {
background-color: #fefefe;
border: 0px;
background-image: url(/assets/bgnd_wrapShadow_right_33.gif);
background-position: right top;
padding: 0px 15px 0px 0px;
background-repeat: repeat-y;
margin: 0px;
width: 100%;
}

And, possibly related, my BODY style:

body {
padding: 0px;
background: #33 url(/assets/bgnd_body_33.gif);
margin: 0% 1%;
min-width: 770px;
}

If whatever I have inside of my wrapper div is WIDER than the wrapper
(say, if my browser is shrunk down), it 'leaks' out. I can't seem to
force the contents of pageFrameRight to force pageFrameRight to stay
open.

I've played with getting rid of all floats, as well as sticking
everything inside the wrapper inside tables, yet the wrapper still
'leaks'. 

Is there a way to get around this? Am I doing something wrong?

-Darrel

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Dropdown menu issue

[Austin, Darrel]

 
> The UDM4 menus were actually a suggested method - but I was 
> putting that off because I didn't want to start from scratch 
> again 

FYI, the better menu scripts like UDM4 and PVII's just work off of a
standard nested UL. So, in terms of your markup, there shouldn't be much
that you need to change other than adding some new classes and/or IDs
for the script to hook into.

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Tables it is! (no luck finding a 3-column layout that works in IE...)

[Austin, Darrel]

Well, I've looked through the exhaustive list of 3 column layouts that
the Wiki crew has so remarkably maintained:

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

Alas, I couldn't find a single layout that prevented the IE/PC problem
where if one of the columns has content too wide, it drops one or more
of the other divs down the page.

It looks like I'm just going to have to use a 3-column table to handle
this...at least for IE (maybe I'll work in some conditional IE comments
so only IE folks have the table). 

I thought I'd post one more time in case someone wanted to try to talk
me out of it. ;o)

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Dropdown menu issue

[Austin, Darrel]

> Bascially, I'm a subcontractor for the designer.  And I know 
> you all have had those clients that will *just not listen* to 
> you when you say something can't be done.  This is the issue 
> we're having.  The client wants the Son of Suckerfish 
> dropdowns (which were implemented and work great).  But we 
> can't touch the database, and the idea of "more" added to the 
> bottom was brought up and all that - they don't want it.  
> They just want the menu to be on the site, and have the lists 
> populated by the database with no further effort from them.  
> They will not subcategorize, and they will not add a "more" 

Sometimes clients just have to be fed a dose of reality. ;o)

I'd say:

 - pick a more robust fly-out menu system (such as UDM4
   or the PVII one Al mentioned) which may accommodate
   the extra items better.

 - maybe put the fly-out menu in a div with a given height
   and set overflow: scroll?

 - skip the fly-out menu and use a form drop-down list

 - try the 'dose of reality' idea. ;o)

Good luck!

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Dropdown menu issue

[Austin, Darrel]

> hover links to expand the submenus.  The thing is, some of 
> the lists get *really* long, and when you hover over a menu 
> selection, the dropdown will fall below the viewable area of 
> the screen (I'm on 1280 x 1024 - and it even does it to me - 
> I can't imagine what's being cut off from view to someone using
> 800x600.)

This seems less of a CSS issue and much more of a design/IA issue.

Personally, I think this is a good example of when NOT to use fly-out
navigation. Just have people navigate to the page that then lists all of
these items.

Otherwise, just grab the top 10 items and add a MORE link at the bottom
of the fly-out navigation.

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Preventing DIVs from dropping down - PART II

[Austin, Darrel]

Thanks to the last round of anwers, I *thought* I had my page layout
problem fixed where one div would push the other below it if the browser
was shrunk.

I ended up adding a second wrapper div, which fixed IE from
miscalculating the widths of the two divs, then gave all IE users a
fixed-width layout, which helped some more.

Alas, there are still instances where one dive is pushed below the
other. The most common is when the content area contains an item wider
than the div...for instance someone uploads a large image, a wide table,
or, quite often, has a long URL that they are using as a link that won't
wrap.

When that happens, the navigation div is pushed out of the way and drops
to the bottom of the page.

I'm really trying to avoid layout tables, but, at this point, it seems
like the only sure way to force two columns to never move down the page
when one of the two is too wide.

Any thoughts/suggestions/remedies? Anyone know of a 3-column layout that
won't cause the dreaded 'dropped div' on window resize?

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Preventing DIVs from dropping down the page on smaller screens.

[Austin, Darrel]

> I don't know what the name of this IE-phenomenon is, but it's 
> indeed a non-uncommon problem. IE is computing the width of a 
> column in a % of (in this case) the body width. That is too much!
> With an extra box inside you can set the parent width to 
> 100%, and then IE is performing as it should be.
> See testpages .

Thanks, francky. That worked nicely!

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Preventing DIVs from dropping down the page on smaller screens.

[Austin, Darrel]

> Look at example #3 on this site:
> http://www.antix.co.uk/code/css/imposing_minimum_width/ 

Thanks. I need to do some min-width anyways, I've decided. Alas, the
expression method crashed my IE. So, I'm not too trusting of it. ;o)

Think I'll go with the spacer image. Old-fashioned, but it'll work. ;o)

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Preventing DIVs from dropping down the page on smaller screens.

[Austin, Darrel]

Is there a common way to solve DIVs from dropping down the page when the
browser is shrunk short of using min-width settings?

I'm having a problem mainly in IE. My markup is like this:

Div pageWrapper
   div leftNav {width: 200px; float: left;}
   Div contentColumnsWrapper {margin-left: 210px;}
   div leftColumn {float: left; width: 70%;}
   div rightColumn {float: right; width: 25%;}
   div clear: both
/div contentColumnsWrapper
/Div pageWrapper

In IE, if I reduce my window to a specific width, the leftColumn and
rightColumn divs pop down below the leftNav div.

In addition, at a certain percentage width, just my rightColumn will
drop below the leftColumn. That issue appears to be that the two columns
aren't retaining their percetange widths properly (ie, as the window
shrinks, it appears both of those divs are taking up MORE than the 100%
of the container.)

Seems like a non-uncommon problem, but I haven't found a solution yet
via google. I'm not against using min-width hacks for IE, but would
prefer to not have to if there's a way.

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Pointer to JavaScript Timeout for my CSS Menu please

[Austin, Darrel]

> I've got a horizontal drop-down CSS menu with flyouts for 
> which I'd like to add some code to prevent the drop-downs & 
> flyouts closing if the mouse accidentally moves away.

I can't give you a specific answer other than I've tried this in the
past and finally realized that writing fly-out navigation scripts isn't
terribly easy and that reinventing the wheel wasn't worth my time. As
such, I finally did some research on decent fly-out navigation. I
actually avoid fly-out navigation as much as I can, but when it's
insisted that I use it, I wanted to use a decent product:

http://mnteractive.com/archive/hangover-fly-out-navigation-part-ii/

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS dropdown menu + Accessibility Issue

[Austin, Darrel]

> Secondly, I've a bit of an accessibility issue with this 
> menu, 

A CSS-only menu will be less usable/accessible than a good
javascript+css menu. Note that there are a LOT of bad javascript+css
menus too.

The problem with an all-css solution is that you don't have the ability
to add some of the timers and more advanced keyboard navigation that the
javascript solutions can provide.

Here's a roundup of the only fly-out menu systems that I can recommend:

http://mnteractive.com/archive/hangover-fly-out-navigation-part-ii/

Also, there's the philosophical issue that people debate: CSS is for
style, javascript for interaction.

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Wrapping images in containers without widths?

[Austin, Darrel]

 
> What if you floated the div? That will shrink wrap the div to content.

Yep. That did it. Thanks!

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Wrapping images in containers without widths?

[Austin, Darrel]

> I would expect spans to wrap with and height as long as you 
> count the  
> space for the tails of p and y as images sit in the text baseline.   
> Do you have a test page or other url we can play with?

http://www.darrelaustin.com/stuff/spanTest/

I have an image surrounded by 3 spans all with borders set to different
colors. As you can see, they only wrap the width, not the height (at
least in Firefox).

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Wrapping images in containers without widths?

[Austin, Darrel]

Is there  away to wrap an image in a container (span or div) without
having to give the span or div an explicit size?

DIVs by default, of course, are wrapping the height of the image just
fine, but want to take up the full horizontal space of the parent
container.

SPANs seem to be doing the opposite...wrapping the width, but not the
height.

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE fix for white space in the HTML being rendered?

[Austin, Darrel]

I've been struggling with getting a UL formatted so that there isn't a
gap between each LI.

Set each LI to have a margin of 0, and that worked great for firefox,
but not for IE/PC.

I finally discovered the fix was to change my HTML from this:


link


link


To this:

linklink

I vaguely remember this being an issue back in the NN4 era, but haven't
ran into it in a long while. Is this just a browser bug, or is there any
chance that some CSS could remedy this? I'm guessing not, but thought
I'd ask...

I can obviously change the markup, but would prefer not to, both for
readability and the fact I have to dig into the bowels of the sytem's
XML/XLST to tranform the output.

-Darrel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Accessible multi-level tabbed navigation

[Austin, Darrel]

 > We are trying to create multi-level tabbed navigation for the 
> new UC Berkeley calendar. We have one instance where we have 
> three levels of tabs, with the third level having two lines:
> http://mms.media.berkeley.edu:8901/UCBCNUsabilityMockups/Gatew
> ay/New/UCBEven

Most UI folks would point out that multi-leveled tab menus are, by
default, a measure more inaccessible simply due to their awkward
usability.

Looking at the page, it seems like you have some vertical space you
could use for navigation. I'd suggest having the second and 3rd levels
of tabs be rendered as a nested list-navigation down the left side of
the page instead, perhaps moving the current left hand navigation to the
right side. It would be visually more logical, as well as easier to use.

If you simply can't do that, I'd suggest dropping the tab metaphor. Just
make it a standard horizontal nav bar:

Golf | lacrosse | field hockey | etc...

> We are wondering if, when someone clicks on something in the 
> third level in the top row (e.g. Cross Country), it is 
> possible for the two rows to switch order, similar to the way 
> rows of tabs change places when selected in the Windows OS so 
> that the selected item is always in the bottom row. 

Again, most UI folks point out Window's implementation of tabs as the
worst possible way to handle it. ;o)

But, if you must, I'd do this server side. Wrap each row in a div and
change the order of rendering via some server-side scripting.

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

[css-d] Preventing the 'drop to the bottom if it doesn't fit' issue.

[Austin, Darrel]

I have a typical two column layout using floats.

The problem I am having is that in IE, if the right column is narrower
than an object within it, the contents of the column is pushed down
below the left float in IE.

I've seen this before so am hoping it's a common problem (and, really
hoping there's a 'fix' for it. ;o)

A form of min-width might be the trick, though that would require I use
one of the min-width hacks for IE...which might be acceptable.

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

Re: [css-d] ASP.NET/CSS

[Austin, Darrel]

 
> The problem with that approach is you're sacrificing control 
> over your markup with proper seperation of functionality and 
> design.

Yes, but...

> If you wanted to make a change to the layout of the 
> content, you'd have to do a recompile to make the changes, 
> which is exactly what you want to avoid. 

...in my case, that's not a big deal. On large teams where markup
designers are separate from the back-end developers, I can see that
being a problem (though, ideally, those folks are never truly
seperated).

> Now your conviction for perfect XHTML has caused you to 
> develop horrible code behind.

Not horrible, just not ideal. In the end, the end user doesn't care
about the code behind. 

> The datagrid should only ever be used when you actually want 
> to display tabular data, in which case it becomes 
> semantically correct.

Except that there is no support for semantic accessibility tags and
attributes like THs, Scope, Header, etc.

> Every other instance in which you'd 
> want programmatic repetition (such as dynamic menus, or 
> lists) the repeater control will work just fine and as stated 
> before allows 100% control over your actual markup.

Yea, I mentioned the repeater control. Those can work nicely. They can
take more work to implement properly. I *know* I should use more
repeaters, but often find stringBuilders quicker to implement. Besides,
even with the repeaters, I'm adding so many function calls to format
individual strings that it's still a mix of HTML and codebehind. At the
end of the day, while I strive for perfect back end coding, I know that
it really doesn't matter in the long run. As long as it is easy to
understand for those that maintain it, and works, it's sometimes better
to pump it out and get on to the next item rather than spend a lot of
time tweaking it. Logically, tweaking it (and building things like
custom controls) would allow for scalability in the future and easier
maintenance, but I've found, over time, that It's more likely that it
will be completely rebuilt anyways when that time comes.

All IMHO, of course.

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

Re: [css-d] ASP.NET/CSS

[Austin, Darrel]

 
> Most of my output is through datagrids-(

Just MHO, but I've long given up on using .nets built in datagrids for
anything more than internal web applications where the interface isn't
terribly important.

Otherwise, I use a string builder and make my own output ala the asp
days. Not ideal, but lets be regain control of my output.

Repeater controls are also useful in that manner as well.

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

Re: [css-d] ASP.NET & CSS

[Austin, Darrel]

> +1. The client id is very tricky due to the concept of naming 
> containers
> causing your server side ID to be expanded to a name that's 
> guaranteed to be unique within the scope of the page 
> (required for PostBack resolution).
> However, as stated, classes work flawlessly.

You can work around this by separating your HTML wrappers from your .net
wrappers.

For instance:






A few things to remember when working with .net and css:

 - most built-in controls produce invalid markup
   as such, write your own
 - all pages are wrapped in a one big FORM tag
 - VS has a nasty habit of rewriting your code. 

Asp.net 2 is supposed to remedy a lot of that. If you are just moving
into .net, definitely skip 1.1 and dive right into 2.0

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

RE: [css-d] Good looking fluid-width sites

[Austin, Darrel]

> Now here's another example for you all:
> http://pro.html.it/esempio/proglayout/2col.html
> 
> Assume this was only given to IE. No jitters. Just a smooth 
> snap. Any complaints?

Looks nice. 

Al has a point *if* one is resizing their browser while reading, but the
entire point of the jello layout is that it will load in the browser
already fit to the viewport. In otherwords, the point is to make a site
that the IE user doesn't have to resize to begin with.

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

RE: [css-d] Good looking fluid-width sites

[Austin, Darrel]

> > http://www.3tc4u.co.uk/
> >
> > Notice the max-width on the center column. A great example.

Yes, not bad at all!

> It's broken in IE6 when the window is resized.

Seems to be working for me. It appears they're using the javascript hack
for that. 

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

RE: [css-d] Good looking fluid-width sites

[Austin, Darrel]

> Look at this
> http://www.positioniseverything.net/articles/sidepages/jello-p
> iefecta-clean.html

Thaks for all the responses.

To clarify, I was specifically looking for liquid (or jello) layouts
that used the min/max width attributes well. The above link is a really
nice example of the theory. Alas, there still doesn't seem to be many
commercial sites that actually implement such a layout. Still looking,
though. ;o)

I did just stumble across this one:
http://uwmike.com/articles/2005/05/04/jello-liquid-layout

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

[css-d] Good looking fluid-width sites

[Austin, Darrel]

This isn't strictly CSS related, but thought this would be a good group
to ask.

We're currently redesigning our site and I've decided to go fluid-width.

In the fluid vs. fixed debates, the usual argument against fluid widths
is people with gigantic monitors who (for whatever reason) maximize
their browser. As such, you end up with really insanely long line
lengths.

I concede that point and tend to argue that that is solvable as well
with some min/max-width fixes (and some hacks to accommodate IE6).

However, when hunting out good examples of this, I come up empty handed
and maybe well designed fluid-width sites with min/max width attributes
are purely a theoretical beast. ARE there any well designed fluid-width
sites that use min/max width well that people know of? A quick look down
various 'best designed blog site' lists show that everyone is pretty
much happy with 800px fixed-width pages these days. 

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