Re: [css-d] how to represent a 2 column grid/table using CSS?
Friday, November 18, 2005, 12:24:47 PM, Gale Stafford wrote: I tried representing this using floats in CSS. It looks fine in IE and Firefox. But when I decrease the text size in Firefox, my floats start moving up and around http://tinyurl.com/cpfgl And here's a link to my CSS http://tinyurl.com/doclj Add clear:left; to .block; Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] Styling COL and COLGROUP
Wednesday, November 9, 2005, 10:01:21 PM, Philippe Wittenbergh wrote:
.myclass {text-align: center}
td:first-child+td+td {text-align: center} /* the 3rd column */
***But***, and here IE is buggy again, you *cannot* group those
selector, else IE doesn't recognise the .myclass selector.
I just noticed that and made the change on the wiki:
http://css-discuss.incutio.com/?page=StylingColumns
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
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] Styling COL and COLGROUP
Thursday, November 10, 2005, 1:27:55 PM, CJ Larson wrote:
Making a colgroup for this city *one* time and being done with it is the
intuitive thing to do, but since it doesn't work... problem.
Have you tried it?
http://css-discuss.incutio.com/?page=StylingColumns (Combination method)
table id=cities
colgroup
col class=city
col class=population
/colgroup
...
/table
#cities td:first-child + td {
/* styles */
}
#cities .population {
/* styles */
}
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
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] Styling COL and COLGROUP
Thursday, November 10, 2005, 1:59:25 PM, Dan Kletter wrote: Drawback is colgroup is only supported by IE and limited to width, border, background and visibility styles. Thanks to it's non-standard layout engine IE doesn't have these limitations on styling via COL. Nor do CSS2 browsers styling via adjacent siblings. adjacent sibling selectors. It's not very efficient. How is it inefficient besides having to know which column you're styling when you're writing the CSS? There are plenty of cases where you need to know markup structure to style it. This is another one. Ideally, colgroup will be better supported in the future True, but we'll probably be waiting quite some time. In the meantime... OT! the easy solution to all this would be a Javascript that copies the COL classNames to the cells, somehow dealing with spanned columns and rows. Someone knock that out...but post it on another list ;) Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] OT: CSSVista = free CSS editor for winXP
http://www.sitevista.com/cssvista/ Haven't tried it yet, but appears to be a nice gift to CSS architects running XP. CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously. It's alpha software (according to the comments @imports are buggy so you'll wanna put everything in one file, no syntax coloring) but hey, it's free. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] Header's inline display and alignment
Monday, November 7, 2005, 7:08:22 AM, Adriano Castro wrote: It's a bit of a conundrum because I need display: inline for both elements to begin on the same line but Not necessarily. Blocks can be on the same line, too. Title Subtitle date link All you need to do is float:left the Subtitle header (and give it a width to keep it from running into Date). Date and Link are both just regular blocks with text-align:right; and normal flow will take take of the rest. If Subtitle is larger text than Date and you want their baselines to match up, you'll have to increase the line-height of Date. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] Replicating tables and onion skinning gone crazy
Thursday, November 3, 2005, 1:19:18 AM, Graham Reeds wrote: css and use background images for it. However that would mean 8 background divs for each element that require the border effect - and There are tons [1] of custom border techniques out there. I made one based on 4 DIVs and 2 images [2]. If you're willing to let Javascript help with the lifting you don't need any additional markup [3]. [1] http://css-discuss.incutio.com/?page=RoundedCorners [2] http://wd.mrclay.org/custom_bordered_boxes/ [3] http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/ Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] Positioning in Opera
Tuesday, October 25, 2005, 10:36:39 AM, Denise Hartmann wrote:
It works in IE, Firefox, but it is off a few pixels in Opera.
Without too much investigation I'm guessing you're running into Opera's use
of padding instead of margin on BODY. Replace:
body {
background-color: #22;
background-image:url(images/gradbg1200.jpg);
background-repeat:repeat-y;
background-position: 0px 0px;
margin: 0px 0px 0px 0px;
}
with (some shorthand):
body {
background:#244 url(images/gradbg1200.jpg) 0 0 repeat-y;
margin:0;
padding:0;
}
FYI, Opera 9 is overhauling its default CSS values, one of which is to use
margin on BODY like most other browsers.
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
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[2]: [css-d] thin line under span
Saturday, October 22, 2005, 3:46:21 PM, Mike Soultanian wrote: what browser are you using? Seems like this is a problem in ie5.5, 6, mozilla, yet they all handle the problem slightly differently http://www2.csulb.edu/colleges/cota/test.html In IE5.5+ I'm guessing the problem doesn't appear inside the table due to some hasLayout magic, but for FF it seems to be just a function of line-height. I boosted up the text and found the value 1.12 as ideal for the demo. Don't know what that line-height will do to other browsers, though. Depends on what their default value of normal is. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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[2]: [css-d] Wait...fragment links DO work withing scrolling elements?
Friday, October 14, 2005, 5:35:39 AM, Bill Gates wrote: Doesn't work in Safari, Omniweb and IE for OSX. I didn't bother trying iCab. It appears to work in FF and Opera... Works in IE/win as well, but yeah, not good enough. Apparently the answer to my question in the subject header is no. Oh well, and of course the keyboard-only inaccessibility is still a big issue. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] Css rows and columns
Wednesday, October 12, 2005, 6:16:09 PM, Scott Haneda wrote:
I really don't want to jam this one in a table, but I need 5 divs across,
butted right up against each other, after the 5th one, I need a new row.
The width of each of the 5 items is fixed, the height is not.
There's a relatively simple solution that will work in most browsers, big
exception being IE/mac:
.wrapper {display:table-row;}
.foo {display:table-cell;}
then for IE/win:
* html .wrapper {
display:block;
clear:left;
}
* html .foo {
float:left;
width:40px;
display:inline; /* float bug squashing */
}
You can rely on IE/win's hasLayout to make sure each .foo is rectangular.
Note that, in CSS2 browsers, to use this type of float layout you'd also
need to provide incrementally large (0, 40px, 80px, et.al.) left margins on
each .foo to keep them from wrapping around each other. Lucky for us, CSS2
browsers can just use the table display properties.
Now, if IE/mac is a must, you'll have to use the float method described
below, and each successive .foo will need a left margin 40px more than the
last.
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
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[2]: [css-d] IE6 and hover - csshover.htc problems
Wednesday, October 12, 2005, 10:06:21 PM, Diane Tomlins wrote: The test page is here: http://home.comcast.net/~drt603/dallas/index4.htm I haven't looked into your CSS, but have you tried the CSS popup IE fix? http://www.quirksmode.org/css/ie6_purecsspopups.html Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] CSS for shadows around thumbnails (tight wrap of DIV around image)
Thursday, October 13, 2005, 10:48:06 AM, Jeff Shepherd wrote: http://www.ashep.com/test/shadow/thumbnail.html Simply put, I want a DIV that wraps tightly around a linked image See http://www.brunildo.org/test/shrink_img.html or check some of the other shrink-wrapping IMG methods: http://www.brunildo.org/test/#cen Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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[2]: [css-d] Bug or standards compliant? Applied margins to an inner div cause outer div to weirdly collapse if it has no borders.
Thursday, October 13, 2005, 5:13:15 PM, Sascha wrote: http://www.andybudd.com/archives/2003/11/no_margin_for_error/ But still. I added position: relative to the elements in question to no avail. Position:absolute /does/ eliminate the collapsing, but you're right, relative doesn't. This may be a corner of the spec that few, if any, browsers have implemented. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] Vertical alignment
Thursday, October 13, 2005, 6:09:31 PM, Andreas wrote:
Im trying to vertical-align the button to the middle of the textbox
http://www.selfinflicted.org/css/quick.html
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
This property defaults to baseline so although your #button is in the
middle, #search is still on the baseline.
Add vertical-align:middle; to #search as well, or simply:
#wrap input {vertical-align:middle;} to handle both.
but since the vertical-align css is based on the elements parent
It's not based on #wrap, but rather the first /line box/ in #wrap. The
specs call the line box a strut (I've removed bits as it applies to your
situation):
The following values only have meaning with respect to ... the strut of a
parent block-level ... element.
HTH,
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
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] strong!
Wednesday, October 5, 2005, 12:18:04 PM, jeremy wrote: in IE, things that I specify as being strong /strong or font-weight:bold; dont really show up. Don't show up as in invisible, not displayed, or just normal weight? 1) validate your markup 2) look for rules affecting strong in your CSS 3) make sure the font-family has a bold...? Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] Disappearing Text in PCIEv6?
Monday, October 3, 2005, 12:11:41 PM, Mark D Hiatt wrote: Can someone please tell me why my text goes away in this page, in PC Internet Explorer 6 in the two smaller sizes? http://www.unl.edu/webtraining/DW01/dw09.shtml Best guess is that, at the larger sizes, your text pushes your footer (probably a clearing element) down so your floated screenshots don't touch it. At the smaller sizes, the floated element(s) touch the clearing element, triggering this bug: http://www.positioniseverything.net/explorer/peekaboo.html Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] columns of lists
Friday, September 30, 2005, 9:59:50 AM, Kristina Floyd wrote:
the column headings need to be level with each other.
http://24.m-corp.com/liCols/index.html
I can not touch the markup.
You'll need to add classes to the 4 top level LIs via Javascript, then
something like:
.li1, .li2, .li3, .li4 {width:49.5%; margin:0; padding:0; list-style:none}
.li1, .li3 {clear:left; float:left; display:inline}
.li2, .li4 {float:right; display:inline}
.sitemap {overflow:visible} /* easy clearing */
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
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] Image based nav that meets AAA standards?
Thursday, September 29, 2005, 10:13:32 AM, Dan_MailLists wrote: I did have a go at replacing the spacer gifs with real menu gifs - and making them invisible in the CSS to allow me to do the rollover via CSS - but that causes problems in Firefox. http://www.danwasthere.com/test_area/bfz/graphical_top_nav_2.html I didn't peek into your construction method, but this also uses regular, accessible IMG elements with CSS rollover action and I've not heard many problems reported: http://wd.mrclay.org/tests/rollovers/ If accessibility is most important you may also try sizing any small IMG elements presenting text in ems. You can see that here: http://www.tjkdesign.com/articles/tip_5.asp Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] XHTML Design for CSS -- How To?
Wednesday, September 28, 2005, 3:55:14 PM, Peter Beckman wrote: the idea behind grouping like-content together, but I don't understand when it is good to have an extra container (div) here and there. ZG was designed with restyle-ability as the #1 goal and has plenty of superfluous markup. For most sites, it's overkill. It looks like most graphic designers use fixed width but dynamic height boxes when building a page. Dynamic height is essential because who knows how big text will end up on the screen/page.. Fixed width? Mostly because it's easier to design for and because, in liquid layouts, it's harder to control line-length and still hold the design together nicely. I'm building an application that will have many skins, similar to CSS Zen Garden, and want to give developers the most flexible XHTML I can, so they can do things with CSS I never thought up. Then certainly, for your app, ZG's markup is a place to start. The hard part is dealing with 1) a variable amount of unknown content and 2) IE's frustrating lack of support for + and selectors, leading to classitis. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] Re: overflow:auto/scroll
Tuesday, September 27, 2005, 2:44:58 PM, jleonard wrote: Which is better for wide spread use; a frameset with a scrollbar or the CSS overflow: scroll? CSS overflow can give you the look of a frameset, but not the behavior; when the user hits the next page, all the CSS scrolling sections will jump to the top, and there's no way to 'sniff' or affect scroll position with Javascript either. So if you're going for a design where scroll positions need to persist from page to page, you probably should rethink the design. AFAIK, the only notable browser that can't do overflow scrolling at all is IE/mac. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] 100% height?
Monday, September 26, 2005, 12:18:28 AM, Anastasios Angelidis wrote:
Hi I mamanged to get 100% working in explorer but not in Mozilla. Is
Google 100% height, 1st result will answer your question:
http://www.quirksmode.org/css/100percheight.html
The key in Standards mode:
html, body, div#onlyChildOfBody {
margin:0;
padding:0;
height:100%;
}
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
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[2]: [css-d] Table Styling
Sunday, September 25, 2005, 10:16:28 PM, Jeff Chastain wrote:
So, only using CSS, is there a possible cross-browser solution to style the
first table cell differently from the others without have a unique ID or
class on it?
CSS2, yes. IE, no.
td {/* first col style */}
td + td {/* following column styles */}
If this has to work in IE, sounds like a job for Javascript.
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
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[2]: [css-d] Re: Dropdowns in inline elements, and CSS validator problems
Monday, September 26, 2005, 10:14:31 AM, Sam Partington wrote: http://www.luusac.org.uk/styles/base.css http://jigsaw.w3.org/css-validator/validator?uri=http://www.luusac.org.uk/styles/base.css It can validate the URL directly, but I suspect the validator has a bug in its markup parser and is choking on your relative links: link rel='stylesheet' href='./styles/base.css' / is valid, but the validator may only understand: link rel='stylesheet' href='styles/base.css' / I bet it's requesting http://www.luusac.org.uk/./styles/base.css and failing on the redirect. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] Need help on css positioning
Saturday, September 24, 2005, 12:28:32 PM, Dinh wrote: http://img246.imageshack.us/my.php?image=layoutsidebarallheight1wx.png http://img332.imageshack.us/img332/1461/4div0gd.png You need to make #banner the first element nested inside of #container. Then you can remove #banner's width and float properties because it won't need them. You will have to touch the markup, but at least you won't have to change your content order. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] Four Column Layout
Saturday, September 24, 2005, 3:46:35 PM, Richard wrote: divs within this, one floating left and the other floating right. And then two divs within these divs again floating left or right. Or do I just have four divs, three floating left and one floating right. Depends on what order you want your columns in in the source. Once you've determined that you can nest the DIVs so those bits of content come first. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] textarea and printing
Friday, September 23, 2005, 10:13:44 AM, Brian wrote:
the textarea can hold in physical shape/size, it obviously clips the
text and is not printed. Whatever is in the scrolling part of the box
This may fail miserably, but in your print CSS you might try:
textarea {height:auto; overflow:visible}
I imagine some browsers might let this work.
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
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] hr and background image without border in IE
Thursday, September 22, 2005, 3:32:28 AM, Martin Petrov wrote: knows how to remove the border that Internet Explorer shows when using a background image with the hr element. Styling HR is pretty much hopeless cross-browser. Put a DIV around it, position the HR offscreen (it may have use to screen readers) and style the DIV. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] submitting forms via Enter
their background images) and am using a tags instead, styled with CSS and with href=javascript:... attributes. The problem is getting the Enter key to submit the form when the cursor is in one of its fields. In Firefox it's easy: I just add a ... This a bit off-topic from practical CSS use. You'll have much better luck at WebDesign-L or another list: http://css-discuss.incutio.com/?page=OffTopic A lot of people here are on WD-l, too, and would be happy to help there. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] How to get a good monospaced font for IE6
Wednesday, September 21, 2005, 2:16:47 PM, Rick F. wrote: all of my tabular data ...should be in a table element. The font isn't the problem, it's the markup. is all over the place horizontally speaking. Right, without the right element, your data is nothing but a blob of text that a few lucky sighted persons with the right font can make sense of. Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ 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] min-height issues: please help!\
Tuesday, September 20, 2005, 1:22:47 AM, John wrote: Home Page: http://www.bol.ucla.edu/ Right panel looks fine in Firefox. Not so in IE. It's fine, you just need it to /look/ like the right panel extends to the bottom. http://www.alistapart.com/articles/fauxcolumns/ will fix you up. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] variable width left column, left+right column tops line up
CJ Larson wrote: The bullet lists line up with each image, so they also need to line *up* with the images. +-+ |=== : - bullet | |Graphic : - bullet | |=== : - long long bullet| +-+ Is the graphic associated with the list or is it just random decoration? If it /is/ associated, a table would be an OK (if not ideal) element to semantically link these elements together. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] true table (was: false table)
Friday, September 16, 2005, 10:58:38 AM, chuck clark wrote: pSubTotalspan class=rightside$ 10.00/span/p Even less markup: trthSubTotal/thtd$ 10.00/td/tr Really, use a table... Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] At what point does it become more beneficial to use CSS?
Friday, September 16, 2005, 12:27:31 PM, Rick Faircloth wrote: at what point does it become more desirable to use CSS Good question. I say as use what you're comfortable with. If you don't understand it, or don't think you could fix it, maybe shouldn't use it on sites you build for others. But at some point you just have to dig in. People have been using CSS layout since before 2000 and 5 years later we have Yahoo, MSN, ESPN, Sprint and every blog on board... How much longer do you plan to wait? But this list is more for practical CSS usage help: http://css-discuss.incutio.com/?page=OffTopic While you're here, anyway, we can help. in today's broadband world... Ask me when my roommates are using Soulseek! Things can get /much/ slower than dial-up. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] Compliant Browser displaying upgrade browser message
Thursday, September 15, 2005, 7:33:59 AM, Bob Easton wrote: 1) the display:none technique is very poor form. It hides information from exactly the audience who needs it, screen reader users. While I agree the upgrade notice days are happily over, why would you want screen reader users hearing the upgrade note anyway? Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[3]: [css-d] Compliant Browser displaying upgrade browser message
Thursday, September 15, 2005, 7:33:59 AM, Bob Easton wrote: 1) the display:none technique is very poor form. It hides information from exactly the audience who needs it, screen reader users. OK, I guess you were referring to general use of the technique. Agreed, sorry! Steve __ 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] div horizontal centering in Moz
Thursday, September 15, 2005, 9:49:36 AM, shlomi asaf wrote: why moz doesnt support text-align:center All major browsers support text-align [1]. The behavior you're expecting (that it affect block elements like DIV) was a bug in IE5.x (retained in IE6 Quirks mode). To center block elements, see: http://css-discuss.incutio.com/?page=CenteringBlockElement CENTER...just don't http://www.htmldog.com/guides/htmlintermediate/badtags/ Steve [1] http://www.w3.org/TR/CSS21/text.html#propdef-text-align This property describes how inline content...is aligned Inline elements are text images, mainly. -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Need Help with problem using floats Easy Clearing method - Take 2
Thursday, September 15, 2005, 12:50:56 PM, JF Simard wrote: It seems that Opera 8 does not clear the main floated content in certain I have Opera 8.02 (7680) on Win2k and the bottoms of these pages: http://netdiver.net/toolbox/bookshelves/bk_05.php http://netdiver.net/interviews/ look identical to the bottoms of these: http://netdiver.net/newsarchive/0508.php http://netdiver.net/newsarchive/forte/fd_05.php Am I missing something? Bug fixed? Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] Need Help with problem using floats Easy Clearing method - Take 2
Thursday, September 15, 2005, 3:49:31 PM, JF Simard wrote: Mmmm...and what about this page? http://netdiver.net/x_editorials/ You're right: float uncontained. Background ends after / Brain bytes. Sorry... Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] New to CSS...Why isn't this horizontal?
Monday, September 12, 2005, 12:58:29 PM, Rick Faircloth wrote: I'm trying to line up two DIV boxes horizontally. Instead, Sounds like you basically want a 2-column layout, minus the header/footer. You don't say what content will go in these boxes, so I'm assuming they should expand as necessary. This means float-based will be the way to go. You could take something like this and adapt it: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm remove the #top and #footer divs... Could you give us an example of what you'd like to see? Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] New to CSS...Why isn't this horizontal?
Monday, September 12, 2005, 2:17:47 PM, Rick Faircloth wrote: I guess, by your comments, that DIV's need to have a float characteristic to be expandable according to content? Float-based layouts are typically more flexible than absolute positioning at least. Floated elements remain in the normal flow so they can affect and be affected by content around them (good for accessibility, a bit harder to design for). Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Absolute positioned columns and scrolling
Thursday, September 8, 2005, 9:02:19 AM, Damian Watson wrote: I've got a layout that uses two absolute positioned column (left/right) with a centre column that's relative to the page and left/right margins to reflect the width of those columns. My problem is that when the two outside columns are longer than the centre content and viewport, then I get no scrolling. In what browser(s)/OS(s)? Guessing, it sounds like a documented IE/win bug: http://positioniseverything.net/explorer/unscrollable.html Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] input type=text and css
Thursday, September 8, 2005, 7:09:44 PM, Rutgers wrote: I would like to set the table width to 100% (done) and each table cell to specified percentage width that adds up to the 100%. No need to set the width of the cells since each will contain the same sized element. I can't used % to set the width of the input type=text / to the same percentage as it then only occupies a percentage of the cell. So set each INPUT to width:100%. I would also use a border on the table cells and remove the border from the INPUTs, this will look a bit more nice (but maybe not appear as editable, though the user should get the edit cursor when mousing over). See: http://mrclay.org/tests/spreadsheet.html Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] wrapping text around images
Wednesday, September 7, 2005, 10:21:12 PM, Ricky wrote: To achieve this effect, I placed the image in a span floated to the left: Or just give the IMG float:left; margin-right:1em; Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] Search box like in browsers toolbar
Tuesday, September 6, 2005, 10:03:26 AM, Martin Petrov wrote: I don't want to position the image but to indent the text. I tried with padding, but it just widens the box. You might remove the border and apply a background image that fakes it and extends it to the left. This might be more reliable than left padding (what you'd use ideally) considering the cross-browser funkiness of form lements. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Browser don't catch named anchors if in fixed elements...
Tuesday, September 6, 2005, 11:31:02 AM, Guillaume wrote: Seems the browsers ( Op, Saf, Ff on Mac ) don't catch named anchors if placed inside position:fixed containers... Also scrolling areas with overflow:auto/scroll should scroll to make targeted anchors visible. The specs just don't say what browsers should do. As more pages move from frames to pages with scrolling areas this needs to be ironed out and implemented quick, though. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] 3-col layout auto-expanding DIV?
Sunday, September 4, 2005, 11:57:15 AM, Edward wrote: It seems to me that this is a major failing of CSS positioning, that a DIV can't recognise it's contents and expand accordingly. You desire a layout that can handle arbitrary contents, but if you put a 2000px wide table in a table layout, how usable is the resulting page going to be? You have to bear some responsibility of what contents will be on the page. The major failing is IE. CSS2 (and supporting browsers) can use table display properties to build your stretchy table-like layout, it just can't do source reordering as well as floats can...yet. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Opera absolute positioning bug
Friday, September 2, 2005, 3:50:13 PM, Alex Robinson wrote: http://www.fu2k.org/alex/css/cssjunk/operatopbottom Looks like a bug. I just can't imagine how I've never run into it before. I wonder if applying some common rule to BODY (#wrapper's container) might fix it... Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Columns with more than one element
Thursday, September 1, 2005, 6:17:35 AM, [EMAIL PROTECTED] wrote: It seems simple: to move an element to the right column - just change its style to float:right, and the same for left. It works fine in IE6, as you can see here: http://tora.us.fm/floattest.html IE breaks a rule of the float specs: http://www.w3.org/TR/CSS21/visuren.html#propdef-float (was also in CSS2) 5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source... any...floated box means left /or/ right floated. So you can stack floats to one side all you want, but compliant browsers shouldn't let you stack floats one direction then start floating blocks on the other and expect them to slide up the side like IE does. Eric Meyer ran into this limitation a long time ago in one of his demos: http://meyerweb.com/eric/css/edge/slantastic/demo2.html By adding some containers to your source I was able to /mostly/ pull this off in compliant browsers (not IE) keeping your source order: http://mrclay.org/tests/float_rule5 ...But the fixed negative top margin eliminates this layout's ability to handle an arbitrary amount of text. Someone more clever might be able to come up with a solution using more/different containers and some negative side margin magic so that you could keep your source order and have it accommodate any amount of text. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] 3 col fluid falling apart at 640x480
wendy wrote: http://www.horseink.com/workroom/dgj/index_hmenu.html Ingo Chao wrote: At ~640px, the columns start to drop in IE/Win I think that's what she's referring to. She gives #wrapper a min-width, but IE/win doesn't support it. A few options I see: 1) Emulation min-width in IE with Javascript/expression. (FWIW I think the expression version might be more stable than minmax.js, which caused some weird crashes for me) 2) Give IE a fixed width. 3) Let it break under 640px. This is natural behavior for floats...they keep content accessible by reverting to stacking. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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/
OT: Re[2]: [css-d] Now possible: CSS Constants
Take any real big CSS file with the same five-six colors repeated tens of times for various elements and benefits will be obviuos. And thats very handy for color skining. Thursday, September 1, 2005, 1:23:09 PM, Tom Livingston wrote: Still, having Find And Replace in my editor seems easier that the setup And if more than one color needs to have the same value, I guess you could always keep a comment with your colors: color:#00/*mainText*/; ... color:#00/*borders*/; Replace all #00/*mainText*/ with #11/*mainText*/; Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] Header Width
Thursday, September 1, 2005, 2:45:59 PM, Adam Kuehn wrote: Thierry Koblentz wrote: I'm not sure if this is a safe solution; I wouldn't use float without an explicite width... It is safe for all CSS 2 browsers with the sole exception of IE5/Mac. That browser, and only that browser, requires the explicit width. From what I understand, IE5/Mac just expands widthless/width:auto; floats to 100% (like auto). Is this correct? If so, I'd think this would be an acceptable degradation in this situation. Most browsers get shrink to fit, IE/mac gets full width. No big deal. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] content overflowing width problem
Thursday, September 1, 2005, 12:56:23 PM, Pringle, Ron wrote: http://tinyurl.com/7nngl My real question is, what can I realistically do about this content? One option would be to create a special template for certain pages that removes the right column. Is there some css/style solution I'm overlooking? You could place the content in a DIV with overflow:auto; but I think you'd have to give an explicit width to get IE to not just expand the column. Since this a scrolling window is an annoying way to view a wide table, yeah, offering the table in a popup window might be a nice gesture. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] simple problem - difficult solution
Tuesday, August 30, 2005, 10:00:05 AM, andrew welch wrote: Hmmm why does html and body need a height? That is surely a hack. Explanation: http://www.quirksmode.org/css/100percheight.html The requirement is that the header div must not scroll off the page, it should remain fixed at the top of the page. The content div will fill with content and should be scrollable vertically when needed. Try this: http://www.456bereastreet.com/lab/cssframes/ You can take out the footer and adjust values accordingly. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Controlling text around an image
Monday, August 29, 2005, 11:46:32 AM, Jessica Mays wrote: What I need to be able to do is control the placement of text menu within this div container. I know how to so this when my page is set to be aligned to the left on the browser using absolute placement, The key is moving your reference point for the absolute positioning. By default the browser uses the BODY element (which you've used). But by positioning an ancestor element (even position:relative with no movement) you can make it the new reference point for absolute positioning for all its decedents. In short, give your container position:relative and its contents can now be absolutely positioned with respect to it instead of BODY. P.S. Be careful to use absolute positioning sparingly in your layouts. Floats work better for varying amounts of content and dealing with user font-size changes. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Image float
Sunday, August 28, 2005, 12:36:38 AM, t94xr.net.nz wrote:
Whats an easy way to align an image in the centre of a 150px div?
Horizontally? Give the DIV text-align:center;
Vertically? As with all vertical centering, it's a bit more tricky:
I use display:table-cell for CSS2 browsers and a font-size setting for IE.
.imgDiv {
width:200px; height:200px;
text-align:center;
display:table-cell; /* table-cell version */
vertical-align:middle;
}
* html .imgDiv {
font-size:178px; /* number depends on box height, tinker with it */
}
* html .imgDiv img {
vertical-align:middle; /* inline version of vertical-align */
}
Demo: http://mrclay.org/web_design/centered_image/
Steve
--
http://mrclay.org/ : http://frenchhorns.mrclay.org/
__
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[2]: [css-d] drop-down menu titles
Sunday, August 28, 2005, 8:48:29 AM, Sarah wrote: activated by a click or key press ... would I need to employ lots of Javascript? Yes, some non-trivial (depending on who you ask) Javascript would be required. would it then render the navigation less accessible? If done well, no, but that's a discussion for another list. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] A way to force overflow in one direction only
Thursday, August 25, 2005, 12:21:03 PM, ross wrote: Is there a way to force scrolling in either vertical or horizontal direction and not automatically in both? overflow-x and overflow-y (CSS3) http://www.w3.org/TR/css3-box/#the-overflow-x Supported already by IE/win, will be in FF1.5 Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] strange form layout in Opera
Thursday, August 25, 2005, 11:56:15 AM, Andrew Gregory wrote: setting display:inline and float:left/right is pointless. All floats are display:block. Harmless, but not pointless. display:inline fixes some IE/win float issues. http://positioniseverything.net/explorer/doubled-margin.html http://positioniseverything.net/explorer/floatIndent.html possibly others. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] image swap on link
Wednesday, August 24, 2005, 8:31:00 AM, dimpie wrote: I have a link which exists only of an image, no text involved. If I hover over it I want to show a different image. Seems simple and probably it is. CSS rollover for IMG links: http://wd.mrclay.org/tests/rollovers/ (Accessible when CSS and/or images are off.) Basically, stick a background on the anchor, and hide the image on hover. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] CSS and Forms - again
Monday, August 22, 2005, 4:09:27 PM, Rob Cochrane wrote: IE accepts margin on legend and will move its placement but FF and opera do not so that one is out. Opera8 /does/ position LEGEND based on side margins (LEGEND must be sort of inline-block in that browser), but neither IE6/win nor FF respond to this. You /can/ use align in XHTML Transitional, of course, otherwise you'd probably need a little javascript to add the align property in FF/Moz. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] IE5 thumb hover clickable
Saturday, August 20, 2005, 2:27:51 AM, Bruno wrote: In IE5.0 links with hasLayout (triggered by any dimension, or float) do not work over images. Maybe you could try this: In IE5.0 only, hide the IMGs and replace them with background images on the anchors...? Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] how I make divs not expand with the contents
Saturday, August 20, 2005, 8:52:17 AM, ross wrote:
.firstname {
width: 100px;
}
long name is entered the div size expands with the text.
In IE/win. You shouldn't see this problem in other browsers that correctly
handle width. That said, there's no standard property to force a text wrap
in the middle of a word, so in most browsers you'll have to live words
hanging over the right side unless you cut them somewhere in the HTML.
As for IE, you /can/ give the DIV the invalid word-wrap:break-word; and
IE/win will cut words to fit.
As a general CSS2 solution to limiting a word length I think I saw clever
contraption using hidden overflow and generated content to produce fake
ellipsis when the word was longer than allowed, but this will certainly not
fly in IE.
Steve
--
http://mrclay.org/ : http://frenchhorns.mrclay.org/
__
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] Disappearing Background Images in both IE and FF
Friday, August 19, 2005, 3:07:28 PM, Valette Ragland wrote: images disappearing upon a page refresh. I don't even get them the first load in Opera. HTML and CSS both validate. Any ideas? I believe your problem is the server being flaky or the images being a bit malformed or corrupted. Maybe someone can test it: http://dreams.rhapsodic.org/images/sheep.gif I thought it might be the Javascript image replacement interfering, but they doesn't load w/o it either. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] IE5 thumb hover clickable
Friday, August 19, 2005, 3:44:21 PM, cFA wrote: works just not 5. http://aenonfiredesign.com/test/iethumbhover/ No worries, the links indeed work in IE5.0, that browser just tends to lose its pointer cursor with blocked links. You'll need to feed the anchor cursor:hand. Following it with c\ursor:pointer will make sure all other browsers get a valid value (hand is invalid). Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Align text to two different sides of a TD
Friday, August 5, 2005, 1:32:45 PM, Fred Newtz wrote: Is there anyway I can align two different pieces of text to two different sides of a TD? I tried using div and span however it is not working divtd class=rowclass1. Newtz, Fred span style=text-align: rightbEnrolled on:/b 04/11/2005/td/span/div Invalid TABLE markup...might I suggest: td1. Newtz, Fred/tdtd class='enrolled'bEnrolled on:/b 04/11/2005/td ie. just use two table cells, since the enroll date is certainly data or instead of the class, try http://css-discuss.incutio.com/?page=StylingColumns Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Newbie: Trying to center items in a dropdownlist on web form
Thursday, August 4, 2005, 10:16:02 AM, Lisa Carter wrote:
For the dropdownlist, I attempted to use
select { text-align: center; } - this did not work.
http://www.456bereastreet.com/lab/form_controls/select/
Particularly the 12th select box is styled with text-align and the
screenshots show the results in various browsers.
Fails in: Safari(v?), IE6/win IE/mac.
This is the way the boss wants it.
Would the boss accept a mono-spaced font? If so, you could try the ugly,
UGLY hack of giving the select font-family:monospace and using nbsp;
entities to pad your options on the left so they line up (if you're lucky).
But don't do this :)
Steve
--
http://mrclay.org/ : http://frenchhorns.mrclay.org/
__
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] ADMIN: IE7
Thursday, August 4, 2005, 1:40:16 PM, Eric A. Meyer wrote:
Another good discussion would be on hack management-- what are
some good ways to organize style sheets so that hacks are easy to
maintain? A good starting point might be for people who have
As one who shudders at the thought of maintaining separate CSS hack files
(I like to keep rules about an element in one place) I'm imagining a simple
system to deal with the IE*/win phenomenon:
1) use conditional comments to feed all IE/win a single CSS file, let's
call it dealwithie.css
2) dealwithie.css would contain one ruleset affecting BODY with a
proprietary behavior that added to the BODY element a className (or short
list of classNames) to assist in targeting the version of IE in use.
IE6 would cause something like:
document.body.className = document.body.className + isIE6 isLtIE7;
3) In your CSS:
.isLtIE7 #needsLayout {height:1%}
Notes:
* Supposedly behaviors persist even when JS is disabled. Still true? How
reliable is it? Worst case is it fails, hacks aren't applied.
* I've never worked with behaviors, but the code I propose shouldn't be
rocket science. I assume this would have to deal with the
waiting-for-the-DOM-to-be-initialized problem though.
* Removing hacks past their necessity would be trivial. Search for
selectors with isIE50 or whatever, and remove rulesets.
* This boils down to browser sniffing and sticking the result where you can
get to it with CSS. It's not a great solution...Other ideas? Too
off-topic for css-d?
Steve
--
http://mrclay.org/ : http://frenchhorns.mrclay.org/
__
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[2]: [css-d] seperation of styles
Wednesday, August 3, 2005, 11:36:27 AM, Scot Schlinger wrote: link rel=stylesheet href=style/global.css type=text/css media=screen / link rel=stylesheet href=style/index.css type=text/css media=screen / Or is there a different/better way? There are /different/ ways, but there's nothing wrong with having multiple link elements for CSS as you have above. http://meyerweb.com/ has 6 of them. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] Negative margin, border dispute in IE Win
Wednesday, August 3, 2005, 6:03:17 PM, Travis wrote: http://www.j-learning.org/index_working.php In IE, all boxes get the fourth background. Why's this? How can I fix it? It doesn't look like a coding error, but all I can do is suggest another technique. Rather than use 4 separate images, create a single image by combining the 4 horizontally, then you can give them /all/ the same background and use background-position to position the image as you need within each element. In fact, you can probably extend this technique so that your hover (or non-hover) state is simply another position within the large image. ie. one image can do the whole thing! Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Disappearing (sometimes) background - IE/Win
Wednesday, August 3, 2005, 9:10:12 PM, Travis wrote: http://www.j-learning.org/index_working.php/build_it/ But in IE for Windows, ...you get peek-a-boo bugs (probably). Most harmless fix: add position:relative to the float and float container. http://www.positioniseverything.net/explorer/peekaboo.html Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] Hovering on text links but not images
Monday, August 1, 2005, 10:19:11 PM, Jon Trelfa wrote:
That's no completely correct...CSS, in a way, DOES look at the document
On 8/1/05, Steve Clay [EMAIL PROTECTED] wrote:
(selectors can't look down the document tree)...
I should have emphasized down, they can look up of course (descendant,
adjacent sibling, child and :first-child all look up (or to the left.))
a img { background-color:#ff0; }
That's a fine solution! You only need a class (or script) when you need to
affect the parent A element (eg. to remove a border).
Steve
--
http://mrclay.org/ : http://frenchhorns.mrclay.org/
__
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[2]: [css-d] Newbie needs help PLEASE
Monday, August 1, 2005, 10:51:21 PM, Matthew Ohlman wrote: Correct me if I'm wrong, but I think [CDATA sections are] optional. That Optional when serving XHTML as text/html. http://developer.mozilla.org/en/docs/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents#Using_CDATA_Instead_of_Comments Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Can you surround an absolute div with a relative div, but not define a height
Tuesday, August 2, 2005, 12:04:45 PM, Matt Harris wrote: Is there a way to surround an absolute div (red border) with a relative div (green border), but not define a height for either? No. Abs. positioned elements are out of document flow; they can't affect elements around them. Is there a particular layout you're going for? Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Newbie needs help PLEASE
Monday, August 1, 2005, 2:52:32 PM, [EMAIL PROTECTED] wrote: http://www.advancedscrollsawpatterns.com/indexwithdiv.htm I get *nothing* in Opera8. The page is invalid: body bgcolor=#FF Move this to your CSS so you have body Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Hovering on text links but not images
Monday, August 1, 2005, 4:49:35 PM, Lst Recv wrote: Is there a simple way (without having to give each link a class) of using CSS to change the background color on text links but not images? CSS can't do it (selectors can't look down the document tree)... OFFTOPIC ...but JS can give those links a className: http://wd.mrclay.org/scripts/mark_image_links/ Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] CSS Image Map Popup Dysfunctional with Netscape/Firefox
Friday, July 29, 2005, 6:00:08 PM, Mark wrote: This example works correctly using IE6. The background of the popup dd id=area1a href=#spantable cellpadding=0 cellspacing=0 border=0trtdPopup/td/trtrtdtext!/td/tr/table/span/a/dd You can't have a TABLE in an A. Invalid markup = unreliable results. You probably want to use something like http://www.alistapart.com/articles/sprites/ or just a plain old image map. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] BIR Bob Image Replacement - (z-index stack order probs)
Wednesday, July 27, 2005, 4:54:21 PM, Rebecca Cox wrote: involves giving a negative z index to the text you want to hide behind a background image. I have found it OK as long as you don't want to specify a background color - see samples at http://www.reb.net.nz/csstests/ This was proposed before and I believe it fails when you place the headings in floated/positioned elements with backgrounds. Problem is, how do you position the text under the heading background, but not under the heading's parent element (and background). Position the heading at z-index:2 and the text at -1? Give it a shot? Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] BIR Bob Image Replacement - (z-index stack order probs)
Thursday, July 28, 2005, 12:26:11 PM, Chris Vannoy wrote: To get it to work with other backgrounds, I just set a z-index of 1 to the body and the wrap that surrounds the fixed-width, centered layout and a z-index of -1 to the H1 span. I made a test page for this: http://wd.mrclay.org/tests/ir/z-index.php Accessibility feature (CSS w/o images) fails in all cases in Gecko, and in floats in Opera 7/8. Completely fails in Opera 6 (text on image). http://rhythm.dummied.net/nea I see the same results here. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] arranging for boxes
Tuesday, July 26, 2005, 9:53:17 AM, Scot Schlinger wrote: I am trying to arrange four box division such that 1 and 2 are in the first row and 3 and 4 are in the second row. Start with the first two. You want a 2-column CSS layout based on floating 1 to the left then 2 to the right. See: http://www.alistapart.com/articles/fauxcolumns/ This article not only uses this layout, but the content will tell you how to make it look like both columns are the same height. Just cut out the header and footer. Now make another one underneath it and you're done. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [css-d] Uberlinks...
Doh. Sorry Teresa (and Al), I didn't get the latest CSS-d digest until a second ago and noticed Al had already covered the case of fixed navigation markup last night. You can ignore my message. Being on digest is so yesterday. Tuesday, July 19, 2005, 11:43:36 PM, Al Sparber wrote: Use a body ID method. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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[2]: [work] [css-d] Site Check: stephenjoneslaw.com
Thursday, July 14, 2005, 2:19:50 PM, Hershel Robinson wrote: http://www.stephenjoneslaw.com/home IMHO the main part of the page is quite skinny. Furthermore, on my 17 1024 pixel monitor, the text at default size on FF is very small. Agreed. Great design, but more comfortable after I shot everything to 120% with Opera's enlarging ray. The cities next to the phone#s are particularly tiny. Thinner text could use more contrast. I agree with David on the link color problem. Are non-underlined links supposed to be less important? On the sidebar, the navigation is confusing since all the white links keep changing. Sometimes they relate to the dark green links above, then sometimes they don't. Since this site's navigation seems to go pretty deep, I think a breadcrumb would be quite helpful. Have you viewed this without CSS? What is the title of the site? Who are the main partners and what are the phone #s? The content is there visually, it needs to be in the markup as well. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] Pure CSS Popups IE Problem...
Wednesday, June 1, 2005, 9:46:21 PM, Les Mizzell wrote:
I'm experimenting with the Pure CSS popups idea from myerweb.
http://www.happybookseller.com/DEV/events.cfm
However, doesn't work at all in I.E.
IE/win bug. You need to set one of a few properties on a:hover. I'm pretty
sure border is one of them:
#leftnav a:hover {
border:none; /* add this */
}
Steve
--
http://mrclay.org/ : http://frenchhorns.mrclay.org/
__
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[2]: [css-d] semi OT, using css or JS to hide stuff
Scott Haneda wrote:
I have a set of two forms on a page:
billing info and shipping info, there is a checkbox that says make my
shipping info match my billing info. If that box gets checked, I want to
hide the second form.
This would be a good application of CSS3's :checked pseudo-class.
http://www.w3.org/TR/css3-selectors/#UIstates
Given XHTML:
div id=shipping-info
input id=address-is-same type=checkbox /
div
!-- shipping inputs --
/div
/div
CSS:
#address-is-same:checked + div {display:none;}
And not a bad use of CSS either, because, if it fails, the content remains
accessible.
Steve
--
http://mrclay.org/ : http://frenchhorns.mrclay.org/
__
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] floating an image bottom right
Thursday, May 12, 2005, 7:05:35 AM, Jeroen van der Goorbergh wrote: I'm looking for a way to position an image in the bottom right corner of a fluid height container and still have text wrap around it. http://www.xs4all.nl/~jer03n/sandbox/float-bottom-right.html http://mrclay.org/web_design/bottom_float I took the same approach, just used Javascript to measure the box height floating at the top, then set the needed height of the spacer explicitly. If you do this, give your pic a healthy margin because IE will run over the edge of it. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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] A Div and an A-Tag w/ Display block...
Wednesday, May 4, 2005, 11:55:48 AM, Tom wrote:
Can I create a div that is say 100 x 150 pixels wide, absolutely positioned,
specify a (thumbnail) background image, then put an anchor tag in with a
display block that simulates the whole div being a link?
Why simulate? How about:
a id=sn href=sn.jpg title=see full picimg src=sn_thumb.jpg
alt=Starry Night //a
#sn {
position:absolute; /* this sets display:block; */
top:...; left:...;
}
#sn img {display:block;}
What leads to my question is the ability to do this with a li
item.
Do /what/ with an LI?
Create a list of abs positioned thumbnails?
Because of the often frisky behavior of LI elements in IE, I'd recommend
giving the UL position:relative (to make it the positioned container),
giving the LI's display:block and using the above to position the anchors.
In this arrangement, the LIs will just sit empty, which is fine.
Steve
--
http://mrclay.org/ : http://frenchhorns.mrclay.org/
__
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/
