Re: [css-d] Faking float: center, or making blocks flow centered. Impossible?
On Tue, Feb 26, 2008 at 8:51 AM, Sander Marechal wrote: I want something that behaves sort of as float: center if that would exist. Or as an inline block. Say I have two divs of 200x200 pixels. When the page is 500 pixels wide I would like these blocks to be next to each other, but centered on the page. So, 50px space on the left, then two 200px blocks next to each other and then another 50px space on the right. However, when the page width shrinks I would like these blocks to flow as centered text would flow. Say you resize the page to be 300px wide. Then I would like 50 px whitespace on the left, two 200px blocks on top of each other and then another 50px whitespace on the right. As you say, display:inline-block could be used here. The problem is that Firefox 2 doesn't support it (FF3 will), and IE needs hacking to 'emulate' it. I have some pages with several hacks to try to get this effect, you can have a look: [1], [2]. Hth, Bruno [1] http://brunildo.org/test/indext1.shtml [2] http://brunildo.org/test/ImgThumbIBL2b.html -- Bruno Fassino http://www.brunildo.org/test __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners on menu
Hi list, I would like to round the corners, using css, on this site: http://www.ediec.org Menu should size when one increases/decreases the font. Examples of sites that do this (rounded corners on all corners, not just tabs) are much appreciated. thanks, Albert __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners on menu
http://jake.cfwebtools.com/index.cfm/2008/2/13/CSS-Rounded-Corners _ Jake Churchill Team Leader 11204 Davenport, Ste. 100 Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Albert van der Veen Sent: Tuesday, February 26, 2008 8:47 AM To: CSS Discuss Subject: [css-d] Rounded corners on menu Hi list, I would like to round the corners, using css, on this site: http://www.ediec.org Menu should size when one increases/decreases the font. Examples of sites that do this (rounded corners on all corners, not just tabs) are much appreciated. thanks, Albert __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ No virus found in this incoming message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.21.1/1298 - Release Date: 2/25/2008 8:45 PM No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.21.1/1298 - Release Date: 2/25/2008 8:45 PM __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] When printing: How to use page-break-inside et al.]
Hello, I am adding additional css code for printing. An exemplary webpage can be found here: http://www.zeno.org/Kunstwerke/A/C%C3%A9zanne,+Paul http://www.zeno.org/Main.css I would like to prevent the browser from breaking a page within the thumbnail boxes, which is what FF and IE7 do right now. With my FF page settings, the last section that is begun ion the first page has the heading Grafiken (5). Then a row with the first 4 thumbnails is printed. But the labels for those thumbnails do not fit on the page. Thus only the thumbnail images are printed. The border around each image is not printed to the bottom og the page, but it ends somewhere in the middle. The next page begines with the remainder of that row. Which is the borders (this time too much of it) and the labels. IE7 behaves similar. I've attached page-break-inside: avoid; to several elements but it doesn't work as I would expect. I've attached page-break-after: avoid; to the div.zenoTHImage and page-break-before: avoid; to the div.zenoTHText, but still the page break is ugly. Is there any way to keep those thumbnail/label blocks together. I don't need to keep them all together, just row by row. Regards, Christian Kirchhoff *Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin www.digitale-bibliothek.de AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737 Geschäftsführer: Ralf Szymanski · Erwin Jurschitza __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float Issue In IE
Thanks Guys! http://e7flux.com/new/new.html Adding a complete URI helped fixed the broken layout. I'm encountering a couple of other problems however: The logo NJ.com in the upper left in the #topnav div is not showing up in Windows FF. It is a link and I also need it to swap out on hover with its background highlighted counterpart (this effect is not working in any browser). Not sure I set the CSS right but that's the effect I'm aiming for. Any suggestions? The BOTTOMRIGHT div is using a 78% white tiling png in the background, which of course shows opaque in IE6. I attempted to use the opacity property on the #container div with the color property set to white but it didn't work. Any suggestions here? Another thing I wouldn't mind some insight on, is why the divs contained in the #container div didn't seem to be affected at all by the top and bottom padding set on the container? The floated divs seem to be laying on top of the container as opposed to within - I expected the container height to adjust according to the amount of padding plus the height of the floated divs but that's not what happened. Just trying to understand the behavior that's going on here. Any insights would be more than welcomed :). Again TIA!!! Elli PS to Thierry - In my personal work I set my DTD to Strict but at work they use Transitional which is beyond me why they don't just go Strict already! Hello Elli, Because you're not using a complete DOCTYPE URI that includes system identifier, IE is working in Quirks Mode which triggers ... http://www.w3.org/TR/html4/loose.dtd; Good catch! I found that it gets the box model wrong and I don't even think of checking if it is running in Quirks mode, duh! As a side note, a DTD *without* an URI can trigger standard-compliant mode, for example: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Strict //EN What triggers quirks mode is the missing URI or the presence of Transitional - depending on how one wants to look at it ;) Looking for last minute shopping deals? Find them fast with Yahoo! Search. http://tools.search.yahoo.com/newsearch/category.php?category=shopping __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Getting Rid of White Background
I am trying to port over a menu I have on the main part of my site to a page that is outside the site template. But in adapting the css so the menu text is white I seem to be having a problem with IE6/7. It is showing the whole block as white (the text is there but it, too, is white (which is what I want) and the links are working). I've tried commenting out all indications of colored backgrounds in any menu nav element (the menu that appears on the rest of the site has a lot of background: #fff;) but that doesn't seem to help. I don't know where that white background is coming from. Can anyone tell me? The page in question: http://inourpath.com/map/maps2.html To see the original menu scroll to the bottom of this page: http://inourpath.com/intro.html Any help would be appreciated. Thx. Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Getting Rid of White Background
On Tue, Feb 26, 2008 at 8:45 PM, Jeff Gates [EMAIL PROTECTED] wrote:
I am trying to port over a menu I have on the main part of my site to a
page that is outside the site template. But in adapting the css so the
menu text is white I seem to be having a problem with IE6/7. It is showing
the whole block as white (the text is there but it, too, is white
(which is what I want) and the links are working).
I've tried commenting out all indications of colored backgrounds in any
menu nav element (the menu that appears on the rest of the site has a lot
of background: #fff;) but that doesn't seem to help. I don't know where
that white background is coming from. Can anyone tell me?
The page in question: http://inourpath.com/map/maps2.html
To see the original menu scroll to the bottom of this page:
http://inourpath.com/intro.html
Any help would be appreciated. Thx.
Jeff
You're trying to comment out CSS style rules by adding a #, which is
illegal and would make more confusion if browsers interpert it as ID
style-hookers! If you want to comment out a syle rule or one of its
declarations do it in the form:
/* property: value; */
In particular you have this in your CSS:
#nav_map .current a { display:block; height:20px; float:left;
#background:#fff; padding:0 10px 0 10px; text-decoration:none;
font-family: Verdana, Arial, sans-serif; font-size: .85em;
font-weight: bold; text-transform: uppercase; text-decoration: none;
border-bottom: none; line-height:20px; letter-spacing: .10em;
white-space:nowrap; #border-right:1px solid #fff; color: #fff;}
Such code is really problematic and before you clean it up, I really
can't help to figure out where the real problem lies.
Regards,
Usamah
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Getting Rid of White Background
Jeff Gates wrote:
I've tried commenting out all indications of colored backgrounds in
any menu nav element (the menu that appears on the rest of the site
has a lot of background: #fff;) but that doesn't seem to help. I
don't know where that white background is coming from. Can anyone
tell me?
The page in question: http://inourpath.com/map/maps2.html
FYI: IE/win interprets '#background:#fff;' as 'background:#fff;', so the
# is not disabling the property in _that_ browser.
The addition of...
ul, a {background: transparent!important;}
...will of course override all instances of white background on the
relevant elements - as a temporary solution.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] forcing a a tag to wrap within a table
what's the best way to do this? thanks in advance. -- Vincent Pollard __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Getting Rid of White Background
Jeff Gates wrote:
I've tried commenting out all indications of colored backgrounds in
any menu nav element (the menu that appears on the rest of the site
has a lot of background: #fff;) but that doesn't seem to help. I
don't know where that white background is coming from. Can anyone
tell me?
The addition of...
ul, a {background: transparent!important;}
...will of course override all instances of white background on the
relevant elements - as a temporary solution.
Thanks Georg. That did the trick.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] PVII Tab hitting below navigation
Thank you for noticing and bringing it to my attention. I reverted to your CSS solution. I believe it solved other issues I was having. Thank you!! Christina Hawkins www.globalspex.com From: Christina Hawkins :: GlobalSpex [EMAIL PROTECTED] Thank you, Al. I'll be sure to see if it'll work. I did find a solution by just by adding a bottom margin and changing it from clear:both to clear:right to the p7TPclear class. I'll also try to remember the knowledgebase. -Original Message- From: Al Sparber [mailto:[EMAIL PROTECTED] Your page does not look very good in Firefox right now so you might want to look at using a solution developed specifically for the product :-) -- Al Sparber - PVII http://www.projectseven.com Extending Dreamweaver - Nav Systems | Galleries | Widgets Authors: 42nd Street: Mastering the Art of CSS Design __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Faking float: center, or making blocks flow centered. Impossible?
Bruno Fassino wrote: On Tue, Feb 26, 2008 at 8:51 AM, Sander Marechal wrote: I want something that behaves sort of as float: center if that would exist. Or as an inline block. I have some pages with several hacks to try to get this effect, you can have a look: [1], [2]. [2] http://brunildo.org/test/ImgThumbIBL2b.html Ohh, number 2 is exactly what I'm looking for. Thanks! -- Sander Marechal http://www.jejik.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forcing a a tag to wrap within a table
vincent pollard wrote: what's the best way to do this? You need to ask a more specific question. The content of a table cell, whether within an a element (not tag) or not, automatically wraps when needed, unless you prevent this somehow - provided that there is a space inside the content, or some other character that a browser treats as allowing a line break. So please provide a URL and explain the specific problem. Jukka K. Korpela (Yucca) http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forcing a a tag to wrap within a table
i have a table with a bunch of links in it, a tags. one of the links is long and has no spaces so the a tag is pushing out the table beyond it's set width. how do i force the a to wrap? On 26/02/2008, Jukka K. Korpela [EMAIL PROTECTED] wrote: vincent pollard wrote: what's the best way to do this? You need to ask a more specific question. The content of a table cell, whether within an a element (not tag) or not, automatically wraps when needed, unless you prevent this somehow - provided that there is a space inside the content, or some other character that a browser treats as allowing a line break. So please provide a URL and explain the specific problem. Jukka K. Korpela (Yucca) http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Vincent Pollard http://www.ithinkx.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forcing a a tag to wrap within a table
Of vincent pollard
i have a table with a bunch of links in it, a tags.
one of the links is long and has no spaces so the a tag is pushing out
the
table beyond it's set width.
how do i force the a to wrap?
You can plug a WBR element in the URL:
averylongurlthatdoesnotwantwbrtowrapnomatterwhatItry
That should work in IE 6, 7 and Firefox (not Safari); and for Opera I
believe the following would work:
wbr:after {content:\00200B;}
--
Regards,
Thierry | http://www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image Background On Hover Isn't Working
Hello, The logo NJ.com in the upper left in the #topnav div isn't swapping out with it's highlighted counterpart on hover. Not sure I set the CSS right but that's the effect I'm aiming for. Also, the image doesn't show up sometimes in Windows FF. Or at least it wasn't showing earlier though it seems to be now. Any suggestions on how I can get the images to swap out on hover for the logo? http://e7flux.com/new/new.html Looking for last minute shopping deals? Find them fast with Yahoo! Search. http://tools.search.yahoo.com/newsearch/category.php?category=shopping __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Opacity Filter Not Working in IE
Hello, I have a bottomright div that I'd like transparent - it works in FF but not in IE. Can someone take a look and provide any suggestions? Any help is greatly appreciated!! http://e7flux.com/new/new.html Elli Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Background On Hover Isn't Working
On Wed, Feb 27, 2008 at 6:20 AM, Elli Vizcaino [EMAIL PROTECTED] wrote:
Hello,
The logo NJ.com in the upper left in the #topnav div
isn't swapping out with it's highlighted counterpart
on hover. Not sure I set the CSS right but that's
the effect I'm aiming for. Also, the image doesn't
show up sometimes in Windows FF. Or at least it wasn't
showing earlier though it seems to be now. Any
suggestions on how I can get the images to swap out on
hover for the logo?
http://e7flux.com/new/new.html
Looking for last minute shopping deals?
Find them fast with Yahoo! Search.
http://tools.search.yahoo.com/newsearch/category.php?category=shopping
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Hello,
A background image is just that, a _background_ image. You cannot swap
it with the actual image in the markup (i.e. the img element), IMO.
You know, when you encounter such problem when something so trivial
just doesn't work, it's always good to validate both the HTML and CSS.
At times a forgotten closing tag or a closing brace } can you make you
scratch your head for hours trying to solve an issue to no avail. By
looking at your code, you're mistakenly advancing the element's name
before the class selector for the sitelogo class, which is incorrect
You have: li a.sitelogo {...} [Incorrect]
It should be: li sitelogo.a and li sitelogo.a:hover respectivley!
Yet, to achieve the effect you're after, declare the logo image to li
a.sitelogo as well and add a transparent background-color to the img
element so it degrades gracefully.
Hey: I guess you're editing the page while I've been testing and
debugging it, and I can tell that brought me into the greatest
confusion I've had in a while. :D
Regards,
Usamah
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] forcing a a tag to wrap within a table
Thierry Koblentz wrote:
Of vincent pollard
i have a table with a bunch of links in it, a tags.
one of the links is long and has no spaces so the a tag is pushing
out the table beyond it's set width.
how do i force the a to wrap?
You can plug a WBR element in the URL:
Which URL? I saw no URL (though I asked for one). You seem to assume
that the link texts are URL, and this might be the case (it's not
uncommon to use URLs as link texts), but then the answer is probably
that the link texts should be rewritten.
When a table cell contains a longish string with no spaces in them, it
is generally not a good idea to try to set the cell width smaller than
needed for the string. At the abstract level, there is no way to decide
where the string could be broken; it depends on the string and its
meaning.
averylongurlthatdoesnotwantwbrtowrapnomatterwhatItry
URLs generally should not be wrapped at all. When necessary, there are
guidelines on permissible break points _and_ on delimiters intended to
indicate that a URL has been broken.
That should work in IE 6, 7 and Firefox (not Safari); and for Opera I
believe the following would work:
wbr:after {content:\00200B;}
Interesting. It does work (on Opera 9.10 at least). But as such, wbr
is a non-CSS method for doing things (and generally the only practical
way when you wish to permit line breaks inside a string that would not
otherwise be broken).
Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
