Re: [css-d] It works!!! swf priorities over css drop down menus
Melissa Meyer wrote: I got it to work in IE/Win and FF/Mac. The menus act funny in Safari/mac though. If anyone has any ideas as to why I would appreciate suggestions, but I am grateful for help I received so far! A tiny bit OT. wmode opaque is definitely the answer... http://snipurl.com/zfil Maybe will help hone your code (i.e. swfObject) Site looks good. :) Cheers, Micky -- Wishlist: http://snipurl.com/vrs9 Switch: http://browsehappy.com/ BCC?: http://snipurl.com/w6f8 My: http://del.icio.us/mhulse __ 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-based calendars?
- Original Message -
From: Erik Harris [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Tuesday, October 17, 2006 5:16 PM
Subject: [css-d] CSS-based calendars?
I've volunteered to put together a community calendar web page for my
housing community. I could easily put something decent-looking together
with tables, but I'd much rather use a more informational layout, where I
could use CSS to display the calendar as a list or as a traditional
table-esque monthly calendar. Is anyone aware of any examples on the web
of something of this nature already being put into use? I can think of
how
I'd need to organize the data (I'd probably need named styles for each
week
of the month and each day of the week, so that regardless of month, the
dates would display on the correct days, in the correct places on a
generically defined calendar), but I know that creating a
basically-tabular
layout with CSS is often a big challenge.
Erik Harrishttp://www.eHarrisHome.com
-AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172-
Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.com
Here's another possibility for you to consider, my calendar (link below) is
currently table-based, but it could very easily be done without them. Where
I now have a table row with pairs of table cells, one for Event (left), the
other for Venue (right), it could be pairs of divs within a div.
(Of course you would have all of your event content divs in a #container
or #content div).
The date pseudo-headers are just the CSS-styled FIRST row of the table for
each day styled with:
(I know there are inconsistencies in my content, it's from getting in a
hurry, cutting and pasting...)
table#calendar-data tr {
background-image: url(images/navshadow.gif);
background-repeat: no-repeat;
}
/*This centers the Dates*/
table#calendar-data td {
text-align: center;
}
/* Rules for Events (left) and Venues (right) cells */
table#calendar-data tr tr {
background-image: none;
}
table#calendar-data td td {
text-align: left;
background-color: #fff;
vertical-align: top;
border-top: none;
border-bottom: 1px solid Black;
width: 50%;
}
The single event posted on the home page is done using three (3) divs and
inline styling so you can see it doesn't involve much to implement my style
of calendar with CSS and divs (no tables).
You surely would want to design it with ALL of your CSS in an external style
sheet, with only your CSS #ids and .classes associated with your x/HTML and
content in your web pages.
Michael S. Rose
Bluegrass Plus Events Calendar
http://mmrose.home.comcast.net/
__
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] validation
However, some of the responses have lead to something I've wondered about which *is* CSS-related. Does setting image dimensions in a style sheet and leaving them out of the HTML cause problems in any browsers? Funny you should ask. I have just done a test on this. So far haven't found one that doesn't render properly. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.408 / Virus Database: 268.13.4/477 - Release Date: 16/10/2006 __ 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] Min/max-width problem in IE6
Morning all,
I'm having a problem with my min/max-width site in IE6. As we all know, IE6
doesn't support this CSS but I'd like to know a bulletproof way of getting it
to work!
I've noticed that simplebits.com uses this method of CSS for his wrapper div
and I've tried to replicate it in the site I'm creating but without success. It
works fine in FF, Opera, Safari and IE7 (as to be expected) but I was wondering
if someone could look over my code and point out where I'm going wrong and
suggest any fixes.
I currently have this:
#mainwrap, #header {
_width: expression(((document.body.clientWidth)) 800? 780px:
((document.body.clientWidth)) 1024? 950px: auto );
}
declared in my ie.css file but it doesn't seem to like it when I scale my
browser window in - I get a horrible horizontal scrollbar !¬(
My styles for the body tag are:
body {
margin:0;
padding:0 8%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
color:#000;
line-height:1.25em;
text-align:center;
}
And this for my wrapper:
#mainwrap {
position:relative;
min-width:780px;
max-width:950px;
margin:0 auto;
text-align:left;
font-size:95%;
}
The site lives at www.coopintranet.co.uk/xmas and the two CSS files can be
found at www.coopintranet.co.uk/xmas/css/master.css and
www.coopintranet.co.uk/xmas/css/ie.css
Hope someone can help,
Regards,
Brett
The contents of this e-mail and any attachments are confidential to the
intended recipient. If you are not the intended recipient please do not use or
publish its contents, contact Midlands Co-operative Society Ltd. immediately on
+44 (0) 1543 414140 and delete it.
Although this e-mail and any attachments are believed to be free from any virus
or other defect it is the responsibility of the recipient to ensure that they
are virus free.
This message has been scanned for viruses by BlackSpider MailControl -
www.blackspider.com
__
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] Serious problems in IE 6
Op 18-okt-2006, om 0:15 heeft Rainer Wagener het volgende geschreven:
tefan Nagtegaal wrote:
It looks like, when hovering a hyperlink in the main
content area or
the right sidebar, the background in the (floated)
sidebars, are ...
well... not displayed right.
Looks like a HasLayout problem.
adding: * html #wrapper { height:0; } fixed it for me.
For more information on the subject see:
www.satzansatz.de/cssd/onhavinglayout.html
Rainer, thanks for your answer but unfortunatly this isn't fixing the
problem..
Have a look here: http://istyledthis.nl/themetastic/review
When you hover the top navigation links (e.g: 'home', 'blog',
'polls', 'changelog') or a link in the middle column (e.g: 'Home')
there seems to be a shift of the background (which is applied to the
#wrapper) which only occurs inside the floated sidebars.
Adding the:
* html #wrapper {
height: 0;
}
does not seem to solve the problem. Do you or anyone else has another
proposal or isea on how this could be fixed?
Steef
__
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] Min/max-width problem in IE6
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Brett Derry
Sent: 18 October 2006 09:35
To: CSS Mailinglist
Subject: [css-d] Min/max-width problem in IE6
Morning all,
I'm having a problem with my min/max-width site in IE6. As we all
know, IE6 doesn't support this CSS but I'd like to know a
bulletproof way of getting it to work!
I've noticed that simplebits.com uses this method of CSS for his
wrapper div and I've tried to replicate it in the site I'm
creating but without success. It works fine in FF, Opera, Safari
and IE7 (as to be expected) but I was wondering if someone could
look over my code and point out where I'm going wrong and suggest
any fixes.
Brett
I find that site needs horizontal scroll bar in FF if window resized.
Change #mainwrap div in may style sheet to:
#mainwrap {
position:relative;
width:99%
min-width:780px;
max-width:60em;
margin:0 auto;
text-align:left;
font-size:95%;
}
As you know IE6 does not recognise min or max width.
You will also need to change your font-size in the body to 100% (you will of
course also need to look at the rest of your font sizes but this change to
body font tag is a MUST DO).
Ian
BTW. You should also define background in body as not everyone has their
default colour as white - see David Laakso!!
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.408 / Virus Database: 268.13.4/480 - Release Date: 17/10/2006
__
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] Min/max-width problem in IE6
Hi Ian,
Thanks for the reply. I've made the change to the CSS as you specified
but now the site is fixed in FF and I'm still getting the problem in IE.
I've uploaded the new CSS so you can see what's happening.
http://www.coopintranet.co.uk/xmas/
Any other ideas?
Brett
Morning all,
I'm having a problem with my min/max-width site in IE6. As we all
know, IE6 doesn't support this CSS but I'd like to know a
bulletproof
way of getting it to work!
I've noticed that simplebits.com uses this method of CSS for his
wrapper div and I've tried to replicate it in the site I'm creating
but without success. It works fine in FF, Opera, Safari and IE7 (as
to
be expected) but I was wondering if someone could look over my code
and point out where I'm going wrong and suggest any fixes.
Brett
I find that site needs horizontal scroll bar in FF if window resized.
Change #mainwrap div in may style sheet to:
#mainwrap {
position:relative;
width:99%
min-width:780px;
max-width:60em;
margin:0 auto;
text-align:left;
font-size:95%;
}
As you know IE6 does not recognise min or max width.
You will also need to change your font-size in the body to 100% (you
will of
course also need to look at the rest of your font sizes but this
change to body
font tag is a MUST DO).
Ian
BTW. You should also define background in body as not everyone has
their
default colour as white - see David Laakso!!
The contents of this e-mail and any attachments are confidential to the
intended recipient. If you are not the intended recipient please do not use or
publish its contents, contact Midlands Co-operative Society Ltd. immediately on
+44 (0) 1543 414140 and delete it.
Although this e-mail and any attachments are believed to be free from any virus
or other defect it is the responsibility of the recipient to ensure that they
are virus free.
This message has been scanned for viruses by BlackSpider MailControl -
www.blackspider.com
__
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] Slide show thumbnails tiling
Kind people A while ago Marcello Mastroianni very kindly pointed me in the direction of http://cssplay.co.uk/articles/gallery/index.html as a solution to a slideshow. On that occasion I used another method but since then an opportunity to build a website for a photographer has come up so I have experimented with some of my own pix first before she sends her own. It is at http://www.digitalplot.co.uk/slideshow/ with the stylesheet at http://www.digitalplot.co.uk/slideshow/text_style.css. I have followed his instructions but for some reason all thumbnails are tiling except the first one. I would much appreciate it if anyone could point out where my mistake is. I am on the digest so please could some kind sole email me directly. Thanks for any response. Annie --- Anne Pennington Www.digitalplot.co.uk __ 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] taming the tabs that follow a table! Really desperate!
I have a layout that should look exactly like so http://project.lotusseedsdesign.com/sh1/ss.jpg and is displaying fine in Firefox (Mac only) with span classes for the tabs: http://project.lotusseedsdesign.com/sh1/follows-1018-span.html http://project.lotusseedsdesign.com/sh1/follows_2.css Span classes for the above tabs are not semantically correct and I really like not to use it if I can get the result client needed in LI. But I can't, although it looks a lot closer but the first tab background color isn't able to overlap the table's top border. Here is the LI classes version http://project.lotusseedsdesign.com/sh1/follows-1018-li.html http://project.lotusseedsdesign.com/sh1/follows_1.css I also try absolute position for the tab div. Could get one browser work but not the other. Really run out of idea! Any help and pointer greatly appreciated! tee __ 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] CSS solution for Trimmed Content in a narrowing table cell
The idea is to have a column in a table of static content where enough
content is displayed to take up the full width of the table cell as
the table's width changes. Here's an example of a file listing,
displayed in a table:
Wide table:
| Filename | Size | Date |
| short name.txt| 5kb | 2006-10-4 |
| extremely long name.txt | 2kb | 2005-01-08 |
When the window/table is resized to be smaller:
| Filename| Size | Date |
| short name.txt | 5kb | 2006-10-4 |
| extremely long name.txt | 2kb | 2005-01-08 |
Then with clipping for narrower widths:
| Filename | Size | Date |
| short name.txt| 5kb | 2006-10-4 |
| extremely long na | 2kb | 2005-01-08 |
The trick is to do it without using Javascript. Is there a simple
solution for doing so? (Or any known validating and reasonably
browser-supported solution at all?)
Gmail's listings of messages in mail folders use this technique. I
tried probing the css with the help of Firefox's webdev toolbar, but I
was only able to find:
.tlc td(line 45)
{
width: 100%;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
}
This seems to give most of the desired behavior but without the clipping.
So we get this:
http://curby.net/pub/temp/indexer_test.htm
Here's a version with short file names so you can see how things should behave:
http://curby.net/pub/temp/indexer_test2.htm
The goal is to get things to behave like the second link above, but
showing as much of the filename as fits comfortably.
Any ideas? Thanks!
--Mike
P.S. Pardon the examples, which are just intended to show the table
behavior. I know there are many rendering bugs.
__
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] taming the tabs that follow a table! Really desperate!
Hi Tee, Sorry I don't have time to properly look at your code, but I have a similar thing here that I managed to get to work after a bit of tweaking, apologies for putting the full code up but you should be able to find the bits you need easily enough. This uses lists for the tabs. (The links on the page don't go anywhere at the moment as it is still WIP) http://metafaq18.metafaq.com/clients/metafaq18/html/configure.html And CSS http://metafaq18.metafaq.com/clients/metafaq18/html/tabsButtons.css James -Original Message- I have a layout that should look exactly like so http://project.lotusseedsdesign.com/sh1/ss.jpg Really run out of idea! Any help and pointer greatly appreciated! tee __ 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-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] Min/max-width problem in IE6
Brett Derry wrote: www.coopintranet.co.uk/xmas Further to my last email, I've played around a little with my margins on my wrappers and changed my _width: expression in my ie.css stylesheet and it seems to have sorted it! As far as I can see you now have a solution that makes IE6 freeze on min-width. The reason is that the IE-expression you use is a Quirks mode version, that IE6 chokes on when in standard mode. If you want it to work flawless, then a dual mode expression is a better choice. Several versions here... http://www.gunlaug.no/contents/wd_additions_14.html ...and I think the pixel-based min/max-width expression is what you want. Note: no min/max solutions for IE6 are bullet-proof, as they rely on javascript support. Apart from that; IE-expressions are as bullet-proof as any other solutions - when done right. regards Georg -- http://www.gunlaug.no __ 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] Using Dreamweaver with standards-based websites?
Wow! I'm away from my email for a day and look at all the terrific replies! Thanks to everyone for your advice. For those who mentioned it'd be easier if you could see the design, I've posted it here: http://www.southernenvironment.org/test/home_redraft.html For comparison sake, check out the current live version of our homepage http://www.southernenvironment.org/index.htm Table soup. Seriously. Wanna feel my pain? Lift the hood on that bad boy and take a gander. So anyway, I'm aware that my css for the redesign is a bit soupy itself; if I were to move forward, I'd start breaking this puppy into some separate sheets - one for main page layout, one for fonts, maybe one for images. Our site has more than 150 individual pages, with at least half a dozen different kinds of layouts, so it'd be tricky (and fun) to figure out the best way to organize the css. My main problems right now in dreamweaver: the left most column (what we call the toc, or table of contents) completely dissapears from the design view in dreamweaver 8. Someone mentioned negative margins wreaking havoc. Could that be it? Also: the header navigation and the footer are a bit quirky. In dreamweaver, the header list items double up (ie. Our Programs appears on two lines rather than one - not a big deal). Looks fine in all browsers I've tried. Also an issue: the footer is a bit wonky in dreamweaver - the blue border beneath the footer navigation shows in dreamweaver as longer than the border currently applied to the bottom of the three column container. Again, looks fine in all browsers. But then again, I'm not very pleased with the way the footer looks now. The most annoying problem is that missing table of contents. Any ideas? Unfortunately, the overall layout of the site isn't really up for discussion right now in our organization. For instance, elminating (or at least drastically simplifying) the table of contents - as I'd like to do - isn't an option. But I'd love to hear your opinions on the overall look of the page. Thanks so much to everyone for your help! matt On 10/17/06, Stephanie Leary [EMAIL PROTECTED] wrote: Matt Dawson wrote: snip I downloaded the trial version of Dreamweaver 8 and.no dice. The page is every bit as fractured in design mode in 8 as it was in MX. Is all hope lost? I won't be able to get approval for reworking our website with a CSS layout unless there's some program out there that would let people make simple WYSIWYG edits. Is there another editor out there that might work? Is there a setting in Dreamweaver that I'm just missing? Or am I just SOL? Dreamweaver handles some CSS layouts better than others. Negative margins almost always give me trouble, for example, but I've had good luck with a lot of the layouts from positioniseverything.net. If you're going for something relatively standard, like 2 or 3 columns with a header and footer, try downloading a handful of sample layouts from the usual suspects and see what works. If you have a minute, let Adobe know what kind of layout you were trying to use: http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform They do pay attention to that form -- or at least Macromedia did; I presume there's still someone listening on the other end. Filing a bug report won't solve your immediate problem, but it might lead to better support in DW9. -- Stephanie Leary Web Communications Specialist Texas AM University System http://tamus.edu __ 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-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] class and id naming conventions?
Hello. I've been working with css for a while now, but I still struggle with creating flexible and re-usable Class and ID names. IDs are usually easier since I most often use them for structure, so the left column is #left-column, etc. But in cases where they are used to style content, I am torn between trying to describe the type of stying applied (.highlight or .big-red-font) and the context in which it might be used (.call-out-box or .title). The first is nice since it describes what the styling is, but can be misleading when several styles are applied but the name refers to only one part (eg. .orange changes the font to orange, but also changes the font-face and size). The second is useful except when the context is ambiguous or the style could be used in different ways (eg. .note makes the font smaller and greys it out, but this styling could be used outside a note context.) Does anyone know of experienced css users creating or suggesting naming standards for classes and IDs? Thanks for your help! -frances __ 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] why margin-top/bottom don't work for span class?
Hi, this is not the first time I have the similar problem that the
margin top and bottom have no effect for inline span class.
http://project.lotusseedsdesign.com/sh1/follows-1018-span.html
for the above page, I declared margin-left: 30px;margin-top: 500px;
for the following span class, and the margin top doesn't work.
P/s. I don't really want the tab drops 500px below, simply want to
make a point here so you can see it clearly that it truly doesn't work.
div.table_follows span.unselected {
color: #fff;padding: 8px 15px 9px 15px;
background: #F3918E;font-size: .95em;
margin-left: 30px;margin-top: 500px;
border-top:9px solid #fff;
border-left: none;
border-right: none;}
thanks!
tee
__
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] why margin-top/bottom don't work for span class?
Hi, this is not the first time I have the similar problem that the
margin top and bottom have no effect for inline span class.
http://project.lotusseedsdesign.com/sh1/follows-1018-span.html
for the above page, I declared margin-left: 30px;margin-top: 500px;
for the following span class, and the margin top doesn't work.
P/s. I don't really want the tab drops 500px below, simply want to
make a point here so you can see it clearly that it truly doesn't work.
div.table_follows span.unselected {
color: #fff;padding: 8px 15px 9px 15px;
background: #F3918E;font-size: .95em;
margin-left: 30px;margin-top: 500px;
border-top:9px solid #fff;
border-left: none;
border-right: none;}
thanks!
tee
__
Hi Tee,
This won't work because the span is an inline element, and top and
bottom paddings and margins don't apply to inline elements.
Cheers,
Alex.
__
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] Remove frame borders through CSS
On 10/17/06, Bernat Lleonart [EMAIL PROTECTED] wrote:
I'm trying with frame { border: none;} and it doesn't work (perhaps
because I'm on Firefox on Mac OS X?).
Well, you could try border-style: none; but border: none should work.
Do you have a link we could look at?
--
Mark J. Reed [EMAIL PROTECTED]
__
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] Min/max-width problem in IE6
Hi Georg, That's exactly what I was looking for (and not a million miles away from Ian Young's earlier suggestion). However, I still have a problem with IE6. When I scale the window in the page width doesn't change (much) until the right hand side of the window hits the right hand side of the page. Only then does it change width. Any ideas? Thanks for your help so far. http://www.coopintranet.co.uk/xmas Brett -Original Message- From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] Sent: 18 October 2006 12:01 To: Brett Derry Cc: CSS Mailinglist Subject: Re: [css-d] Min/max-width problem in IE6 Brett Derry wrote: www.coopintranet.co.uk/xmas Further to my last email, I've played around a little with my margins on my wrappers and changed my _width: expression in my ie.css stylesheet and it seems to have sorted it! As far as I can see you now have a solution that makes IE6 freeze on min- width. The reason is that the IE-expression you use is a Quirks mode version, that IE6 chokes on when in standard mode. If you want it to work flawless, then a dual mode expression is a better choice. Several versions here... http://www.gunlaug.no/contents/wd_additions_14.html ...and I think the pixel-based min/max-width expression is what you want. Note: no min/max solutions for IE6 are bullet-proof, as they rely on javascript support. Apart from that; IE-expressions are as bullet-proof as any other solutions - when done right. regards Georg -- http://www.gunlaug.no The contents of this e-mail and any attachments are confidential to the intended recipient. If you are not the intended recipient please do not use or publish its contents, contact Midlands Co-operative Society Ltd. immediately on +44 (0) 1543 414140 and delete it. Although this e-mail and any attachments are believed to be free from any virus or other defect it is the responsibility of the recipient to ensure that they are virus free. This message has been scanned for viruses by BlackSpider MailControl - www.blackspider.com __ 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] class and id naming conventions?
Hi Frances,
With a layout like the following:
div class=left-navi
h1Navigation Area/h1
div class=buttons
ul class=list
liHome/li
liAbout/li
/ul
/div
/div
I use the following CSS:
.left-navi {
/* Main navi box */
width:120px;
}
.left-navi h1 {
/* Title font */
font-family: Verdana;
}
.left-navi .buttons {
/* Indent buttons */
width:100px;
margin-left:15px;
margin-right:5px;
}
.left-navi .buttons .list {
/* Set the background colour */
background-color:#ff;
}
.left-navi .buttons .list li {
/* Set a bottom border for each list item */
border-bottom: 1px solid #cc;
}
This enables me to have little 'groups' and so don't usually find
myself in a muddle. I never usually have many specific class names
like highlight etc. I will just style an em within a paragraph within
that object e.g.
div class=msg-box
h2Password incorrect!/h2
pLorem ipsum emdolor/em sit amet/p
/div
/* Message Box */
.msg-box {
width:400px;
height:150px;
border: #cc thin solid;
}
.msg-box h2 {
/* Big and red */
}
.msg-box p {
/* Small and grey */
}
.msg-box p em {
/* Highlight and bold */
}
/* /Message Box */
Hope this helps,
Gareth Rodger
W: http://www.garethrodger.com
E: [EMAIL PROTECTED]
On 18 Oct 2006, at 14:32, frances wrote:
Hello.
I've been working with css for a while now, but I still struggle with
creating flexible and re-usable Class and ID names. IDs are usually
easier since I most often use them for structure, so the left
column is
#left-column, etc. But in cases where they are used to style
content, I
am torn between trying to describe the type of stying applied
(.highlight or .big-red-font) and the context in which it might be
used
(.call-out-box or .title). The first is nice since it describes
what the
styling is, but can be misleading when several styles are applied but
the name refers to only one part (eg. .orange changes the font to
orange, but also changes the font-face and size). The second is useful
except when the context is ambiguous or the style could be used in
different ways (eg. .note makes the font smaller and greys it out, but
this styling could be used outside a note context.)
Does anyone know of experienced css users creating or suggesting
naming
standards for classes and IDs?
Thanks for your help!
-frances
__
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-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] class and id naming conventions?
I shy away from using ids and classes like .red or .bright simply because at
some point I may need to change the colours and then will have to change the
name too ie
.red {
color: red;
}
better:
.warning {
color: red;
}
__
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] Shopping Cart
I am looking for advice on what shopping cart software packages are out there and your experiences with them. I am a (somewhat picky) Web designer and would want full control of the source code so that I could design the storefront to my own liking. I have general knowledge of ASP, ASP.NET, and PHP... so the platform is not important. Many of the packages out there seem to be too rigid and/or are tables galore! Any guidance you could give me would be greatly appreciated. Thanks. __ 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] why margin-top/bottom don't work for span class?
Hi Alex, thanks for the quick response. On Oct 18, 2006, at 6:42 AM, Alex Bienz wrote: span is an inline element, and top and bottom paddings and margins don't apply to inline elements. But according to my example, it does work for top/bottom padding. In the example I have background color declared, when I increase pixels for top/bottom padding, the 'box' expands vertically. tee __ 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] class and id naming conventions?
frances wrote:
Does anyone know of experienced css users creating or suggesting naming
standards for classes and IDs?
Thanks for your help!
-frances
The best theory, I believe, is to keep names, especially class names,
related to their function, as opposed to description.
So if your orange text is used for emphasis, give it class .emphasis (or
even better, apply them to the em element).
Descriptive use of id and class names isn't best practice, precisely
because it ends up confusing.
On the other hand,
.orangetext{font-color:orange;}
is pretty clear.
Regards,
Barney
__
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] Shopping Cart
For the love of everything that is sacred stay away from osCommerce. If you ever plan to extend it's basic functionality with plugins you'll go mad* I don't seem to remember it being very friendly in many aspects, but is seems like there are a lot of people out there using it. * Unless osCommerce has dramatically improved the situation in the past year or so. -- Clint Ecker | STONE WARD 440 N. Wells, Suite 750, Chicago, IL 60610 Boston | [ Chicago ] | Little Rock www.stoneward.com On 10/18/06, Russ Bombardieri [EMAIL PROTECTED] wrote: I am looking for advice on what shopping cart software packages are out there and your experiences with them. I am a (somewhat picky) Web designer and would want full control of the source code so that I could design the storefront to my own liking. I have general knowledge of ASP, ASP.NET, and PHP... so the platform is not important. Many of the packages out there seem to be too rigid and/or are tables galore! Any guidance you could give me would be greatly appreciated. Thanks. __ 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] Min/max-width problem in IE6
Brett Derry wrote: http://www.coopintranet.co.uk/xmas When I scale the window in the page width doesn't change (much) until the right hand side of the window hits the right hand side of the page. Only then does it change width. Any ideas? Yes... :-) ...there's a flaw in your page-centering that makes the page center badly in all browsers on narrow windows. That also affects the min/max-expression, so the values you use won't add up and give a smooth and correct simulation. Set 'padding: 0;' on body - *not* 'padding:0 8%;', and it will work much better. IE6 also throws in a number of bugs. Especially the 'auto-expand' bug is creating problems - IE6 doesn't respect given dimensions. I'll have an in-depth look at it and suggest fixes for the other buggy details, a little later. regards Georg -- http://www.gunlaug.no __ 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] class and id naming conventions?
On Oct 18, 2006, at 8:32 AM, frances wrote: Does anyone know of experienced css users creating or suggesting naming standards for classes and IDs? I *never* put style information in the ID/class name. that means when the time comes to rework the site, I can rework the style without having to change the name of the ID/class. Likewise, I've learned not to put other presentation details in them (I no longer use things like #topnav or #leftcolumn). Instead I've taken to using strictly structural/semantic names (#maincontent, #mainnav, #modulenav for page layout structural features and .booktitle, .bookauthor, .menuitem, and the like for semantic identifiers). I've taken to looking at a document in terms of XML: if I were free to use any tag at all to describe this chunk, what would it be? if the tag exists in (X)HTML I use it, if not I use either span or div with an id or a class that uses that tag as a name. It makes maintenance a lot easier, as most of the time all I have to do is pay around with one file to achieve any design change I'm after. Have Fun, Arlen -- In God we trust, all others must supply data __ 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] CSS Gallery from database
Anne Pennington's recent post got me thinking and maybe this has already been answered. If so forgive the repetition. I have a client, like Annie who is a photographer and I would like a simple Gallery that uses CSS as the main driver but picks the images from MySQL. Now if I were being really lazy, I could use a CMS - like Joomla with its Zoom extension which does a reasonable job, can be customised and validates and all that jazz, but. So what are the thoughts? Layout similar to Stu Nicholls very elegant but somewhat tedious as it needs to be updated manually. Over to you. Ian **IMPORTANT* *** This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.408 / Virus Database: 268.13.4/480 - Release Date: 17/10/2006 __ 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 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/
[css-d] Sticky footer kinda sorta
Hi list, I am in need of a footer that sticks to the bottom of the viewport, but when content runs deep, the footer is pushed down accordingly. Here, for example: http://66.155.251.18/mlinc.com/06/ Can the footer be pinned to the bottom no matter how tall the viewport, but when copy, etc. is added, the footer will push down (with a nice amount of space between footer and copy). ;-) Is this possible without permanently aligning the planets and sacrificing small farm animals? TIA! -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ 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] why margin-top/bottom don't work for span class?
How vertical padding and margins are applied vary between browsers. The typical reaction I see is that vertical padding/margins/borders are applied, but they do not change the dimensions of the inline element. Meaning if an inline element is 1em tall, it remains 1em tall and it is rendered as if it's 1em tall regardless of how much vertical spacing you add. It's like the vertical padding is absolutely positioned, that is removed from the flow of the document. Here's a quick example: http://webhost.bridgew.edu/etribou/temp/inlines.html Span 1 has 10px padding and margin. Span 2 has 1000px vertical padding. Some browsers will generate a vertical scrollbar to fit the padding, other's clip at either the viewport or the document boundaries. Span 3 has 2000px vertical margins. You'll see that doesn't trigger scroll bar in those that do with padding because you'd see a longer document with empty space below the green of span 2. And if you test this across multiple browsers you'll see the reactions vary. Margins, it appears, are collapsing or being ignored entirely. Since horizontal margins are being applied I belive the vertical margins are applied as well except they're collapsed. CSS 2.1 spec doesn't state how vertical padding/borders/margins should be rendered, in fact it seems to explicitly say the spec doesn't cover it. Horizontal values, it does say, should be respected. See: http://www.w3.org/TR/CSS21/visuren.html#inline-formatting http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced Hope that explains what you're experiencing. -- Eric Tribou Web Developer Bridgewater State College http://www.bridgew.edu -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Tee G. Peng Sent: Wednesday, October 18, 2006 10:06 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] why margin-top/bottom don't work for span class? Hi Alex, thanks for the quick response. On Oct 18, 2006, at 6:42 AM, Alex Bienz wrote: span is an inline element, and top and bottom paddings and margins don't apply to inline elements. But according to my example, it does work for top/bottom padding. In the example I have background color declared, when I increase pixels for top/bottom padding, the 'box' expands vertically. tee __ 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-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] Sticky footer kinda sorta
Tom Livingston wrote: I am in need of a footer that sticks to the bottom of the viewport, but when content runs deep, the footer is pushed down accordingly. Here, for example: http://66.155.251.18/mlinc.com/06/ Anything is possible. Getting it to work reliably cross-browser without throwing yourself through a closed window is yet another matter :-) . You might take a look at Paul O'Brien's work.http://www.pmob.co.uk/temp/mac3column.htm. This turkey http://www.chelseacreekstudio.com/ca/cssd/height-100-percent.html that I floundered with is based on his stuff. Regards, ~dL -- http://chelseacreekstudio.com/ __ 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] Sticky footer kinda sorta
http://webhost.bridgew.edu/etribou/layouts/exp/diane/one.html That's my attempt at sticky footer (and header). There are some browsers that don't handle it well but it might be something that could be worked around (or the sticky part just not applied to older browsers). -- Eric Tribou -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of ~davidLaakso Sent: Wednesday, October 18, 2006 3:35 PM To: CSS Discussion Group Subject: Re: [css-d] Sticky footer kinda sorta Tom Livingston wrote: I am in need of a footer that sticks to the bottom of the viewport, but when content runs deep, the footer is pushed down accordingly. Here, for example: http://66.155.251.18/mlinc.com/06/ Anything is possible. Getting it to work reliably cross-browser without throwing yourself through a closed window is yet another matter :-) . You might take a look at Paul O'Brien's work.http://www.pmob.co.uk/temp/mac3column.htm. This turkey http://www.chelseacreekstudio.com/ca/cssd/height-100-percent. html that I floundered with is based on his stuff. Regards, ~dL -- http://chelseacreekstudio.com/ __ 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-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] Can images be dynamically resized proportionally with min and max sizes?
Is there any way, using css, to resize both the height and width of an HTML element like an image to the same percentage based on the width of the browser window? Ideally, I'd like to give a minimum and maximum size (height and width), too. In other words, I want to make sure my image is displayed at a 50% width and the height is adjusted proportionally so the image never looks stretched in one way and not the other. But I would also like to make sure it never goes smaller than 200 pixels wide and never exceeds 700 pixels wide, how can I do this? - Craig __ 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] Menu Positioning
Below is some CSS that I found that I really like. To see a working
sample, visit http://www.ecu.edu/cs-dhs/customcf/murphyp/sample5.html.
Right now when you hover over the links, you get a description. I
actually plan to modify this so that an actual sub menu with links
appears, but I can't figure out how to descriptions that are appearing
below the menu to show to the right of the main menu item you are
hovering over?
style type=text/css
!--
body {position: relative; background: black; margin: 0; padding: 0;}
div#links {position: absolute; top: 81px; left: 0; width: 166px; height:
700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em
sans-serif;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background: #444;
border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
border-right: 5px double white;}
div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 180px;left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}
--
/style
/head
body
div id=links
a href=#Homespan The main page of the site-- a jumping-off point,
as it were-- and not actually a picture of our house/span/a
a href=#Linksspan A collection of things which interest me, and
might interest you/span/a
a href=#Awayspan Who knows? Could be anywhere; you clicks the
link and you takes your chances!/span/a
a href=#Ericspan He's been called an internationally recognized
expert, but then he's also been called a techno-fascist/span/a
a href=#Katspan She cooks fabulous meals, she throws great
parties, she helps women deliver their babies-- what emcan't/em she
do?/span/a
a href=#Otherspan Inevitably, there's stuff that doesn't fit in
with other stuff, so we stuffed it all into this page of random
stuff/span/a
/div
/body
/html
__
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] Layout differences in IE/FireFox (Win) gasp WRT Fieldset
From: Glenn E. Lanier, II Sent: Wednesday, October 11, 2006 4:36 PM Original Post: http://lists.css-discuss.org/mailman/private/css-d/2006-October/070167.html I have a page [1] that works solidly (as far as I can tell) in FireFox (Windows XP, v1.5.0.7) but when viewed in IE the third fieldset seems to float much farther left than it should. Also, the vertical spacing of the input fields aren't consistent from FF to IE (I don't care about exact pixels -- I just want them on the same line as their labels (highlighted yellow). After further review, I see that actually, the third fieldset is in the correct place, while the first two are [seemingly] right aligned to the containing div. The problem that I see with [1] is that A) page content is not centered horizontally (body has width of 700px and margin:0px auto;) OK in FF, IE doesn't completely center B) first two fieldsets are right aligned, not centered. Any ideas on what to do to fix either of these IE issues? http://glennlanier.dynalias.com:8080/vsdonation/cssd/sample.html --G __ 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] Inline or block display for div question
Hi all,
Ok, I've been following the why margin-top/bottom don't work for
span class? thread, and have an offshoot question that has been
bugging me for some time. Say I have a div that has a little bit of
content such as:
.div1 {
border: 1px solid red;
padding: 5px;
margin: 5px 10px;
}
div class=div1This is the content/div
And I want to be able to set the margins and padding to what ever I
like, such as the above, how do I get the border to collapse around
the content? If set .div1 to:
display: block;
I get my margins and padding, but the div width (shown by the border
around the div) is the complete width of the page, and if I set .div1
to:
display: inline;
I don't get my margins, but the border now does collapse to the
content width.
I've been muddling through CSS for some time and LOVE It, but still
have some things I don't understand. Perhaps I am using the wrong
display model. Anyone who can enlighten me on this would be greatly
appreciated.
Thanks,
Mark
__
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] link in FF
I am working on a touch screen kiosk that will use FF. In IE i could define the button size and background and the size specified was the link which is what I want. To get the background images to show completely In FF i ended up resorting to a table. Ideally, i want to get rid of the table. Even with the table, the link area is limited to the text plus padding. The button size is height 107px, width: 296px, and i want the entire button (or at least cell) to be a link. http://www.enermodal.com/kiosk/st_gabriels/Index.htm http://www.enermodal.com/kiosk/st_gabriels/Index.htm Only Index and Project overview files are available. Any help is greatly appreciated. Katie __ 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 Gallery from database
Subject: Re: [css-d] CSS Gallery from database So what are the thoughts? ...about what? Not quite sure what you are asking. I am looking for the elegance of the CSS Gallery but with the flexibility of using MySQL and PHP to pick the images, so that we can upload images to database without having to rewrite the code every time. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.408 / Virus Database: 268.13.4/480 - Release Date: 17/10/2006 __ 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] Can images be dynamically resized proportionally with minand max sizes?
Subject: [css-d] Can images be dynamically resized proportionally
with minand max sizes?
Is there any way, using css, to resize both the height and width
of an HTML
element like an image to the same percentage based on the width of the
browser window?
Ideally, I'd like to give a minimum and maximum size (height and width),
too.
In other words, I want to make sure my image is displayed at a
50% width and
the height is adjusted proportionally so the image never looks
stretched in
one way and not the other. But I would also like to make sure it
never goes
smaller than 200 pixels wide and never exceeds 700 pixels wide,
how can I do
this?
- Craig
You can certainly define an image using em's. Just divide the pixels by 16
and have code like
.image1{width:12.5em;height:6.25em;border:none}
html
img class=image1 src=/myimage.gif
I guess you could also define the max and min width but that ol' bugger IE6
will need something else.
I have not actually gone as far as defining the max and min width/height so
will be interested in others views.
Have a look at Tedd's article on this:
http://sperling.com/examples/zoom/
Cheers
Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.408 / Virus Database: 268.13.4/480 - Release Date: 17/10/2006
__
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] Shopping Cart
Russ Bombardieri wrote: I am looking for advice on what shopping cart software packages are out there and your experiences with them. I am a (somewhat picky) Web designer and would want full control of the source code so that I could design the storefront to my own liking. ... Any guidance you could give me would be greatly appreciated. I have had great luck with PayPal Web Standards Payment. It is simple, it works well, it is unbelievably inexpensive compared to just about everyone else out there. It is very flexible in terms of how you can make it look. I have consulted with quite a few people from around the world to be sure that I am setting it up right (very important when you are dealing with other people's money and yours too) but given all the things it does for me, I am beyond pleased with it and recommend it highly to anyone who wants a cart but doesn't want to pay between $500-$1000/yr for the privilege. You can download your commercial information to an Excel spreadsheet and to a Quicken or Quickbooks program and keep track of all your transactions, too. The icing on the cake is that they will also allow you to make 5% on your money you keep in PayPal. Much better than a bank, better than my investment fund. You only have to ask them to include you on their Money Market dealie. I do not work for PayPal or any of their subsidiaries, I'm just a very satisfied customer.---Fabienne __ 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] link in FF
Kathryn, On Oct 18, 2006, at 4:47 PM, Kathryn Crutcher wrote: I am working on a touch screen kiosk that will use FF. In IE i could define the button size and background and the size specified was the link which is what I want. To get the background images to show completely In FF i ended up resorting to a table. Ideally, i want to get rid of the table. Even with the table, the link area is limited to the text plus padding. The button size is height 107px, width: 296px, and i want the entire button (or at least cell) to be a link. http://www.enermodal.com/kiosk/st_gabriels/Index.htm http://www.enermodal.com/kiosk/st_gabriels/Index.htm First you need to pay attention to the html. Until it validates, you will likely have issues with differences between browsers. Check out http://validator.w3.org/check?uri=http%3A%2F%2Fwww.enermodal.com% 2Fkiosk%2Fst_gabriels%2FIndex.htmcharset=%28detect+automatically% 29doctype=Inliness=1verbose=1 First you will need a doctype !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; Then you need to declare a character set (in head) meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 After that you need to change the id=button to class=button and change the css to match since you can only have on ie=button per page. You should be able to assign display: block; to the a elements in your menu and have them expand to fill the entire box. Also, I would avoid overflow: hidden on your body element. You can make it a fixed width so your kiosk won't have scroll bars, but allow the site to work on the web for those of us with smaller windows. No sense having to write it twice :-) Hope that gets you started. -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Inline or block display for div question
Mark,
On Oct 18, 2006, at 4:07 PM, Mark Wheeler wrote:
Ok, I've been following the why margin-top/bottom don't work for
span class? thread, and have an offshoot question that has been
bugging me for some time. Say I have a div that has a little bit of
content such as:
.div1 {
border: 1px solid red;
padding: 5px;
margin: 5px 10px;
}
div class=div1This is the content/div
And I want to be able to set the margins and padding to what ever I
like, such as the above, how do I get the border to collapse around
the content? If set .div1 to:
display: block;
I get my margins and padding, but the div width (shown by the border
around the div) is the complete width of the page, and if I set .div1
to:
display: inline;
I don't get my margins, but the border now does collapse to the
content width.
The text inside your div is in an anonymous box which you can't
style. Adding a span to your code gives you something to hook into
and you can put the border on the span.
div class=div1spanThis is the content/span/div
Your other option is to use float which retains the block properties
but 'shrinks to fit' Incidentally, display: table; also shrinks to
fit, but is not supported in ie/win.
hth
--
Roger Roelofs
__
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] Inline or block display for div question
OK, first of all, div's default to display: block, so setting that is
the same as not setting display: at all. The purpose of div is to be
the generic block-display container, just as span is the generic
inline-display container.
By definition, absent explicit positioning, a block element is a
full-width element with regard to the normal flow of text. So your
border goes all the way across.
If you set the div to display: inline, then it becomes part of the
normal flow of text and is positioned in terms of the text baseline.
You can still set margins, and you should see those margins on the
left and right, but since setting a margin doesn't affect the
line-height, the top and bottom margins will be invisible. (As
probably mentioned in the margin-top/bottom on span thread that you
cited.)
I'm not sure what you're trying to accomplish; if the border collapses
around the text, then that will make the margins *appear* to be larger
than what you have set. But I believe you should be able to achieve
the desired effect by using the inline-block display value.
On 10/18/06, Mark Wheeler [EMAIL PROTECTED] wrote:
Hi all,
Ok, I've been following the why margin-top/bottom don't work for
span class? thread, and have an offshoot question that has been
bugging me for some time. Say I have a div that has a little bit of
content such as:
.div1 {
border: 1px solid red;
padding: 5px;
margin: 5px 10px;
}
div class=div1This is the content/div
And I want to be able to set the margins and padding to what ever I
like, such as the above, how do I get the border to collapse around
the content? If set .div1 to:
display: block;
I get my margins and padding, but the div width (shown by the border
around the div) is the complete width of the page, and if I set .div1
to:
display: inline;
I don't get my margins, but the border now does collapse to the
content width.
I've been muddling through CSS for some time and LOVE It, but still
have some things I don't understand. Perhaps I am using the wrong
display model. Anyone who can enlighten me on this would be greatly
appreciated.
Thanks,
Mark
__
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/
--
Mark J. Reed [EMAIL PROTECTED]
__
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 Gallery from database
Ian Young wrote: I have a client, like Annie who is a photographer and I would like a simple Gallery that uses CSS as the main driver but picks the images from MySQL. Now if I were being really lazy, I could use a CMS - like Joomla with its Zoom extension which does a reasonable job, can be customised and validates and all that jazz, but. So what are the thoughts? Layout similar to Stu Nicholls very elegant but somewhat tedious as it needs to be updated manually. Ian Nicholls gallery is an attractive little visual package-- although not great on the usability and accessibility end. An i-frame gallery can be handsome and is valid providing a 'transitional' doctype is used. There are, of course, javascript/php alternatives, some of them offering the ability to a good deal of visual customization with css. And there is flash. Lots of possibilities-- but, in the end, it is a pick your poison choice. My personal choice (since my middle name is tedium) would be to use only xhtml/css-- thumbs clicking to a new page with the enlargement and the thumbs on it (or an i-frame gallery). Regards, ~dL PS This is an i-frame gallery: http://dlaakso.com/. -- http://chelseacreekstudio.com/ __ 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] Menu Positioning
Murphy, Percevial wrote: http://www.ecu.edu/cs-dhs/customcf/murphyp/sample5.html [.].I can't figure out how to descriptions that are appearing below the menu to show to the right of the main menu item you are hovering over? I believe that is Eric Meyer's 'pop-up' demo. The method is explained here: http://meyerweb.com/eric/css/edge/popups/demo.html. Regards, ~dL -- http://chelseacreekstudio.com/ __ 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] Can images be dynamically resized proportionally with minand max sizes?
Subject: [css-d] Can images be dynamically resized proportionally with minand max sizes? Is there any way, using css, to resize both the height and width of an HTML element like an image to the same percentage based on the width of the browser window? Ideally, I'd like to give a minimum and maximum size (height and width), too. In other words, I want to make sure my image is displayed at a 50% width and the height is adjusted proportionally so the image never looks stretched in one way and not the other. Specify only one of with or height then and the browser should calculate the other domension. I've yet to see a browser which doesn't maintain proportionality when only one scaled dimension is supplied. -- Richard Grevers, New Plymouth, New Zealand Hat 1: Development Engineer, Webfarm Ltd. Hat 2: Dramatic Design www.dramatic.co.nz __ 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] Site check please - IE problem......
Pieter Botha wrote: Hello everyone. Please check this site for me: http://kusile.cojjoconnect.co.za I have a little problem in IE... The dark green header bar (h1 with background color applied) should touch the menu bar, there is a small little annoying gap. Seems like padding is applied to the heading although I specified that it should be 0. It works fine in firefox [...] Hi Pieter, At my IE6 on Win98SE there is no problem seen: all resolutions and all clientside font-sizes are doing well. :-) Then I downloaded the html, added the missing charset meta element and the missing type=text/javascript for the script tags (the only 2 html-errors acording to the w3c html-validator), and looked at the result locally and uploaded at my site. First in IE there was no good display at all. - Div's where in the right position, but no backgrounds and other styles... The culprits: almost all ID's are starting with a space: div id = wrapper div id = header and so on, which is not allowed. The html-validator is not reporting that, but Tidy does: ID and NAME must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.). Then I deleted all these spaces, except the one in the div id= content. And... there is the annoying IE gap! (not in FF). See testpage-1 http://home.tiscali.nl/developerscorner/css-discuss/test-kusile-1.htm. Then deleted this last ID-space, and IE is performing as it should. :-) See testpage-2 http://home.tiscali.nl/developerscorner/css-discuss/test-kusile-2.htm. My conclusion: I suspect it is the special combination of your server, the visitor's Operating System and the error handling of IE (-version) which shows a gap or no gap. Anyway, perfect html is the solution! Greetings, francky BTW: the page uses a huge amount of javascript: about 150kB (!). If the site is supposed to be seen by DSL visitors only, it is no problem; but on a fast 56Kbps modem connection it means: 35 sec. before the page is completely downloaded and having it's functions... See Speed Report-1 http://www.websiteoptimization.com/services/analyze/wso.php?url=http://kusile.cojjoconnect.co.za/. So I think you should consider to abandon the scripts (for the menu, as far as I can see; the Ruby model I did not study, I've to admit), and replace it by a simple css-styled link list. As the page is now, I made a css hoverable testpage for that. See testpage-3 http://home.tiscali.nl/developerscorner/css-discuss/test-kusile-3.htm. It is giving the same display and the same functionality (and a bit more accessibility), but now in 3.5 seconds on screen. :-) See Speed Report-2 http://www.websiteoptimization.com/services/analyze/wso.php?url=http://home.tiscali.nl/developerscorner/css-discuss/test-kusile-3.htm. In case you need a hoverable submenu, a Suckerfish menu (with small IE javascript) can be used. And in so far javascripts are really needed on other pages, you can call them only over there. Then the general stylesheets are already downloaded: less download time for the new pages. - But probably I didn't tell something you didn't know already. ;-) __ 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 solution for Trimmed Content in a narrowing table cell
Ok, I notice that gmail also has table-layout: fixed for the table,
so i tried applying that. It got the clipping to work, but it set
every column to be the same width, as shown in the second table here:
http://curby.net/pub/temp/indexer_test.htm
How does gmail get a fixed layout table to use different widths for
columns? I'm probably really close now, so any hints would be most
appreciated. Thanks!
--Mike
On 10/18/06, Curby [EMAIL PROTECTED] wrote:
The idea is to have a column in a table of static content where enough
content is displayed to take up the full width of the table cell as
the table's width changes. Here's an example of a file listing,
displayed in a table:
Wide table:
| Filename | Size | Date |
| short name.txt| 5kb | 2006-10-4 |
| extremely long name.txt | 2kb | 2005-01-08 |
When the window/table is resized to be smaller:
| Filename| Size | Date |
| short name.txt | 5kb | 2006-10-4 |
| extremely long name.txt | 2kb | 2005-01-08 |
Then with clipping for narrower widths:
| Filename | Size | Date |
| short name.txt| 5kb | 2006-10-4 |
| extremely long na | 2kb | 2005-01-08 |
The trick is to do it without using Javascript. Is there a simple
solution for doing so? (Or any known validating and reasonably
browser-supported solution at all?)
Gmail's listings of messages in mail folders use this technique. I
tried probing the css with the help of Firefox's webdev toolbar, but I
was only able to find:
.tlc td(line 45)
{
width: 100%;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
}
This seems to give most of the desired behavior but without the clipping.
So we get this:
http://curby.net/pub/temp/indexer_test.htm
Here's a version with short file names so you can see how things should
behave:
http://curby.net/pub/temp/indexer_test2.htm
The goal is to get things to behave like the second link above, but
showing as much of the filename as fits comfortably.
Any ideas? Thanks!
--Mike
P.S. Pardon the examples, which are just intended to show the table
behavior. I know there are many rendering bugs.
__
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] Moving divs up page
Here is the page I'm working on:
http://www.villa-corti.com/menus.htm
The image divs are all in the right place but the navigation bars I can´t
seem to move. tabsH and navbar are the ones I want to move and they are in the
navshadow div which presently doen´t have a style. All the divs hare position
relative; and float left;
How can I move the navbars up? Thanks for any advice to the newbie.
body
div id=navimagelimg src=images/lake3.jpg/div
div id=logoimg src=images/lodgeadog.jpg //div
div id=navimagerimg src=images/dog1.jpg/div
div id=tabsH
ul
lia href=# title=homespanhome/span/a/li
lia href=# title=Link 2spanregister/span/a/li
lia href=# title=Link 3spana aa/span/a/li
lia href=# title=Longer Link Textspana aa aaa
a/span/a/li
lia href=# title=Link 5spanabout us/span/a/li
/ul
/div
DIV id=navshadow
DIV id=navbar
ULLIA href=Search/A
LIA href=link/A
LIA href=linklink linklink/A
LIA href=link/A
LIA href=link link/A /LI
br style=clear: both; /
/UL/DIV
/DIV
The blue background items should not be in the visible menu. They should
fly-out when the item just above the two blue background items is
hovered over. The blue background items are the Exhibitor Info and
style type=text/css
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
#navimagel {
position:relative;
width:85px;
height:115px;
z-index:1;
left: 13px;
top: 0px;
clear: left;
float: left;
}
#navimager {
position:relative;
width:239px;
height:90px;
z-index:3;
left: 250px;
top: 0px;
float: left;
}
#logo {
position:relative;
width:238px;
height:73px;
z-index:2;
left: 100px;
top: 46px;
float: left;
}
/*- Menu Tabs H--- */
#tabsH {
float:left;
width:100%;
background:#fff;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 94px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url(tableftH.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url(tabrightH.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
/*- Images for divs--- */
/* purple navigation */
#navbar {CLEAR: both; background:url(navtile.gif) repeat-x left top;
background-color: #9933CC; MARGIN: 0px; WIDTH: 760px;
}
#navbar UL {
PADDING-LEFT: 1em; MARGIN: 0px; LIST-STYLE-TYPE: none
}
#navbar LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#navbar A:link {
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px;
FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #ccc; LINE-HEIGHT:
10px; PADDING-TOP: 5px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
#navbar A:visited {
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px;
FONT-SIZE: 1.1em; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #fff; LINE-HEIGHT:
10px; PADDING-TOP: 5px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
#navbar A.active:link {
TEXT-DECORATION: underline
}
#navbar A.active:visited {
TEXT-DECORATION: underline
}
#navbar A:hover {
TEXT-DECORATION: underline
}
/style
Send instant messages to your online friends http://uk.messenger.yahoo.com
__
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 solution for Trimmed Content in a narrowing table cell
Ok, there seems to be two solutions. The first is to use a
fixed-layout table with hard-set column widths on col elements. The
columns that should shrink and grow don't have such styling; in
effect, they have an auto width.
The advantage to the first solution is that the table renders quickly
(due to the fixed layout) but the disadvantage is that you must be
able to estimate the content length in the fixed columns. If a field
gets populated with a lot of data, it may be cut off and never be
shown (due to the static column width).
The third table shown here implements this first idea:
http://curby.net/pub/temp/indexer_test.htm
The second possibility is to enclose the contents of the
variable-width column in a styled div, and keep the auto-layout of the
table. This makes the table more flexible, as the other columns can
shrink or grow to fit their content. (There might be caveats to this
method, as I've only briefly tried it on a simple example.)
Any comments?
--Mike
On 10/18/06, Curby [EMAIL PROTECTED] wrote:
Ok, I notice that gmail also has table-layout: fixed for the table,
so i tried applying that. It got the clipping to work, but it set
every column to be the same width, as shown in the second table here:
http://curby.net/pub/temp/indexer_test.htm
How does gmail get a fixed layout table to use different widths for
columns? I'm probably really close now, so any hints would be most
appreciated. Thanks!
--Mike
On 10/18/06, Curby [EMAIL PROTECTED] wrote:
The idea is to have a column in a table of static content where enough
content is displayed to take up the full width of the table cell as
the table's width changes. Here's an example of a file listing,
displayed in a table:
Wide table:
| Filename | Size | Date |
| short name.txt| 5kb | 2006-10-4 |
| extremely long name.txt | 2kb | 2005-01-08 |
When the window/table is resized to be smaller:
| Filename| Size | Date |
| short name.txt | 5kb | 2006-10-4 |
| extremely long name.txt | 2kb | 2005-01-08 |
Then with clipping for narrower widths:
| Filename | Size | Date |
| short name.txt| 5kb | 2006-10-4 |
| extremely long na | 2kb | 2005-01-08 |
The trick is to do it without using Javascript. Is there a simple
solution for doing so? (Or any known validating and reasonably
browser-supported solution at all?)
Gmail's listings of messages in mail folders use this technique. I
tried probing the css with the help of Firefox's webdev toolbar, but I
was only able to find:
.tlc td(line 45)
{
width: 100%;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
}
This seems to give most of the desired behavior but without the clipping.
So we get this:
http://curby.net/pub/temp/indexer_test.htm
Here's a version with short file names so you can see how things should
behave:
http://curby.net/pub/temp/indexer_test2.htm
The goal is to get things to behave like the second link above, but
showing as much of the filename as fits comfortably.
Any ideas? Thanks!
--Mike
P.S. Pardon the examples, which are just intended to show the table
behavior. I know there are many rendering bugs.
__
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] Moving divs up page
You may want to validate your xhtml before you amend that. 32 errors. __ 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] Shopping Cart
I am looking for advice on what shopping cart software packages are out there and your experiences with them. I am a (somewhat picky) Web designer and would want full control of the source code so that I could design the storefront to my own liking. I have general knowledge of ASP, ASP.NET, and PHP... so the platform is not important. Many of the packages out there seem to be too rigid and/or are tables galore! Any guidance you could give me would be greatly appreciated. Hi Russ, Finally... a question that I can answer! =;) You may want to check out SurfShopPRO. We've been using it for years and are extremely pleased with it. You can download a demo from their website: http://www.surfshoppro.com/ Let me know if I can answer any questions for you. Regards, Ted __ 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] EM's, Images, sperling.com, /16? Please advise.
Ian Young wrote: Have a look at Tedd's article on this: http://sperling.com/examples/zoom/ (Note: Above quote taken from CSS-d email/thread with this Subject line: Re: [css-d] Can images be dynamically resized proportionally with minand max sizes? I did not want to thread-jack.) Maybe Tedd can shed more light on this (or others)... The number used was 16. Is that related to default font size for a particular browser? I thought that number changed depending on browser... I would love to setup a site that displayed images at the optimal/default dimensions/resolution, but scaled on zoom. Seems like using 16 may work for some browsers, but not for others. I am pretty picky when it comes to crisp jpgs. Maybe I am not fully understanding the relationship here... I know it can't be that easy! :D For example, if precision is required for a layout (i.e. newspaper-style layout with a lot of unknown content changing on daily basis), should I even think about using EM's for layout? Some of the folks who posted comments in below article/post seem to think that it is not a good idea to use EM's for layout if dealing with images, unknowns, and precision is needed: http://www.cameronmoll.com/archives/001224.html Thoughts anyone? :) Many TIA's. M -- Wishlist: http://snipurl.com/vrs9 Switch: http://browsehappy.com/ BCC?: http://snipurl.com/w6f8 My: http://del.icio.us/mhulse __ 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] Moving divs up page
ed gooddy wrote:
http://www.villa-corti.com/menus.htm
The image divs are all in the right place but the navigation bars I
can´t seem to move. tabsH and navbar are the ones I want to move and
they are in the navshadow div which presently doen´t have a style.
All the divs hare position relative; and float left;
How can I move the navbars up?
The quick, and working, answer is:
add...
#tabsH {margin-top: -30px;}
...or any suitable, negative, value.
However, the result of such a move doesn't appear right in any browser,
so I don't think that is what you want. Correct me if I'm wrong.
---
Problems, as I see them:
1: you're mixing XHTML and HTML syntax, which is what causes most
validation errors...
http://validator.w3.org/check?uri=http://www.villa-corti.com/menus.htm
...so you should decide which standard you want to use and write your
source-code accordingly. Won't change much in browsers, but it sure will
make further work on your layout a lot easier.
2: IE6 is auto-expanding the divs containing images - a bug, so the
navbars are pushed too low in that browser.
Solution:
add...
#navimagel img,#navimager img {
margin-bottom: -100px;
position: relative;
}
...to pull up the images' bottom while keeping them visible, so IE6
doesn't have anything to expand on. Only then can you start adjusting
where 'tabsH' and 'navbar' should stay, in a cross-browser stable way.
---
It is pretty unclear to me what you want here, as elements will overlap
each other if you move 'tabsH' and 'navbar' upwards. There's overlapping
now if any degree of font-resizing is applied, and font-resizing can't
be prevented.
regards
Georg
--
http://www.gunlaug.no
__
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] IE7 Released
Well, it looks like it's finally out: http://www.microsoft.com/windows/ie/downloads/default.mspx http://blogs.msdn.com/ie/ later, Mike __ 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 Rendering Problem
Hi guys, I tried emailing this before, so if you already replied I apologize in advance. I tried searching the archives and couldn't find my email. I don't even know where to start. I have this working beautifully under Firefox 1.5. However, the wonderful IE plagues me and I don't know where to start to fix it. I would like to keep the code as simple as possible and not use javascript to make a special version for IE if possible. http://www.smwstudios.com/Martin/index2.htm Thanks, Martin __ 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] IE Rendering Problem
Martin Davis wrote: Hi guys, I tried emailing this before, so if you already replied I apologize in advance. I tried searching the archives and couldn't find my email. I don't even know where to start. I have this working beautifully under Firefox 1.5. However, the wonderful IE plagues me and I don't know where to start to fix it. I would like to keep the code as simple as possible and not use javascript to make a special version for IE if possible. http://www.smwstudios.com/Martin/index2.htm Not valid XHTML according to W3C: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.smwstudios.com%2FMartin%2Findex2.htm W3C CSS validator reports an error in your XML: http://jigsaw.w3.org/css-validator/validator?profile=css2warning=2uri=http%3A%2F%2Fwww.smwstudios.com%2FMartin%2Findex2.htm So what's the problem in IE, anyway? -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] EM's, Images, sperling.com, /16? Please advise.
Micky Hulse wrote: The number used was 16. Is that related to default font size for a particular browser? I thought that number changed depending on browser... I would love to setup a site that displayed images at the optimal/default dimensions/resolution, but scaled on zoom. Seems like using 16 may work for some browsers, but not for others. It is more or less an arbitrary number, derived from the norm that says that medium font-size is 16px by default in yesterday's, and most of today's, browsers. The important thing is that you divide them (by a number of your choosing) from pixels to EMs _exactly_ to the last decimal (and hope the browsers know their math). The result will/should be the same in all browsers - providing the font-size is the same. That's an unknown that includes system-defaults/norms/resolutions, browsers and user-applied font-resizing. A pretty wide range. I am pretty picky when it comes to crisp jpgs. Then you either have to avoid em-resizing of images, or make them considerably larger then you want them to appear, and size them down in browsers. You can however never be sure about the crispness a visitor gets when you style images for resizing. Maybe I am not fully understanding the relationship here... I know it can't be that easy! :D Sure it is! It is achieving a good, crisp, result that is hard, since no browser can resize images as well as a dedicated photo-program can. For example, if precision is required for a layout (i.e. newspaper-style layout with a lot of unknown content changing on daily basis), should I even think about using EM's for layout? Some of the folks who posted comments in below article/post seem to think that it is not a good idea to use EM's for layout if dealing with images, unknowns, and precision is needed: http://www.cameronmoll.com/archives/001224.html EMs for layout is one thing. EMs for image-sizing is another. EMs for everything is yet another. You can make it all work just fine if you are in control of everything, but that's rarely the case. So... look at _your_ case(s) and test out what works and what doesn't, and then _you_ can decide. Myself: I apply EM sizing of images in very rare cases, when I know, and like, what I get. Some more info... http://css-discuss.incutio.com/?page=UsingEm regards Georg -- http://www.gunlaug.no __ 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] background/menu missing in IE6
I laid out a page with the markup, and just started formatting with
CSS. I have the page header positioned in CSS, and it looks fine in
Safari and Firefox on the Mac. In both IE6 Firefox on the PC both
the header background and the menu do not appear. (I was surprised
that the problem exists in FF as well as IE). It has been a while
since I worked in CSS. The page can be seen at www.lifeonwheels.com/
beta/. Help pointing me in the right direction will be much
appreciated. The relevant CSS, is as follows:
/* CSS Document */
/*WRAPPER - encloses entire page*/
#pagewrapper {
position:relative;
min-width:600px;
max-width:910px;
width:100%;
margin-left:auto;
margin-right:auto;
margin-top:0;
text-align:left;
}
/*logo positioning*/
img#logo {
position:absolute;
top:3px;
z-index:10;
}
/*page heading*/
#header {
position:relative;
height:149px;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
z-index:5;
left:-2px;
}
/*topmenu - ul menu in heading*/
#header ul {
position:relative;
font-size:90%;
font-weight:bold;
top:131px;
left:135px;
padding:0;
z-index:15;
}
#header li {
display:inline;
padding:0 8px;
}
__
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] Making my FIRST fully compliant site! (and losing)
I am a graphic designer aspiring to be a web developer. I know PHP and HTML pretty well, CSS a bit, but ultimately, I don't know what I am supposed to use and where. I've read all I could retain on AListApart and some other sites, but now, 15% into the site, I am stumped. I didn't think it would be this hard! I need some pretty serious help, but I _REALLY_ want to learn, so if there is anyone out there that is patient, I would love to chat with you one on one and call on you for some of my questions, instead of spamming this list with all sorts of stuff I'm going to encounter. For the most part, I am able to retain what I learn, as I record it all, and will use it as a reference. My email address is jonahughes at Phazm dot net if you want to make contact. But while I'm here, I might as well throw this out there, somewhat of an open-ended question, as I have no idea even what I am trying to do, I only know the end result. This is the site I am working on: http://www.phazm.net/stamps/ Pretty, eh? This is what is it SUPPOSED to look like: http://www.phazm.net/stamps/index.gif I was trying to use code from other sites (e.g. veerle.duoh.com) but I am just totally lost. My question is thus: How do I make the content - that is to say, the white background - encompass everything? I already have the header up there, that was step one, but now, aside from making a footer.gif and just taking EVERYTHING below the header and making it a gif, I have no idea what to do. Thank you all so much for having this wonderful resource available to those of us who wish to expand our abilities. __ 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] IE7 Released
Ok... So is there a way to run IE7 and at least IE6 on the same box? Mark -- On Oct 18, 2006, at 7:34 PM, Mike Soultanian wrote: Well, it looks like it's finally out: http://www.microsoft.com/windows/ie/downloads/default.mspx http://blogs.msdn.com/ie/ later, Mike __ 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-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] IE Rendering Problem
Martin Davis wrote: Thanks for pointing that out. I didn't even think to look at that. I validate as I go. Only way I can keep on top of things. Then, after I put it up where people can see it, I validate again, just in case! I'm just a learner here, myself, so I'm CCing this back to the CSS-D list where the experts can fix things! wow. The problems are: -The footer expands and fills in space I don't want it to. IE has a bug/feature that autoexpands containers to make room for whatever it thinks is inside them. So I guess the fix is to figure out what IE is making large enough to require expanding the container. -The borders are giving too much space in between the content and themselves Sounds like the IE non-standard box model. In quirks mode, it doesn't calculate container dimensions properly, generally producing containers that are bigger than they're supposed to be, I think. -I was hoping to get the red box to float over the brown box, however IE is cutting it off. I can't even guess about that one! Thanks for the fast reply. I fixed the validation errors. Martin Here's Martin's site for the experts to delve into: http://www.smwstudios.com/Martin/index2.htm -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] IE Rendering Problem
Martin Davis wrote:
I have this working beautifully under Firefox 1.5. However, the
wonderful IE plagues me and I don't know where to start to fix it.
http://www.smwstudios.com/Martin/index2.htm
Try adding...
#mainbody {zoom: 1;}
#newsblock {zoom: 1; position: relative; }
...which will trigger 'hasLayout'[1] and change the stacking so IE6
expands those elements properly and get them in the right order.
Then, add a comment inside the empty divs you have...
div class=redtop!-- --/div
div class=redbottom!-- --/div
div class=greybottom!-- --/div
...to prevent IE6 from throwing in its 'whitespace' bug - adding
line-height to an empty element.
That should get you started.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
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/
