Re: [css-d] My IE Hack is hacking all the other browsers!!
Alan Gresley wrote: My point is that you do not outline what risk. To say when there is a much less riskier solution available is repeating a mantra that appears in many places. It not based on reality but is more a warning to beginners that sending alternative styles to a particular browser is risker than sending the same style to all browsers. I go with the former since it the cleanness way to support IE non stardard behavior. Knowing what we know now, would Eric Meyers have supported DOCTYPE switching to allow IE to keep supporting a non standard quirks mode? The same can be asked, will the web community at large keeps supporting non standard conditional comments? I don't know Eric so I can't say. Still, I can't agree with your idea that it is just some manta and that there is no real risk involved. Personally I'm a firm believer in workarounds whenever possible to avoid both conditional stylesheets and/or hacks in your CSS. First of all probably 90% of hacks and conditional CSS I've seen in my work experience were created by inexperienced or rushed developers. In that last 10% we have several options before we end up having to actually use a real bad hack. We should first understand the costs and benefits involved in making these decisions for a project whether we end up going with a workaround, a conditional statement, or one of the darker, more evil hacks. -Adam Ducker (http://adamducker.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] My IE Hack is hacking all the other browsers!!
Adam Ducker wrote:
Alan Gresley wrote:
Is this not valid CSS?
* html div { background: green; } /* IE6- */
*+html div { background: green; } /* IE7 */
What you're outlining is valid and not a hack as far as I would define a
hack, so I'm not sure what your point is. What Chris detailed as his
solution is very much a hack that introduces errors and invalidates his CSS:
#main .content{
*padding: 0px;
*margin-bottom: -20px;
}
You have to place hacks in your CSS knowing there is a certain amount of
risk involved. I just don't see why when there is a much less riskier
solution available you would want to go with the former.
-Adam Ducker (http://adamducker.com)
Hello Adam,
My point is that you do not outline what risk. To say when there is a
much less riskier solution available is repeating a mantra that appears
in many places. It not based on reality but is more a warning to
beginners that sending alternative styles to a particular browser is
risker than sending the same style to all browsers.
I go with the former since it the cleanness way to support IE non
stardard behavior. Knowing what we know now, would Eric Meyers
have supported DOCTYPE switching to allow IE to keep supporting a non
standard quirks mode? The same can be asked, will the web community at
large keeps supporting non standard conditional comments?
--
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] Interesting issue with IE6, borders, and negative margins
On 7/08/2009, at 3:00 AM, Mike Smith wrote:
Hello all,
I have some HTML being generated by our CMS that is creating a
nested list
for a menu.
The issue at hand:
The sub-navigation on this menu is supposed to have a divider
between each
item. I used a border-bottom on each link to achieve this. However,
the last
item shouldn't not have this border, so I added a margin-bottom:
-1px; to
the containing ul and that covers it up in all browsers tested (FF
3.5 on
Mac/PC, Safari 4 on Mac, Opera 9.64 on Mac, IE7 on PC, IE8 on PC,
Chrome 2
on PC) but not in IE6. In IE6, the border is showing on top of the
li
below the nested ul.
View the page[1] in any browser but IE6 to see what we want. CSS is
linked
in the header and there is a wee bit of IE6 sniffing going on up
there, too.
Anyone have a work around? And yes, if I could edit the HTML, I
wouldn't be
asking for an assist on this issue; I'd add a class=last to the
last li
and be done with it. ;) I also considered getting rid of the
dividing lines
altogether but the designer (my superior) doesn't cotton to that
idea. :/
Thanks in advance!
[1] http://www.jhsph.edu/urbanhealth/about_us/demo.html
Give the containing list item 'layout'
(http://www.satzansatz.de/cssd/onhavinglayout.html
). One way is with the proprietary 'zoom'. Put it in a separate
stylesheet with conditional comments.
.activenavpath { zoom: 1; }
__
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] Interesting issue with IE6, borders, and negative
Message: 18 Date: Thu, 6 Aug 2009 12:02:03 -0400 From: Mike Smith grum@gmail.com Subject: Re: [css-d] Interesting issue with IE6, borders, and negative margins To: css-d@lists.css-discuss.org Message-ID: 3fb37e490908060902g768d80d5ybe0dbb13410ba...@mail.gmail.com Content-Type: text/plain; charset=ISO-8859-1 On Thu, Aug 6, 2009 at 11:00 AM, Mike Smith grum@gmail.com wrote: Hello all, I have some HTML being generated by our CMS that is creating a nested list for a menu. The issue at hand: The sub-navigation on this menu is supposed to have a divider between each item. I used a border-bottom on each link to achieve this. However, the last item shouldn't not have this border, so I added a margin-bottom: -1px; to the containing ul and that covers it up in all browsers tested (FF 3.5 on Mac/PC, Safari 4 on Mac, Opera 9.64 on Mac, IE7 on PC, IE8 on PC, Chrome 2 on PC) but not in IE6. In IE6, the border is showing on top of the li below the nested ul. View the page[1] in any browser but IE6 to see what we want. CSS is linked in the header and there is a wee bit of IE6 sniffing going on up there, too. Anyone have a work around? And yes, if I could edit the HTML, I wouldn't be asking for an assist on this issue; I'd add a class=last to the last li and be done with it. ;) I also considered getting rid of the dividing lines altogether but the designer (my superior) doesn't cotton to that idea. :/ Thanks in advance! [1] http://www.jhsph.edu/urbanhealth/about_us/demo.html -Mike Can't see an easy CSS solution. You might be able to alter the stacking context with z-index. I haven't tried this and I would question if it is really worth it for IE6, or even if it is possible. http://css-discuss.incutio.com/?page=OverlappingAndZIndex You could use JavaScript to add class=last to the last li in the list, and then style it accordingly. That might be the easiest solution. If it wasn't IE6 you were targeting, you might find the first-child and last-child pseudo-elements handy. http://www.quirksmode.org/css/firstchild.html I'd be inclined to switch the border off in IE6 myself. -- AstraZeneca UK Limited is a company incorporated in England and Wales with registered number: 03674842 and a registered office at 15 Stanhope Gate, London W1K 1LN. Confidentiality Notice: This message is private and may contain confidential, proprietary and legally privileged information. If you have received this message in error, please notify us and remove it from your system and note that you must not copy, distribute or take any action in reliance on it. Any unauthorised use or disclosure of the contents of this message is not permitted and may be unlawful. Disclaimer: Email messages may be subject to delays, interception, non-delivery and unauthorised alterations. Therefore, information expressed in this message is not given or endorsed by AstraZeneca UK Limited unless otherwise notified by an authorised representative independent of this message. No contractual relationship is created by this message by any person unless specifically indicated by agreement in writing other than email. Monitoring: AstraZeneca UK Limited may monitor email traffic data and content for the purposes of the prevention and detection of crime, ensuring the security of our computer systems and checking Compliance with our Code of Conduct and Policies. __ 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] Interesting issue with IE6, borders, and negative margins
On Fri, Aug 7, 2009 at 4:29 AM, Tim Snadden li...@snadden.com wrote:
Give the containing list item 'layout' (
http://www.satzansatz.de/cssd/onhavinglayout.html
). One way is with the proprietary 'zoom'. Put it in a separate
stylesheet with conditional comments.
.activenavpath { zoom: 1; }
Thanks, Tim!
I 3 list!!
__
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] IE8 conditional styles bug ??
Ingo was correct, it was a preferred stylesheet issue, I just had to take out the title. Very odd, but that was the fix. Thanks again everyone for your sugguestions/ ideas. --- - Allen From: Alan Gresley a...@css-class.com To: Allen Beach cmkbh...@ymail.com Cc: css-d@lists.css-discuss.org Sent: Thursday, August 6, 2009 9:03:38 PM Subject: Re: [css-d] IE8 conditional styles bug ?? Allen Beach wrote: It appears that the new IE8 (when in IE8 standards mode) will not work correctly when you have both inline and linked style sheets...if you're in quirks or ie7 mode its fine, but the moment you switch to IE8 standards mode (for both broser and docMode) your linked styles are gone! !--[if gte IE 8] !-- Not recognized unless in quirks/ie7 mode -- link href=css/ie8.css rel=stylesheet type=text/css title=ie8 ![endif]-- test example --- http://mtroadwines.com/ie8test.htm Thanks everyone, --- - Allen Hello Allen, Why do you need this. [if gte IE 8]. Echoing Al Sparber's comment, why do you need to feed IE8 and alternative stylesheet. BTW, before declaring that IE8 in standards mode still is far from perfect, maybe you may want to send all browsers some standard compliant code. link href=ie8.css rel=stylesheet type=text/css title=ie8 Since you are using XHTML, maybe this will work better for IE8. link href=ie8.css rel=stylesheet type=text/css title=ie8 / -- 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-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] My IE Hack is hacking all the other browsers!!
Alan Gresley wrote: My point is that you do not outline what risk. To say when there is a much less riskier solution available is repeating a mantra that appears in many places. It not based on reality but is more a warning to beginners that sending alternative styles to a particular browser is risker than sending the same style to all browsers. Well, it depends on the hack. If it's something that would still validate (and though it feels unusual, the * html / *+html hacks fit in the valid category, as far as I can tell), it's probably not a big deal, unless other browsers that don't need the associated style information start understanding those selectors. As I recall, the * html hack was the center of some concern when the IE7 release was imminent, since it initially was going to recognize styles from that selector (even though it didn't necessarily need them). I would say that the more common risky hacks include the property-underscore hack for IE6 (e.g. _position: relative;) and any non-standard CSS selectors (such as zoom and filter). And they're risky because they don't validate and thus make it harder to use a validator to help spot actual mistakes in your CSS. Those kinds of risky hacks are practices I prefer to avoid at all costs because of the added level of uncertainty they bring to my coding efforts. My weapon of choice is the conditional comment, as it is treated as a regular HTML comment in non-IE browsers, and you can specify (and therefore more easily identify) which versions of IE you want to target. That said, my usual CSS development approach is as follows: 1. Write CSS that's not targeted to any specific browser (aside from -namespaced- properties). 2. Use conditional comments to solve any IE-specific problems. 3. Incorporate what I can back into the universal CSS to see if it breaks any other browsers. 4. If the IE stuff breaks any other browsers, put the culprits back in a conditional comment. 5. If I'm short on time and/or have run into something that seems impossible to fix, use a javascript library like Dean Edwards' IE7.js or IE8.js (which you can get at dean.edwards.name). 6. If that doesn't work, try to approach the layout from a different direction. 7. Go back to step 1, and following. This process isn't as cumbersome as it sounds, but it's still time-consuming. At some point you may need to follow the path of least resistance, whatever that may be. I choose not to use CSS hacks mostly because it doesn't fit into my workflow. I also have some philosophical issues with the hack approach, but nothing I've written is explicitly intended to convince you not to use CSS hacks. (Though I think it's easier not to use them.) Erik Vorhes (*not* Eric Meyer, if that would ever be an issue!) __ 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] Safari Issue with using Absolute Positioning span inside of Overflow:auto (Scrolling Division)
I have a *Safari only * Issue with using Absolute Positioning tool tips
inside of Overflow:auto (Scrolling Division)
If you scroll to the bottom table row, and mouseOver the icon, the tool
tip shows as if the table wasn't contained in a scrolling division. It
shows where the table row would be - underneath the division.
Here's the example link: http://www.finishingfirst.com/test/overflow.html
Here's the relevant css
*Division
*div.refine { margin: 0 auto; border: 1px solid #dedede;width:
356px; background: #ee; padding:4px; display:block; font-size:90%;
overflow:hidden; }
div.refine .choices { width: 100%; background: #fff; height: 125px;
overflow: auto; color: #000; margin:0;padding: 0; }*
Tool Tip*
a.tooltipExpire{border-bottom:1px dashed
green;text-decoration:none;float:right;}
a:hover.tooltipExpire{text-decoration:none;padding:0;}
a.tooltipExpire:hover span{display:block;width:129px !important;padding:.5em
.4em .5em 1em;}
a.tooltipExpire
span{display:none;position:absolute;text-decoration:none;width:129px
!important;color:#696969;background-color:#fff;border:1px solid
#8da1b3;z-index:100;}
Any help/suggestions/pointers to links would be appreciated.
Thanks -
--
Susan R. Grossman
susan.rgross...@gmail.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] There has got to be a better way
I am laying out text on an angle to follow a background graphic. There has got to be a better way that stacking floated divs and adjusting the width of each one. See http://www.striking.com. Is there a better way to do this? M __ 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] There has got to be a better way
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Gillespie, Michael A (Mike) Sent: Friday, August 07, 2009 10:54 AM To: css-d@lists.css-discuss.org Subject: [css-d] There has got to be a better way I am laying out text on an angle to follow a background graphic. There has got to be a better way that stacking floated divs and adjusting the width of each one. See http://www.striking.com. Is there a better way to do this? Hey, if there is a better way, I'd love to see it... the way you've approached it is a pretty creative solution IMO! Jenni __ 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] There has got to be a better way
I am laying out text on an angle to follow a background graphic. There has got to be a better way that stacking floated divs and adjusting the width of each one. See http://www.striking.com. Is there a better way to do this? Hey, if there is a better way, I'd love to see it... the way you've approached it is a pretty creative solution IMO! Jenni Look's like the slantastic approach, right? http://meyerweb.com/eric/css/edge/slantastic/demo.html ~ Joseph __ 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] javascript important?
Most desktop browsers have javascript turned on these days--flash too. I don't know the real market share. But that might not be the important issue. Search engines cannot follow links, pages or displays created with javascript. So, at the very least, you have to (also) include more manual and traditional ways to make the same displays. If your pages are invisible to Google, then they are essentially invisible to everyone. -- /* Colin (Sandy) Pittendrigh --oO0 */ __ 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] There has got to be a better way
That's pretty much what I did which is why I was seeing if there were other ways; The limitation is that you have to use your image as a background image to do this. I would like to be able to figure out how to wrap the text about the viewable outline of an inline image; like the example below where the x chars define the image and the Ts are text. TTTx Txxx TTTxxTTT TTTT M I may not have gone where I intended to go, but I think I have ended up where I intended to be. -Douglas Adams Ignorance more frequently begets confidence than does knowledge - Darwin From: ke...@rodenhofer.com [mailto:ke...@rodenhofer.com] Sent: Friday, August 07, 2009 10:23 AM To: Gillespie, Michael A (Mike); css-d@lists.css-discuss.org Subject: RE: [css-d] There has got to be a better way Try this...I've used it a few times: http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm Kevin - Original Message - From: Gillespie, Michael A (Mike) [mailto:mike.a.gilles...@usa-spaceops.com] To: css-d@lists.css-discuss.org Sent: Fri, 7 Aug 2009 09:53:53 -0500 Subject: [css-d] There has got to be a better way I am laying out text on an angle to follow a background graphic. There has got to be a better way that stacking floated divs and adjusting the width of each one. See http://www.striking.com. Is there a better way to do this? M __ 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] Looking for a way to see Mobile styled output
My google-fu is weak and I'm turning to the community for ideas. I know this is off topic, except as a call for help on finding a tool. I'm tasked with making some very large and very active websites mobile friendly with CSS (not for an app, but a CSS mobile style sheet on the regular website). Except I don't have a mobile device, and even if I did it can't connect to our DEV environment, nor can I expose the site to the world in any way to use the online emulators until it's fully tested and ready for prime time. So ... does anyone know of an emulator, plugin or other for any common browser or Visual Studio 2008? Our two most common mobile visitors come in on Blackberry and IPhone, but the idea is to build out a test case for the least effort and lowest common denominator of CSS. While I find TONS of great resources on styling for this and have what I think should work ready for a look-see. What I can't find is a way to actually SEE what I'm styling. Elizabeth IMPORTANT NOTICE: This e-mail message and all attachments, if any, may contain confidential and privileged material and are intended only for the person or entity to which the message is addressed. If you are not an intended recipient, you are hereby notified that any use, dissemination, distribution, disclosure, or copying of this information is unauthorized and strictly prohibited. If you have received this communication in error, please contact the sender immediately by reply e-mail, and destroy all copies of the original message. __ 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] There has got to be a better way
That's pretty much what I did which is why I was seeing if there were other ways; The limitation is that you have to use your image as a background image to do this. I would like to be able to figure out how to wrap the text about the viewable outline of an inline image; like the example below where the x chars define the image and the Ts are text. TTTx Txxx TTTxxTTT TTTT Hmmm. Considering inline images are treated as such, and images, as of now, are always rectangular, there would have to be an overhaul of how images are recognized by web browsers for that to happen. It would be nice if CSS allowed you to tell text to wrap through transparency in pngs or something. ~ Joseph __ 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] Safari Issue with using Absolute Positioning span inside of Overflow:auto (Scrolling Division)
Hi Susan On Fri, Aug 7, 2009 at 7:41 AM, Susan Grossmansusan.rgross...@gmail.com wrote: I have a *Safari only * Issue with using Absolute Positioning tool tips inside of Overflow:auto (Scrolling Division) If you scroll to the bottom table row, and mouseOver the icon, the tool tip shows as if the table wasn't contained in a scrolling division. It shows where the table row would be - underneath the division. Seems like it must be how different browsers deal with position:absolute which does not have the top, left defined. You might try defining top, left for the span after specifying position:relative on the containing a (a.tooltipExpire) - divya http://nimbupani.com/blog __ 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] Growing a section vertically...
I have a test where I would like to get the colored section this page to grow as the copy gets larger. Right now I have a set height, and I know that's not the way to do it, but I can't seem to get it to get larger vertically. You can see the page at http://www.ba-doyn.com/junk/saw/adults.htm. Be kind. :-) Thanks, 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] Growing a section vertically...
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Michael Beaudoin Sent: Friday, August 07, 2009 12:42 PM To: css-d@lists.css-discuss.org Subject: [css-d] Growing a section vertically... I have a test where I would like to get the colored section this page to grow as the copy gets larger. Right now I have a set height, and I know that's not the way to do it, but I can't seem to get it to get larger vertically. You can see the page at http://www.ba-doyn.com/junk/saw/adults.htm. Be kind. :-) Thanks, Michael If you want the content to expand the section, then why do you have a specified height? Just remove that... Jenni __ 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] Growing a section vertically...
On 8/08/2009, at 4:42 AM, Michael Beaudoin wrote:
I have a test where I would like to get the colored section this page
to grow as the copy gets larger.
Right now I have a set height, and I know that's not the way to do it,
but I can't seem to get it to get larger vertically.
You can see the page at http://www.ba-doyn.com/junk/saw/adults.htm.
Be kind. :-)
Google 'css containing floats'.
#body-adult {
overflow: auto;
height: auto; /* -- actually just remove the height you set */
}
__
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] Looking for a way to see Mobile styled output
Hi Elizabeth, You can download a add-on for firefox called webdeveloper and once you get that, at the top you'll have a bar with a CSS - Display CSS Media Type - Handheld Hope this helps, --- - Allen From: Davies, Elizabeth elizabeth_dav...@gallup.com To: CSS-D css-d@lists.css-discuss.org Sent: Friday, August 7, 2009 12:02:50 PM Subject: [css-d] Looking for a way to see Mobile styled output My google-fu is weak and I'm turning to the community for ideas. I know this is off topic, except as a call for help on finding a tool. I'm tasked with making some very large and very active websites mobile friendly with CSS (not for an app, but a CSS mobile style sheet on the regular website). Except I don't have a mobile device, and even if I did it can't connect to our DEV environment, nor can I expose the site to the world in any way to use the online emulators until it's fully tested and ready for prime time. So ... does anyone know of an emulator, plugin or other for any common browser or Visual Studio 2008? Our two most common mobile visitors come in on Blackberry and IPhone, but the idea is to build out a test case for the least effort and lowest common denominator of CSS. While I find TONS of great resources on styling for this and have what I think should work ready for a look-see. What I can't find is a way to actually SEE what I'm styling. Elizabeth IMPORTANT NOTICE: This e-mail message and all attachments, if any, may contain confidential and privileged material and are intended only for the person or entity to which the message is addressed. If you are not an intended recipient, you are hereby notified that any use, dissemination, distribution, disclosure, or copying of this information is unauthorized and strictly prohibited. If you have received this communication in error, please contact the sender immediately by reply e-mail, and destroy all copies of the original message. __ 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] Looking for a way to see Mobile styled output
Hi Elizabeth, I have done loads of work for mobiles, application design, development and websites, for Vodafone. You can see some of my work here: http://blakeys.com . It can be a bit daunting at first but can be very rewarding. Mobile marketing is said to be one of the biggest tools for the future, see http://www.trendsinbranding.com/trends.php#7 . You might want to read about Blue-Casting because lots of the best marketing agencies are offering the technology to their clients now. Here is a list of stuff that was very useful for me: 1. If you are targeting BlackBerry then get in touch with their developer arm, research in motion, http://www.rim.com/ . I use a mac so I had to install a virtual machine and XP to get the emulators working but once up and running they are what you need i.e. work just like a blackberry. Rim are just the best for developing for the BlackBerry and have a big community. The emulators I installed were for the Pearl (8110) and Curve (8310) which are: BlackBerry Device Simulators 4.2.0 and 4.2.2. However to get them to work for email and use ur PC's internet you need to install; BlackBerry Email and MDS services emulator and BlackBerry JDE 4.2.1 (the backbone for them all). 2. Adobe Creative Suite comes with a useful little application called Device Central. You'll need to download the latest specs for handsets but it's great for getting info about screen res, supported media, and all that jazz. You can also view your wapsites from Dreamweaver (if you use that pooh) in device central with just a click. 3. Handset recognition is not the easiest to setup, and we found that it still didn't work 100% so had to make changes to the database, but it might be of interest: http://wurfl.sourceforge.net/ . 4. look for mobile developers blogs, they can be really interesting. It is a bit tricky to get things working for mobile. Key things to understand are that 3G is still quite slow so use very compressed images when you can, screen real estate is at a minimum so use a nice navigation (the phone's kepypad can work as navigation), data charges scare people away from browsing through 3G. Here is a link to a website where i found a nice template to help me get up and running http://www.internetmademobile.com/ (i hope it's still on there somewhere). Here is that template on my testing site: http://pendulum8.com/COMPASSMOBILE/v1/wapsite/ index.xhtml - all standards compliant and uses CSS so this email is not completely O/T!! lol Drupal and Joomla will have plugins that make a mobile friendly website easy. It might be worth making a basic website using that technology and then adding the mobile plugin. Good luck! Chris On 08/08/2009, at 12:02 AM, Davies, Elizabeth wrote: My google-fu is weak and I'm turning to the community for ideas. I know this is off topic, except as a call for help on finding a tool. I'm tasked with making some very large and very active websites mobile friendly with CSS (not for an app, but a CSS mobile style sheet on the regular website). Except I don't have a mobile device, and even if I did it can't connect to our DEV environment, nor can I expose the site to the world in any way to use the online emulators until it's fully tested and ready for prime time. So ... does anyone know of an emulator, plugin or other for any common browser or Visual Studio 2008? Our two most common mobile visitors come in on Blackberry and IPhone, but the idea is to build out a test case for the least effort and lowest common denominator of CSS. While I find TONS of great resources on styling for this and have what I think should work ready for a look-see. What I can't find is a way to actually SEE what I'm styling. Elizabeth IMPORTANT NOTICE: This e-mail message and all attachments, if any, may contain confidential and privileged material and are intended only for the person or entity to which the message is addressed. If you are not an intended recipient, you are hereby notified that any use, dissemination, distribution, disclosure, or copying of this information is unauthorized and strictly prohibited. If you have received this communication in error, please contact the sender immediately by reply e-mail, and destroy all copies of the original message. __ 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
[css-d] Main Content Following Left Sidebar
I have a problem that I can seem to find. The position of part of the main content is being affected by the left navigation sidebar, but it shouldn't be. http://www.superiorshelving.com/mfg/nexel/test/test6.php If you click different headings in the Navigation Menu, you'll see the text below the tabs jump around and follow the bottom of the menu. Can someone with a fresh pair of eyes see what my problem is? The moving content should hug the bottom of the tabs, of course. Thanks, Frank __ 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] There has got to be a better way
Gillespie, Michael A (Mike) wrote: http://www.striking.com/ That's pretty much what I did which is why I was seeing if there were other ways; The limitation is that you have to use your image as a background image to do this. I would like to be able to figure out how to wrap the text about the viewable outline of an inline image; like the example below where the x chars define the image and the Ts are text. TTTx Txxx TTTxxTTT TTTT M Hello Michael, Can you please bottom post. What you are seeking is the magical property float:center. This was discussed over a year ago on the CSS WG list [1]. One major reason that this is not going to happen soon is that float:left and float:right act differently in overflow containers. The initial overflow container is the body element. http://css-class.com/test/bug/float-right-left-edge-hidden.htm Firefox (Gecko 1.9), Mozilla (Gecko 1.7) IE8, Opera 9.6+ and Safari 4 supports the proper rendering of this test case which shows the majority of the element's width disappearing outside the left edge of the viewpoint. Safari 3 Opera 9.10~25, IE7 show the this right floated element is contained by the left edge of the overflow container body. Because of this simple fact, float:center is what one would say is impossible with the current limitations of the float model. Another problem you would encounter is this, http://css-class.com/test/css/visformatting/float-inline-content.htm and this, http://css-class.com/test/css/visformatting/floats-with-inline-elements.htm The later test case was originally testing inline and block level elements behavior around floats. Opera 9~10 and IE8 are the only browsers that follow the Specs [2] which states. Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Firefox 3.5b4, Safari 4 shows the inline content overlapping (not flowing around) the float that comes later in the source. IE7- fails this completely. This overlapping of inline content over floats is a very well known Gecko bug, https://bugzilla.mozilla.org/show_bug.cgi?id=25888 and was first reported in 2000 is still needs to be somewhat fixed. The latest comment by David Baron indicates there a patch has now been landed but this opens other issues. I quote David Baron, It leaves unfixed a bunch of issues dealing with a line wrapping around floats that are in the line itself. Even if you could use a mythical float:center, Firefox and Safari would show overlapping. Something like below. x TTT xxx T xx TTT TTT TTTT 1. http://lists.w3.org/Archives/Public/www-style/2008Jan/0102.html 2. http://www.w3.org/TR/CSS21/visuren.html#floats -- 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/
