Re: [css-d] I'd like to do something impossible
Here you go - easier in Fireworks: http://mdh-test.com/compTextWrap Does this help? Theresa On Sep 28, 2009, at 9:37 PM, r...@catjuggling.com wrote: Can you mock it up in photoshop and post the image? It would be easier to envision what you are trying to achieve. Russ - Original Message - From: Theresa Mesa trixiesirishe...@gmail.com To: css-d Group css-d@lists.css-discuss.org Sent: Monday, September 28, 2009 7:59 PM Subject: [css-d] I'd like to do something impossible http://mdh-test.com/PV_web/index.shtml http://mdh-test.com/PV_web/pvg.css I know, I'm thinking like a print person, but here you go: I want to take that circuit board image and pull it out about half its width into the right side, and have the text wrap around the edge that's left in the content div. In other words, half the photo is in the text with the text wrapping around it (10px padding), and half the photo is to the right, in the white area. I've been playing around with negative margins and absolute positioning, and as expected, it's not working. I know CSS is powerful, but is it this powerful? My client hates boxy - he wants more of an organic flow. If it can't be done, it can't be done, but I sure would like to try - AND have it work across most browsers. Impossible? Can anyone help me? Please? Theresa __ 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] I'd like to do something impossible
Sorry - very late. http://mdh-test.com/compTextWrap.png Can you mock it up in photoshop and post the image? It would be easier to envision what you are trying to achieve. Russ - Original Message - From: Theresa Mesa trixiesirishe...@gmail.com To: css-d Group css-d@lists.css-discuss.org Sent: Monday, September 28, 2009 7:59 PM Subject: [css-d] I'd like to do something impossible http://mdh-test.com/PV_web/index.shtml http://mdh-test.com/PV_web/pvg.css I know, I'm thinking like a print person, but here you go: I want to take that circuit board image and pull it out about half its width into the right side, and have the text wrap around the edge that's left in the content div. In other words, half the photo is in the text with the text wrapping around it (10px padding), and half the photo is to the right, in the white area. I've been playing around with negative margins and absolute positioning, and as expected, it's not working. I know CSS is powerful, but is it this powerful? My client hates boxy - he wants more of an organic flow. If it can't be done, it can't be done, but I sure would like to try - AND have it work across most browsers. Impossible? Can anyone help me? Please? Theresa __ 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] I'd like to do something impossible
It's not impossible. There is probably a more elegant way to do, but here is what comes to my mind: I would create a clear png image, the same height as the circuit board image but only half as wide. It would be floated to the right in the column, with the text running around it, as shown in your mockup. Then I would do absolute positioning to align the circuit board over the top of the clear image. Russ - Original Message - From: Theresa Mesa trixiesirishe...@gmail.com To: jft j...@worrigee.net Cc: css-d Group css-d@lists.css-discuss.org Sent: Tuesday, September 29, 2009 12:07 AM Subject: Re: [css-d] I'd like to do something impossible Sorry - very late. http://mdh-test.com/compTextWrap.png Can you mock it up in photoshop and post the image? It would be easier to envision what you are trying to achieve. Russ - Original Message - From: Theresa Mesa trixiesirishe...@gmail.com To: css-d Group css-d@lists.css-discuss.org Sent: Monday, September 28, 2009 7:59 PM Subject: [css-d] I'd like to do something impossible http://mdh-test.com/PV_web/index.shtml http://mdh-test.com/PV_web/pvg.css I know, I'm thinking like a print person, but here you go: I want to take that circuit board image and pull it out about half its width into the right side, and have the text wrap around the edge that's left in the content div. In other words, half the photo is in the text with the text wrapping around it (10px padding), and half the photo is to the right, in the white area. I've been playing around with negative margins and absolute positioning, and as expected, it's not working. I know CSS is powerful, but is it this powerful? My client hates boxy - he wants more of an organic flow. If it can't be done, it can't be done, but I sure would like to try - AND have it work across most browsers. Impossible? Can anyone help me? Please? Theresa __ 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-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] I'd like to do something impossible
I've done something very similar recently. It's not too difficult. Create a container div that holds both your text and the image. Then create a div to hold the image and give that a minus margin-right, with float:right and clear:left. In the markup, put the image-div inside the container div. That should give you the effect that you want - you can see what I did here: www.oakleafcircle.org.uk/dmk Val --- www.oakleafcircle.org.uk www.valdobson.co.uk www.astrodiary.co.uk __ 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] Wonky characters
Ellen Heitman wrote: Here is what I have in the head of my document: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; head meta http-equiv=Content-Type content=text/html; charset=utf-8 title- Letters Home: April 1944 -/title /head Any errors jump out at anyone as to why I'd still be getting strange characters on my pages? This only seems to occur in IE 7, not FF or Safari. The only info I have found online says to add the meta tag, which was there in the first place. Again, thanks for any advice! ellen Empty elements in XHTML should have a trailing slash before they are closed. You have, meta http-equiv=Content-Type content=text/html; charset=utf-8 where you should have. meta http-equiv=Content-Type content=text/html; charset=utf-8 / Using the online validator would catch this error. http://validator.w3.org/ # Line 5, Column 68: end tag for meta omitted, but OMITTAG NO was specified … content=text/html; charset=utf-… You may have neglected to close an element, or perhaps you meant to self-close an element, that is, ending it with / instead of . # Line 5: start tag was here meta http-equiv=Content-Type content=text/html; charset=utf-8 -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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] Containing Element
MOHAMMED NASEER wrote:
I'm trying to understand floats and related matters. I have a
question, is the 'containing element' in which an element is floated
either to the left or right
An element floated left will have its' left edge against the left edge
of its' containing block.
div id=container
div id=float-left.../div
/div
- can it be any element, in which the
floated element happens to be nested or wrapped inside of. Or is it
only a block level element which happens to be wrapping that
particular floated element. If you could pls clarify it for me.
thanks, Naz.
Any element can be floated, either a block level element or inline
element.
ul li {float: left;}
ul
li.../li
li.../li
li.../li
/ul
In this case the ul element is the containing block for the floated
li. This is still the same if the ul is floated itself.
A containing element is simply a parent container for a child element. I
think that you are getting the terms containing block and containing
element confused together.
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
A div, ul and li are all block level elements.
http://www.w3.org/TR/CSS21/visuren.html#block-boxes
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] Fwd: Wonky characters
Sorry, my gmail isn't set up to reply to the list... -- Forwarded message -- From: Ben yng...@gmail.com Date: 29 Sep 2009 12:05 Subject: Re: [css-d] Wonky characters To: Alan Gresley a...@css-class.com Also, make sure your webserver is configured to actually serve that page as utf-8. Webserver configuration overrides the meta tag (the server doesn't actually read that). Ben __ 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] Fwd: Wonky characters
2009/9/29 Ben yng...@gmail.com: Sorry, my gmail isn't set up to reply to the list... ++ I have Gmail as well. Select reply to all and it goes to the list as well as the OP. Val -- --- www.oakleafcircle.org.uk www.valdobson.co.uk www.astrodiary.co.uk __ 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] I'd like to do something impossible
Hi, I think you should have a look at this : http://meyerweb.com/eric/css/edge/slantastic/demo.html Regards, Éric Vesque Theresa Mesa a écrit : Sorry - very late. http://mdh-test.com/compTextWrap.png Can you mock it up in photoshop and post the image? It would be easier to envision what you are trying to achieve. Russ - Original Message - From: Theresa Mesa trixiesirishe...@gmail.com To: css-d Group css-d@lists.css-discuss.org Sent: Monday, September 28, 2009 7:59 PM Subject: [css-d] I'd like to do something impossible http://mdh-test.com/PV_web/index.shtml http://mdh-test.com/PV_web/pvg.css I know, I'm thinking like a print person, but here you go: I want to take that circuit board image and pull it out about half its width into the right side, and have the text wrap around the edge that's left in the content div. In other words, half the photo is in the text with the text wrapping around it (10px padding), and half the photo is to the right, in the white area. I've been playing around with negative margins and absolute positioning, and as expected, it's not working. I know CSS is powerful, but is it this powerful? My client hates boxy - he wants more of an organic flow. If it can't be done, it can't be done, but I sure would like to try - AND have it work across most browsers. Impossible? Can anyone help me? Please? Theresa __ 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-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] bold and italic
Hi, Anyone got much experience using bold and italic at the same time? What fonts support this, mac and PC? What happens if the font has bold and italic but not bold italic? Which one does it choose, if either? Thanks in advance, 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] Wonky characters
Ellen Heitman wrote: Here is what I have in the head of my document: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; head meta http-equiv=Content-Type content=text/html; charset=utf-8 title- Letters Home: April 1944 -/title /head Any errors jump out at anyone as to why I'd still be getting strange characters on my pages? This only seems to occur in IE 7, not FF or Safari. The only info I have found online says to add the meta tag, which was there in the first place. If what you are seeing is a series of strange characters instead of a single accented character or, say, a curly quote, then what is happening is your multi-byte UTF-8 characters are being treated as a series of single byte codes. Or, of course, your document may not actually be UTF-8 encoded. Saying it is so does not make it so.[1] Browsers have different ways of interpreting UTF-8 encoded pages (are you surprised?) Some honor your META tag; others make a guess instead. The only way to get all browsers to cooperate is to have your server send that information in the header. Of course, this may not be exacty what you are describing, so I'll not go into details here. I suggest asking another list that deals with Apache or whatever server software your host uses, as this list is for CSS. [1] http://www.w3.org/International/questions/qa-what-is-encoding 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] bold and italic
In Windows XP, all major browsers simulate italics, boldface and italics-boldface when the typeface does not contain the appropriate font. Italics is simulated by slanting the glyphs of the normal font and boldface is simulated by increasing the stroke width. Here is a detailed explanation of the font matching process http://destination-code.blogspot.com/2009/08/font-matching-process.html On Tue, Sep 29, 2009 at 5:49 PM, Chris Blake ch...@3pointdesign.com wrote: Hi, Anyone got much experience using bold and italic at the same time? What fonts support this, mac and PC? What happens if the font has bold and italic but not bold italic? Which one does it choose, if either? Thanks in advance, 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-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] bold and italic
Chris Blake wrote: Hi, Anyone got much experience using bold and italic at the same time? What fonts support this, mac and PC? What happens if the font has bold and italic but not bold italic? Which one does it choose, if either? Should work. Offhand, I can't think of a common font that has bold and italic, but not both combined. I know oblique is not so common. Which font are you thinking of? 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] IE6/IE7 Section Overlay Issues
Thanks Thierry just gave this a shot but still not right in IE6/IE7.
I was still able to access to the input controls (albeit I can disable
These server-side if necessary).
The bad thing is the .png interacts with any colors above/below it.
For example the section I am giving an inactive look to is a table
of data with alternate rows having a background colour. With the .png
applied it mixes together with the colours to give a really horrible look.
It really is suprising how well my original method works in every browser
but IE6/IE7, the same technique seems to be workable I'm just having issue
being unable to apply a height:100% and opacity not being set in IE7.
-Original Message-
From: Thierry Koblentz [mailto:n...@tjkdesign.com]
Sent: Tuesday, September 29, 2009 1:37 AM
To: Jeremy Ferrante; css-d@lists.css-discuss.org
Subject: RE: [css-d] IE6/IE7 Section Overlay Issues
I have a section of markup on page that under circumstances I want to give
the
impression that it is disabled or inactive by making any input controls
contained within it unclickable and the entire area faded out. I figured
I'd
do this by placing a css element over the portion of a page with a higher
z-
index and a width/height to match the containing parent, and a bit of
opacity
to provide the faded look.
I was able to get it to work in FF/Webkit/Opera/IE8, but it just won't
work in
IE6/IE7. In IE6 the overlay won't grow to fill the parent container
without
specifying exact width/height values in pixels (which I cannot do in this
case). In IE7 the opacity is not honored and instead it is fully opaque
resulting in the area being completely covered over.
Example Markup (section of page):
div id=wrap style=position:relative;
div class=disable-overlaynbsp;/div
div id=content
[content with unknown height/width coming from backend
datasource]
/div
/div
CSS:
.disable-overlay
{
position: absolute;
background-color: red;
left:0;
top:0;
z-index: 100;
height:100%;
width:100%;
/* Gecko */ opacity: 0.40;
/* Mozilla */ -moz-opacity: 0.40;
/* IE */ filter: alpha(opacity=40);
}
Any help is greatly appreciated,
Hi Jer,
For IE6/7, I'd forget the extra markup and use #content instead with the
AlphaImageLoader filter.
So first use:
.disable-overlay {
/* remove rules that you use for IE 6/7 from here */
*display:none; /* this will kill that element in IE 6/7 */
}
Then create a PNG that will give you the opacity you want and go with:
#wrap {
*background: none;
zoom:1;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='this-is-a-png
-with-alpha-transparency.png', sizingMethod='scale');
}
That filter should give you the visual effect you're after and disable your
controls at the same time. Make sure there are no 100% transparent pixels in
your PNG or users will be able to click through it. (the size of the image
does not matter as the filter will stretch it).
Not tested but I think that should work...
--
Regards,
Thierry | http://www.TJKDesign.com
Attention:
The information contained in this message and or attachments is intended only
for the person or entity to which it is addressed and may contain confidential
and/or privileged material. Any review, retransmission, dissemination or other
use of, or taking of any action in reliance upon, this information by persons
or entities other than the intended recipient is prohibited. If you received
this in error, please contact the sender and delete the material from any
system and destroy any copies.
__
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] firefox help
I am looking for a solution for a problem occuring with Firefox I have a web site that has numerous audio files on one page. http://www.tiborbrothers.com/TB-JR1606.html Even though the auto play is turned off, in Firefox they all start playing as the page loads and you end up with several players going at once. It appears to be a problem with all versions of Firefox. I am using Quicktime as the player. I tried Realtime but had the same problem and would prefer not to have to change all the pages over to a different player. The pages work fine in IE6 and IE8. I tried a search for this problem but have not come up with any solutions. I would appreciate any help of where to look for a solution or any ideas of how to fix the problem. Is there a command I can add to CSS to cure the problem? Thank you for any help you can give me. Kris __ 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] firefox help
Tri-State AdVantage wrote: I am looking for a solution for a problem occuring with Firefox I have a web site that has numerous audio files on one page. http://www.tiborbrothers.com/TB-JR1606.html Its not just in Firefox and has nothing to do with CSS. Try posting to: web design list l...@webdesign-l.com or thel...@lists.evolt.org thel...@lists.evolt.org __ 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] IE6/IE7 Section Overlay Issues
Yes bleed is the terminology I was looking for. I'm really not looking to apply custom classes to every element that may exist in the disabled region, I've given a contrived example but it is not practical for my intended usage to attempt to add custom styles to every element to give them a disabled look. The look is perfect when another element is placed on top with an opacity value and no color bleed. If the element is given a white value for instance everything underneath gets a faded (disabled) look . Thanks for insight though, Jer -Original Message- From: Thierry Koblentz [mailto:n...@tjkdesign.com] Sent: Tuesday, September 29, 2009 1:03 PM To: Jeremy Ferrante; css-d@lists.css-discuss.org Subject: RE: [css-d] IE6/IE7 Section Overlay Issues Thanks Thierry just gave this a shot but still not right in IE6/IE7. I was still able to access to the input controls (albeit I can disable These server-side if necessary). I put up a test page and it seems to work: http://tjkdesign.com/test/overlay/ The bad thing is the .png interacts with any colors above/below it. For example the section I am giving an inactive look to is a table of data with alternate rows having a background colour. With the .png applied it mixes together with the colours to give a really horrible look. It should not mix, background colors should bleed through I think. In any case, you can style the rows with alpha() plugging a class in the main container and then using that class you change the background of the rows. -- Regards, Thierry | http://www.TJKDesign.com Attention: The information contained in this message and or attachments is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient is prohibited. If you received this in error, please contact the sender and delete the material from any system and destroy any copies. __ 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] IE6/IE7 Section Overlay Issues
Thanks Thierry just gave this a shot but still not right in IE6/IE7. I was still able to access to the input controls (albeit I can disable These server-side if necessary). I put up a test page and it seems to work: http://tjkdesign.com/test/overlay/ The bad thing is the .png interacts with any colors above/below it. For example the section I am giving an inactive look to is a table of data with alternate rows having a background colour. With the .png applied it mixes together with the colours to give a really horrible look. It should not mix, background colors should bleed through I think. In any case, you can style the rows with alpha() plugging a class in the main container and then using that class you change the background of the rows. -- Regards, Thierry | http://www.TJKDesign.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/
[css-d] [Fwd: Quick Page Check Please]
I see that it is getting pushed over by 30px in IE but I cannot figure out where. Original Message Subject: Quick Page Check Please From:s...@ssyed.com Date:Tue, September 29, 2009 1:37 pm To: css-d@lists.css-discuss.org -- My RSS area is aligned to the right in IE but it is correct in FF. It was working earlier. It may be my cache. http://www.stc.org Thanks. -Shaf __ 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] Quick Page Check Please
My RSS area is aligned to the right in IE but it is correct in FF. It was working earlier. It may be my cache. http://www.stc.org Thanks. -Shaf __ 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] IE6/IE7 Section Overlay Issues
Yes bleed is the terminology I was looking for. I'm really not looking
to
apply
custom classes to every element that may exist in the disabled region,
I've
given a
contrived example but it is not practical for my intended usage to attempt
to
You'd not need to apply a class to every element, only to the container to
be styled as disabled.
Then using that class you target the elements you want in there.
.disabled input,
.disabled .oddRow {}
etc.
Anyway, next step would be to use a (one-time) CSS expression to set width
and height of the overlay according to the dimensions of the parent
container.
--
Regards,
Thierry | http://www.TJKDesign.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] Quick Page Check Please
My RSS area is aligned to the right in IE but it is correct in FF. It was working earlier. It may be my cache. http://www.stc.org It's not your cache. I get the same result in IE6. All the floats are dropping down. Russ __ 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] Quick Page Check Please
I added an id of #rssxsl in the XSL file. Then I defined it in the CSS
ul#rssxsl {margin-left: 0;}. Looks like it fixed it I hope :)
My RSS area is aligned to the right in IE but it is correct in FF. It was
working earlier. It may be my cache.
http://www.stc.org
Thanks.
-Shaf
__
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-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] Unexplained gap/wonky characters
To follow up on my last question, I'm including a link of the issue: http://www.williamtobrien.com/letters_leaving.html You'll notice that after the header (e.g., December 1942) there is a huge gap between it and the rest of the content. This error appears only in IE (I'm using version 7), it is displayed correctly in FF, Safari, Google Chrome, etc. I am using an iframe here and, strangely, when I view the original file in an IE browser, a bunch of strange characters (empty squares) appear below the heading and before the other content. Someone suggested this may be a server issue and not a CSS problem, in which case I would have to go elsewhere to get it resolved. Just wanted to check one last time to see if I should look into server-side issues, or if it's something in my HTML or CSS code. Thanks so much for all your help! ellen __ 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] z-index Issue?
On this site I have a hover effect on the photos on the right. Works good in Firefox and IE8 but on IE7 the larger version of the image appears behind everything else. I have tried tweaking z-index values of several elements but to no avail so far. I'll keep working on it but if someone sees a solution before me let me know. Thanks in advance. Signed, One of the many people with the first name Christian who is into CSS __ 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] IE6/IE7 Section Overlay Issues
This is not practical if attempting to find a general solution to this problem.
The area to be disabled may contain H1,H2's etc with background colors and
font-text
or who knows what. I'm not really ready to concede to styling every element
within the main container.
Unfortunately I can't host the actual html but I've taken a screenshot of how
the
markup renders in every browser but IE6/IE7 using an absolutely positioned
element
on top of area to appear inactive using an opacity value.
http://yfrog.com/58overlayg
Notice how nice and disabled area looks, it actually looks disabled.
Cheers,
Jer
-Original Message-
From: Thierry Koblentz [mailto:n...@tjkdesign.com]
Sent: Tuesday, September 29, 2009 2:04 PM
To: Jeremy Ferrante; css-d@lists.css-discuss.org
Subject: RE: [css-d] IE6/IE7 Section Overlay Issues
Yes bleed is the terminology I was looking for. I'm really not looking
to
apply
custom classes to every element that may exist in the disabled region,
I've
given a
contrived example but it is not practical for my intended usage to attempt
to
You'd not need to apply a class to every element, only to the container to
be styled as disabled.
Then using that class you target the elements you want in there.
.disabled input,
.disabled .oddRow {}
etc.
Anyway, next step would be to use a (one-time) CSS expression to set width
and height of the overlay according to the dimensions of the parent
container.
--
Regards,
Thierry | http://www.TJKDesign.com
Attention:
The information contained in this message and or attachments is intended only
for the person or entity to which it is addressed and may contain confidential
and/or privileged material. Any review, retransmission, dissemination or other
use of, or taking of any action in reliance upon, this information by persons
or entities other than the intended recipient is prohibited. If you received
this in error, please contact the sender and delete the material from any
system and destroy any copies.
__
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] IE6/IE7 Section Overlay Issues
This is not practical if attempting to find a general solution to this problem. The area to be disabled may contain H1,H2's etc with background colors and font-text or who knows what. I'm not really ready to concede to styling every element within the main container. Unfortunately I can't host the actual html but I've taken a screenshot of how the markup renders in every browser but IE6/IE7 using an absolutely positioned element on top of area to appear inactive using an opacity value. http://yfrog.com/58overlayg Notice how nice and disabled area looks, it actually looks disabled. As suggested earlier, to dimension the overlay in IE you can use a CSS expression. -- Regards, Thierry | http://www.TJKDesign.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/
[css-d] Repost of impossible question
I'm going to try this again. I saw some replies this morning but hadn't read them yet, and was trying to delete only the emails I'd read in the Gmail interface. I was mistaken. I deleted the unread replies too. I'm so sorry! http://mdh-test.com/PV_web/index.shtml http://mdh-test.com/PV_web/pvg.css Sample image: http://mdh-test.com/compTextWrap.png I want it to look like the sample image above, so yes, I want that white space on the right. I want half the image to be in the text with the text wrapping around it, and the other half of the image hanging on the outside into the white space. I know there's a bunch of white space on top of the text, but I still have to put in navigation and the header, and I'll likely be changing the amount of margin on the top. I've played with margins, positioning, padding. I am clearly doing either something wrong or something that is not possible in CSS in conjunction with all the other parts of this site. I'm shooting for cross-browser compatibility, but if IE6 won't play, that's okay too. An inline image within the text is just fine. IE6 is already not going to play with my position:fixed element at the bottom. Can anyone PLEASE help? Or am I the first person to ever want to do this? Theresa __ 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] z-index Issue?
You need to give us the link to the site... Theresa On Sep 29, 2009, at 12:33 PM, christi...@netscape.net wrote: On this site I have a hover effect on the photos on the right. Works good in Firefox and IE8 but on IE7 the larger version of the image appears behind everything else. I have tried tweaking z-index values of several elements but to no avail so far. I'll keep working on it but if someone sees a solution before me let me know. Thanks in advance. Signed, One of the many people with the first name Christian who is into CSS __ 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-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] Repost of impossible question
OK - reposting: I've done something very similar recently. It's not too difficult. Create a container div that holds both your text and the image. Then create a div to hold the image and give that a minus margin-right, with float:right and clear:left. In the markup, put the image-div inside the container div. That should give you the effect that you want - you can see what I did here: www.oakleafcircle.org.uk/dmk Val 2009/9/29 Theresa Mesa trixiesirishe...@gmail.com: I'm going to try this again. I saw some replies this morning but hadn't read them yet, and was trying to delete only the emails I'd read in the Gmail interface. I was mistaken. I deleted the unread replies too. I'm so sorry! http://mdh-test.com/PV_web/index.shtml http://mdh-test.com/PV_web/pvg.css Sample image: http://mdh-test.com/compTextWrap.png I want it to look like the sample image above, so yes, I want that white space on the right. I want half the image to be in the text with the text wrapping around it, and the other half of the image hanging on the outside into the white space. I know there's a bunch of white space on top of the text, but I still have to put in navigation and the header, and I'll likely be changing the amount of margin on the top. I've played with margins, positioning, padding. I am clearly doing either something wrong or something that is not possible in CSS in conjunction with all the other parts of this site. I'm shooting for cross-browser compatibility, but if IE6 won't play, that's okay too. An inline image within the text is just fine. IE6 is already not going to play with my position:fixed element at the bottom. Can anyone PLEASE help? Or am I the first person to ever want to do this? Theresa __ 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/ -- --- www.oakleafcircle.org.uk www.valdobson.co.uk www.astrodiary.co.uk __ 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 image corners
Thierry Koblentz wrote:
My client will upload images and I'd like to put rounded corners on it...is
there a way to do so?
You could try something like this:
http://www.tjkdesign.com/articles/overlay/tv_overlay.asp
styling the background image of an IMG element.
The above technique works if you use the background image as the source
and the true/regular image as the styled background:
img style=background:url(images/src_image.jpg);
src=images/bg_image.jpg
However if you don't have the flexibility to be able to swap the src and
background images, is there a way to overlay a background image above
the src image? Needs to be something like:
img style=background:url(images/src_image.jpg);
src=images/bg_image.gif
or
CSS style:
.overlay { background: url(images/bg_image.gif }
HTML:
img src=images/bg_image.gif class=overlay
--
Bob Meetin
www.dottedi.biz
Standards - you gotta love em with so many to choose from!
Rocket Science - the Art of Managing Distractions
__
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] Trouble with drop down navigation tabs in IE 6/7
I'm using Chromestyle from Dynamic Drive for my Navigation Drop Downs. The down arrow.gif is supposed to be contained within the navigation tab. It works fine in FF and Safari, but in IE 6/7 it doesn't. Here's the link to see what I mean: http://transitiontogreen.org/index2.php Here is the link to Dynamic Drives site: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm showing the effect and this one does work in IE6/7. Sorry if this link doesn't work, but I copied it straight from the url line. If someone could help me find the reason for this I would appreciate it. Also, if you know of a better approach then let me know that as well. Thanks Rod Castello __ 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] Repost of impossible question
I ended up applying a negative right margin - which I could swear I did before, but it didn't work - to the img.interject, and now it works. I'm tweaking it slightly, but looking at the captures in Browsercam, it's working in all the browsers I care about (which is quite a few). Thank you, though! Theresa On Sep 29, 2009, at 1:01 PM, Val Dobson wrote: OK - reposting: I've done something very similar recently. It's not too difficult. Create a container div that holds both your text and the image. Then create a div to hold the image and give that a minus margin-right, with float:right and clear:left. In the markup, put the image-div inside the container div. That should give you the effect that you want - you can see what I did here: www.oakleafcircle.org.uk/dmk __ 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] Repost of impossible question
On Tue, Sep 29, 2009 at 1:58 PM, Theresa Mesa trixiesirishe...@gmail.com wrote: I'm going to try this again. I saw some replies this morning but hadn't read them yet, and was trying to delete only the emails I'd read in the Gmail interface. I was mistaken. I deleted the unread replies too. I'm so sorry! http://mdh-test.com/PV_web/index.shtml http://mdh-test.com/PV_web/pvg.css Sample image: http://mdh-test.com/compTextWrap.png I want it to look like the sample image above, so yes, I want that white space on the right. I want half the image to be in the text with the text wrapping around it, and the other half of the image hanging on the outside into the white space. I know there's a bunch of white space on top of the text, but I still have to put in navigation and the header, and I'll likely be changing the amount of margin on the top. I've played with margins, positioning, padding. I am clearly doing either something wrong or something that is not possible in CSS in conjunction with all the other parts of this site. I'm shooting for cross-browser compatibility, but if IE6 won't play, that's okay too. An inline image within the text is just fine. IE6 is already not going to play with my position:fixed element at the bottom. I got something to work with just a p and img. It's shown at: www.springfieldmo.gov/impossible.html All styles are intentionally inline so you can see immediately what they're attached to. I will say, I've only tested this in Firefox IE, so I can't say if Internet Exploder does right with it. __ 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] Repost of impossible question
Actually, I did the same kind of thing (can't post a problem and not keep working on it!), but used margins instead, since IE gets so pissy about stuff like that. I checked the site in Browsercam, and most browsers look like I want them to. IE6 looks like it made the image smaller, but that's no big deal. Browsercam makes such good money off of people because of lack of cross-browser compatibility. Thank you! Theresa On Sep 29, 2009, at 2:23 PM, Chris Akins wrote: On Tue, Sep 29, 2009 at 1:58 PM, Theresa Mesa trixiesirishe...@gmail.com wrote: I'm going to try this again. I saw some replies this morning but hadn't read them yet, and was trying to delete only the emails I'd read in the Gmail interface. I was mistaken. I deleted the unread replies too. I'm so sorry! http://mdh-test.com/PV_web/index.shtml http://mdh-test.com/PV_web/pvg.css Sample image: http://mdh-test.com/compTextWrap.png I want it to look like the sample image above, so yes, I want that white space on the right. I want half the image to be in the text with the text wrapping around it, and the other half of the image hanging on the outside into the white space. I know there's a bunch of white space on top of the text, but I still have to put in navigation and the header, and I'll likely be changing the amount of margin on the top. I've played with margins, positioning, padding. I am clearly doing either something wrong or something that is not possible in CSS in conjunction with all the other parts of this site. I'm shooting for cross-browser compatibility, but if IE6 won't play, that's okay too. An inline image within the text is just fine. IE6 is already not going to play with my position:fixed element at the bottom. I got something to work with just a p and img. It's shown at: www.springfieldmo.gov/impossible.html All styles are intentionally inline so you can see immediately what they're attached to. I will say, I've only tested this in Firefox IE, so I can't say if Internet Exploder does right with it. __ 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] z-index Issue?
It's probably not a good idea to have a photo pop up that is so pixelated. IE support for :hover is buggy, from what I read when I Googled it. You might want to correct your CSS - there are 7 errors. Theresa On Sep 29, 2009, at 12:52 PM, christi...@netscape.net wrote: You need to give us the link to the site... Theresa Yes, I am also absentminded. Here it is: http://www.flowerscostamesa.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/
[css-d] media=handheld tips please!
hey all,
I have a project that my client would like to work on mobile devices.
http://askon.ca/en/test.shtml
http://askon.ca/en/css/askon.css
http://askon.ca/en/css/mobile.css
I set up a mobile style sheet that is supposed to blank out 2 columns,
and have a group of extra links that don't show up in the screen version
of the page.
#mobilelinks {
display : none;
}
It seems like some mobile browsers ignore the media=handheld style,
others ignore the style sheets altogether, others display what looks
like their own rough version of the styles
http://www.browsercam.com/public.aspx?proj_id=490329
I don't think browsercam has remote access to mobile devices - any idea
of who might? Any good ideas of how to handle this?
Thanks all!
Sandy
__
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] z-index Issue?
Question: Are the images at the bottom of the page supposed to be cut off? On Tue, Sep 29, 2009 at 2:33 PM, christi...@netscape.net wrote: On this site I have a hover effect on the photos on the right. Works good in Firefox and IE8 but on IE7 the larger version of the image appears behind everything else. I have tried tweaking z-index values of several elements but to no avail so far. I'll keep working on it but if someone sees a solution before me let me know. Thanks in advance. Signed, One of the many people with the first name Christian who is into CSS __ 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-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] Unexplained gap/wonky characters
On Sep 30, 2009, at 3:04 AM, Ellen Heitman wrote: To follow up on my last question, I'm including a link of the issue: http://www.williamtobrien.com/letters_leaving.html You'll notice that after the header (e.g., December 1942) there is a huge gap between it and the rest of the content. This error appears only in IE (I'm using version 7), it is displayed correctly in FF, Safari, Google Chrome, etc. I am using an iframe here and, strangely, when I view the original file in an IE browser, a bunch of strange characters (empty squares) appear below the heading and before the other content. Someone suggested this may be a server issue and not a CSS problem, in which case I would have to go elsewhere to get it resolved. Just wanted to check one last time to see if I should look into server-side issues, or if it's something in my HTML or CSS code. Nothing to do with the server - it doesn't send any encoding header. And nothing to do with CSS either... 1. the filed loaded in the iframe has a content-type of ISO-8859-1 in the meta meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 / I'm not sure if it was originally coded as such, though - check the settings in your editor. 2. there are a truckload of invisible characters between the closing / h1 and the opening table: spaces and non-breaking spaces (#160;). They are 'visible' - that is, take up space- in IE, probably due to the encoding mismatch. here is a screenshot of your file in my editor, with 'show invisible characters' turned on. http://dev.l-c-n.com/_b/Ellen.png Philippe --- Philippe Wittenbergh http://l-c-n.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] z-index Issue?
christi...@netscape.net wrote:
On this site I have a hover effect on the photos on the right. Works good in
Firefox and IE8 but on IE7 the larger version of the image appears behind
everything else. I have tried tweaking z-index values of several elements but
to no avail so far. I'll keep working on it but if someone sees a solution
before me let me know. Thanks in advance.
Signed,
One of the many people with the first name Christian who is into CSS
Maybe using a technique that I have done here may help.
http://css-class.com/test/demos/popup-gallery1.htm
Adjusting just this CSS (removing overflow:hidden and padding on li)
.gallery ul {
background: black;
overflow:hidden; /* -- Delete */
margin: auto;
padding: 40px;
}
.horizontal li {
padding: 40px 50px; /* -- Delete */
}
will show how this can be altered to work on your page. It is similar to
this test.
http://css-class.com/test/popuprel.htm
But you would need a container (parent element) for the gallery with
it's own z-index to create a higher layer for IE7-.
http://css-class.com/test/css/visformatting/layers/z-index.htm
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] Trouble with drop down navigation tabs in IE 6/7
Rod Castello wrote: I'm using Chromestyle from Dynamic Drive for my Navigation Drop Downs. The down arrow.gif is supposed to be contained within the navigation tab. It works fine in FF and Safari, but in IE 6/7 it doesn't. Here's the link to see what I mean: http://transitiontogreen.org/index2.php Here is the link to Dynamic Drives site: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm showing the effect and this one does work in IE6/7. Sorry if this link doesn't work, but I copied it straight from the url line. If someone could help me find the reason for this I would appreciate it. Also, if you know of a better approach then let me know that as well. Thanks Rod Castello With javascript disabled, this menu does not work. Maybe this approach may work better using *nested list* (more semantic). http://adipalaz.awardspace.com/accessible_ddmenu-en.html http://adipalaz.awardspace.com/experiments/css/accessible_ddmenu_test.html This is partly based on the menu I created (from styles by Duncan Hill) that does not require javascript. http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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] Trouble with drop down navigation tabs in IE 6/7
--- On Wed, 9/30/09, Alan Gresley a...@css-class.com wrote: From: Alan Gresley a...@css-class.com Subject: Re: [css-d] Trouble with drop down navigation tabs in IE 6/7 To: Rod Castello flashju...@sbcglobal.net Cc: css-d@lists.css-discuss.org Date: Wednesday, September 30, 2009, 1:48 AM Rod Castello wrote: I'm using Chromestyle from Dynamic Drive for my Navigation Drop Downs. The down arrow.gif is supposed to be contained within the navigation tab. It works fine in FF and Safari, but in IE 6/7 it doesn't. Here's the link to see what I mean: http://transitiontogreen.org/index2.php Here is the link to Dynamic Drives site: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm showing the effect and this one does work in IE6/7. Sorry if this link doesn't work, but I copied it straight from the url line. If someone could help me find the reason for this I would appreciate it. Also, if you know of a better approach then let me know that as well. Rod Castello With javascript disabled, this menu does not work. Maybe this approach may work better using *nested list* (more semantic). http://adipalaz.awardspace.com/accessible_ddmenu-en.html http://adipalaz.awardspace.com/experiments/css/accessible_ddmenu_test.html This is partly based on the menu I created (from styles by Duncan Hill) that does not require javascript. http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo Alan, Thanks for your response. I was hoping to avoid making the change, but you may be right. I'll try your method, I'm sure it will work fine. Do you have any idea why the down arrows wouldn't display properly in IE6/7? Did you see it in IE? I know it's not semantic, but I'd sure like to find a quick fix and leave it as it is. Spent too much time on this project already. Thanks again, Rod __ 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-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 image corners
Bob Meetin wrote:
Thierry Koblentz wrote:
My client will upload images and I'd like to put rounded corners on it...is
there a way to do so?
You could try something like this:
http://www.tjkdesign.com/articles/overlay/tv_overlay.asp
styling the background image of an IMG element.
The above technique works if you use the background image as the source
and the true/regular image as the styled background:
img style=background:url(images/src_image.jpg);
src=images/bg_image.jpg
However if you don't have the flexibility to be able to swap the src and
background images, is there a way to overlay a background image above
the src image? Needs to be something like:
img style=background:url(images/src_image.jpg);
src=images/bg_image.gif
or
CSS style:
.overlay { background: url(images/bg_image.gif }
HTML:
img src=images/bg_image.gif class=overlay
Including an anchor element a which has the rounded corners after the
image img may help. Similar to this approach which uses a
semi-transparent overlay.
http://css-class.com/test/demos/thumbgallery6.htm
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] Text pokes out bottom of box
Can anyone tell me why the text in my first box pokes out the bottom? Here's the page: http://suziblade.com/rapant-mcelroy/our_services.html (The borders are temporary, just so I can see what's going on.) It looks like the right column is determining the depth of the box, and I'm not sure why. If there's anything else I did that isn't coded as sensibly as it could be, please feel free to let me know that too. Thank you! Lalena __ 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] Trouble with drop down navigation tabs in IE 6/7
What about using Yahoo YUI menu? Also, to troubleshoot, I'd get Expression Web Superpreview to see the DOM layout differences in IE 68. On Tue, Sep 29, 2009 at 9:21 PM, Rod Castello flashju...@sbcglobal.netwrote: --- On Wed, 9/30/09, Alan Gresley a...@css-class.com wrote: From: Alan Gresley a...@css-class.com Subject: Re: [css-d] Trouble with drop down navigation tabs in IE 6/7 To: Rod Castello flashju...@sbcglobal.net Cc: css-d@lists.css-discuss.org Date: Wednesday, September 30, 2009, 1:48 AM Rod Castello wrote: I'm using Chromestyle from Dynamic Drive for my Navigation Drop Downs. The down arrow.gif is supposed to be contained within the navigation tab. It works fine in FF and Safari, but in IE 6/7 it doesn't. Here's the link to see what I mean: http://transitiontogreen.org/index2.php Here is the link to Dynamic Drives site: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm showing the effect and this one does work in IE6/7. Sorry if this link doesn't work, but I copied it straight from the url line. If someone could help me find the reason for this I would appreciate it. Also, if you know of a better approach then let me know that as well. Rod Castello With javascript disabled, this menu does not work. Maybe this approach may work better using *nested list* (more semantic). http://adipalaz.awardspace.com/accessible_ddmenu-en.html http://adipalaz.awardspace.com/experiments/css/accessible_ddmenu_test.html This is partly based on the menu I created (from styles by Duncan Hill) that does not require javascript. http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo Alan, Thanks for your response. I was hoping to avoid making the change, but you may be right. I'll try your method, I'm sure it will work fine. Do you have any idea why the down arrows wouldn't display properly in IE6/7? Did you see it in IE? I know it's not semantic, but I'd sure like to find a quick fix and leave it as it is. Spent too much time on this project already. Thanks again, Rod __ 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-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-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] Text pokes out bottom of box
Lalena wrote:
Can anyone tell me why the text in my first box pokes out the bottom?
Here's the page:
http://suziblade.com/rapant-mcelroy/our_services.html
(The borders are temporary, just so I can see what's going on.) It
looks like the right column is determining the depth of the box, and
I'm not sure why.
If there's anything else I did that isn't coded as sensibly as it
could be, please feel free to let me know that too.
Thank you!
Lalena
Dunn, Lalena. The stuff ain't contained?
Try (not tested):
.container {
overflow:hidden; - :: add to enclose and clear the floats in
the block
width:700px;
margin:20px auto 5px auto;
border:1px solid white;
}
.leftcol {
background:fuchsia; - :: add-- just for fun so you can see
what's happening, sort of...
float: left;
width: 300px;
margin: 0; - :: delete-- not needed
adding: 0px;- :: delete-- not needed
border:0px;- :: delete-- not needed
}
.rightcol {
background: lime; - :: add-- just for fun so you can see what's
happening, sort of...
margin: 0px 0px 0px 340px; - :: delete-- not needed
width: 365px; - :: add to make a box
float: right; - :: add to throw the box right
text-align: left;
border:0px;- :: delete-- not needed
}
__
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] Trouble with drop down navigation tabs in IE 6/7
From: Rod Castello flashju...@sbcglobal.net Subject: Re: [css-d] Trouble with drop down navigation tabs in IE 6/7 Rod Castello wrote: I'm using Chromestyle from Dynamic Drive for my Navigation Drop Downs. -- Thanks for your response. I was hoping to avoid making the change, but you may be right. I'll try your method, I'm sure it will work fine. Do you have any idea why the down arrows wouldn't display properly in IE6/7? Did you see it in IE? I know it's not semantic, but I'd sure like to find a quick fix and leave it as it is: - I would post on Dynamic Drive's forums and/or contact the author. The technique (a list for the root menu and disjointed submenus) is not necessarily non-semantic or inaccessible. That's actually a similar technique to the one used by Opera for several years on its web site. That said, I would also not fall for the trap that because the sub-menus do not appear when script disabled it's bad. It's not, and so long as you organize your site correctly, it's arguably more accessible to prevent the sub-menus from being available without script and without a mouse. Scripted menus have many more advantages. You can Google christian heilman, javascript menus for more info and you can read this brief article: http://www.projectseven.com/products/menusystems/pmm2/ug-examples/accessible/index.htm Note that the article involves one of our products but the concept is applicable to any menu. Good luck. -- Al Sparber - PVII http://www.projectseven.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] Text pokes out bottom of box
On Sep 30, 2009, at 12:43 PM, Lalena wrote: an anyone tell me why the text in my first box pokes out the bottom? Here's the page: http://suziblade.com/rapant-mcelroy/our_services.html (The borders are temporary, just so I can see what's going on.) It looks like the right column is determining the depth of the box, and I'm not sure why. You are referring to the first box (.container), I presume. That box is only as tall as all the static, in-flow content. The left column is a floated box, and as such, is removed from the flow, and does not influence the height of the parent box in modern browsers - that is: except IE 6 7. Those 2 contain the floated box as you've set a width on div[class=container], which triggers 'hasLayout'. Google for 'containing floats' for solutions. Philippe --- Philippe Wittenbergh http://l-c-n.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] Trouble with drop down navigation tabs in IE 6/7
Al Sparber wrote: From: Rod Castello flashju...@sbcglobal.net Re: http://transitiontogreen.org/index2.php [...] The technique (a list for the root menu and disjointed submenus) is not necessarily non-semantic or inaccessible. So how does one access these pages or even know about the existence of such pages when javascript is disabled? Maybe providing the links to the sub-items below or on each respective page would help with the former case. That's actually a similar technique to the one used by Opera for several years on its web site. That said, I would also not fall for the trap that because the sub-menus do not appear when script disabled it's bad. I didn't say it was bad. I said with javascript disabled, this menu does not work. http://www.projectseven.com/ Dreamweaver -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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/
