[css-d] Getting my CSS-D password...
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/
[css-d] 3 column layout. Am I missing the obvoius? (question and commentary)
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:
columnwrapper
left /left
right /right
center /center
/ columnwrapper
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] 3 column layout. Am I missing the obvoius? (question and commentary)
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/
Re: [css-d] ASP.NET and http://validator.w3.org/
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] ASP.NET and http://validator.w3.org/
There are some elements of .NET output a developer has no control over. For example, this source code: asp:DataList Well, a developer can choose NOT to use a DataList. That said, that somewhat defeats the RAD concepts of using ASP.net + VS.net to whip out code. In ASP.net 1.1 I ended up using a lot of string writers to have full control over my HTML. Tedious and likely overly anal in hindsight. With ASP.net 2.0, there are some more options. Control Adapters are one: 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] Iframe transparency
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%7dMLS=CPMLSUBSCRIBER=3fbd9fd3-f792-4fa9-9 ad9-3f702a5dbcf1class=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
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
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
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
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:
dd
My text
/dd
However, this only works in FF:
dd
pMy text/p
/dd
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
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
I've looked around for a stable solution which doesn't
involve putting nbsp, emsp; etc all over the content
(that's presentational :-) ) and can only come up with using
the old s 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
Is there a way in CSS to turn a single space after a period into a double space - without using nbsp; (the no break HTML code)? The drawback to using nbsp;, 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] Double space after a period
Is there a way in CSS to turn a single space after a period into a double space - without using nbsp; (the no break HTML code)? The drawback to using nbsp;, 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: span class=frenchSpace./span 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 nbsp; 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] Are CSS Drop-down Menus Searchable
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
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
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
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] 'dropped column' (was: no subject)
Well, I suppose you could just let the software do its thing without intervention :-) ? http://www.chelseacreekstudio.com/ca/cssd/layout04.html 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/
Re: [css-d] (no subject)
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/
[css-d] (no subject)
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
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/
[css-d] Understanding 'enclosing' divs (my wrapper 'leaks')
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] Tables it is! (no luck finding a 3-column layout that worksin IE...)
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/
Re: [css-d] Tables it is! (no luck finding a 3-column layout that works in IE...)
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...)
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 thatworksin IE...)
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] Dropdown menu issue
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/
Re: [css-d] Dropdown menu issue
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/
[css-d] Tables it is! (no luck finding a 3-column layout that works in IE...)
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
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/
Re: [css-d] Preventing DIVs from dropping down the page on smaller screens.
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/
Re: [css-d] Preventing DIVs from dropping down the page on smaller screens.
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 http://www.cosbo-amsterdam.nl/tmp/dropping-down1.htm. 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/
[css-d] Preventing DIVs from dropping down the page on smaller screens.
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] CSS dropdown menu + Accessibility Issue
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/
[css-d] Wrapping images in containers without widths?
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/
Re: [css-d] Wrapping images in containers without widths?
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/
Re: [css-d] Wrapping images in containers without widths?
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/
[css-d] IE fix for white space in the HTML being rendered?
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: li a href=link/a /li li a href=link/a /li To this: lia href=link/a/lilia href=link/a/li 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
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.
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
+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: div id=myIDforCSS asp:placeholder id=myIDforServerSideLogic runat=server /asp:placeholder /div 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] ASP.NET/CSS
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
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] Good looking fluid-width sites
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
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/
