[css-d] css3 pie?
Has anyone used this? css3pie.com Am looking for any positive and negative views on this. Thanks, Jeff __ 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] img element or sprites for icons?
Hi, I am working on some redesign stuff at work and one of the things is that we are putting decorative icons next to link text. My question is would it be better to put an empty span tag in my code and use it with css backgrounds or just put the images in the code using the img element. They're just for decoration so they wouldn't benefit from an alt attribute and I could save some http requests by loading just the one sprite as opposed to x amount of different icons. But, I also am not sure how correct it is to have an empty html element just sitting in the code like that. I know with image replacement you usually put text in to describe the image that replaces the text but for just an icon I wouldn't want a screen reader to basically read the description of just a decorative thing when it really doesn't add any significance to the page. Any opinions on this? If this is an old subject could someone please point me to where it's been discussed? Thanks, Jeff __ 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] img element or sprites for icons?
On Wed, May 12, 2010 at 12:18 PM, Thierry Koblentz thierry.koble...@gmail.com wrote: Why not using the links or list items to hold the background images rather than adding extra elements (spans or else? -- Thierry (mobile) Typos compliments of my iPhone Sorry I should have explained that better. The links are using a background image to make them look like buttons. So that's why I was looking at an empty element instead of using the links. Jeff __ 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] validators tied up today?
On Wed, May 12, 2010 at 5:23 PM, Gabriele Romanato gabriele.roman...@gmail.com wrote: Honestly speaking guys, I don't see the point with using the W3C CSS Validator today. If you need parsing check, it's already performed by most browsers. If you need version checking, simply stick to each style definition explained in the specs. For example, simply add profile=cssn to your validator URI to check if your styles conform to the n spec (1, 2, 3). Of course, this is NOT mandatory, because the bigon age of W3C CSS badges is over. A website should be more than simply validated to satisfy user needs: it should be usable, user- friendly and accessible. Further, it should present interesting and useful contents. That's all. A user don't care a fig if you're using 'border-radius' or '-moz-border-radius', remember that. By the way, as a W3C translator I also noticed that most W3C pages don't validate. So what? bye ;-) http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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/ I would say it's a good idea to validate your CSS if only to check that you haven't made any typos. I know that when I check legacy code I have found some obvious things that could have been avoided by using the validator. But I would say that whether a website is down or not isn't really a list topic. - Jeff __ 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] height and margin: auto 0
On Wed, Apr 28, 2010 at 1:40 PM, Jess Jacobs simulacran.h...@gmail.comwrote: This might be a stupid question, but here goes: I have a div. I can set a width on that div and set margin: 0 auto; and have the thing centered horizontally. If I instead set a height on the same div, and then set margin: auto 0; it does not center horizontally. Why? why why why? Would the block center vertically if the containing block had a declared height, or does that not matter either? People are increasingly asking me to center things, or make the page flexible/collapsible, etc, but aren't using any of the kinds of designs that lend themselves to such things, and I'm not in a position to push back, unfortunately. Thoughts? Jess Jacobs aki...@gmail.com http://www.akisma.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/ You could set your container to position: absolute top: 50%; and then set a negative top margin to line it up. That worked for me before. Here is a link I just found. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html It looks like that example uses this but without the negative top margin. You would use the top negative margin to bring your div up Jeff __ 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] Making a simple form look identical across the main browsers
On Mon, Apr 26, 2010 at 11:08 AM, Chris F.A. Johnson ch...@cfajohnson.comwrote: On Mon, 26 Apr 2010, Kevin Rodenhofer wrote: This mock up looks exactly the same in IE 7-8, Safari 4, Chrome 5 and Firefox 3.6.3 (all on a PC). No, it doesn't. It doesn't even look the same in FF if the font-size is different: http://cfajohnson.com/testing/form.jpg. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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/ Couldn't you technically declare your own font size in px and avoid this issue of browser default font size? I am not saying it's a good idea to use px based fonts, but it is doable and with the zoom functionality of newer browsers you'd avoid breaking layouts. Jeff __ 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] Making a simple form look identical across the main browsers
On Wed, Apr 28, 2010 at 4:12 PM, Chris F.A. Johnson ch...@cfajohnson.comwrote: On Wed, 28 Apr 2010, jeffrey morin wrote: On Mon, Apr 26, 2010 at 11:08 AM, Chris F.A. Johnson ch...@cfajohnson.comwrote: On Mon, 26 Apr 2010, Kevin Rodenhofer wrote: This mock up looks exactly the same in IE 7-8, Safari 4, Chrome 5 and Firefox 3.6.3 (all on a PC). No, it doesn't. It doesn't even look the same in FF if the font-size is different: http://cfajohnson.com/testing/form.jpg. Couldn't you technically declare your own font size in px and avoid this issue of browser default font size? I am not saying it's a good idea to use px based fonts, but it is doable and with the zoom functionality of newer browsers you'd avoid breaking layouts. That doesn't take into account viewers whose default font size is larger (using a minumum font size). I'm not going to zoom every time I come to a badly coded site, then return to the real size for another site. That's not what I'm suggesting. I never really dug into this issue in great detail before but I just tested my company's site with different default font sizes and the text set in px doesn't change size. Only the text that has fonts set in em or % change. So it seems to me that setting in px would make it that size for everyone. The site I am testing with has a reset stylesheet but it decalres font-size: 100% so I can't see that affecting it. Am I missing something? Jeff __ 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] Making a simple form look identical across the main browsers
On Wed, Apr 28, 2010 at 4:20 PM, Chris F.A. Johnson ch...@cfajohnson.comwrote: On Wed, 28 Apr 2010, jeffrey morin wrote: On Wed, Apr 28, 2010 at 4:12 PM, Chris F.A. Johnson ch...@cfajohnson.comwrote: On Wed, 28 Apr 2010, jeffrey morin wrote: On Mon, Apr 26, 2010 at 11:08 AM, Chris F.A. Johnson ch...@cfajohnson.comwrote: On Mon, 26 Apr 2010, Kevin Rodenhofer wrote: This mock up looks exactly the same in IE 7-8, Safari 4, Chrome 5 and Firefox 3.6.3 (all on a PC). No, it doesn't. It doesn't even look the same in FF if the font-size is different: http://cfajohnson.com/testing/form.jpg . Couldn't you technically declare your own font size in px and avoid this issue of browser default font size? I am not saying it's a good idea to use px based fonts, but it is doable and with the zoom functionality of newer browsers you'd avoid breaking layouts. That doesn't take into account viewers whose default font size is larger (using a minumum font size). I'm not going to zoom every time I come to a badly coded site, then return to the real size for another site. That's not what I'm suggesting. I never really dug into this issue in great detail before but I just tested my company's site with different default font sizes and the text set in px doesn't change size. Only the text that has fonts set in em or % change. So it seems to me that setting in px would make it that size for everyone. The site I am testing with has a reset stylesheet but it decalres font-size: 100% so I can't see that affecting it. Am I missing something? You must be using MSIE. That is, AFAIK, the only browser that doesn't resize fonts specified in px: it leaves them unreadably small. If you don't want people to read your text, that's fine. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) I am using firefox 3.6. When I set the zoom option to zoom text only i can increase all fonts with command + or command - (i am on a mac so substitute control for PC) But, changing the default font size in the browser settings does not increase or decrease fonts that have been set in pixels. Jeff __ 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] Making a simple form look identical across the main browsers
On Wed, Apr 28, 2010 at 4:26 PM, MEM tal...@gmail.com wrote: 2010/4/28 jeffrey morin rufus2...@gmail.com: Am I missing something? Jeff Allow me Jeff, you are missing the main point here. A very big main point. Designing for web is not, the same thing as designing for paper. Even designing for paper is not a guarantee that all will be equal seen by everybody. Can you have the same monitors with the same definitions, with the same browsers, and a same par of eyes for everyone? Yes. Hard task. But possible. But even if you do that... I believe subjective will beat you for good. ;) The main point you are missing is a theoretical understanding about what design is, and what are is goals. Main point: You are wasting your energies on a almost impossible and, even worst, not even important, task. :) Regards, Márcio Thank you Márcio. I do get the point of the original discussion. I was just pointing out an idea that in theory I thought it would be possible to get the same font sizing. I did point out that it wasn't something I endorsed. I have read many things about IE and font resizing and try to use ems whenever possible. Jeff __ 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] Making a simple form look identical across the main browsers
On Wed, Apr 28, 2010 at 4:50 PM, Climis, Tim tcli...@indiana.edu wrote: I am using firefox 3.6. When I set the zoom option to zoom text only i can increase all fonts with command + or command - (i am on a mac so substitute control for PC) But, changing the default font size in the browser settings does not increase or decrease fonts that have been set in pixels. Ah... we misunderstood, sort of. That is correct behavior. The same will hold true for any other units not based on the font size (pt, mm, cm, in, etc). The bug in IE we mentioned keeps the text from resizing with the +/- commands as well. But that still doesn't take into account the min-font-size setting. Many of the people that reset their default font size also increase the minimum font size so that they can read things, no matter what. and that will still break any carefully crafted pixel-based layouts. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Ok that's what I but wasn't 100% sure. Thanks for clearing that up Tim. Jeff __ 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] testing keyboard accessibility
On Tue, Apr 27, 2010 at 12:36 PM, David Laakso da...@chelseacreekstudio.com wrote: jeffrey morin wrote: Hi, I want to test more keyboard accessibilty and I am trying to do this in Firefox 3.6. For Safari using the tab key will at least cycle through all the links and form elements but Firefox only goes to forms and skips everything else. I tried the cursor to navigate the page option but it isn't really good. Is there something that anyone can recommend for testing keyboard navigation with CSS in Firefox? Thanks, Jeff These may help... http://support.mozilla.com/en-US/kb/Accessibility http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/ ~d Thanks David, I couldn't get the 456bereastreet method to work for some reason but i'll check out the mozilla page you sent. Thanks for the links. Jeff __ 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] zindex, opacity and iframes
On Friday, April 23, 2010, Theresa Newman theresa.web...@gmail.com wrote: I'm working on an interesting problem and cannot find good info via google. I wonder if I can get some authoritative info here ;) I have a navigation, css based, with opacity on the drop down. It is positioned with z-index of 200. Below it in the main body of the page is an iframe containing a flash item (this is fed from an ad server) The drop down menu falls behind the iframe. The flash does have wmode=transparent. Best I can figure is that the html element of the iframe is creating it's own stack. The iframe is within a div which I gave position relative and z-index of -, but the iframe still covers the drop down. Thoughts? facts? Theresa I had this same thing happen to me today. Coincidence? :-) What was happening was the ad was putting a z-index of something ridiculous, I think 10250. So I had to out z-index their z-index. It isn't something that I like to do but I couldn't think of any other solution. Drill down with fire bug on the ad and see what kind of styles they're injecting. It could be your issue. Jeff __ 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] Container doesn't contain as expected
What is a clearing element inside in this context ? (is it something to do with the clear fix method?) Thanks again, Márcio remove float: right from your footer. The problem is that you have those sections and the footer floating. To clear floated elements you can add an element after your floats, in this case it is your footer, and use the clear property to make the containing block stretch to contain the floats. To try this add an extra div after your footer and leave it empty. give it a style of clear:both. That should work too. Another way to contain floated elements is to float their parent also. In this case it's your container div. But since you have the margin on that to center it you can't also float it. So removing float:right from your footer works or adding another div with the clear property. You can also use overflow:hidden on your container as a way to clear floats, but that might not be desirable if you're going to have content that could go outside of the boundaries of your containing box. Jeff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7: Background-Image in form-field
On Tue, Apr 6, 2010 at 11:30 AM, Leo Luchs leolu...@googlemail.com wrote: Looking at http://www.fuenf-nrw.de/2010/index_test.php you will notice a search-form in the upper right corner. IE7 does not only show the magnifying-glass but also the value Go. I've hoped to prevent it by using text-indent: -px. That works in most browsers, but not in IE7. Is there something I could do to prevent IE7 from showing the value? Leo I found this online and it works for me on submit buttons. Not sure why, but adding these two properties hides text on IE. color: transparent; text-transform: uppercase; - Jeff __ 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] liquid image frame
On Mon, Apr 5, 2010 at 8:59 AM, Krupa Anna Katalin krupa.kata...@gmail.comwrote: jeffrey morin wrote: does anyone know where i can find some examples on how to frame a photo using css and images? i want it to be liquid so that it can expand to different size photos. http://ltfeatures.com Hi, if you want that to work cross browser, than you can use table for that. Don't give width parameter to table, and it will liquid. Kata __ Thanks for the link David. This was a great lesson. Kata - It looks like it is already liquid for the most part. But given the shape of my bottom corners it's not giving me the result I want. Since you have to set a width on the bottom left corner. i put a test up so if anyone has any suggestions let me know. I am going to play with the table idea you had. http://myinternets.org/tests/shadow.html Thanks, Jeff __ 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] liquid image frame
does anyone know where i can find some examples on how to frame a photo using css and images? i want it to be liquid so that it can expand to different size photos. here is an example of one using images but it's not liquid. you can get the idea from it though. http://ltfeatures.com/ any info would be great. thanks, jeff __ 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] Which selector to use?
On Tue, Mar 30, 2010 at 2:12 PM, Linda Miller, DVM anm...@bellsouth.netwrote: Thank you, Kata. My problem apparently was that I was testing in Safari on the Mac. I was using the #closeButton selector and just changing the font size. This did not work as expected and I should have checked it in other browsers before posting. Since it was not working correctly in Safari, I thought that it was my CSS rather than the browser. Linda what was the problem? you never explained what was happening. were you selecting it wrong? what were you trying to do? Jeff __ 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] list of webkit css?
It's easy to find all of mozilla's extensions in their dev center but it seems Apple has to be difficult yet again. Does anyone know where I can just find a list of all the -webkit extensions? Thanks, Jeff __ 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] Strange line in Chrome
On Tue, Mar 2, 2010 at 8:00 AM, Thijs Hakkenberg th...@hakkenberg.comwrote: Dear list, In Chrome a vertical line appears because the content is wider then the frame. In FF and IE, the text breaks up nicely, but not in Chrome. http://www.lawandroar.nl/index.php?id=158 Anyone know why? __ 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/ This isn't specific to your question but do you need all those class names of bodyText on your p tags? You could just do #content p and set your styles that way saving you a lot of extra markup. Jeff __ 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] odd float (double float?) on IE7
On Mon, Mar 1, 2010 at 2:15 PM, Rob Emenecker list-s...@hairydogdigital.com wrote: Hi all, The following page is experiencing an odd float issue with IE7. http://www.pasadenabusinessassociation.com/events/registration.php?eid=15 There is a block of form fields that are setup using DIVs and floats on the lower part of a form. They work okay in IE8, FF3, Safari 4. In IE7 they are widely spaced and I'm not sure why that is happening. Can anyone shed light on what IE7 idiosyncracy is driving this? Thanks, Rob Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com Please note: Return e-mail messages are only accepted from discussion groups that this e-mail address subscribes to. All other messages are automatically deleted. __ 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/ That looks like the double margin float bug. I thought it didn't affect IE7 though but I have read about it happening sometimes. (Maybe someone else can chime in on that!) I changed the CSS to this and it worked for me. Mind you this is using the IE Dev toolbar, I didn't set the code up on another server. margin-right: 0; padding-right: 1.25em Here is a description of the bug if that in case is the cause. http://www.positioniseverything.net/explorer/doubled-margin.html Jeff __ 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] missing bullets on unordered list IE7
I have an unordered list with the li elements floating left. The discs are disappearing and I have read that this is because when you float an item the display property is set to block which in turn wipes out the display: list-item; that is normally on list items. Does anyone know if there is a workaround for IE? I would love to avoid using a background image to get the discs there. Jeff __ 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] Floating to bottom-right of content : yet possible ?
On Sat, Feb 13, 2010 at 4:29 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote: I would like, for design reasons, to float an image to the bottom-right of a page's content (which will be textual by the time we reach bottom right). There seem to have been many many enquiries in the past as to whether this is possible, and as far as I can tell, the answer has invariably been no (although there are some combined JavaScript/CSS techniques that appear to work). My question is therefore whether CSS has yet evolved to the point where such positioning is possible, using modern browsers ? I appreciate that I can position a background-image in this way, but of course the text does not flow around background images, and for reasons of accessibility I would like to present the text on a plain background. http://web-consultants.org.uk/sites/Terpsichore/About-us.asp illustrates the approximate placement of the image, but as that page uses a background-image, the text does not flow around it as desired. http://web-consultants.org.uk/sites/Terpsichore/ illustrates the same image placed clear of the text, but only co-incidentally aligning with the bottom of the page (if the content were longer, the image would remain top-right). Philip Taylor __ 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/ You could try something like this. http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm it would require you cutting up your image but it looks like you can get the effect you want. I would avoid putting relevant content into your footer. Jeff __ 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] Visited link not purple
On Tue, Feb 2, 2010 at 9:43 PM, Tim Duffy timothy...@gmail.com wrote: Hello All, Does anyone know why visited links on my portfolio page don't turn purple? site: www.draftingservices.com Hi Brian, I think its because of the javascript you are using. I only looked at your portfolio page, but if you remove the 'onclick' from your link, and then click the link you will get a purple visited link. Of course this means navigating away from the page rather than switching the image. I am not sure exactly how to show a link as visited without that link actually showing up in the browser history. Maybe someone smarter than me will have a nice css solution for this. Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ I get the same results when I remove the onclick event in the sidebar links. I'm guessing the return false in the script causes this since it doesn't allow the link to get followed? You could have a CSS class added to those links via the showPic function. Jeff __ 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] centering divs within a div...
On Mon, Jan 25, 2010 at 12:29 PM, Michael Beaudoin mich...@ba-doyn.comwrote: Ok. An easy one for some of you on a Monday, but I'm just not seeing it. I have a div (content) and would like to center two other divs (leftContent and rightContent) within the content div. I've tried all the obvious things but they aren't working for me. 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/ do you have an example page? __ 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] centering divs within a div...
On Mon, Jan 25, 2010 at 12:42 PM, Troy Harshman tmha...@gmail.com wrote: Well, you've got everything wrapped in a fixed width div. So why not do some math and set widths to your content divs and then position with margins? On Mon, Jan 25, 2010 at 12:29 PM, Michael Beaudoin mich...@ba-doyn.com wrote: Ok. An easy one for some of you on a Monday, but I'm just not seeing it. I have a div (content) and would like to center two other divs (leftContent and rightContent) within the content div. I've tried all the obvious things but they aren't working for me. 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/ __ 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/ I don't think you'll be able to do it while the inner divs floating. if you wrap the two inner divs in a fixed width one that isn't floating you could do it. you'd just have to clear that containing div. so you could try something like this. div id=content div id=inner-content div id=leftContent / div id=rightContent / /div /div then use a clear fix for the inner-content and set your width and add your margin: 0 auto. but i agree that it would be easier to set it with margins or padding. - Jeff __ 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] NOT restarting numbered lists after h1 element
On Tue, Dec 15, 2009 at 4:34 PM, Carolyn Rosner carolyn.ros...@nprb.orgwrote: Hi all, I'm working with a four-level list that is basically: 1. numbered list item a, b, c, list sub-items i, ii, iii, list sub-items 1, 2, 3 list sub-items h1 header/h1 2. continue list with second numbered list item ... HERE IS THE PROBLEM. After inserting the h1 I find I cannot continue with my second list item as 2; the list starts over at 1. Can I do that using CSS? I've got the other sub-items to style correctly using CSS, so this is my only problem. Thanks, anyone who may be able to help! Carolyn __ 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/ do you have a page example to look at? Jeff __ 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] Please help. Why doesnt my heading show in mozilla?
On Wed, Nov 25, 2009 at 11:36 AM, rob...@angelsoflight.net wrote: Someone please help. my site shows perfect in IE, but in Mozilla, It doesnt show my heading, it shows the center part of the page with the video and the bottom part is not centered, even though the source is Centered. I have tried w3.org, but it does not help with this problem. Please help. I dont know what else to do to make this page correct in Mozilla Firefox. www.thecomingcrisisinamerica.com/dev I am completely clueless as to what is wrong in Mozilla. Thanks for any help. __ 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/ You should validate your html. It looks like you have an ending div tag that shouldn't be there. Give the site a look in Safari too. It could use some love. :) Jeff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 stretching floated div
Hey Everyone I am finding an IE bug that seems odd. I have a div with two inputs inside of it. the div is floating right and one of the inputs is floating left and the other right to create some space. here's what it looks like div class=float:right input class=float:left / input class=float:right / /div This works fine everywhere but in IE. It stretches the containing div to 100% width. So I have to add a set width to make it play nice. For some cases I am not going to want to add a width. Does anyone know what's causing this? Thanks in advance. - Jeff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 stretching floated div
On Tue, Nov 17, 2009 at 3:21 PM, Mark Henderson m...@cwc.co.nz wrote: Hey Everyone I am finding an IE bug that seems odd. I have a div with two inputs inside of it. the div is floating right and one of the inputs is floating left and the other right to create some space. here's what it looks like div class=float:right input class=float:left / input class=float:right / /div This works fine everywhere but in IE. It stretches the containing div to 100% width. So I have to add a set width to make it play nice. For some cases I am not going to want to add a width. Does anyone know what's causing this? Thanks in advance. - Jeff Hi Jeff, Probably going to need to see more than just that snippet of code. However, one reason IE doesn't shrink-wrap - which is what you are seeing in other browsers - is because of an incomplete or no doctype. So, what's the doctype you are using?? HTH Mark Hey Marc, Thanks for getting back to me. I can't really send out the page because it's the section to edit your profile on the site I am working on. I don't want to ask anyone to sign up for something. This is the Doctype that is in place though. It looks ok. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; - Jeff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 stretching floated div
On Tue, Nov 17, 2009 at 3:49 PM, Mark Henderson m...@cwc.co.nz wrote: Hey Marc, Thanks for getting back to me. I can't really send out the page because it's the section to edit your profile on the site I am working on. I don't want to ask anyone to sign up for something. This is the Doctype that is in place though. It looks ok. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; - Jeff With a k, not a c please! That doctype should be ok. Since you can't send the page (understandable in this case) is there any chance of stripping it down to a test case and posting it elsewhere, or at the least cutting and pasting the entire form (and not just the div from earlier). Mark Sorry about that! My boss is Marc with a c. I am going to look into it a little more and if I can't find the solution then I will try to strip the form out. Thanks for helping out with this. - Jeff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 stretching floated div
On Tue, Nov 17, 2009 at 10:56 PM, Mark Henderson m...@cwc.co.nz wrote:
Alan Gresley wrote on 18 November 2009 at 16:45
[..]
I have no specific test case for IE7- but is this your bug.
http://css-class.com/test/bugs/gecko/1-7~1-9/floats-inline-and-float.ht
m
Ah ha! Well that does seem to fit with his earlier code snippet, good
spotting.
BTW, please specify which IE version you have the problems in future.
IE6, IE7 and IE8 are very different creatures. IE8 has few known bugs
and is vastly different from it predecessors.
Alan, it's in the subject line!
__
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/
Thanks for all the help here. Alan, I think you have basically found the
issue. It seems to be solved in later Gecko versions so that is why I
haven't had the issue anywhere besides *IE7. *(haven't checked in 6 since we
aren't supporting it, thankfully)
So since I don't have my own domain as of yet and our test servers are
password protected I have done this. I have taken two screenshots of what
should happen and what IE7 does. Those are here.
http://rufus2021.wordpress.com/2009/11/18/ie7-float-issue/
The exact code for this is as follows: Slight correction from before, one of
the elements is actually an a tag but it doesn't seem to make a difference
whether they are inputs or links. Same result.
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html lang=en
head
style
div { border: 1px solid red; float: right; }
input { border: 1px solid green; float: left; }
a { border: 1px solid blue; display: block; float: right; }
/style
/head
body
div
input type=text value=floating left /
a href=#floating left/a
/div
/body
/html
It looks like it's just a case of there needing a width set to help IE
along. Does anyone know if there is any documentation on this anywhere else?
IE7 will give me the correct display, which Safari and later Gecko browsers
give, if i float both of the elements inside of the div left and still have
the div floating right. It is as if IE7 just let's the div run wild if the
child elements are floating in opposite directions.
- Jeff
__
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] CSS background image hover problem
On Mon, Nov 16, 2009 at 9:05 AM, Jack Timmons jorac...@gmail.com wrote:
On Mon, Nov 16, 2009 at 8:00 AM, Jack Timmons jorac...@gmail.com wrote:
}
#footer #backToTop a{
visibility: hidden;
}
That should accomplish what you're seeking.
--
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
As a side note:
A quick and dirty fix to making the link clickable would be replacing
the visibility: hidden with:
#footer #backToTop a{
display:block;
height: 78px;
width: 89px;
}
And removing all the text from the anchor tag (a)
--
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
__
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/
You have the background image on both the div#backToTop and the link inside
of the div. You can remove the background from the div and then move these
properties over to that link
display:block;
height: 78px;
width: 89px;
visibility:hidden just makes the link disappear so instead you'll want
text-indent: -1px; to move it off screen but still have something there
for search engines.
also, display: block doesn't need to be attached to divs as they are already
block level elements.
Cheers,
Jeff
__
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] why does Firefox add padding?
On Mon, Nov 9, 2009 at 12:29 PM, r...@catjuggling.com wrote: I have tried this page in Chrome, Safari, IE6, and Firefox. In the first three browsers I get the result I expect, but Firefox is doing its own thing. http://www.mcmullincreative.com/crows/ The wide column is divided into identical sections. Each section has an image floated left, and a title and description to the right. The words This is the title are supposed to be aligned with the top of each image. In Firefox, I am seeing an additional 20px of padding on the top, which pushes the title, and everything else, down. It is no longer flush with the top of the image. I can't seem to figure out how to fix it. Any help would be appreciated. Thanks. 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/ the image inside of your href tag is floated but the link isn't. you have to float the link so it will contain the image. check in firebug and when you mouse over the a tag in the html section of firebug it'll highlight it for you and you'll see the problem. cheers, jeff __ 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] removing outline from input:active not working in firefox
Hi Everyone,
I am trying to remove the outline on my submit buttons and Firefox 3.5.3
isn't working for me. All I am doing is
input:active { outline: 0 none; }
I tried putting !important on it but it still doesn't work. Does anyone
know why this would happen? There aren't any other styles that are
overriding because nothing gets outline in my stylesheets. Any help would be
great.
Thanks!
Jeff
__
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] margin/padding problem for H1 tag
On Tue, Nov 3, 2009 at 8:46 AM, Birdie b...@koolfish.com wrote: Hi, I need space between the top of my h1 (Fund Raising dinner header) and the red menu bar. In IE 6 I can achieve that by adding 15px of padding to my h1 rule. However this has no effect in safari or firefox. I've tried lots of combinations of padding and margin and if I put a huge number in the padding say 50px then firefox will nudge it down but then IE it's a quarter down the page. I am just perplexed as to why firefox and safari are ignoring the padding setting. Page: http://www.koolfish.com/test/index.html Css: http://www.koolfish.com/test/css/mainstyles.css(h1, p, etc styles at the bottom of the css file) Thanks Lisa The problem is because your divs with ids of #mainmenu, #sidebar, #masthead and #donations are all floating but your #maincontent div isn't so that is causing it to basically bleed into your maine menu. so when you are setting your padding it is essentially starting at the top of the #mainmenu and not the #maincontent which is where you want. you can set a width on your content div and float it. also if you look at your ul inside of #mainmenu you'll see that it's collapsing. this is because you have a non floated element inside a floated element. so it throws off the height some. if you highlight the elements in firebug you'll be able to see better. this is a good article on clearing floats. http://www.quirksmode.org/css/clearing.html hope that helps. cheers, Jeff __ 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] Adding captions to photos
On Mon, Oct 12, 2009 at 12:18 PM, bruce.som...@web.de wrote: For purposes of relaxation, a terribly simple beginner's question that surely any of you can answer. I hope for your indulgence. I am displaying two images side-by-side: img src=/photo/tinkerbell/Dom.jpg / img src=/photo/tinkerbell/JoelMairead.jpg / I want to add captions. Until now, I would have done it quickly employing a table. Can anyone outline briefly for me, how that can be effected using CSS? Many thanks. Bruce __ 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/ i think this is an easy and solid structure div img pcaption text/p /div div img pcaption text/p /div just float your divs left so they rest next to eachother. Cheers, Jeff __ 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] shorthand elements
On Mon, Sep 28, 2009 at 9:09 AM, T. R. Valentine trvalent...@gmail.comwrote: When using shorthand elements such as 'margin' or 'padding', the order is (IIRC) 2 values (top bottom) (left right) 4 values (top) (right) (bottom) (left) What about three values? Also, does anyone have a mnemonic to remember the order? -- T. R. Valentine Your friends will argue with you. Your enemies don't care. 'When I get a little money I buy books; and if any is left I buy food and clothes.' -- Erasmus __ 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/ When using three values if you leave the fourth undeclared it will inherit from the previous declaration. If that doesn't make sense think of it like this. You declare *padding: 10px 4px 0;* You have values of* 10px top, 4px right, 0px bottom* and the left padding will *inherit* from the declaration you made on the right, in this case 4px. The easiest way for me to remember is that it goes clockwise. But I don't have any trick other than that. Regards, Jeff __ 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] Mystery margin on Windows FF IE
On Tue, Sep 22, 2009 at 12:04 PM, Matt Fielding itzma...@gmail.com wrote: Hello all, So I've been battling with a problem for the past few hours. I went to show a peer a site I've been working on for an upcoming event of ours, and discovered that on our site ( http://gdg.uml.edu/lan/ ), and only when viewing it with Firefox or IE under Windows does this happen, there is a mysterious black margin that appears between the #navigation div and the #main div. They sit closely together on every other browser I've tested under every other major OS and there is no visual break. This isn't a make or break problem for me, but my OCD side really wants to know why this is happening. I've tried everything from setting explicit borders, margins, overflow: hidden, and whatever else I could think of for all the involved divs and elements with no success. Of course there's a chance I forgot a crucial one. If someone could shed some light on this annoying inconsistency, I'd greatly appreciate it. Thank you, Matt F. __ 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/ another option you could use is to float the ul and li's and add a little padding to your links. that spaces it out also. jeff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 z-index and flash
hey everyone,
i know i have seen things written on this before but i can't seem to find a
solution. i have a flash player and above it is the sitemast which contains
a search box. when the results pop out (absolute positioning) its container
is covered by the flash player in IE7. i'm sure IE6 too but we are
fortunately not supporting IE6. could someone point me in the right
direction?
i need to point out that the div which contains the flash player has
relative positioning with a z-index of 3 because there's a dark overlay that
dims the screen but we need the flash player to still be bright and visible.
so it's like this
.search-results { position: absolute; z-index: 9; }
.flash-container { position: relative; z-index: 3; }
unfortunately i can't give a link to the code because it's a private beta
and i don't have a separate server to post an example on. i know how
annoying that is but if anyone has any ideas or just some links to good
documentation i would really appreciate it.
thanks,
jeff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 z-index and flash
On Mon, Sep 21, 2009 at 11:12 AM, HallMarc Websites
m...@hallmarcwebsites.com wrote:
whoops wrong link sorry, just try this
Try This #1
Add this to the Flash embed code:
param name=wmode value=transparentAdd Coda CliphtmlTry This #2
Make sure the element that is supposed to be on top has positioning (fixed,
relative, or absolute) and a z-index value higher than the Flash object.
Thank you,
Marc Hall
HallMarc Websites
610.446.3346
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of jeffrey morin
Sent: Monday, September 21, 2009 10:35 AM
To: CSS-D
Subject: [css-d] IE7 z-index and flash
hey everyone,
i know i have seen things written on this before but i can't seem to
find a
solution. i have a flash player and above it is the sitemast which
contains
a search box. when the results pop out (absolute positioning) its
container
is covered by the flash player in IE7. i'm sure IE6 too but we are
fortunately not supporting IE6. could someone point me in the right
direction?
i need to point out that the div which contains the flash player has
relative positioning with a z-index of 3 because there's a dark overlay
that
dims the screen but we need the flash player to still be bright and
visible.
so it's like this
.search-results { position: absolute; z-index: 9; }
.flash-container { position: relative; z-index: 3; }
unfortunately i can't give a link to the code because it's a private
beta
and i don't have a separate server to post an example on. i know how
annoying that is but if anyone has any ideas or just some links to good
documentation i would really appreciate it.
thanks,
jeff
__
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/
__ Information from ESET Smart Security, version of virus
signature database 4443 (20090921) __
The message was checked by ESET Smart Security.
http://www.eset.com
__ Information from ESET Smart Security, version of virus signature
database 4443 (20090921) __
The message was checked by ESET Smart Security.
http://www.eset.com
thanks for the response. it turns out it isn't an issue with the
wmode=transparent. there are a bunch of different z-indexes that are
conflicting so now i'm just going through and trying to sort those out. it
seems as if i'm going to have to change ie's z-index depending on which
state the player is in so i'll have to use javascript to change that. so
unfortunately there doesn't seem to be a clean css fix. thanks for the
suggestions here!
jeff
__
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] floats and clears
hey everyone,
i have recently started working on debugging a site that has a lot of messy
styling. i keep running into the following declarations on many different
elements.
.example {
float:left;
clear:both;
}
i was always under the impression that if you floated your elements that
essentially would clear them also. is that not the case? any help in
understanding this would be great.
thanks,
jeff
__
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] floats and clears
On Fri, Sep 18, 2009 at 10:48 AM, Climis, Tim tcli...@indiana.edu wrote:
i was always under the impression that if you floated your elements that
essentially would clear them also. is that not the case? any help in
understanding this would be great.
That is not the case. Floating an element means that it will shrink to fit
its contents (or shrink to the width you gave it) and let other stuff come
up next to it. So, let's say I have 3 divs.
div id=div1 class=col
/div
div id=div2 class=col
/div
div id=div3 class=col
And I style them like this:
div.col {
float: left;
width: 33%;
}
Then I end up with a three column layout. The first div takes up a third
of the page. Then, since there's enough room for the second div up next to
the first one, it floats up to take up some space. And then, since there's
still room next to the second one, the third div also floats up.
But let's say I wanted div 3 not to float up, but to stay below div 1.
Then if I add
div#div3 {
clear: left;
}
Then it won't float up next to the left floated divs.
I could also do this instead (same html):
Div#div1 {float: right}
Div#div2 {float: right}
Div#div3 {float: right; clear: left}
I this case, div1 one will be on the far right side, div 2 will be floated
up next to div1 in the middle, and div three will be floated up next to div
2 on the left side.
But we told it to clear!
But we told it to clear LEFT. It's below all the things there are floated
left (because there aren't any. Everything is floated right). If we clear:
right, then it'll drop below divs 1 and 2 again.
Now, let's do clear: both.
Same HTML.
div#div1 {float: left}
div#div2 {float: right}
now div1 is on the left side, and div2 is on the right side, and div three
(since it's not floated) comes up between those two divs, and then continues
wrapping below them, like this:
content of div content of div3 div 2 content
1. content of content of div3
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear right, then it'll start below div 2, like this:
content of divdiv 2 content
1. content of
Div 1. Content of div 3 content of div3
Content of dive content of div 3
Content of div 3. Content of dive 3 content of d
If you set div3 to clear both, it'll start below both divs, like this:
content of divdiv 2 content
1. content of
Div 1.
Content of div 3. Content of dive 3 content of d
This is the same as clear: left in this case. But if div2 had more
content, then clear left would start below div1, and bump up against div2.
That was really long, but I think it's about as clear as I could make it.
---Tim
Tim,
thanks for the detailed explanation. this helps a lot and i can definitely
move forward with the debugging with a better grasp on how i'll need to use
my floats and clears.
Cheers,
Jeff
__
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] Unordered list Nav bar has space on end
On Wed, Sep 16, 2009 at 11:19 PM, Brian M. Curran br...@brianmcurran.comwrote: Hi, I'm building a test page at http://www.brianmcurran.com/LLindex.html and I have a problem with the Navigation bar. There is a little space on the end of the Nav bar that offsets it from the border of the main content. I however want it to line up flush with the border of the main content. There also seems to be a space between the two nav buttons, which I don't want either. Does someone know why this is happening? The CSS can be found here: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.brianmcurran.com%2FLLindex.htmlprofile=css21usermedium=allwarning=1lang=en Sincerely, Brian Curran www.brianmcurran.com __ you could also decrease the width of #underNav to 929px and subtract 1px from #leftSidebar. jeff __ 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] Amazing CSS
On Tue, Sep 15, 2009 at 2:55 PM, Chris Blake ch...@3pointdesign.com wrote: Hi, Can anyone tell me how this effect is done? http://www.mikematas.com/ I have just learnt how to do it in Illustrator, but in HTML and CSS!!?? TY, CB there's just a dropshadow image in the bottom of that div that holds the images. just inspect it with firebug and you'll see. jeff __ 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] styling tables
Hi everyone! I have to build a table that has rounded corners on the top. Does anyone have any good info on styling tables? I tried putting a background image for one corner on the thead and a repeating image on the td's but the thead image was being hidden. Any help would be great! Thanks, Jeff __ 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] Stylized Submit Button
On Tue, Sep 8, 2009 at 5:20 PM, Robbert van Andel robb...@vafam.com wrote:
We are working to make a nice looking search form. I'm playing around with
a textbox with rounded corners and submit button that has an image
extending
the border around the button. I'm having trouble aligning the button with
the input box. Below is the HTML and CSS used for the page (which can be
viewed at http://www.swimwebs.com/button/search.php).
!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=iso-8859-1 /
titleUntitled Document/title
style type=text/css
form.searchForm input {
height:25px;
margin:0;
}
#searchInput {
border:0;
background-image:url(input2.png);
background-repeat:no-repeat;
vertical-align:middle; *vertical-align:text-bottom;
padding:0;
margin:0;
padding-left:5px;
}
#searchButton {
background:transparent url(button2.png) no-repeat center top;
overflow:hidden;
height:25px;
width:32px;
border:0;
vertical-align:middle; *vertical-align:text-bottom;
}
/style
/head
body
form method=post action= class=searchForm
input type=text id=searchInput size=20 /input type=submit
value=Go id=searchButton /
/form
/body
/html
The vertical-align piece of the CSS worked to fix another alignmentment
issue that caused the button to appear 3 or 4 pixels above the input
button. Now the button appears great in most major browsers but IE6 and
IE7
show the input button one pixel below the input box. IE8 renders the form
correctly. Unfortunately, I have to make this work with IE7. I'm at a loss
as to how to fix this. Does anyone have any suggestions?
Thanks
i'm not seeing anything with and id of searchInput or searchButton. they
exist as classes but the searchButton doesn't have an image as a background.
Have you tried setting heights on the elements and floating them? I always
have luck lining up form elements when I use the float property. I find it
is more consistent than relying on the inline display of html elements
across all browsers.
Regards,
Jeff
__
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] Testing in IE
On Thu, Sep 3, 2009 at 11:58 AM, Ellen Heitman ellen.heit...@gmail.comwrote: My website looks fine in Safari and Firefox, but I am still having some alignment and other issues in Internet Explorer. I work on a Mac and don't have access to a PC so it's been really hard for me to troubleshoot this problem. Any tips? Any programs that let you view a site in IE on a Mac? Thanks! vmware fusion is what i use to run windows. Jeff __ 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] firefox ignoring the background-color
On Fri, Aug 28, 2009 at 10:25 AM, adam ambrus eidam...@gmail.com wrote: hello, i know that similar issues are being raised in recent days, however i am unable to find a solution to my problem. http://www.gjh.sk/~5ambrus/adif -the site the problem occurs, when you move the mouse to the middle item. all browsers pop-up the menu with black text, green background-color and white border. only firefox completely ignores the background color set to these very items; at any other place it shows the background-color set. i'm using safari 4 on mac and am not seeing the background you're talking about there. the popup menu seems to not work right when i hover over it too. it disappears when i go to mouse from tretia to druha. the architecture image also comes back when i go to the pop out menu causing the stvrta link to get covered. if you could help me with this issue, i would appreciate it very much :) also, if you had tipstricks how to make certain things better/simpler those advices are also very welcome :) thanks for any answers, Adam PS: i know that you are skilled and are able to view the source code of both the html page and the CSS, but for the sake of simplicity, http://www.gjh.sk/~5ambrus/adif/index_style.css :) PPS: also, do you know why the IEs 'see' the parent ul item and thus change back the image? this does not happen in FF or Opera. thx again __ 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/ Jeff __ 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] New site went live today
Hey Sarah, when i click the different parts of the people links nothing happens in Safari 4. Jeff On Fri, Aug 28, 2009 at 3:57 PM, Sarah Atkinson sarah.atkin...@cookmedical.com wrote: I have been working on this site for almost a year and today it when live ..YAY http://cookbiotech.com Check out my nice css people on the products page (rollover and click on them) __ 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] on to the nav
Greg if you are looking for a fairly simple nav with JavaScript then jQuery is a great resource to use. Their css selector support is great and it's a fun library to work with to really enhance the front-end of your sites. Best, Jeff On Fri, Aug 28, 2009 at 2:41 PM, Greg Wilker jer...@well.com wrote: Okay - does anyone have a resource, tutorial, etc. that will allow me to build the mocked-up top nav? http://www.gorillasuits.com/HTN/ I want to stay away from jquery, etc. if possible. TIA, Greg greg wilker | video/web producer __ 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] validating CSS
I was discussing some CSS techniques the other day and someone brought up a point of a certain fix that I use not validating in the CSS validator. I have never really been overly concerned with validating my stylesheets as long as the html was good. Is there a certain benefit to validating your CSS or is it mainly just for purity sake? Jeff __ 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] font-size using em
Hello CSSer's I have a question regarding the differences in font-size I see between Safari 3 and FF2. I am attempting to use the Blueprint CSS and when I customize my font sizes using em Safari seems to render the text slightly larger than FF2 (haven't checked any IE yet). Does anyone know what could be the cause of this? I have never quite been able to get this right but really don't want to use straight px to declare font-size. I am using a 15 mac book pro to develop. Any advice or personal experience with this would be great. Thanks! J __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-size using em
Thanks Philippe, What do you think of using percentages to declare fonts? Any better luck with that? I was involved in a development project once where they used all percentages and IE6 didn't like it but for this project I am not having to develop for ie6 at all (joy oh joy!) On Wed, Jul 9, 2008 at 10:26 AM, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On Jul 9, 2008, at 11:04 PM, jeffrey morin wrote: I have a question regarding the differences in font-size I see between Safari 3 and FF2. I am attempting to use the Blueprint CSS and when I customize my font sizes using em Safari seems to render the text slightly larger than FF2 (haven't checked any IE yet). Does anyone know what could be the cause of this? I have never quite been able to get this right but really don't want to use straight px to declare font-size. I am using a 15 mac book pro to develop. Any advice or personal experience with this would be great. Thanks! Yes it happens. Blame the old QuickDraw technology used by Fx 2 (Mac)… Fx3 (Mac) renders text with Atsui, the same way as WebKit does. It is not the only factor: differences in how rendering engines round off to the nearest pixels also play a role and differences in subpixel smoothing. For some fonts, Safari 'cheats' a little bit, and kinda uses a hack to match the font-metrics of Times, Helvetica, Courier,... to match their counterparts on Windows (Times New Roman, Arial, Courier New,...) – it is not limited to those 3 fonts. And there are some slight differences between 10.4 and 10.5 as well. Most of the time you won't notice them though. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Safari reading IE comments
Hi everyone, Has anyone ever come across a case where Safari will actually read what is in your IE conditional comments? i have never seen this before but am getting that now. IE conditionals are being used to deliver certain jsp files to certain versions but safari is just treating it like the comment isn't there. WEIRD! if anyone has had something like this happen and has any idea what's going on please email me. i'm on digest so you can just email me directly. Thanks so much Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] tiling png ie6
Hi All, so everywhere i read it tells me that you cannot having tiling background .png images in IE6. i messed around with this for a while and i ended up getting it to work and was wondering if this is really possible or if it's just a fluke. here is a link to the page http://jpmwebdev.com/beta/png_test/png_test.html it's working on my machine for IE6 and wanted to know if it would work on other people's machines. please check it out if you have a minute. maybe it's common knowledge that this tiling .png backgrounds are possible and i just don't know it? any feedback would be greatly appreciated. thanks, Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] tiling png ie6 followup
I just realized that what is causing the appearance of tiling is the scale property of the ie filter. so, sorry for the pointless question before Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS crashes Mac Firefox
Any thoughts? -Tim it's fine on my imac. i have ff 2.0.0.6 also with the web dev toolbar jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] display:inline necessary with float: left/right ???
On 6/15/07, Jason Chan [EMAIL PROTECTED] wrote:
hey all,
Is it just me or is display:inline necessary when floating with columns bc
the double margin bug in IE6.
I ask this because i have seen many sites, that do not require the display
inline for it to appear properly in IE and yet still float columns:
ie.
#mid-one, #bottom-one {
float: left;
width: 430px;
margin-right: 40px;
}
#mid-two, #bottom-two {
float: left;
width: 220px;
}
I on the other hand will have to enter display: inline (as shown below for
it to work)
#mid-one, #bottom-one {
float: left;
display: inline;
width: 430px;
margin-right: 40px;
}
#mid-two, #bottom-two {
float: left;
display: inline;
width: 220px;
}
I guess my main question is...
Is there something that im not reading from this person's code that
prevents
the double margin and not need the display: inline property???
do they have a declaration in a seperate style sheet that adds display:
inline to all divs maybe? i have seen set ups like that so that it will just
add it in advance. i've also seen it with height: 1% applied to general
things like div, or ul. that is the only thing i can think of because i
always end up with the float bug as well
Jeff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hasLayout issue in IE (6/7, at least)
On 6/15/07, Sasha Gerrand [EMAIL PROTECTED] wrote: Hi, I'm having an issue with the way the CSS is being rendered on a page[1] I am designing. For some reason, it looks like the DIV that is the container for the text, nested within the #content DIV is extending and covering the side navigation with a white box. Can anyone suggest what a good fix may be for this? [1] http://abs.austbrokers.com.au:8080/home -- Cheers, Sasha __ this is looking fine on my xp laptop. there is some shifting going on between the different browsers, like the top nav spacing differs for expample, but i'm not getting the white box __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mac site check please
On 6/11/07, Brian Cummiskey [EMAIL PROTECTED] wrote: Richard Grevers wrote: um, your image replacement appears to be broken in Opera (checked in 9.21 on Windows) - I see both the logo and the H1 text overlapping. Richard, I have changed the technique. Can you visit again and let me know if it is resolved now? http://tinyurl.com/2bnwgu Felix Miata wrote: Looks exactly the same live in Safari 1.3 as when submitted to http://www.browsrcamp.com/. Pretty magazine page. Nice to look at. Can't read most of it though, at least not without 2 zoom steps. Felix, I agree the fonts are a little small. Unfortunately, they paid big bucks to some designer and my role is to code it to specs from the designer's html (aka dreamweaver table code). I have mentioned this to them already, but they seem pretty set on the fonts. I upped it from 76.1% to 80.1%. Just a hair bigger and hardly noticeable, but may be the middle ground between making the client happy and having a usable site. Plus, this also gives one additional -1 in font control now (-2 now, before only -1 in font control in FF) You might visit http://juicystudio.com/services/colourcontrast.php and paste in #808285. Again, same deal. That's the color the designer chose and the client approved upon. I myself am colorblind and I do find it hard to read. With the help of that link, however, I have some backing to send back to them to let them know that it doesn't work. Thanks. David Laakso wrote: Nice visual, Brian. Thanks. :) Unfortunately, I can't take credit for it. In Safari, Camino , and WebKit she holds at +2 without a problem. Can you try this again now that i bumped the base font a couple percent? It holds +2 in FF for me still, so i'm hoping it holds across to Safari as well. In general, bumping the contrast could be welcome by some users, and the image-text at the bottom of the left column is tough to read (I'm at 1680). Agreed on the image text. I'm most likely going to re-do that section and make the text of the image actually text. Thanks all for the help and suggestions! -Brian it's breaking in ff and safari for me also. plus 2 for ff and plus 3 for safari drops top menu items down. i changed the wrapper size to em instead of px and it scaled much nicer __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS sprites / Tabs
On 6/11/07, cssd [EMAIL PROTECTED] wrote: What's the most efficient way of doing image based tabs? First thing that comes to my mind are CSS sprites: http://alistapart.com/articles/sprites However, there are two approaches and I am not sure which one is best: 1. using one image for all the tab states 2. using one image per tab that contains all states for particular tab In either case it work but I am afraid that in case #1 the image will slow down the page load - on the other hand loading 9 images for each of the tab is not fast either... Any ideas? Thanks the way i usually to do it is to use one background image with multiple states that you can just have shift around depending on the users actions. in my experience background images don't take long to load so you won't see that little flicker you see if you're swapping out an image hope that helps Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] pleeeeease help.....png problems
i have looked at the following site forever now and still cannot get this to work. http://www.twinhelix.com/css/iepngfix/ can someone please tell me what i am doing wrong. i have been at this forever! my site is www.bioneutrix.com here is the htc file: http://bioneutrix.com/css/iepngfix.htc the css: http://bioneutrix.com/css/global.css (the fix is at the bottom) i have no idea if i edited it correctly, although it looks like i have given some examples i've seen. i have the htc file and the blank gif in the same folder as my stylehseet and it's just not working for me. i will forever be in debt to whoever can explain what i'm doing wrong here. Thank you Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] pleeeeease help.....png problems
On 6/7/07, Dejan Kozina [EMAIL PROTECTED] wrote: Your web server is sending out iepngfix.htc with a MIME type of text/plain. IE since v. 6 SP1 wants it to be sent as text/x-component. Put a .htaccess file in your css folder with this line in it: AddType text/x-component .htc djn jeffrey morin wrote: i have looked at the following site forever now and still cannot get this to work. http://www.twinhelix.com/css/iepngfix/ can someone please tell me what i am doing wrong. i have been at this forever! my site is www.bioneutrix.com here is the htc file: http://bioneutrix.com/css/iepngfix.htc somehow it is working! still investigating exactly how that happened. but on refresh it puts an outline around the image and displays the alt text as if the image can't be found. why does this happen? sorry for the annoyance __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] pleeeeease help.....png problems
png transparency has now stopped working. i didn't even do anything to it __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] pleeeeease help.....png problems
On 6/7/07, Lori Lay [EMAIL PROTECTED] wrote: jeffrey morin wrote: i have looked at the following site forever now and still cannot get this to work. http://www.twinhelix.com/css/iepngfix/ Well look closer because you haven't followed the instructions. Pardon the terse tone, but we're not here to write your code for you... as much as i love these kinds of witty comments after a long day, i had originally tried it with a class in my stylesheet but removed it for a javascript fix, you must have seen the latter. so I'll excuse your tardiness just this once Lori. anyway, i have the .htc version there on the homepage right now and it is not working. blank gif, htc file are both in my css folder along with the style sheets. www.bioneutrix.com i have found multiple sites that say you need a .htaccess file which is why i was asking more about that. so if i am in fact doing this wrong then i just don't grasp this simple concept. my apologies to anyone thinking i was trying to get them to write my code. Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] pleeeeease help.....png problems
The comment wasn't meant to be witty. You still haven't followed the
instructions. Look at the demo page! Line one in the CSS!! It starts
with USAGE in capital letters. I've seen your posts over the last few
months and I was noting a trend.
Lori
at the top of my global.css it says
.index #content #header img.logo { behavior: url(iepngfix.htc) }
i've tried just .logo as well as img.logo
i don't know why you don't see it
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] pleeeeease help.....png problems
On 6/7/07, Dejan Kozina [EMAIL PROTECTED] wrote:
Here is the research. Mordor itself says so:
http://support.microsoft.com/kb/306231
The plain word translation is that IE (on WinXP with SP2, to be precise)
won't load a .htc file unless it's served with the correct MIME type of
text/x-component . The Apache web server doesn't come with this
preconfigured out of the box; you have to put it there yourself, either
into the main configuration file httpd.conf (if you know what are you
doing and if you have access to it at all, which almost always isn't the
case on a shared server) or into a plain text file named exactly
'.htaccess' in the same directory where the .htc is served from. Done
that, you don't have to link to it: Apache itself will read that file
before serving any content from the directory.
There is one other thing that can go wrong with .htc stuff: while IE
does respect in general the specifications stating that the path to
files referred to in a stylesheet is relative to the stylesheet itself
(this means: if you have a css stylesheet in /css/global.css with a rule
like {background-image: url(image.gif);} the browser must get image.gif
from the css folder), when it comes to .htc files (maybe others too, but
I haven't noticed yet) IE makes a mess of it and looks for them all over
the place, mostly (not always) treating the path as relative to the html
file (who said IE is boring?). The simplest solution is to use the full
URL to point to the .htc (eg.: behaviour:
url(http://bioneutrix.com/css/iepngfix.htc); ).
That said, I noticed that you kinda gave up on the htc going rather the
javascript way. As I see it, the conditional comment should load
javascript/pngfix.js for versions of IE lower than 7, while the script
itself runs only for versions of IE higher or equal to 5.5 rewriting the
img element with a span with display: inline-block and the rest copied
from the original image with an AlphaImageLoader filter applied. Not the
simplest of solutions to debug, I guess.
Right now your problem in IE6 is that the javascript isn't loaded at
all, as far as I can see. I suspect the culprit is the conditional
comment - you wrote on line 14 !--[if lt IE 7.] : notice the dot after
the version number, stuff like this can throw IE off its tracks...
djn
thank you very much for your help. i will read more into it before asking
any other questions. much appreciated
Jeff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie6 pushing down images
i have a slideshow and ie6 is pushing it way down. does anyone know if this is this css or javascript problem? www.bioneutrix.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie6 pushing down everything
On 5/21/07, Melianor [EMAIL PROTECTED] wrote: Hi Jeff, 1. Images are not block elements, so applying float to them will trigger funny experiences with some browsers. So either add display: block to the css or build a wrapper div around the images. 2. Your clearing div is causing the space problem, since IE will reserve some space inside that div, due to default line-height, font-size and so on and even some default height, added by the browser. So reduce those to 0 or 1px, or something similiar or you can also add a !-- -- comment inside the div to counter the problem. So that IE will know, hey there is really no content inside this div, so i don't need to set any default values. regards, Jens hi jens, thanks for looking at my page. i don't quite get what you're saying though. the haslayout is applied to all of the divs via the style in the head of the document. when i remove it the problem is fixed, however, due to the CMS that the company is using that embedded style has to be there. i also tried adding height: 0; to all clearing divs to no solution. is there a way to remove that has layout from things? the images aren't floating, they are wrapped in a div which is floating right. so i'm stumped! ie6 is my enemy! Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie6 pushing down everything
hi everyone, http://melissagerstein.com/tests/cthink/latest/template-2.html there are 2 problems that i see. in ie6 everything under the header is getting pushed down. i have looked at it for hours and cannot figure out why it's getting pushed down. even ie7 is working fine. please help! the other is that on the right side the news text does not have the proper spacing under the search bar. it is doing this in ie6 and ie7. all of the other spans are find. i am guessing it has something to do with the search bar floating left but i tried to apply clear: both to the span and it didn't do anything. i can wrap it in a p but then it throws it off in firefox. any ideas? Thanks so much! Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ul two rows same markup
On 5/16/07, cssd [EMAIL PROTECTED] wrote: I would like to know if it's possible to create two rows using the following markup (without clearing divs) and have them centered (both rows)within a div. ul id=rows li ul lia href=#First Row/a/li lia href=#First Row/a/li lia href=#First Row/a/li /ul /li li ul lia href=#Second Row/a/li lia href=#Second Row/a/li lia href=#Second Row/a/li /ul /li /ul Output First Row | First Row | First Row Second Row | Second Row | Second Row __ i made this and the code is in the head of the page for you to view. i guess spacing would be your only obstacle http://melissagerstein.com/tests/rows.htm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] It's all gone wrong and I don't know what I have done! =( Please Help
On 5/15/07, Christopher Blake [EMAIL PROTECTED] wrote: Hi all, I have heard a few things that got me worried so tested my website again; http://browsershots.org/screenshots/db0fbcf0a48e237c3613e529d81432d1/ This is something that has only started to happen recently and I can't think of what changes might have caused this. http://www.3pointdesign.com/index.html http://www.3pointdesign.com/styles/one.css I am limited to the testing I can do: Safari 2.0.4 Firefox mozilla 1.5.0.9 Webkit (safari) Netscape 7.2 Opera 9.20 Internet explorer 5.2 all mac browsers. As you can see my problem is with Internet Explorer. Are there any mac users that no a way that i can test on I.e without having to wait 2 hrs for browser shots to take pics before I see whether my changes have worked? I do not have an intel mac yet so cannot use parallel and I am not interested in a pc emulator. Thank you in advance for any help. just from a quick glance it looks like your #rightcontainer is having the margin-right doubled pushing things down. try to add display: inline; to fix an IE double margin float bug. i always try that first and see if it is the problem hope it solves your issue Jeff : __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] download ie 5.2 for Mac
hi all, i just got a new imac and they don't come with ie any longer. does anyone know where to find it? i have looked for a while and haven't had any luck. i know it's old but i still would like to test my css on it. thanks in advance Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] download ie 5.2 for Mac
Thanks guys. I appreciate the help Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background image not aligning
Hi Jeff,
Add the following to your CSS:
#secondaryNav li a {
display:block;
}
Hey Mauricio,
That worked perfectly. Thanks for the help!
Jeff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page check please
i'm seeing bios pop up but no images besides the first in ie6 Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Syling Hyperlinks question
On 5/2/07, Scott Schulthess [EMAIL PROTECTED] wrote:
So this is some fairly simple link styling
a
{
border-bottom:1px solid #eee;
color:#d17e62;
TEXT-DECORATION: none;
}
a:visited
{
border-bottom:1px solid #eee;
color:#9d604c;
text-decoration:none;
}
a:hover
{
background-color:#da;
border-bottom:1px solid #ddd;
color:#c30;
text-decoration:none;
}
My question is, I want to apply this to all the normal links that are
alone in the middle of text and stuff, but I don't want this to apply to
my
Site naviation and so forth. Suggestions?
-Scott
__
i usually define the area and then style the links that way. for
example if i have a 2 column layout with navigation in the left column
i will define the navigation like #navigation a {styles}
then say my 2nd column is #contentArea just put #contentArea a {styles}
and what not. that way you define both seperately
good luck
Jeff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background image not aligning
hey everyone, i am working on a vertical nav bar that uses images along with background images to swap on a:hover. the problem is that i have the background image on position left top but as you can see it is far from top :-/ if i change the background image over to the li it aligns perfectly, but then the hover doesn't work. can anyone help me with this? i can't imagine what is going on with this, i've never had this problem come up before. guessing it has something to do with using an image for the link though? link: http://melissagerstein.com/tests/bg_test/test.htm Thanks in advance Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Center div pushing down in IE6
On 5/1/07, GypsiiRose Baptiste [EMAIL PROTECTED] wrote: The test site is here: http://2ndharvest.net/SYL/ the style sheet is here: http://2ndharvest.net/SYL/styles/syl_style.css I don't have access to very many OS and browser versions, but IE7 and Firefox on Mac and PC seem to be fine. IE6 pushes the #center content way down the page. i don't have ie6 to see the problem but it sounds like the double margiin float bug. try adding display: inline; to the rules for the div holding your left navigation i hope this helps Cheers, Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie6 trouble?
can someone look at this in ie6 for me? i don't have it on my machine and it would be great if anyone could tell me if there are any big issues that they're seeing http://ringtonebasement.com/ pages in question are the homepage, and the four links at the bottom of that page. i'm sure there are going to be problems, my hope is that they aren't major problems :-) Thanks! Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] download ie6
anyone know how i can ie6 and get rid of ie7? with the last windows update it installed ie7 and i don't want it. is this possible? Thanks, Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] download ie6
On 4/25/07, Peter Barney [EMAIL PROTECTED] wrote: jeffrey morin wrote: anyone know how i can ie6 and get rid of ie7? with the last windows update it installed ie7 and i don't want it. is this possible? If you're designing sites, it might be an even better idea to keep ie7, but then download stand-alone editions of the other IE versions. You can find them at http://browsers.evolt.org/?ie/32bit/standalone This will allow you to test your sites in IE7, IE6, IE5.5, etc. And if you wish, you can even make IE6 your default browser while continuing to use IE7 for development testing. That's interesting. I didn't even know you could do such a thing. I am going to look into doing that. Thanks everyone for your help on this. This list is great! Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Links on background images
On 4/20/07, Austin, Darrel [EMAIL PROTECTED] wrote: I have created a simple website where the logo is inserted as a background image in the CSS. However, I would like the logo to be linked to the index page (so that the user can click it). Is there any way to do that with the background image (in other words, is it possible, in any way at all, to have links embedded in the CSS?)? No. CSS is style, not content. Most folks would probably argue that a logo is content, and, therefore, really should be part of the content rather than a decorative background image. -Darrel I don't know too much on this subject but couldn't an image map be used? it would kind of be pointless for one link but it is possible right? Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help - ie7 leaving large gap in middle of page
At the moment I don't see a 'huge' gap, but rather a stripe where there is no background. That's normal: you have a background image on #contentLingo set no-repeat, and the amount of contents (paragraphs) that you have inside is longer than the image's height. That also depends on text-size. Try changing font-size and you will see this stripe change its height. If this is the problem (but from your description I'm not sure) you will have to restructure a bit where you put your backgrounds... hth, Bruno -- Bruno Fassino http://brunildo.org/test Thanks for taking a look Bruno, It ended up being the default margin that IE7 put on the paragraphs. I just had to set the margins in the stylesheet and it is is looking ok now. Thanks again! Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font smoothing
On 4/20/07, Lori Lay [EMAIL PROTECTED] wrote: DJS wrote: Italic text: FF Win doesn't smooth the text like IE Win does. (!?) Dare I say, the text looks better in IE Win, like it does on my Mac. I don't think there's anything you can do in the browser. Font smoothing is called the ClearType Tuning tool in Windows and it wasn't included automatically in IE 6 or Win XP. It is included automatically with IE 7. I guess it's one of those, oh well things. I try hard enough to make my site standard compliant, this is trivial. It will end up bugging me enough where I'll add it to the header background image and just display:none the real text. sigh I wonder if defining a font family for this would help. The first font in the family would be the ideal font for the Mac, and if it's something that's not available on Windows, then the second font in the family would be used. You might be able to find something that doesn't look bad on Windows. Don't know, just a wild stab out there... L - DJS you could even go as far as using ie conditional comments to deliver text that would look better on a pc than a mac Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font smoothing
Well, it was looking good in IE7 win, just FF win. It's the culprit. I was using georgia, which I thought I understood as a font that did have a real italic version. I've already exchanged it with a background graphic, I'll get back to it later. Thanks, Don that's right. my mistake. i have gotten so used to having to tell IE win special things that i spaced out there Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering into the browser
On 4/19/07, Dave Pierce [EMAIL PROTECTED] wrote: Hello Gurus of Great Graphics, Can someone take a look at this page (I finally got to do one from scratch instead of updating old stuff! ;-) http:www.pierceartanddesign.com/testfiles/ and perhaps point me in the right direction to get the page centered into the browser window? you only need margin: 0 auto; not margin: 0 auto auto 0; __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sliding doors tabs not working
On 4/19/07, Dave M G [EMAIL PROTECTED] wrote:
CSS-d,
I may have missed something obvious, but I've gone over the tutorial here:
http://alistapart.com/articles/slidingdoors/
... and when I get to the Finishing Touches part, somehow my tabs
aren't behaving as the example tabs are.
My site is here:
http://formever.org
And the relevant CSS is:
.mainNavigation li{
height:30px;
display:inline;
list-style-image:none;
text-align:center;
float:left;
background:url(tabright.png) no-repeat right top;
margin:0;
padding:0 0 0 10px;
}
.mainNavigation a{
display:block;
background:url(tableft.png) no-repeat left top;
padding:5px 20px 4px 10px;
text-decoration:none;
color: black;
}
Any advice about where I messed up would be most appreciated.
Hi Dave,
if you zero down the padding on the mainNavigation li it will
bring the links together. if you give the tableft.png a background color the
same that you will be using, in this case white, it will cover up the
tabright.png. the transparency of the png is what causes problems for you.
hope that helps. i got that to work on ff for my mac.
Jeff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Image flash on initial hover
On 4/19/07, rollandburn [EMAIL PROTECTED] wrote: Hi everybody, just wondering if anyone can shed light on why the background image on the LAWYERS click here to JOIN NOW! link flashes blank for a second upon initial hover on this site http://mrrepublic.aphexhosting.com/MRRE_for_Lawyers/ Thanks for checking Rolland Hi Rolland, It does that because it has to go to the server to get the hover image. the way you set up the top nav works best because it just moves the position of the background instead of calling a completely different image. Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help - ie7 leaving large gap in middle of page
hi i am working on this site and i can't figure out why ie7 (probably 6 too but i don't have ie6 to test at home) is putting the space in the middle. if you scroll a little you will see a huge gap. i tried to zero the bottom margin on the paragraph above the space but it still leaves some gap and then has odd paragraph spacing. i even tried closing the content div and putting the background div under it and still had a gap. can someone please take a look and help me out with this. it's been driving me nutty http://melissagerstein.com/tests/rtb/ringtone-lingo.htm thanks in advance if you can help Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] yet another drop down menu
On 4/19/07, Roger Keays [EMAIL PROTECTED] wrote: Additionally, I think IE 7 lets you do :hover rules on li tags, so this might all be needed only if you are targetting IE 6 on Win. it does seem buggy. it may be just a spacing issue but it currently will not allow scrolling over all of dropdown/pop out menu items. i am able to get to the first link but if i try to get to the next one the gap seems to cause the menu to collapse Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] This breaks completely in IE6 - request for help
On 4/18/07, Rachel Mawhood [EMAIL PROTECTED] wrote: I have validated both the css and the html, and although this displays as intended in Firefox and an old copy of Netscape, it completely breaks in MSIE 6 (old), all on a pc. http://www.jonathanlouth.co.uk/development/key-jla.htm I am guessing that it is because MSIE interprets margin differently but I really don't know where to start with hacking it, before I do the other pages. I haven't tested it yet in MSIE 7. Thanks v. much in advance. Rachel looks like the double margin float bug. it does break in ie7 as well. try adding display inline to the first container floating left. hope that works http://www.positioniseverything.net/explorer/doubled-margin.html Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie6 png nightmare
hello again,
i was wondering if anyone knows what is going on with this. i have been
reading about png support in ie6 and am trying to not use javascript to fix
it. i have my img src pointing to a blank gif like i was told and have the
following in my css:
* html #logo{
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../logo.png,
sizingMethod=scale);
}
this points to the png that i want. now it comes up on screen with the
correct dimensions when i view image dimensions but the image is completely
missing. does anyone know what is going on here?
Thanks for any help in advance! this is an annoying issue
Jeff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie6 png nightmare
Yes I ran into this as well. It turns out that the path for the image loader is relative to the /page/ that the image is being displayed in - not the CSS file. I had to move this into a conditional comment on each page because I don't have all my pages in one directory, or even at the same level (so I couldn't consistently use ../location-of-image). Drove me nuts for a while too :-) Lori i am not sure i understand. do i have to move both the png and the blank gif into the same folder as my css file then? Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie6 png nightmare
No. It's just that the path you specify in the filter has to work for all your pages. Let's say you have the following structure: /css/styles.css /images/logo.png index.html /pages/books.html Then, for the image to be loaded into your index.html page, the path would be images/logo.png - even though you are specifying this in the CSS file. But for books.html, the path would be ../images/logo.png. See what I mean? If you have all your pages in a directory, like pages, then you could set the path to ../images/logo.png and it will work for all your pages. If you have the index page at the root, like I show above, then perhaps you could use a conditional comment in just the index page to load the image. I used conditional comments in all my pages because I had several nesting levels. Go to http://beta.goethebooks.com and look at the source. You can also verify your syntax. Note: the site is a work in progress :-) Lori thanks. i like how you have done that. i am going to have to look at this more later but i suspect there is something wrong with my syntax as well. Thanks again! Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] yet another drop down menu
hi everyone, sorry in advance for the stupid questions but i am not grasping how to get the drop down menu to work in ie. here is my link: http://bioneutrix.com/about_bioneutrix.htm the javascript is in the head section and i got that from this article: http://alistapart.com/articles/horizdropdowns unfortunately i can't get it to work right. the drop down will appear but i can't hover over it and navigate through the links. can someone please help me on this it's driving me nuts. Thanks in advance, Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] yet another drop down menu
On 4/17/07, Ian Young [EMAIL PROTECTED] wrote: To: CSS Subject: [css-d] yet another drop down menu hi everyone, sorry in advance for the stupid questions but i am not grasping how to get the drop down menu to work in ie. here is my link: http://bioneutrix.com/about_bioneutrix.htm the javascript is in the head section and i got that from this article: http://alistapart.com/articles/horizdropdowns unfortunately i can't get it to work right. the drop down will appear but i can't hover over it and navigate through the links. can someone please help me on this it's driving me nuts. Know the feeling. dropdowns are a pin in the proverbial. Couple of thnings strike me about this. The javascript has not been made conditional for IE6 which means that all the browsers will implement it. The list breaks in IE6 (probably a padding/margin/width thing). However, why reinvent the wheel. Stu Nichols has all the stuff you need. http://www.cssplay.co.uk/menus/drop_examples.html Good luck Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.446 / Virus Database: 269.5.1/764 - Release Date: 17/04/2007 04:43 thanks Ian, i will read this page. it looks very detailed which is exactly what i need Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 Float Issue
On 4/13/07, Jeff Chastain [EMAIL PROTECTED] wrote:
Does anybody have any ideas what is happening here? This is really
driving
me crazy trying to figure this out as it does not seem to fit with any of
the usual IE 'features'.
Thanks
-- Jeff
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 12, 2007 9:57 AM
To: [EMAIL PROTECTED]
Subject: IE 6 Float Issue
Well, IE 6 is at it again for me. I have a layout from a client that is
pixel tight and while I have it working in IE 7 and FireFox, IE 6 is
causing
issues. I have broken it down to the most basic issue which is one block
being floated to the left and the main column having a left margin equal
to
the floated block width plus one, which should cause there to be a 1px gap
between the two. The following code works just fine in IE 7 and FireFox,
but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall
apart. Can anybody offer any suggestions here?
style type=text/css
#block1 {
float: left;
height: 175px;
width: 179px;
}
#block2 {
height: 175px;
margin-left: 180px;
}
/style
div id=block1 style=background-color: #00c;Block 1/div
div id=block2 style=background-color: #00c;Block 2/div
Thanks
-- Jeff
what about just floating the second block right instead of having the
margin. unless i am missing the point on this?
Jeff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check
Thank you much for the help. It's coming along
Jeff
On 4/5/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
jeffrey morin wrote:
www.melissagerstein.com/tests/akon/akon.htm
The addition of...
ul#secondaryNav {display: inline;}
...will fix the 'margin doubling on floats' bug in IE6, and make the
columns line up as intended in that browser.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] site check
hi everyone, i'm not too experienced with 3 column layouts. could you be so kind as to let me know if this is acceptable. it hasn't been debugged yet but works ok in ff and ie7. haven't checked anything else yet. thanks Jeff www.melissagerstein.com/tests/akon/akon.htm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
