Re: [css-d] Unbelievable CSS Trick
Chris Blake wrote:
works in safari and ff on mac. the article reckons all browsers.
I just want to make a div with css applied to it to get a background
colour appear at 50%. Any ideas?
You may use 1px width, height png for that, like someone said before me.
or because it doesn't work in ie6 or earlier:
i don't use hacks for ie in the global css because it not will be valid,
but i use this for ie6 and earlier versions:
!--[if lte IE 6]
link rel=stylesheet type=text/css href=/css/style_ie6.css
![endif]--
in global css use:
|.transparent_class {
background: url('px_transparent.png') repeat top left;
}|
and in the ie6.css use:
|.transparent_class {
background: #xx; - the color you want in background
filter:alpha(opacity=50);
}|
and now the transparency may work like you wanted to work.
or the another way:
use a little trick:
the html code structure:
div style=position: relative
div class=transparent_class/div !-- this div has width,
height: 100%, write in it's class what you copied from css-trick.com --
div style=position: absolute; top: 0px; left: 0px;
and write here your content
/div
/div
I hope that helped!
Kata
__
css-discuss [cs...@lists.css-discuss.org]
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] Unbelievable CSS Trick
On 22/04/2010, at 8:21 AM, David Hucklesby wrote:
On 4/21/10 12:07 PM, Chris Blake wrote:
Hi,
http://s318194674.websitehome.co.uk/index.php?option=com_contentview=articleid=132Itemid=1
I was trying to apply a white, 50% opaque, background colour to a
wrapper via CSS and see what happened! I have no idea CSS could do
something like that!
[...]
Here is the css (4 lines!):
http://css-tricks.com/css-transparency-settings-for-all-broswers/
As already suggested, a semi-transparent PNG will work in most
browsers,
with the exception of IE before version 7. You can use a filter for
that
browser.
You can combine RGBA background-color with an image for older
browsers,
and a filter for IE 5/6 like this:
div.wrapper-body {
background: url(images/white-50pct-1px.png);
background: rgba(255, 255, 255, .5);
}
/* IE 5-6 only */
* html div.wrapper-body {
background: transparent;
filter:
progid:DXImageTransform
.Microsoft.gradient(startColorstr=#80ff,endColorstr=#80ff);
height: 1%; /* give IE layout */
}
Hope this helps.
Cordially,
David
Hi,
Ok everyone, thanks for your help. I have gone for a simple background
png, and if it's not supported by IE6 and earlier then users should
update their browser! I've also tried a new, wider than average width,
so I hope my audience aren't dinosaurs, with fossil computers!
I don't like the way that my site loads, it's probably and is a new
post but what I want is this image to be loading first. What is the
best way to do this? It's annoying because the template I am working
on from reads custom.css last (so that template updates do not affect
changes) and then module styles (but #page parent overwrites those).
Maybe I could load it into the header of the html? That's not so easy
cos it's all database calls (i could do it in drupal, but this is
Joomla which i am new to). Anyhow I really want to do this so what is
the best way? I can add it to the first style sheet in the list,
possibly in the head, but I just don't know.
I will make anew post. Thanks on this one!
Cheers, CB
__
css-discuss [cs...@lists.css-discuss.org]
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 loading order
Hi, I have applied a simple transparent PNG to my wrapper div. I would like that to load as one of the first images. What is the best way to do this? Thanks, CB __ css-discuss [cs...@lists.css-discuss.org] 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 problem
On Apr 21, 2010, at 6:20 PM, Rory Bernstein wrote: So, same page: http://www.rorybernstein.com/roundcorners/ New problem: Layout is all messed up in IE7. Have not looked at 6 yet, but expect that is messed up too. Help? Well, I solved it. (With significant help.) It was actually IE6 that it was messed up in (not IE7, so I rewrote the whole thing. I used 4 nested divs, one inside the other, each one has one of the corner images, and inside it all is the content. Here's the result: http://www.rorybernstein.com/roundcorners/index_nested.html I really, really hate IE6 and I hope I can completely stop supporting it soon. Thanks, Rory __ css-discuss [cs...@lists.css-discuss.org] 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] New to list and css
Hi all, I'm relatively new to css and am joining this list to get up to speed. Tom Buck __ css-discuss [cs...@lists.css-discuss.org] 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] ccc drop down menu breaks in mac
Hi, I'm new to css, but have managed to cobble together a web site with a drop down css only menu. It works in pc based browsers ( ie, ff, safari) but the menus will not drop down on macs. Any help or guidance would be appreciated. The site is www.bfivestudio.com Tom Buck __ css-discuss [cs...@lists.css-discuss.org] 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] ccc drop down menu breaks in mac
Hi, I'm new to css, but have managed to cobble together a web site with a drop down css only menu. It works in pc based browsers ( ie, ff, safari) but the menus will not drop down on macs. Any help or guidance would be appreciated. The site is www.bfivestudio.com Tom Buck the menus seem to function as intended, at least on my mac - safari, mozilla and opera (that's to say, the drop downs work fine). regards, Peter H. __ css-discuss [cs...@lists.css-discuss.org] 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] ccc drop down menu breaks in mac
www.bfivestudio.com They drop down for me in Safari on the Mac. __ css-discuss [cs...@lists.css-discuss.org] 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] ccc drop down menu breaks in mac
On 2010-04-22, at 5:37 AM, Thomas Buck wrote: Hi, I'm new to css, but have managed to cobble together a web site with a drop down css only menu. It works in pc based browsers ( ie, ff, safari) but the menus will not drop down on macs. Any help or guidance would be appreciated. The site is www.bfivestudio.com Tom Buck __ The drop downs drop down properly in Safari, Firefox and Chrome on my Mac. Norman --- http://www.normanfournier.com __ css-discuss [cs...@lists.css-discuss.org] 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 problem
http://www.rorybernstein.com/roundcorners/ New problem: Layout is all messed up in IE7. Have not looked at 6 yet, but expect that is messed up too. Help? Well, I solved it. (With significant help.) It was actually IE6 that it was messed up in (not IE7, so I rewrote the whole thing. I used 4 nested divs, one inside the other, each one has one of the corner images, and inside it all is the content. Here's the result: http://www.rorybernstein.com/roundcorners/index_nested.html fwiw, you are nesting six containers using 4 different images for the corners. Using the method suggested in this thread you could have done that with less markup and less HTTP requests... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] 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] ADMIN: a warning for Gmail users
If you log in to Gmail and scroll to the footer you can see when the last account activity was. Click the details link to see recent activity and by who (device type, IP, country). Assuming you generally access Gmail in the same ways from the same places, it should be fairly obvious if someone is hacking your account. Michael __ css-discuss [cs...@lists.css-discuss.org] 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] ccc drop down menu breaks in mac
Thomas Buck wrote:
Hi, I'm new to css, but have managed to cobble together a web site with a
drop down css only menu. It works in pc based browsers ( ie, ff, safari) but
the menus will not drop down on macs. Any help or guidance would be
appreciated.
The site is www.bfivestudio.com
Tom Buck
The menu drops-down in 10.4.11 Camino, WebKit, Safari, SeaMonkey, Opera, and
Firefox.
The black background does fill vertically in the 4/21 WebKit nightly. Add:html
{background: #000;}
PC/Mac Opera and Internet Explorer have difficulty scaling fonts (causes
vertical kiss or overlap with line-line set in pixels). Use a unitless raw
number such as 1.4, or whatevever does it for you and yours...
Validation is a good habit.
Best,
~d
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
__
css-discuss [cs...@lists.css-discuss.org]
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] ie7 - 3 issues
Hello again,
Mac OS X 10.6.3 - running IE 7 with wine;
http://lab.webhs.pt/webhs_testes/apregi/Home.php
1) Issue one:
On the left main menu, I was getting inconsistent results between li space,
due to the browsers different white space interpretation between li's with
inline elements inside (so I believe);
In order to solve this, I have added with following selector, the
display:block; property, like so: (line 213 more or less)
(...), #navegacao-principal-home ul li a img
{
display:block;
}
Once I did this, the white space was removed on FF 3.6.3 (mac), Safari 4.05,
Opera 10.10 but in IE 7, I just got a very big space between LI items that I
cannot identify due the lack of tools for this very experimental IE7 version
running in mac.
Any clue in order to solve it?
2) Issue two:
On IE7 as well, I'm getting a very large vertical space difference between
the content and the footer, the intended result is to render it, more or
less, with the same space difference as it appears on other modern browsers
like the listed above.
3) Issue three:
On the h2 inside the header element, in IE7 we get no white space like we
get on other browsers. I'm inclined to apply yet another display:block; to
the image inside this h2 element as well, and define a margin value, but I'm
just wondering, all this display:block; here and there... hmm... isn't there
a simpler solution?
Please advice,
Márcio
ps- the css doesn't properly validate due to the use of experimental border
margins; And only there. But I believe isn't related, since I have comment
those lines and nothing changed.
Absolutely aside:
Helvetica is in place. Verdana will win however, this one I cannot control.
(I'm just hopping no-one notices it) - Arguments for this verdana decision?
None. Just a stupid: we like it more; Arguments from Helvetica side, so
I've spoked: All typography lovers (that I may know) told me to NOT use
it, and advice Helvetica Neue instead or a copy Arial if not possible to
rendered it. This isn't not enough. I need to convince them. :s Help.
Please.
__
css-discuss [cs...@lists.css-discuss.org]
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] ie7 - 3 issues
MEM wrote: Mac OS X 10.6.3 - running IE 7 with wine; http://lab.webhs.pt/webhs_testes/apregi/Home.php Márcio Unable to download your files this end using two different methods to present a functional site at all in any version IE. If someone else does not respond to your questions, see On having layout -- specifically IE/7.0. http://www.satzansatz.de/cssd/onhavinglayout.html Absolutely aside: Help. We've tried numerous times over the past two years. Conclusion: De gustibus non est disputandum. Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] 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] ie7 - 3 issues
On 23/04/2010, at 3:23 AM, MEM wrote:
http://lab.webhs.pt/webhs_testes/apregi/Home.php
1) Issue one:
On the left main menu, I was getting inconsistent results between li
space,
due to the browsers different white space interpretation between
li's with
inline elements inside (so I believe);
In order to solve this, I have added with following selector, the
display:block; property, like so: (line 213 more or less)
(...), #navegacao-principal-home ul li a img
{
display:block;
}
Try the rather counter-intuitive trick of setting it to be inline-
block and then block.
http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/
2) Issue two:
On IE7 as well, I'm getting a very large vertical space difference
between
the content and the footer, the intended result is to render it,
more or
less, with the same space difference as it appears on other modern
browsers
like the listed above.
To bend IE to your will you simply must understand that there is a
property called hasLayout and you need to know how to trigger it. If
you have a problem with IE, use the web developer toolbar and trigger
hasLayout on or around your problem element using zoom: 1.
#footer { zoom: 1; }
3) Issue three:
On the h2 inside the header element, in IE7 we get no white space
like we
get on other browsers. I'm inclined to apply yet another
display:block; to
the image inside this h2 element as well, and define a margin value,
but I'm
just wondering, all this display:block; here and there... hmm...
isn't there
a simpler solution?
One simpler solution is to not use image for headings. You have
already identified that because images are inline elements they have a
space below for descenders (the bottom of the letters g, q etc.). If
you must use images then set the image to display: block and set your
margin or padding on the h2 how you like.
Why are you using old school inline javascript to change out your
image in the menu? There are many other ways of approaching this. One
would be to use image replacement with a sprite and shift it on hover.
It seems a bit strange to be using HTML5 (so 2010) along with inline
javascript image rollovers (so 1999).
Cheers, Tim
__
css-discuss [cs...@lists.css-discuss.org]
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 loading order
On 4/22/10 2:54 AM, Chris Blake wrote: Hi, I have applied a simple transparent PNG to my wrapper div. I would like that to load as one of the first images. What is the best way to do this? Here's a solution that worked for me: In the HTML, add an image tag near the top of the BODY section, and give the SRC attribute the path to the image to preload, with width=1, height=0 to hide it. The width makes sure the image is requested as soon as the browser gets to this point in the page. Use an empty ALT value. If this interferes with your layout, additionally put the image(s) for preloading in a DIV and position that DIV absolute with a large negative LEFT value. There are likely downsides to this, but so far I have not come across any. Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] 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] ccc drop down menu breaks in mac
On 4/22/10 5:37 AM, Thomas Buck wrote: Hi, I'm new to css, but have managed to cobble together a web site with a drop down css only menu. It works in pc based browsers ( ie, ff, safari) but the menus will not drop down on macs. Any help or guidance would be appreciated. The site is www.bfivestudio.com Tom Buck Odd. Happy to say, it works on all my browsers - Camino, Firefox, Opera, Safari. I'm on Mac OS X Snow Leopard. Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] 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] ie7 - 3 issues
2010/4/22 Tim Snadden li...@snadden.com:
On 23/04/2010, at 3:23 AM, MEM wrote:
http://lab.webhs.pt/webhs_testes/apregi/Home.php
1) Issue one:
On the left main menu, I was getting inconsistent results between li
space,
due to the browsers different white space interpretation between
li's with
inline elements inside (so I believe);
In order to solve this, I have added with following selector, the
display:block; property, like so: (line 213 more or less)
(...), #navegacao-principal-home ul li a img
{
display:block;
}
Try the rather counter-intuitive trick of setting it to be inline-
block and then block.
http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/
Thanks. I will read about it, but the fact that is counter-intuitive
doesn't appeal me that much. Should we avoid it? If so, what will be
the alternatives?
2) Issue two:
On IE7 as well, I'm getting a very large vertical space difference
between
the content and the footer, the intended result is to render it,
more or
less, with the same space difference as it appears on other modern
browsers
like the listed above.
To bend IE to your will you simply must understand that there is a
property called hasLayout and you need to know how to trigger it. If
you have a problem with IE, use the web developer toolbar and trigger
hasLayout on or around your problem element using zoom: 1.
#footer { zoom: 1; }
How do we know that the issue was in the footer?
3) Issue three:
On the h2 inside the header element, in IE7 we get no white space
like we
get on other browsers. I'm inclined to apply yet another
display:block; to
the image inside this h2 element as well, and define a margin value,
but I'm
just wondering, all this display:block; here and there... hmm...
isn't there
a simpler solution?
One simpler solution is to not use image for headings. You have
already identified that because images are inline elements they have a
space below for descenders (the bottom of the letters g, q etc.). If
you must use images then set the image to display: block and set your
margin or padding on the h2 how you like.
And we will not end up on issue one above? We don't because the issue
one is only valid for li ... ?
Why are you using old school inline javascript to change out your
image in the menu? There are many other ways of approaching this. One
would be to use image replacement with a sprite and shift it on hover.
It seems a bit strange to be using HTML5 (so 2010) along with inline
javascript image rollovers (so 1999).
Thank you so much for the advice. I've read that tecnique here and
there, but the web is no place to properly get what is new or old
sometimes.
I will try that tecnique. I really prefer to have js separate from the markup.
I have made my efforts to put the css as organized and clean, as well
as the markup, the best I could.
If someone sees a path for future mistakes, or some we don't do like
this anymore stuff please, let me know. :))
Thanks a lot,
Márcio
ps. my last mail was not in text only format. (It will not happen
again, so I hope).
__
css-discuss [cs...@lists.css-discuss.org]
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] ie7 - 3 issues
On 23/04/2010, at 8:39 AM, MEM wrote:
Try the rather counter-intuitive trick of setting it to be inline-
block and then block.
http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/
Thanks. I will read about it, but the fact that is counter-intuitive
doesn't appeal me that much. Should we avoid it? If so, what will be
the alternatives?
My approach to this is that due to IE's manifest inadequacies it gets
whatever CSS it takes to make it render something sensible. As long as
this is isolated into an IE stylesheet via conditional comments and
the CSS is commented explaining why you are using such a counter-
intuitive construct then I don't see a problem. There are probably
other ways of fixing this. I don't know off the top of my head. From
memory it may be a whitespace issue so if you are able to control the
whitespace in the li and not have line-breaks that may solve it.
2) Issue two:
On IE7 as well, I'm getting a very large vertical space difference
between
the content and the footer, the intended result is to render it,
more or
less, with the same space difference as it appears on other modern
browsers
like the listed above.
To bend IE to your will you simply must understand that there is a
property called hasLayout and you need to know how to trigger it. If
you have a problem with IE, use the web developer toolbar and trigger
hasLayout on or around your problem element using zoom: 1.
#footer { zoom: 1; }
How do we know that the issue was in the footer?
Use the Microsoft developer tools show you the dimensions and
properties of elements and then modify them in the browser until you
can see what is going on. It is normally the element in question, a
sibling, child or ancestor of that element.
3) Issue three:
On the h2 inside the header element, in IE7 we get no white space
like we
get on other browsers. I'm inclined to apply yet another
display:block; to
the image inside this h2 element as well, and define a margin value,
but I'm
just wondering, all this display:block; here and there... hmm...
isn't there
a simpler solution?
One simpler solution is to not use image for headings. You have
already identified that because images are inline elements they
have a
space below for descenders (the bottom of the letters g, q etc.). If
you must use images then set the image to display: block and set your
margin or padding on the h2 how you like.
And we will not end up on issue one above? We don't because the issue
one is only valid for li ... ?
I don't know what the problem is. If you insist on using images then
set them to display: block and fix for IE. Otherwise use one of the
many image replacement techniques or use @font-face (font embedding),
cufon or sifr.
Why are you using old school inline javascript to change out your
image in the menu? There are many other ways of approaching this. One
would be to use image replacement with a sprite and shift it on
hover.
It seems a bit strange to be using HTML5 (so 2010) along with inline
javascript image rollovers (so 1999).
Thank you so much for the advice. I've read that tecnique here and
there, but the web is no place to properly get what is new or old
sometimes.
I will try that tecnique. I really prefer to have js separate from
the markup.
I have made my efforts to put the css as organized and clean, as well
as the markup, the best I could.
There are many tutorials on CSS sprites and image replacement which
should be able to point you in the right direction.
You don't need javascript here, but for future reference look up
'unobtrusive javascript' for ideas about how to keep your javascript
out of your markup.
__
css-discuss [cs...@lists.css-discuss.org]
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 problem
Well, I solved it. (With significant help.) It was actually IE6 that it was messed up in (not IE7, so I rewrote the whole thing. I used 4 nested divs, one inside the other, each one has one of the corner images, and inside it all is the content. Here's the result: http://www.rorybernstein.com/roundcorners/index_nested.html fwiw, you are nesting six containers using 4 different images for the corners. Using the method suggested in this thread you could have done that with less markup and less HTTP requests... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz The client didn't care about more/less HTTP requests for 4 tiny tiny images that will appear everywhere (and get cached). The nested containers just plain worked better in ie6, so I went with that. Thanks to all who put in their 2 cents. I appreciated the valuable feedback. Perhaps I'll be able to refine this in further iterations... Rory __ css-discuss [cs...@lists.css-discuss.org] 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 problem
Rory Bernstein wrote: Well, I solved it. (With significant help.) It was actually IE6 that it was messed up in (not IE7, so I rewrote the whole thing. I used 4 nested divs, one inside the other, each one has one of the corner images, and inside it all is the content. Here's the result: http://www.rorybernstein.com/roundcorners/index_nested.html fwiw, you are nesting six containers using 4 different images for the corners. Using the method suggested in this thread you could have done that with less markup and less HTTP requests... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz The client didn't care about more/less HTTP requests for 4 tiny tiny images that will appear everywhere (and get cached). The nested containers just plain worked better in ie6, so I went with that. Thanks to all who put in their 2 cents. I appreciated the valuable feedback. Perhaps I'll be able to refine this in further iterations... Rory Rather than refining the corners in further iterations you might consider a more avant garde approach and just ditch the corners be they round or square altogether... ;-) Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] 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/
