Re: [css-d] Newb alert - balancing columns...
Michael Beaudoin wrote: > I have an issue where > I'm putting together a site for a friend as a learning experience and > have been having trouble getting the columns to be of equal length. Try http://www.alistapart.com/articles/fauxcolumns/ Best, lr __ 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] Firefox & !important Image Print Style
Dear List,
I've set img to display: none; in the print style sheet of one of my
sites as I want no images on a printed page. There are, however, two
images that _do_ need to print out for the user. I've specified those
images (checkmarks and crossmarks within tabular data cells) display by
adding a declaration of td img { display: block !important; } to insure
that they do (otherwise they won't in IE).
Problem solved? Hardly. Attempt to preview or print the page in Firefox
and the browser freezes. IE, Opera, et al are fine with it, but FF
chokes on the contradiction.
What's the better way?
Regards,
Lori
__
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] Curious LI Background Issue - IE6 Only
New Years Greetings to All. I have a tree menu in place which is suddenly behaving very oddly in IE6 only. The li background icons refuse to show up until hover, then seem to appear and disappear at will. I've trouble-shot(?) this by first removing all javascript calls (cookies hold the menu state), then stylesheets in succession, then any list declarations in the main and IE6 stylesheet that might be interfering. The behavior continues. At a total loss, I'm hoping someone more advanced can tell at a glance what might be causing this. http://beta.consupro.net/products/default.asp?Content=Products http://beta.consupro.net/site-styles/global.css http://beta.consupro.net/site-styles/ie6.css Many thanks in advance, L. Robinson __ 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] Community view point for CSS on font size
Information - Abyss wrote: > What is the communities view point on CSS "font-size" property? I'd go with ems. Please see "Sizing Text" (and all kinds of other CSS tips) on the list Wiki: http://css-discuss.incutio.com/ Regards, Lori __ 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] Targeting Firefox Print Bug
Greetings, There is a bug when printing a table that causes Firefox to hang on the first page and refuse to print the rest, but the only fix I've seen, http://archivist.incutio.com/viewlist/css-discuss/76423, causes IE to print the table rows as 100% of the height of the page resulting in a 7 row table printing on 7 separate pages in IE, for example. I've posed this issue before, but in my haste to fix the problem on a live site asked the wrong question. Rather than targeting IE with specific print declarations of height: auto, which is applied by default, may I ask if anyone knows how to target Firefox with Gunlaug's solution? TXS, lr __ 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] Resolved: IE and Negative Margins
David Hucklesby wrote: > Hi Lori, > > On Thu, 28 Sep 2006 13:26:35 -0400, you wrote: >> I have a background image on nav headings which I wanted to pop >> outside the container a bit and used a >> negative margin, thinking that should be plenty. >> >> Half the little footprint disappears in IE6, however. (All's well >> in FF, Opera and IE7.) > > Did you try adding z-index: 1; to elements with the background image? The position: relative solution to a similar negative margin issue (http://archivist.incutio.com/viewlist/css-discuss/80170?highlight=negative+margin) solved the dilemma. > > Other things to note Thanks very much for pointing those out! :) lr __ 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 and Negative Margins
Greetings, I have a background image on nav headings which I wanted to pop outside the container a bit here: www.hobieb2b.com and used a negative margin, thinking that should be plenty. Half the little footprint disappears in IE6, however. (All's well in FF, Opera and IE7.) I've covered a lot of articles about negative margins and can't seem to find a solution to this one. Any pointers would be most appreciated. Regards, Lori __ 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, Print Styles and IE7
Hi all,
I came upon a Firefox bug when a 7-page order came out as 3 pages when
printed. Gunlaug had the answer with table,td { height: 100%; } here:
http://archivist.incutio.com/viewlist/css-discuss/76423
With this fix, though, when the same order is printed in IE7, each row
of the table prints on a page by itself.
IE7 (according to the blog) is "layout-complete" and will be released as
an automatic update for XP users in the last quarter of the year. True:
This may be a known issue that's fixed before then, but - if not - we'll
need a workaround for that, too.
Has anyone else run into this?
And the wheel goes round and round,
lr
__
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 Formatting
Gunlaug Sørtun wrote: > Yehuda Katz wrote: >> Since overflow: hidden or overflow: auto does >> the trick, the whole issue of clearing floats becomes essentially a >> non-issue, and saves extra markup. > I use such design-methods quite > often, and the overflow-property doesn't cut it across browser-land. > > regards > Georg Pardon my ignorance, but I am definitely missing something here. My CSS knowledge is nowhere near that of you gurus and overflow is something I haven't worked with much, so I'd just like to interject a really silly question here. (Sorry. Inquiring minds want to know...) If overflow: auto or hidden is used merely to clear an element, what prevents the occasional chopping off of needed data (hidden) or the addition of nasty little scroll bars everywhere (auto) where one might not want them? K. What is it I don't understand? :) lr __ 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] List Style - how would you change to get a "-"
Robert Lane wrote:
> Trying to do a nested nested nested type list and want to use just a "-"
> in front of the list item
>
> Is there a way to style that?
li:before { content: " - "; }
L. Robinson
__
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] Print 3 Left-floated Columns Intact
>> I have an order view which displays data in three columns (ex:
>> http://www.consupro.net/smp-order.gif).
>>
>> Screen CSS is: .col-orderheader { width: 30%; margin: 1%; float:
>> left; }
>>
>> I need to add something to the print stylesheet to insure that these
>> three columns print out exactly as displayed. ATM, they print
>> underneath each other.
>>
> Gunlaug Sørtun wrote:
>> Got a live page?
Was thinking all order views are account-only, but there is a way. If
anyone cares to step through a quick order on the demo -
https://www.consupro.net/demo (access level 1 login/pass are there), the
receipt page uses these columns. Login; click "view products"; add one;
click "view cart"; then "place order". Enter quantities and click
"submit" on the next page. (No need to enter anything here. Use defaults.)
The next page "Thank You!", is a summary of the order and uses these
columns. I apologize for the "hoops", but that's the only way for
non-members to see a copy of this page in action.
FF and other browsers, will try to load the page again to view source,
which can't be done; order duplication not allowed. IE won't do this.
These order views are everywhere. If I can't resolve the print problem,
I'll have to put those columns in a table and I really, really don't
want to do that.
Thanks for your help,
L. Robinson
__
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] Print 3 Left-floated Columns Intact
Good afternoon,
I have an order view which displays data in three columns (ex:
http://www.consupro.net/smp-order.gif).
Screen CSS is: .col-orderheader { width: 30%; margin: 1%; float: left; }
I need to add something to the print stylesheet to insure that these
three columns print out exactly as displayed. ATM, they print underneath
each other.
Advice?
Regards,
L. Robinson
__
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] Table Caption Disappears - Opera 8.5
What is it about this CSS...
caption, caption a { background: url(/images/caption.gif) #69c; color:
#eee; font-weight: bold; margin-left: -1px; padding: 5px; border: 1px
solid #69c; }
...that makes Opera 8.5 refuse to show the caption - at all?
lr
__
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] Unknown Height & Vertical Image Alignment in IE
*Nearly* working is markup and CSS to produce a sidebar of featured
items on one page and complements on another starting here:
http://www.consupro.net/catalogs/BuyerLogin.asp?Action=SetVendor&Vendor=2262
(One must sign in as Demo1 to see the complements on a product detail page.)
The CSS in question is located in #sidebar declarations here:
http://www.consupro.net/catalogs/themes/1/default.css
Featured img containers have a known height; complements do not. ("Add
to Cart" is cut off if overflow-hidden is used.)
Images have a class of .thumb, vertically aligned, which is enough for FF.
IE Er, struggling, probably too hard. (Don't have full product
listing working for IE, either.)
Searched everywhere (including the recent similar question re:
vertical-alignment of text *and* images) and find many references
detailing display: table-cell solutions for this issue, but the small
font size references seem to make these impossible to use for
complements: There is text in the list item.
Sincerely hoping someone has found an elegant solution for IE, as it
alone misbehaves and 97% of site members use it. Would sincerely
appreciate pointers on this one.
Regards,
Lori Robinson
P.S. These pages are the most complicated I've tackled - ever - with
CSS, so if any gurus spot a better way to handle *anything*, I'm all ears.
__
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] 3-pixel Shift IE & Site Check - beta.consupro.net
Greetings, Nearing the launch of stage 1 on this project, I'd appreciate your feedback on the following. Trying to use as few divs as possible, I've marked up the home page to use lists for everything that seemed a menu and all appears to be aligning properly... in everything but IE (3px) and Opera (1px). I'd also very much like to know what alignment looks like for Mac, which - alas - I don't have. Page: http://beta.consupro.net/default_new.asp CSS: http://beta.consupro.net/site-styles/home.css http://beta.consupro.net/site-styles/screen-switcher-default.css -1- I've tried every trick in the book on the vendor spotlight list (right, bottom), placing the bg image on the right-floated main container (with no margins or padding, applying borders on the LIs); bg on the list itself (with no margins or padding, using 3px images for "borders"); and bg on the LIs themselves with fake borders on the image itself. The problem, I think, is that this list and the list above are not part of the same construction. None of these little boxes were required to align with other in the initial layout. Without changing the structure of the page, going for the *illusion* of alignment with images has seemed to work best thus far. Finding a way to trick IE into rendering the same as Firefox, however, is beyond my level. Is there a way to do this, or must I restructure the page? -2- On tables such as the vendor list on http://beta.consupro.net/directories.asp?Title=SupDir&Action=SupplierDirectory there is quite a break between the caption and the first row of data in Mozilla products. This doesn't appear to have anything to do with the caption border issues reported elsewhere. Hoping someone knowledgable will know this one off the top of their heads. :) -3- Still pulling up short on the 100% height thing. Try the "Playfair" profile icon on the vendor list (URL above) for the best example. Thank you all so very much for your prior input, esp. D. Laasko, F. Miata and G. Sørtun. Your insights have been invaluable. Best regards, Lori Robinson __ 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] Site Check, Please; Some Questions
Converting legacy site to tableless layout and there are some advanced (and not-so-advanced) cross-browser tricks eluding me. Having searched, I'd be most grateful if someone can hit me with a clue stick on a few of these. Site here: http://beta.consupro.net/default_new.asp CSS here: http://beta.consupro.net/site-styles/screen-switcher-default.css (Not everything is in place and some links won't work.) -1- Full Height: Beginner stuff, but I've done the min-height/height thing and Mozilla still refuses to show 100% height on "Contact", for example. (http://beta.consupro.net/corporate/default.asp?Content=Contact) What am I missing? -2- Table captions (example here): http://beta.consupro.net/directories.asp?Title=SupDir&Action=SupplierDirectory I've read a lot about the different handling of caption borders by Mozilla, but that doesn't seem to be the problem here. Note the large spacing between the caption and the first table row. (Fine in IE.) What might be causing this, please? -3- Font-sizing: Hardest to leave behind are my pixel-based fonts. :\ There is a large difference between IE and Firefox, which I've slapped a band-aid on for now... that Opera isn't happy with. I've read about many people's preferences on this, but could use a lot more. Opinions on the best way to make them relatively the same cross-browser? Site check on other browsers (especially for Mac) and any/all feedback would be most appreciated. Regards, Lori R. __ 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] Bottom Alignment/Clearing Issues
Hello all, I have the good fortune of updating this site to standards and am taxing my measley CSS knowledge to the limit (which is why it's good fortune). I'm trying to accomplish three things right now: 1. I'd like the logo and login divs to stick to the bottom of the header div, no matter the header's height. 2. The dev toolbar extension seems to indicate there are some containers hanging in limbo up there that aren't being cleared properly. I can't be objective enough to see where I've gone wrong at this point. Dev page is here: http://beta.consupro.net/default_new.asp CSS is here http://beta.consupro.net/site-styles/core.css and here http://beta.consupro.net/site-styles/home.css (Don't worry. It won't look like that in the end.) I'd very much appreciate some extra eyeballs on this. Also, if anyone notices any general problems brewing, please let me know before I get myself in *real* trouble. Very much appreciate this list and all your help so far. Regards, L. Robinson __ 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] Scalable 2-col Product Display
Greetings, I need to list products in such a way that the number displayed per row will adjust according to screen resolution set with a thumbnail picture on the left and the item details on the right for each product displayed. Sounds simple enough. Should look like this: Thumb | Item No. . | Product Name . | Price . | Inventory . | Etc. & so forth First, I tried floating each display left in a fixed-width div with the image floated left within. Works beautifully. Problem is that the thumbs are different heights and info to the right of the thumbnail wraps around the bottom of smaller thumbs like so: Thumb | Item No. . | Product Name . | Price Inventory Etc I've tried putting both in divs with a fixed height. I've tried displaying each product as an inline list. "white-space: nowrap" didn't do it (IE wouldn't support that anyway), blah, blah. No matter what I try, that text wraps. Mid-level CSS skills and at wits end. Any ideas how to group these without the product info wrapping? The barest example can be found here: http://www.yescoltd.com/products.htm Assistance is most appreciated. lr __ 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/
