Re: [css-d] media queries following prior rules
> On 11 Jul 2016, at 18:13, John J <cr8...@gmail.com> wrote: > > At the link below, the name, email, subject fields don't appear to be > obeying rules governing width as in the previous media breaks.. > > at 360 and 320, those fields exceed the width of their parent, rather than > respecting padding set prior..maybe I'm missing something..if I have my > rules set up correctly, the css should behave a certain way until told > differently in the next media query, right? > > Thank you for any insight about this! > > John John, I think it's your box-sizing rule. For some reason it's specified as 'inherit' in the reset. If you change that to 'border-box' your layout may work as intended. Peter __ css-discuss [css-d@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] 508 compliance
Hi Karl, I'm not sure what you mean by 'hard coded or inline'. Make a test page and place an image: The image will fill 100% of its container's width. It makes no difference if the css is inline, in the head or in an external sheet. Best regards, Peter - > On 14 Apr 2016, at 23:03, Karl DeSaulniers <k...@designdrumm.com> wrote: > > I don't believe this is correct. Widths and heights hard coded or inline > trump external. > Unless I missed something along the way. (: )) > > Best, > Karl DeSaulniers > > > >> On Apr 14, 2016, at 2:24 PM, "Peter H." <li...@artworkers.net> wrote: >> >> If you specify any img width in the css then the html widths will have no >> effect. __ css-discuss [css-d@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] 508 compliance
If you specify any img width in the css then the html widths will have no effect. But beware that if you haven't specified any heights, then the html 'height' may cause havoc with your layout. In the css, even height:auto; is sufficient to overide the html. Maybe 508 compliance requires image dimensions, I don't know, but if it doesn't then I don't see the point of adding width and height to the html. Regards, Peter - > On 14 Apr 2016, at 21:04, Tom Livingston <tom...@gmail.com> wrote: > > List, > > Somewhat CSS related, I have a question about image dimensions. After > checking a 508 compliance check, one thing flagged was not having width and > height for images hard coded in the html. For responsive purposes, I thought > it was best not to code your dimensions in the html and let css/responsive > images do their thing. Not so? > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com __ css-discuss [css-d@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] Automatic Reply: Re: css-d Digest, Vol 147, Issue 2
I will be out of the office on leave until Monday 23rd February with no access to email or calls. If your query is urgent please use the contact channels on our website. Otherwise, I will respond to your query as soon as possible. -- Best Wishes Pete Downes T: 01424 720329 E: pe...@alphastate.co.uk __ css-discuss [css-d@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] rendering of Open Sans on my project site vs. Typekit
El 31/12/2014, a las 19:44, Debbie Campbell escribió: Looking at the 700-weight (bold) Open Sans in the ul in this page (starting with Drill Pad Construction), can you see how the lowercase a's have the counter at the top filled in? I'm looking in Chrome, FF, IE11 on Windows 7: http://www.oilfield-construction.com/NEW_SWD/ If I look at this example on Typekit though, in the same browsers, the lowercase a counters never close up: https://typekit.com/fonts/open-sans I though it might be something in my normalize.css but disabling it doesn't change the appearance of the a's. Can someone point out what's wrong in my site? If screenshots would help please let me know. I don't see any difference with page at default 100% or zoomed to maximum, and the lowercase 'a' looks fine and correct. Mac 10.6.8, FF v34.0.8 and iPad with retina, iOS 7.1.2 Perhaps it's an OS or graphics rendering thang rather than a problem with your code. Peter H. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Fwd: Grids: what's all the fuss ?
De: Tim Dawson t...@ramasaig.com Fecha: 11 de agosto de 2014 12:25:24 GMT+02:00 Para: css-d@lists.css-discuss.org Asunto: Re: [css-d] Grids: what's all the fuss ? On 11/08/2014 09:43, MiB wrote: 11 aug 2014 kl. 10:02 skrev Tim Dawson t...@ramasaig.com: what I'd do with an eight or twelve column design (or why I'd need it, really). One word: Flexibility with contained order. But I think I can already do that with floated divs, which are even more flexible since they can be any % of the container width (must add to 100%, of course). 'Contained order' suggests a bit more, but only that things should line up vertically and not be all over the place ? (with which I'd agree). So I'd have (say) a 60% div and a 40% div (58.33% and 41.67% if I must be in twelfths). I can't see why I need an 8.33% div. In short, I'm still missing the point. The best design book for grids IMHO is Ordering Disorder: Grid Principles for Web Design” by Khoi Vinh (2010 Voices That Matter). It’s totally wonderful and in my opinion contains timeless principles. Better than any article on the subject. Thanks for the reference. Mixed reviews on Amazon, but I respect books from 'Voices that Matter' (and already have several). Regards, Tim Dawson __ css-discuss [css-d@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/ Grids give your site a visual consistency, which in my book is a good thing. 12-column grids are handy if you don't know the final design - they're very flexible in that you can use as a base for 2-, 3-, 4-, or 6- column pages. Usually they're used for templates where the creator of the grid cannot know the final layout use. But if you do know the page layout then it doesn't seem worth the complication of basing it on a 12-column grid - you can simply, as you say, create the grid you need directly. Peter __ css-discuss [css-d@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] Mega drop down menu
Am new to mailing list and web development too. Could anyone link to CSS material for creating mega drop down menu using CSS, right from first principle ? regards//Peter __ css-discuss [css-d@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] Do modern mobile browsers deliberately ignore font size?
On a Motorola G phone with Android Kitkat the p text is quite large and the table text is tiny. On an iPhone 4 all the text is the same size, and tiny. Peter El 13/03/2014, a las 23:31, Ezequiel Garzón escribió: Thanks again for your reply. Now I'm really beginning to second-guess myself! And here I was so convinced it had something to do with the font boosting and inflation John Mellor refers to here [1]. I will ask tomorrow a couple of friends to let me use their cell phones... I'm beginning to fear this is a bug specific to my Galaxy Note II... Thanks once more, and goodnight from Spain. __ css-discuss [css-d@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] Will the unsemantic HTML elements B and I be soon phased out?
I've always had a problem understanding why em and strong are supposedly more semantic than i and b. Italics don't necessarily indicate emphasis and bold doesn't necessarily indicate importance. Often they're nods to traditional comprehension of things or to the organisation of a text so as to aid understanding. In fact, if you ask me, the instinctive, natural distinction between 'emphasis' and 'strong' is fuzzy, despite html5's attempt to define it. On the other hand, if i plainly means 'italic', and results in an italic font being displayed, then that to me is straightforward and unambiguous and no messing about. When I read it I can understand it however I prefer and according to the context. Same goes for 'bold'. Of course if you style i in the css to produce a different, non-italic style then, yes, that's very unsemantic. But seeing as i and b will be legit for the foreseeable future I'll prefer them over em and strong. They're quicker to key, too. Peter H. __ css-discuss [css-d@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] Will the unsemantic HTML elements B and I be soon phased out?
El 17/02/2014, a las 11:01, Philip Taylor escribió: Peter H. wrote: I've always had a problem understanding why em and strong are supposedly more semantic than i and b. Because em means emphasised and strong means strongly emphasised (semantic, saying nothing about how they will be rendered) whilst i means set in italics and b means set in bold (presentational, focussing solely on presentation and saying nothing whatsoever about semantics). There is nothing supposedly about it; the older tags addressed presentation, the more modern ones address semantics. Philip Taylor What you say is evidently true, but my point is that there are many cases where you want to distinguish words within a text without necessarily implying emphasis. It's also true that the browser by default draws an italic font for 'emphasis' and a bold font for 'strong' so the result is equally presentational. Dunno why they couldn't have left it well alone, stuck with 'i' and 'b' and not created another can of worms. Peter __ css-discuss [css-d@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] Will the unsemantic HTML elements B and I be soon phased out?
El 17/02/2014, a las 11:29, Barney Carroll escribió: While bikeshedding around 'how semantic' people feel any given element to be is a great laugh (although definitely off-topic for this list), I would highly recommend the HTML specification for insight into the purpose of any HTML element, especially when confusion arises over the possibility of using other elements in its stead. The 'Text-level semantics' page would seem to be incredibly pertinent to this conversation. From the section describing the em element: The em element isn't a generic italics element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate. The em element also isn't intended to convey importance; for that purpose, the strong element is more appropriate. Thanks Barney, that's a useful extract. Because browsers draw em as italic I'd always assumed it was just a new fangled complication. But it seems as though it wouldn't be bad practice at all to restyle em in the css as one thinks appropriate to the concept of emphasis. I had to go to wikipedia for 'bikeshedding'. Must be my age. Peter __ css-discuss [css-d@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] html email with css
On Sep 5, 2013, at 10:09 PM, vi...@graymatterstudios.ca wrote: Hi. I have been lurking in this forum for a few years and have learned quite a bit from reading the posts. Now I have a question to ask. I am coding an html eBlast and have most of the CSS as inline but I also have quite a bit of css in the head. It seems MailChimp strips out the css in the head. Does anyone know how to get around this? Thank you in advance. Vince Mendella Vince, everything one reads on the 'net about html emails says use only inline css and tables, and even then there are many css styles to be avoided, especially floats. You can't always rely on inheritance either, so you have to repeat some styles with every occurence of a tag. I use tables for structure and inline css for basic styling and have had no disasters with hotmail, google, yahoo or email programmes like outlook and mail. Peter H. __ css-discuss [css-d@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] Sprite Menu - Hover Issue for Newly-Added Item
Hi All, I've a sprite menu that I just updated by adding another menu item, C-MUG to it. I've re-calculated all the numbers and everything seems to be set up correctly. It's working correctly on jsfiddle (http://jsfiddle.net/gPNF4/) but for some reason, on my development server and on the production server the hover state is only being triggered for the original five items, not C-MUG. If I check in firebug, I can see the nav-cmug class and surrounding div isn't being generated on hover on my servers. (Current page state works, just not hover). I've tried clearing browser caches, renaming the sprite image, etc. but no dice. Anyone have any idea as to what could be causing this or how to fix? Thx, Pete __ css-discuss [css-d@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] Sprite Menu - Hover Issue for Newly-Added Item
On Fri, Jul 26, 2013 at 6:25 PM, Tom Livingston tom...@gmail.com wrote: Can we have a link to the actual site with the issue? Try this: http://www.mdsol.com/conferences/mug/test.html. __ css-discuss [css-d@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] Sprite Menu - Hover Issue for Newly-Added Item
Well, hey! Apparently, I couldn't see the forest through the trees! I built the site years ago and the nav was based on the CSS or navigation matrix (what some folks were calling it at the time) and was my first attempt at moving from JS rollovers and sliced images. TBH, I don't remember where the JS came in. Feeling a bit sheepish now as I totally forgot about nav.js and it had me pulling my hair out. Cheers and thanks for the help! Pete On Fri, Jul 26, 2013 at 7:09 PM, Chris Rockwell ch...@chrisrockwell.comwrote: Last one :) Not adding this: attachNavEvents(.nav, cmug); is the ultimate culprit, I believe. On Fri, Jul 26, 2013 at 7:08 PM, Chris Rockwell ch...@chrisrockwell.comwrote: Nevermind, I see it in nav.js. It looks like you add an inline style via this script, but you never remove it. The inline style will trump your stylesheet unless you use !important (not recommended). You never add cmug to via attachNavEvents. Can I ask why you're using JavaScript to do the background images? On Fri, Jul 26, 2013 at 7:05 PM, Chris Rockwell ch...@chrisrockwell.comwrote: What JS script is adding 'background-image:none'? __ css-discuss [css-d@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-based flyout menu for mobile?
El 15/06/2013, a las 01:20, COM escribió: Can anyone point me to a 100% css-based flyout menu for use with mobile devices? By flyout, I mean that when User presses a Menu icon, the menu slides out or otherwise appears, User presses their choice and menu hides, chosen page loads. John It's quite old now but Son of Suckerfish does the things on your list. It has a bit of javascript to deal with hover: on old IE's, but if you're not worried about that you can dispense with the script. You'll find it at: http://www.htmldog.com/articles/suckerfish/ regards, Peter __ css-discuss [css-d@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] Simple Floats on Multiple Rows Getting Stuck
El 30/05/2013, a las 21:02, Christopher Akins escribió: . . . I have several floated li items that look fine until the page is made narrower. Then I want the floats to fall nicely to the next line and slide all the way to the left, but they get stuck and won't slide all the way over to the left until the page is pulled way in to be at it's minimum width. . . . Christopher Akins Hi Christopher, try using display:inline-block. I first saw this solution in a post on this list by Georg a while ago, and it's ideal for lining up floated items of variable height regardless of window width: display: inline-block; vertical-align: top; I notice that the link that Georg posted is still functioning so I'll take the liberty of repeating it here: http://www.gunlaug.com/contents/test/test-floating-boxes-mc0.html Hope this is useful, Peter H. __ css-discuss [css-d@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] Alignment / Float issues with select boxes
Hey Folks, I've a landing page with some text and select box form floated left and right (general float classes attached to them, not as part of the select box styles). http://www.mdsol.com/ad/clinical-cloud/index.html The text input fields are fine but I'm having a difficult time with the select boxes. I can't seem to line up the ones floated right so that they match the text boxes above them. The spacing between the right/left select boxes seem to be interpreted differently than the textboxes (actually, that pretty much goes with all the selectbox styles as everything had to be increased). I've been playing around with margins and padding with no luck. The only thing I haven't tried is creating two separate classes to add to each selectbox with floats included so I can play with margins/padding on them separately rather than trying to style the global select. Seems like a kludge, though. Anyone have any ideas? Thx, Pete __ css-discuss [css-d@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] Alignment / Float issues with select boxes
On Thu, Apr 4, 2013 at 1:57 PM, Hahnel, Fred (DET-MRM) fred.hah...@mrmworldwide.com wrote: Pete, The boxes have differing widths. Try resizing them to the same size first Fred Hi Fred, When I first added the select boxes, I applied the exact same styles to them as what are used for the text boxes. They don't render the same so the widths, height and padding elements had to be altered. Still the same issue regardless. Pete -- *Peter Ankelein* | Sr. Creative Developer | Medidata Solutions Worldwide http://www.mdsol.com 79 Fifth Avenue, 8th Floor, New York, NY 10003 pankel...@mdsol.com | direct: +1 212 918 1785 | main: +1 212 918 1800 Follow Us: Twitter http://twitter.com/#%21/Medidata| LinkedIn http://www.linkedin.com/company/medidata-solutions | Read Our Blog: *Geeks* http://goog_1772164263* Talk Clinical* http://geekstalkclinical.mdsol.com The information in this transmittal and any attachments are confidential and intended only for the recipient(s) listed above. You are hereby notified that any unauthorized distribution or copying of this transmittal or its attachments is prohibited. If you have received this transmittal in error, please notify the sender. __ css-discuss [css-d@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] Alignment / Float issues with select boxes
On Thu, Apr 4, 2013 at 7:54 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
Why don't you set a width on the parent p elements? At the moment their
width depends on the width of the content (the form fields), which has
different values.
From there, if it is crucial for you that textfields and select boxes have
the same width, you can set their width to 100%, and add:
input[type=text], select {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Thanks, Philippe. That helped me get it sorted out. Cheers!
__
css-discuss [css-d@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 boxes with variable heights
Georg, I'm intrigued by your example and have wanted that behaviour several
times in the past and couldn't figure a way to achieve it without fixed height
divs.
But from your test page there's a bit of css that I don't understand:
.floating {
float-:left;
width:140px;
margin:1em .5em 0 0;
border:1px dashed #ccc;
display: inline-block;
vertical-align: top;
}
In your float declaration, if one removes the hyphen after the word 'float' the
page ceases to behave in the desired way.
On the other hand, if 'float-' is a mistype (and doesn't exist as a
declaration) then there is no float declaration and the whole thing depends on
display: inline-block;
Is that right?
I wonder how far back inline-block is supported. When you say 'obsolete
browsers', are you referring to IE6 and IE7?
Peter
El 27/07/2012, a las 01:43, Georg escribió:
...an if you don't bother to test this old float-alternative at your end,
here are a few examples.
http://www.gunlaug.com/contents/test/test-floating-boxes.html
http://www.gunlaug.com/contents/test/test-floating-boxes-c.html
http://www.gunlaug.com/contents/test/test-floating-boxes-r.html
I can't be bothered to debug obsolete browsers, so others will have to
include the old fixes for those - if they like.
regards
Georg
__
css-discuss [css-d@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 boxes with variable heights
thanks Georg, that's very handy. Peter - El 27/07/2012, a las 17:27, Georg escribió: an alternative to equal height floats, and inline-block are very often the best __ css-discuss [css-d@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] Page Centering at Smaller Resolutions
Hey Folks, I've been working on a landing page for an ad campaign and have it looking nice (centered, fixed-width) on larger monitors. The problem is folks with smaller resolutions where the width of the page is too wide, thus the horizontal scrollbar appears at the bottom of the browser and page looks like it isn't centered. In order to appease them, I'm trying to see if I can make a couple elements fluid or elastic and am having a bit of a struggle. Here's a test page: http://www.mdsol.com/ad/rave/css-test.html 1) header—this is a 1390px background image that I'm trying to have crop evenly on both sides so it remains centered to the content. 2) #page—again, making this fluid and always centered to the center of the header background image. Changing the width to 100% gets the fluid bit happening, though, the header is unaffected. Welcome to all ideas if there's a better way to approach this. I've been playing around with width: 100%; position: absolute on the background image...I'm just trying to avoid having to go in and absolutely position all my other elements as this drops the image on top of everything else. Regards, Pete __ css-discuss [css-d@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] Page Centering at Smaller Resolutions
On Tue, Jul 17, 2012 at 3:52 PM, Jérome Loï gorhg...@gmail.com wrote: hi there, shouldn't you concider making the header image a background image for your body tag, thus allowing your users to reseize the content that way your main div that is smaller would fit in these small screens (now most of the users have a least 1024 px wide sceens, for computers at least) try to use your header image as a background one,centered ? I'm trying to be semantically correct by using at as the background of the actual header along with some of the image's text being hidden in the header's h1 tags. If it was a standard body background image, then, yes, I would. -- *Peter Ankelein* | Sr. Creative Developer | Medidata Solutions Worldwide http://www.mdsol.com 79 Fifth Avenue, 8th Floor, New York, NY 10003 pankel...@mdsol.com | direct: +1 212 918 1785 | main: +1 212 918 1800 Follow Us: Twitter http://twitter.com/#%21/Medidata| LinkedIn | Read Our Blog: *Geeks* http://goog_1772164263* Talk Clinical* http://geekstalkclinical.mdsol.com The information in this transmittal and any attachments are confidential and intended only for the recipient(s) listed above. You are hereby notified that any unauthorized distribution or copying of this transmittal or its attachments is prohibited. If you have received this transmittal in error, please notify the sender. __ css-discuss [css-d@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] ie 6/7/8
El 23/04/2012, a las 17:13, David Laakso escribió: Your comments and suggestion on this site http://ccstudi.com/ in Internet Explorer 6/7/8 are appreciated. David, an oldish Acer portable running XP, browser windows at full width of the screen: in IE6 7 the page draws very vertically, as though it was intended for a mobile and hasn't responded to wider screen and doesn't fill the width of the screen. The main menu is under the 'Wild Thing' image (one might not bother to go down enough to find it) and the vertical 'About' appears last at the very bottom. The Wild Thing image is scaled up I think and looks horrible, the text next to it is pixely and nasty and barely readable. The cream circle is on the right of your headings IE8 draws the page possibly the way you intended. Another thing: only in IE6 the main menu items show rules above AND below (darkening on hover), whereas IE7 8 shows rules only on hover and only below each item. Scrolling behaviour is also not how it should be in IE6. Wouldn't Adobe Browserlab be a good quick way to check your changes? https://browserlab.adobe.com/ Hope this is useful, Peter __ css-discuss [css-d@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] Finding fallback fonts (for Calibri)
El 05/03/2012, a las 12:27, Jukka K. Korpela escribió: 2012-03-05 13:08, Barney Carroll wrote: FWIW I recently discovered Open Sans, which has the same nice hinting, relative lightness, and pleasant rounded glyphs as Calibri — but you can embed everywhere with no legal repercussions: http://www.google.com/webfonts/specimen/Open+Sans Thanks, it looks interesting, but unless I'm missing something (as I use to do), it resembles Arial as regards to the size of letters. It lacks the certain crowdedness of Arial, and it might be very suitable for many purposes, but it does not look like a good fallback for Calibri - it looks considerably bigger than Calibri of the same size. It also lacks many commonly needed special characters, like arrows and the minus sign. But maybe there's some other freely embeddable font that sufficiently resembles Calibri? Yucca Lucida Grande? The design's not as nice as Calibri but the x-height is similar and would be fairly widely installed especially if you specify the windows variants in the family. I found this page handy for describing the quirks of Lucida Sans and Lucida Sans Unicode on Windows: http://www.brownbatterystudios.com/sixthings/2007/03/14/lucida-hybrid-the-grande-alternative/ Hope this is useful, Peter H. __ css-discuss [css-d@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] desktop. tablet. mobile.
El 31/01/2012, a las 03:31, David Laakso escribió: First pass: http://ccstudi.com/site/portfolio/w/ Constructive comments and suggestions are always appreciated. Thanks. designery comments: really like the feel of it, nice sparseness, tasty use of colour, intriguing, slightly enigmatic even. Great images. On the puzzling side, though, the desktop pages look more like mobile pages poorly adapted to big screen. The primary content is pushed too far down the window by less important stuff - gives a strange hierarchy to the links. If I was the client I wouldn't be happy having 'About' almost at the very end. On the phone, there's too much scrolling down to do before arriving at the primary content. I like the League Gothic but, as always, the letter spacing for the web font is clunky. Me, I'd use an image for the gallery logo so as to control the kerning and make it look nice. On the desktop there's a double rule under Dakota which maybe isn't intended - the thin white rule being very slightly wider than the grey one. Hope this is useful feedback, Peter __ css-discuss [css-d@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 shifts, one page to another
El 25/10/2011, a las 00:11, John escribió: http://coffeeonmars.com/testing/index.html http://coffeeonmars.com/testing/WPR_Wire.html When I load the two links above and go from one tab to the other, I see the content area shift to the left (going from the index page to the wpr_wire page) the only browswer that doesn't do this is Win IE 6, but Win FF 7 does, Win Opera 11.51 does , as do Mac Safari 5, FF 6 and Opera 11.50 can anyone see why this shift happens? my hunch is that it has to do with the image on the second page, though I'm pretty sure its well within the bounds of the area it's sitting in. Could it be just that the 2nd page draws a scroll bar, which causes everything to shift to the left ? Hth, best regards, Peter H. __ css-discuss [css-d@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] Vertical centering? And another problem.
El 12/08/2011, a las 14:27, Rory Bernstein escribió: . . . I need the left and right cols to vertically center inside the div that has the red border on it. How? In other words, I want the white space above below the text (left) and photo (right) to be the same, not matter how much text, or what size image, I put int there. in case this is of any help: the only way I've ever found to reliably centre vertically, is to use a good old-fashioned table. In this case, say, a single row with a cell each for your text and your image would probably do. Best regards, Peter H. __ css-discuss [css-d@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] Stopping IE6 and 7 clearing a float
Ar 17/06/11 06:03, ysgrifennodd Alan Gresley:
Yes, override them with specificity in style.css.
div#site-title {
float: none;
width: auto;
}
div#branding {
width: auto;
}
Ah yes. Sorry, I was being more than a little slow there.
I guess you don't quite understand hasLayout. It's like mixing the
poison and the antidote together. May I suggest to you that you read
this.
http://www.satzansatz.de/cssd/onhavinglayout.html
You're absolutely right. I've tried. Honestly I have, but it's been
beyond me so far. I'll give it another go, though. I owe you that much.
:-)
You could make the changes in the parent stylesheet and insert this.
/* WARNING, beware of the hasLayout genie.
http://www.satzansatz.de/cssd/onhavinglayout.html */
Could be the answer!
Cheers and thanks again.
Peter
--
http://www.peredur.net
pere...@peredur.net
__
css-discuss [css-d@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] Stopping IE6 and 7 clearing a float
Hi,
I'm developing a WordPress site:
http://www.stellawhitelaw.co.uk
In every browser I tested except IE6 and 7, the image on the left floats
left and is not cleared until the main navigation menu. In IE6/7, the
div holding the site title clears the floated image. I'm not actually
sure which div it is that is doing the clearing. I think it could
either be div#masthead or div#branding.
I googled a bit and found a suggestion to add this to the styles:
* {
zoom: 1.0;
}
It didn't change anything, though. Beyond that, my Google-foo let me down.
Could someone please put me on the right track?
It's HTML5 (from the parent WordPress theme) and there are a number
'rel' attribute values that appear to be invalid. I don't think that
these are causing the problem, though, because I've used the same parent
theme before and it's worked OK in IE6/7: although I stand to be
corrected on this since I've only just started looking at HTML5.
Thanks
Peter
--
http://www.peredur.net
pere...@peredur.net
__
css-discuss [css-d@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] Stopping IE6 and 7 clearing a float
Ar 16/06/11 17:35, ysgrifennodd David Hucklesby:
In your style-sheets, you have these Layout triggers that affect
#site-title -
style.css line 12:
* {
zoom: 1.0;
}
style.css line 21:
#site-title {
width: 500px;
}
style-1.css line 341:
#site-title {
float: left;
width: 700px;
}
You also have hasLayout on the enclosing #branding:
#access .menu-header,
div.menu,
#colophon,
#branding, /* - here */
#main,
#wrapper {
width: 940px;
}
Getting rid of all those triggers fixes it this end.
Thanks David,
First the good news. Your solution works, as you know it does, as you
can see if you visit http://www.stellawhitelaw.co.uk
I have a bit of a problem with it, though. I can get rid of the
triggers in the CSS file you've called style.css with no problem (in
fact I probably should have do so before), but those in style-1.css are
not strictly speaking accessible to me. The reason is that I'm
developing a WordPress child theme, so I import the parent stylesheet
(@import) and then do whatever I need to in my child theme to make it
work. The last two triggers you give above are in the parent stylesheet.
Now, OK, I can alter the parent stylesheet; but it comes with a risk. A
future update to the parent might put the triggers back and break the
layout. So is there a way I can prevent HasLayout being triggered
without messing with the parent stylesheet?
As for being a glutton for punishment, I'm not sure why you think that,
but I'll take it as a compliment.
:-)
Peter
--
http://www.peredur.net
pere...@peredur.net
__
css-discuss [css-d@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] Browser Stacking Issues
1. In Chrome (Mac Win) and IE 7 8, the css drop-downs on the left of this page fall behind the flash MP3 player in the left column. Seems like this would be a stacking issue but can't pin it down. http://159.247.160.110/pod.php A Flash movie will appear on top in some browsers, even if you've stacked your divs using z-index. Normally I'd have suggested that in the object tags where the Flash resides, to try adding wmode=opaque and see if that fixes the issue. It will also work using wmode=transparent but I once read that transparent needs a lot more cpu power and that for z-index purposes only, opaque is better. However, I see that your .swf is within javascript tags so I'm not sure whether the above is helpful, but it might at least give you a pointer. HTH, Peter H. __ css-discuss [css-d@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] Flexible parent container height?
Hi All, How can I get the height of a parent container to re-size according to any nested container(s) content similar to the way tables work? Here's a sample page that demonstrates the issue: http://www.mdsol.com/conferences/mug2/amug.html Right now, each 'tier' has a parent container at a fixed height width and contains single, double or triple-wide columns for the content. For the majority of this site, it's a non-issue but look at the Agenda section. Obviously, I don't want the background to be fixed at 2000+ pixels to accommodate expanding content within the tabs (hide/show toggle). Even the welcome section...add more text and things get wonky. Tried making the parent container height 100% with no luck. Anyone have any ideas? Regards, Pete __ css-discuss [css-d@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] CSS sprites/matrix and 2nd level nav menu
Hi All, I've been looking into how to create an image-based CSS nav menu with 2 levels for the current site I'm building. This led me to Veerle's old 2 level horizontal navigation in CSS with images demo... http://veerle-v2.duoh.com/blog/comments/2_level_horizontal_navigation_in_css_with_images/ Being that this was written five years ago, I'm wondering if there's a better, more streamlined way. I've used the CSS sprites to create menus in the past before but only been at a single level. Thx, Pete __ css-discuss [css-d@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] IE6 and 7 help please
Happy New Year to the list. I'm just starting on the development of a site for an authoress and have hit a problem in IE6 and 7 with the main navigation list. You can see the page I'm working on at: http://www.peredur.net/stella/template.php The page is valid according to the w3c validator and renders correctly in everything I've tried (FF, Opera, Chrome, IE8) except for IE6 and 7. IE6 isn't respecting the padding given to the links. IE7 isn't displaying the menu at all! I've never met this one before, so I'm at a bit of a loss. Does it ring a bell with anyone who could let me know what I have to do to get it to render properly---or at least reasonably---in the problem browsers? Thanks in advance. Cheers Peredur -- peredur.net http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and 7 help please
On 01/01/11 15:30, Chetan Crasta wrote:
ul#topnavlist li a {position:relative}
That is the hack that will fix the problem.
BTW, your page is not valid. The Crime, Cats etc sub-menu should be
within anli.
~Chetan
Aargh! That'll teach me one of two things. Either to stop fiddling
when other people are going to check the code or, if I have to fiddle,
to at least revalidate the page before putting it up. My apologies for
that.
As for the hack: works like a dream. Another one for the little black
book of handy IE hacks. Many thanks.
Now I just have to sort out why IE7 and only IE7 seems to be having a
problem with the placeholder image. It's never straightforward, is it.
Many thanks, Chetan.
Cheers
Peredur
--
peredur.net http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and 7 help please
On 01/01/11 16:23, Chetan Crasta wrote:
Happy to help.
Try the same hack:
#header img {position:relative;}
~Chetan
Yep. Just did. It works, too.
Just out of interest, do you know what's going on here? Or is it one of
those, It works. Don't ask, sort of things? If I could get a handle
on why IE7 behaves in this way I might be better at spotting when the
hack should be applied.
Again, many thanks.
Cheers
Peredur
--
peredur.net http://www.peredur.net
__
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] flash element covering nav dropdowns in Chrome
El 29/11/2010, a las 16:57, Jody Levinson escribió: On Sun, Nov 28, 2010 at 1:40 PM, Jody Levinson j...@troutdream.com wrote: There's a dropdown menu until Live in the menu on this page: http://evamoon.net/ that shows properly in FF but in Chrome, the Flash slide show covers it. I think I've got my z-index layers set up properly, but I can't fix it. Any thoughts? Sounds like the Internet Explorer Z-Index bug. Try giving one of the parent elements (navcontainer or header)a higher z-index (1000+). __ Darn! This didn't work either! Vexing! But thanks for the suggestion. Where you have you movie inserted in the html, do you have wmode ? Like so: param name=movie value=media/banner.swf param name=wmode value=opaque / If not, try that. hth, Peter H. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] faux column issue...
Ar 12/11/10 21:24, ysgrifennodd Michael Beaudoin : Hi all, I am working on a simple site that has columns and lines to divide the columns. Perfect for faux columns as the columns aren't equal depth. Anyway, when I put the background image in my page-wrap div, it shows up fine. When I put it in the background of the content div (because I want the line to not butt into the banner image) it won't show up. Not sure why. If anyone cares to look, go to http://ba-doyn.com/junk/ and check it out. If you look at the css, you will see I have commented out on the page-wrap div in case you wanted to toggle back and forth. Thanks again, Michael Is it because your content div only has floated content and therefore has no height? Cheers Peter -- http://www.peredur.net __ 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] Box Model and Background-image
Ar 12/11/10 22:53, ysgrifennodd John : In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? thank you John Border inner edge, isn't it? I.e. content + padding. Could be wrong, though. Cheers Peter -- http://www.peredur.net __ 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] Box Model and Background-image
Ar 12/11/10 23:10, ysgrifennodd Thierry Koblentz : In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? I believe it is the border box (content + padding + border) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz You're absolutely right. I stand corrected. From w3schools: Definition and Usage The background-image property sets the background image for an element. The background of an element is the total size of the element, including padding and border (but not the margin). I'm going to have to play now to see if a border overlays a background image or /vice versa/. Just as I was thinking about calling it a day for today! Cheers Peter -- http://www.peredur.net __ 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] Box Model and Background-image
Ar 12/11/10 23:21, ysgrifennodd Peter Bradley : I'm going to have to play now to see if a border overlays a background image or /vice versa/. Just as I was thinking about calling it a day for today! Yup. If you have a background colour and a dotted or dashed border, you can see the colour behind it. W3C says: Authors may specify the background of an element (i.e., its rendering surface) as either a color or an image. In terms of the box model http://www.w3.org/TR/CSS2/box.html#box-model, background refers to the background of the content http://www.w3.org/TR/CSS2/box.html#box-content-area, padding http://www.w3.org/TR/CSS2/box.html#box-padding-area and border http://www.w3.org/TR/CSS2/box.html#box-border-area areas. Border colors and styles are set with the border properties http://www.w3.org/TR/CSS2/box.html#border-properties. Margins are always transparent. [http://www.w3.org/TR/CSS2/colors.html] Interesting. You learn something every day. Cheers Peter -- http://www.peredur.net __ 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] Son of Suckerfish problems
__
El 09/11/2010, a las 21:11, Daniel Hammond escribió:
URL: http://www.numcchildren.org/new/index.html
CSS: http://numcchildren.org/new/children.css
Browsers that display the site correctly:
Firefox, Opera, IE8
Browsers that have problems:
Safari, Chrome, IE8 in compatibility view
I’m trying to use the son of suckerfish method for the drop-down
navigation.
In IE8 compatibility view, the sub-menus appear to the right of their
parents, rather than underneath them. In Safari and Chrome, the sub-
menu
items don’t change color when hovered over, but they’re supposed to.
Test
the site in the latest versions of FF, Opera, or IE8 to see the site
functioning properly.
I just adapted a Son of Suckerfish menu for a site and have had no
problems with any browser PC or Mac, except of course having to make a
couple of special styles for (spit, spit) IE. You may have to position
the dropdowns differently for IE to make them appear where you want.
But I had no problem with the hover colour change on the main and
submenus - both work OK.
Possibly, maybe, no guarantees, where you have:
#nav ul ul li a:hover, #nav ul ul li a:active {
display: block;
background: #93c83d;
padding: 10px;
in your css, it would work better with:
#nav li ul li a:hover
Hope this turns out to be useful, Peter H.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] XHTML or not?
Ar 10/11/10 17:49, ysgrifennodd John : I am relatively inexperienced with CSS and HTML..I've made all my own web pages, but learn what I need at the time followed by years of doing nothing with it until the next re-design. A tutorial I watched recommended going with XHTML, but some say it's not the way to go, and I don't know for sure what the right direction would be for me. Recommendations? thanks! John Hi John, Was there any particular reason why XHTML would not be the way to go? Whatever DOCTYPE you decide to use, you have to follow its rules and - speaking personally - I've never found following the rules of XHTML to be any more onerous than those of HTML. Unless I really have no choice (e.g. a customer wants to force the opening of a new window from a link) all my stuff is XHTML 1.0 Strict and CSS 2.1. There are a couple of things you have to bear in mind if you want XHTML to work in older IEs, like omitting the XML declaration and not using XHTML 1.1 (both of which put IE into quirks mode, IIRC), but working with older IEs is going to be a problem whatever DOCTYPE you choose. XHTML might make it a bit easier to ensure the separation of structure and format, I suppose; but good practise should make you do that anyway. But at the end of the day - and in my opinion only - it's just a matter of choice. It's producing *valid* HTML that's important to me, not the DOCTYPE. HTH Cheers Peter -- http://www.peredur.net __ 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] Quirks compendium?
Sorry, this page is not available -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David McGlone Sent: November-07-10 11:39 To: css-d@lists.css-discuss.org Subject: Re: [css-d] Quirks compendium? On Sun, 2010-11-07 at 13:15 -0600, Keith Purtell wrote: When it comes to making sure my Web design appears normally in different browsers, I've been checking via the three installed on my PC, the Mac at work, two other PCs owned by family members, and an iPhone a friend has. I'll probably always check to see how a site looks on different machines because of differing resolutions and media, but when it comes to simply sniffing out CSS quirks, I wonder if someone on the Web has a list of the most common quirks for different browsers/versions? Why go through all that? Use adobe browserlab to check your site in a bunch of browsers easily. http://www.Adobe.com/BrowserLab If anyone here has a different perspective, I'd like to hear it. I can't find anything other than browswerlab, but everyone here IMHO is much better than I, so I am all ears. -- Blessings David M. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help
Ar 30/10/10 22:05, ysgrifennodd Brian M. Curran : Hi Ya'll, Help! How come my images are plopping on top of each other here: http://www.draftingservices.com/as-built_drawings.html ? The actually size of the images are 500px wide, but I shrunk that down with the CSS. Could that have anything to do with it? I suspect not. Sincerely, Brian M. Curran | CAD Consultant Without having played around with it a lot, it looks to me as though it's because your images overflow their containers. Cheers Peter -- http://www.peredur.net __ 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] Formatting nested lists
Hi,
I'm working on a project concerned with legislation and one of the
requirements is to format some of the data exactly as it appears in the
appropriate statute. Basically this means that level one ordered lists
should number (1), (2), (3) etc; level two ordered lists should go (a),
(b), (c) etc, and level three should go (i), (ii), (iii) etc.
For an idea of what I mean, for levels one and two anyway, take a look at:
http://www.legislation.gov.uk/ukpga/1998/24/section/2
The chapter number on that page can be ignored. I just need the
internal contents. Interestingly, the site above does not use lists to
format the data, so my question - below - might be something of a
forlorn hope: but I thought I'd ask anyway, since the data is going to
have to be entered by end users (after my contract has finished) using
an HTML editor like TinyMCE and I'm not looking forward to having to
train them in how to do that properly if we have to finish up with a
solution such as the one used on the UK Government site above. I guess
I would have to train them to edit the HTML produced by the editor in
order to allocate the correct classes to things: maybe even to add
elements like span and so on. Nightmare.
I know that it's possible to use standard CSS to do the following:
1. First level item 1
2. First level item 2
3. First level item 3
1. Second level item 1
2. Second level item 2
1. Third level item 1
2. Third level item 2
3. Third level item 3
3. Second level item 3
4. First level item 4
style
ol {
list-style-type: decimal;;
}
ol ol {
list-style-type: lower-alpha;;
}
ol ol ol {
list-style-type: lower-roman;
}
/style
/head
body
div
ol
liFirst level item 1/li
liFirst level item 2/li
liFirst level item 3
ol
liSecond level item 1/li
liSecond level item 2
ol
liThird level item 1/li
liThird level item 2/li
liThird level item 3/li
/ol
/li
liSecond level item 3/li
/ol
/li
liFirst level item 4/li
/ol
/div
...
The problem, of course, is that the parentheses are missing. Is there
any way I can use CSS to include the parentheses or am I stuck with the
standard list style types? Or is there some other magic I can use?
Given the alternative, I might be able to persuade my customers to
settle for the standard CSS, but I'm trying not to give up without a
fight. So any suggestions would be most gratefully received.
Thanks in advance.
Peter
--
http://www.peredur.net
__
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] Formatting nested lists
Ar 19/10/10 23:52, ysgrifennodd Andrew Cunningham :
ol { counter-reset: item; }
ol li { display: block; }
ol li:before {
content: ( counter(item, decimal) ) ;
counter-increment: item;
}
ol ol li:before {
content: ( counter(item, lower-alpha) ) ;
counter-increment: item;
}
ol ol ol li:before {
content: ( counter(item, lower-roman) ) ;
counter-increment: item;
}
Hi Andrew,
Certainly does work for me: in Firefox, anyway. I guess that IE results
might be mixed. Would that be right? I haven't got IETester handy at
the moment. Assuming that's so, and if I get decent results in IE8, I
could probably persuade the client that they can live with that. I'll
just use ordinary list formatting for any problematic IEs.
Do you have a reference where I could check that stuff out? Preferably
something I'll have a fighting chance of understanding (given that I'm
pretty happy with the basics of CSS).
:-)
But thanks a lot for that. It's good stuff.
Cheers
Peter
--
http://www.peredur.net
__
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] Off topic, web hosting help
I know exactly where you are coming from, I was there a couple of years ago. A couple of bits of good news. (1) it is not as hard as it looks to make the next steps, and (2) there are hosting companies out there who offer exactly what you need for very modest fees. I have had very good experiences with dreamhost.com, but there are lots of other outfits out there offering similar things. Peter -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tomasz Kisielewski Sent: August-26-10 06:35 To: css-d@lists.css-discuss.org Subject: [css-d] Off topic, web hosting help Hi I know this list is about CSS, but I don't trust google.com when searching for web hosting. I need basic host for drupal, joomla just for my business. I have no experience in this field, I can do programming and design but hosting,domain registrationhave never done it. Will register domain with godaddy, can I register domain and find hosting later? I wouldn't like to make big mistake at the beginning. It is not my intention to spam the list, but I need help and advice Thanks Tom __ 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] sub-columns within floats
Hi All, I've been racking my brains regarding column control within a float. I'm revising an event agenda that currently has two columns via a 100px left float for the session times and a 425px right float for all the session titles and associated content. The problem is now, many of the items in the right float need to be divided into their own columns while some span the full 425px. Some of these include the left span and some of them don't. I've thrown together a quick table to show the various scenarios: http://www.mdsol.com/conferences/mug/emug2010/table_example.html How do I nest two columns below the initial line of the right float that spans the full float width? Also, how would I go about creating the three-column version? I've included links to a test page and test css that show the initial agenda format. In the CSS it's the #center .left, #center .right IDs/classes. http://www.mdsol.com/conferences/mug/emug2010/agenda_test.htm (Test page) http://www.mdsol.com/conferences/mug/mug_test.css (CSS) I tried a bunch of things earlier but with no success. I'm just not sure of the best way to go about this to cover all the scenarios...or if maybe I should chalk this up as tabular data and just go the table route. Any and all help/advice is certainly appreciated. Thx, Pete __ 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] Simple menu bar
Rick Gordon wrote:
Why do you need the floats? Just at a glance, I'd suspect that that's
what's messing up your centering.
Removed the first float: left and the bottom border moves to the top
Removed the second one and the list turns vertical
John D wrote:
Use this code. It works in IE8
On my 1024 x 768 screen in IE8 and FF, it wraps round and has no end borders
Sandy wrote:
I got this working by adding a container div to do the centring.
Wrapped around with me. Stopped this by increasing width to 900 px, but
no centering and strange border behaviour.
David Laakso wrote:
Fwiw, a stab at your very good question
http://chelseacreekstudio.com/ca/cssd/8.html
Thanks for your kind words, David, and the elegant solution found at
your link. Am I right in thinking that
* html #nav ul {
overflow : visible;
width : 100%; }
makes it work in a variety of browsers? I just use FF
Thanks to all of you for your interest and advice.
--
Peter Lawson
Cape Town: 021-797-4493
France 06 18 28 96 43
__
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] Simple menu bar
I doubt you get questions more basic than this :-[
How do I get this menu bar to centre itself on the page?
And show its background colour?
style type=text/css
#nav {
margin: 0 auto 3em auto; float: left; padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 2px solid #ccc; border-top: 2px solid #ccc; }
#nav li { float: left; }
#nav li a {
display: block;
padding: 8px 9px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 2px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
.bl { border-left: 2px solid #ccc; }
/style
/head
body
ul id=nav
li class=bla href=index.htmlHome/a/li
lia href=History.htmlHistory and Structure/a/li
lia href=Groups.htmlGroups/a/li
lia href=Constitutions.htmlConstitutions/a/li
lia href=Concessions.htmlConcessions/a/li
lia href=Opportunities.htmlOpportunities/a/li
lia href=Magazines.htmlMagazines/a/li
lia href=Links.htmlLinks/a/li
/ul
--
Peter Lawson
Cape Town: 021-797-4493
France 06 18 28 96 43
__
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] OS Specific CSS?
Ar 16/07/10 03:06, ysgrifennodd Philippe Wittenbergh : That would be me too… I've yet to discover differences on how Gecko (or Webkit) handle things differently depending on platform (except, eventually, with experimental features; but those are - hmm, experimental ? - and prone to all kind of breakage anyway). Do you have specific issues that you need help with ? Philippe --- Philippe Wittenbergh http://l-c-n.com/ I've occasionally noticed differences in form rendering between FF on Linux (Ubuntu) and FF on Windows (XP). I don't have an example to hand, though, unfortunately. Cheers Peter -- http://www.peredur.net __ 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] Layout help needed, almost right
This:
html {
font-family : Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
font-size: 80%;
}
Becomes this [user friendly and shorter]:
html {
font : 100%/1.4 Helvetica, Arial, sans-serif;
}
David, for someone whose contributions here are so consistently
helpful and well-informed your crusade against Verdana is difficult to
comprehend, and out of place on this list. Several times I've nearly
risen to the bait of previous comments but held back 'cos it's nothing
to do with css. Unfortunately you might even succeed here and there in
seeding uninformed prejudice against one the most legible sans
currently available for common use, cross-platform, on the web.
As a starter: http://en.wikipedia.org/wiki/Matthew_Carter
Peter H.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering 3 float: left boxes
Well the first thing that comes to mind is to add a larger margin-left to
#left_main. But the calculation is not obvious as your container is 1024px,
and you have margins and padding of 1em.
Across the floating divs, you have 3x25%x1024px = 768px for the div content,
6x1em for the margins. So you wan
#left_main { margin-left: 1024px - 768px - }
But how many px in an em? This is dependent on you font-size and on the
device displaying the page. I believe the answer is to eschew the use of px
as a measurement everywhere, but that is a bit rough when you have pictures
in the mix.
Peter
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of martin
Sent: June-22-10 5:06 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] centering 3 float: left boxes
Hi all
I'm trying to center 3 float:left boxes in the middle of the main container.
So far I've got:
,[ html markup ]
| body
| div id=container class=curved
| h1Everyday Expressions/h1
| div id=left_main class=curved
| pThis is the left one/p
| /div
| div id=centre_main class=curved
| pThis is the centre one/p
| /div
| div id=right_main class=curved
| pthis is the right one/p
| /div
| br class=cleared /
| /div
| /body
|
`
,[ css ]
|
| body {
|margin: 0;
|padding: 0;
|text-align: center;
| }
| #container {
|width: 1024px;
|margin: 0 auto;
|text-align: left;
|background-color: cyan;
|border-style: solid;
| }
| #left_main, #centre_main, #right_main {
| float: left;
| width: 25%;
| background-color: red;
| margin: 1em;
| padding: 1em;
| }
| .curved {
| border-radius: 8px; /* CSS3 compliant browsers */
| -moz-border-radius: 8px; /* firefox */
| -webkit-border-radius: 8px; /* Google Chrome, Safari */
| -khtml-border-radius: 8px; /* Linux Browsers */
| behavior: url(css/border-radius.htc); /* IE
Browsers */
| background-image: url(1px.svg); /* Opera
9.5+ */
| }
| .cleared {
|clear: both;
| }
`
How would I have to change it so that those three boxes (left_main,
centre_main, right_main)
were positioned in the middle of the container. As you can see they
(understandably) are slightly
to the left.
Thank you.
cheers
Martin
__
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] Re : IE8, CSS 2.1 page-break-inside: avoid problem
It appears that you are trying to avoid a page break in a div containing several ps. Your examples appear to work in Opera, but not in IE8. IE8's support for page-break-inside is best described as buggy. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Philip Taylor (Webmaster, Ret'd) Sent: June-21-10 2:09 AM To: Stéphane Carnot Cc: 'css-d' Subject: Re: [css-d] Re : IE8, CSS 2.1 page-break-inside: avoid problem Stéphane Carnot wrote: Hi Chris, Sorry, i was on holidays :-) First, thanks for your help. But it doesn't help much. I'm trying to use the 'page-break-inside : avoid'. The page-break-after is not what i'm looking for. OK, you have test files, but we (or at least, I) still do not know what you are trying to achieve :-( Which of your three demo. files demonstrates the problem ? Where does the page break occur, if you print to A4 paper ? Help us to help you, and more help may well be forthcoming ! 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/ __ 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] An Image On Top Of an Image
Wouldn't it be easier to construct the finished image you want, and define the active area for the button with a map? -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Victor Subervi Sent: June-21-10 8:36 AM To: Climis, Tim Cc: CSS Discuss Subject: Re: [css-d] An Image On Top Of an Image On Mon, Jun 21, 2010 at 10:56 AM, Climis, Tim tcli...@indiana.edu wrote: Umm. Can we have an example of what you want? There are many options here, and depending on the effect you're looking for, some may or may not work. kinda figured that... For example: do you want the bottom image to be visible under the top image (translucent)? yes Are the images the same size or is one going to frame the other? not the same size. The bottom one has a hole in it for the button to fill. Imagine the logo for mailman (python mailing list). There is a flag part to the left with a circle on the right: http://www.mailmanlist.net/img/MailmanLogo75x199.jpg Imagine it with flags on either side. Hope that was better. TIA. V __ 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] An Image On Top Of an Image
div style=position:relative;top:0;left:0 image src=one.jpg style=position:absolute;top:0;left:0;width:120px;height:120px image src=two.jpg style=position:absolute;top:50px;left:50px;width:20px;height:20px /div The enclosing div is important. It has positional info, so the coordinated in the enclosed imgs are relative to that div. You do not have to specify the width and height of the images. I've just doing that to show the sizes. The second image will be displayed on top of the first: no z-index is given, so they are rendered in the order they occur. If you want, you could say div style=position:relative;top:0;left:0 image src=one.jpg style=position:absolute;top:0;left:0;width:120px;height:120px;z-index:1 image src=two.jpg style=position:absolute;top:50px;left:50px;width:20px;height:20px;z-index:2 /div From: Victor Subervi [mailto:victorsube...@gmail.com] Sent: June-21-10 10:09 AM To: Peter Coates Cc: Climis, Tim; CSS Discuss Subject: Re: [css-d] An Image On Top Of an Image On Mon, Jun 21, 2010 at 12:23 PM, Peter Coates pcoa...@yukon1000.com wrote: Wouldn't it be easier to construct the finished image you want, and define the active area for the button with a map? Yeah, well, could do; however, I reuse the button over different images. How do? Too complicated? V -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Victor Subervi Sent: June-21-10 8:36 AM To: Climis, Tim Cc: CSS Discuss Subject: Re: [css-d] An Image On Top Of an Image On Mon, Jun 21, 2010 at 10:56 AM, Climis, Tim tcli...@indiana.edu wrote: Umm. Can we have an example of what you want? There are many options here, and depending on the effect you're looking for, some may or may not work. kinda figured that... For example: do you want the bottom image to be visible under the top image (translucent)? yes Are the images the same size or is one going to frame the other? not the same size. The bottom one has a hole in it for the button to fill. Imagine the logo for mailman (python mailing list). There is a flag part to the left with a circle on the right: http://www.mailmanlist.net/img/MailmanLogo75x199.jpg Imagine it with flags on either side. Hope that was better. TIA. V __ 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] Re : Re : IE8, CSS 2.1 page-break-inside: avoid problem
http://reference.sitepoint.com/css/page-break-inside -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Stéphane Carnot Sent: June-21-10 6:27 AM To: css-d Subject: [css-d] Re : Re : IE8, CSS 2.1 page-break-inside: avoid problem Hi, I don't know if IE8 is buggy but it seems to be ok with page-break-inside tag : http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style _Sheets%29 http://msdn.microsoft.com/en-us/library/cc196971%28VS.85%29.aspx But i can't make it work :-( Thanks for your help, JYves De : Peter Coates pcoa...@yukon1000.com À : Philip Taylor (Webmaster, Ret'd) p.tay...@rhul.ac.uk; Stéphane Carnot stephanecar...@yahoo.fr Cc : css-d css-d@lists.css-discuss.org Envoyé le : Lun 21 juin 2010, 14h 27min 46s Objet : RE: [css-d] Re : IE8, CSS 2.1 page-break-inside: avoid problem It appears that you are trying to avoid a page break in a div containing several ps. Your examples appear to work in Opera, but not in IE8. IE8's support for page-break-inside is best described as buggy. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Philip Taylor (Webmaster, Ret'd) Sent: June-21-10 2:09 AM To: Stéphane Carnot Cc: 'css-d' Subject: Re: [css-d] Re : IE8, CSS 2.1 page-break-inside: avoid problem Stéphane Carnot wrote: Hi Chris, Sorry, i was on holidays :-) First, thanks for your help. But it doesn't help much. I'm trying to use the 'page-break-inside : avoid'. The page-break-after is not what i'm looking for. OK, you have test files, but we (or at least, I) still do not know what you are trying to achieve :-( Which of your three demo. files demonstrates the problem ? Where does the page break occur, if you print to A4 paper ? Help us to help you, and more help may well be forthcoming ! 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/ __ 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] CSS Not Validating
Ar 21/06/10 22:13, ysgrifennodd Duane Nelson :
I'm using the following to fix a PNG display bug inie6:
/* PGN Fix forIE6 */
img, div {
behavior: url(../scripts/htc/iepngfix.htc)
}
But it causes the css to ot validate. Is there a way I can do this to get my
CSS to validate?
Thanks,
Duane Nelson
Loss2gaiN Designs
http://myL2G.com
On the one occasion I needed it, I used this:
!--[if lt IE 7]
style type=text/css
#banner img { behavior: url(styles/iepngfix.htc) }
/style
![endif]--
Obviously you'll want to substitute your own selector.
HTH
Peter
--
http://www.peredur.net
__
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] Font treatment suggestion?
You might find something of interest here: http://24ways.org/2005/swooshy-curly-quotes-without-images -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso Sent: June-19-10 8:27 PM To: Brian M. Curran Cc: css-d Subject: Re: [css-d] Font treatment suggestion? re: http:www.draftingservices.com Brian M. Curran wrote: As usual, thank you gentlemen. ... IMO it still lacks something though? I'm thinking that adding a nice little image for the quotation marks would be a start. That's what has always been appealing to me when I see quotes on blogs. -- The cool quotation marks and indented text. - The mission of this list is the practical application of CSS. If your /personal mission/ is to seek ideas, the Web, rather than this list, may be the place to start. For example: Blockquotes and pull quotes. http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-exa mples-and-good-practices/ or, if you are into the more esoteric, explore the pages and past issues of sites like these... Idea Magazine http://www.idea-mag.com/en/ Baseline http://www.baselinemagazine.com/ Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-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] mac os x 10.4 :: camino/ 2.0.3
Not sure if this is a CSS related error, a Mac 10.4 :: Camino/2.0.3 bug, or a js error? There is a menu in the right-column. expand all/collapse all works fine. The first list item accessibility works fine. The remaining 11 list items /do not / open on click. markup http://chelseacreekstudio.com/site/resources/ css http://chelseacreekstudio.com/site/css/sisu.css David, I use Camino 2.0.3 (Intel Mac Mini, OSX 10.5.3) and all the items expand correctly, whether you click on the arrowhead or on the text. Camino can be buggy with javascript but in this case all seems hunky dory. Don't see why it would be a cache issue but it might be worth emptying everything and relaunching. Peter H. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] liquid design for small screens
On a regular screen, the norm appear to be to define a container div of a
fixed width, put in a float left nav bar, etc, etc.
On a small screen, this really doesn't cut it. I'm trying to make a couple
of style sheets for small screens that have a family likeness to the
normal one, but which are friendly for small screens, one landscape, one
portrait. This means my header looks something along the lines of:
link rel=stylesheet media=screen type=text/css
href=../new/screen.css
![if !IE]
link rel=stylesheet media=only screen and (max-width: 480px)
type=text/css href=../new/handheld.css
link rel=stylesheet media=only screen and (max-height: 480px) and
(orientation:landscape) type=text/css href=../new/handheldl.css
![endif]
link rel=stylesheet media=print type=text/css
href=../new/print.css
!--[if IE]
link rel=stylesheet href=../new/ie.css type=text/css
![endif]--
Screen.css is the base style sheet, handheld.css is for small portrait
screens, handheldl.css is for small landscape screens, and print.css is for
printers. I suppose if I was really doing this right, I'd do media types
TV, braile, speech, ... but no, or at least not yet.
Now for portrait screens, it makes sense to put the navigation frills along
the top (or bottom). For landscape screens, it makes sense to put them on
the left (or right). I want a nice tight little menu bar on the left, fixed
width, and I want the main container to occupy the rest of the width. I do
not see how to do that. I do not know the screen width, so I do not know
how much to subtract. It would be nice if I could define the main container
as {float:left;width:all-the-rest}. In fact, all the rest would be a useful
interpretation of auto, but that is not what auto means here.
This cannot be a new problem. What is the solution. I hope it is nice and
simple. I don't mind feeling stupid, and I dislike complexity and
contrapted solutions.
Peter
__
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 design for small screens
I know that there is an easy solution for this if I was trying to do this
for all media, simply put the main content in an outer div. But (a) the
content then flows around the nav div, and (b) I want the conventional fixed
width layout for the normal screen media type.
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Peter Coates
Sent: June-20-10 11:54 AM
To: 'css-d'
Subject: [css-d] liquid design for small screens
On a regular screen, the norm appear to be to define a container div of a
fixed width, put in a float left nav bar, etc, etc.
On a small screen, this really doesn't cut it. I'm trying to make a couple
of style sheets for small screens that have a family likeness to the
normal one, but which are friendly for small screens, one landscape, one
portrait. This means my header looks something along the lines of:
link rel=stylesheet media=screen type=text/css
href=../new/screen.css
![if !IE]
link rel=stylesheet media=only screen and (max-width: 480px)
type=text/css href=../new/handheld.css
link rel=stylesheet media=only screen and (max-height: 480px) and
(orientation:landscape) type=text/css href=../new/handheldl.css
![endif]
link rel=stylesheet media=print type=text/css
href=../new/print.css
!--[if IE]
link rel=stylesheet href=../new/ie.css type=text/css
![endif]--
Screen.css is the base style sheet, handheld.css is for small portrait
screens, handheldl.css is for small landscape screens, and print.css is for
printers. I suppose if I was really doing this right, I'd do media types
TV, braile, speech, ... but no, or at least not yet.
Now for portrait screens, it makes sense to put the navigation frills along
the top (or bottom). For landscape screens, it makes sense to put them on
the left (or right). I want a nice tight little menu bar on the left, fixed
width, and I want the main container to occupy the rest of the width. I do
not see how to do that. I do not know the screen width, so I do not know
how much to subtract. It would be nice if I could define the main container
as {float:left;width:all-the-rest}. In fact, all the rest would be a useful
interpretation of auto, but that is not what auto means here.
This cannot be a new problem. What is the solution. I hope it is nice and
simple. I don't mind feeling stupid, and I dislike complexity and
contrapted solutions.
Peter
__
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] Sum total greater than 100%
Ar 19/06/10 22:10, ysgrifennodd John Dick : Why is right side longer than left side in this skeleton layout? You can see at the bottom of the webpage when this info is entered in a test document: The height property does not include padding, borders, or margins (see w3schools) HTH Cheers Peter -- http://www.peredur.net __ 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] Sum total greater than 100%
Ar 19/06/10 23:27, ysgrifennodd David Laakso : Hmm. I don't know why. 1/ When all the borders are removed the heights are still different in Mac Opera, Mac Safari, and the current WebKit nightly. 2/ When all the heights are converted to pixels, rather than percent, the heights are the /same/ in Mac Opera, Mac Safari, WebKit nightly, Camino, and Mac Firefox [see below]. Just a guess..., but rounding errors when calculating percentages?? Cheers Peter -- http://www.peredur.net __ 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] Pure CSS fisheye menu with icons: a demo
I like this. Hut shouldn't the expansion also work when the menu item is
selected by keyboard? I tried adding
#navigation li a:active {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
But it did not have the effect I expected. Why not?
Peter
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim White
Sent: June-14-10 7:24 AM
To: Gabriele Romanato
Cc: css-discuss
Subject: Re: [css-d] Pure CSS fisheye menu with icons: a demo
Hi all!
I'm pretty inspired this time:
http://onwebdev.blogspot.com/2010/06/pure-css-fisheye-menu-with-icons.html
Gabriele
Or, we can do it with just one image and a little bit of CSS3 magic:
http://tjameswhite.com/demos/fisheye/
My demo uses Gabriele's original code, minus all the extra background
images and heights. Instead, I've added CSS transition and transform
to replicate the fisheye.
Yes, this requires vendor prefixes. It should work in the latest
versions of Mozilla, Webkit and Opera browsers. Sorry, no IE, and I
didn't bother making a fall back for IE, which could be done easy
enough.
Enjoy,
Tim
tjameswhite.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-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] Sizing bullets in IE6/IE7
Why not use
ul {
list-style-image URL(bullet.gif);
}
I believe that is supported by IE.
Peter
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Jay Carlson
Sent: June-15-10 10:13 PM
Cc: 'css-discuss'
Subject: Re: [css-d] Sizing bullets in IE6/IE7
Good point.
And yes, I'm not a fan of the bullets, but the client insists. Ugh.
-J
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso
Sent: Tuesday, June 15, 2010 11:03 AM
To: Jay Carlson
Cc: 'css-discuss'
Subject: Re: [css-d] Sizing bullets in IE6/IE7
Jay Carlson wrote:
I'm normally pretty clever with CSS, but the IE6/IE7 rendering of this
page
is giving me issues:
http://smmirror.jaycarlson.net/?noscript
I want nice, big bullets, but normal-sized text on the sidebars, so I'm
doing something like:
And although the exact sizes have had to be tweaked between Gecko, WebKit,
Presto, and IE8, the CSS doesn't seem to work at all in IE6 or IE7 -- the
bullets are tiny, regardless of what I set as the li font-size.
I guess because it is just a little to sophisticated for IE/6 and IE/7 ???
And it gets a little strange in compliant browsers if the user has the
fonts set to a minimum font-size (I am at 16px).
I think you may need to use an image if you want those to look the same
in IE 6/7.
Best,
~d
PS If you are seeking an off-wall personal opinion, I'd bump the type a
little and not use any list style marker at all.
--
desktop
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-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] Fwd: Re: Making sure my container turned out
Ar 13/06/10 02:46, ysgrifennodd Thierry Koblentz : I believe the offset of relatively positioned elements is done in regard to their position in the normal flow, *not* in relation to a ancestor. They are *very* different from absolutely positioned elements. They can overlap surrounding boxes but do not disturb the flow, Yes. My bad. You're right and I didn't clarify that properly. Thanks. Normally, you would not expect to see both left and right specified: rather you would expect to see, say, left and top. It is possible to size absolutely positioned boxes via these values. For example left:10px;right:10px; will make the box stretch 10px from the left edge to 10px from the right edge of the parent that creates a positioning context. Ah! I wondered if that was the case, but had never seen it done so didn't mention it. Thanks again. I always have my heart in my mouth when answering anything on here. You lot are so knowledgeable you're not going to miss a thing! Still, it means that I learn something, as will as (hopefully) the person I'm replying to. a win-win, really, as they say. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Fwd: Re: Making sure my container turned out
build style sheets by
hand. Entirely by hand.
One thing VS does is to add non-breaking spaces all over the place.
It's an improvement on the pile of excrement that was FrontPage, but it
still does it. Your page shows this. If you want to create space
between elements on your page, never use non-breaking spaces. Use
margin or padding instead. The use of non-breaking spaces is deadly for
accessibility, for one thing. They should be used for what they were
intended, i.e. to prevent line breaks at particular points in the text
where a space would occur. For example, you would not want to see a
line wrap in the middle of a name, so you would markup
'Peternbsp;Bradley', instead of 'Peter Bradley'.
I wouldn't style the title in the way you have, either. It's a level
one heading in my book, so I'd useh1 and style that. Since that
gives you 150% font size by default as well as a bold font you can also
save on some rules:
.TITLECONTAINER h1 {
color: blue;
font-family: georgia, serif; /* note the generic font for computers
without georgia */
text-align: center;
}
Similarly the content pane. The content pane header is a header so you
should use a header tag. For instance:
dnn_ctr380_ContentPane h1 {
/* styles for content pane level one header... */
}
How did the contentpane end up being a heading? strange, because it doesn't
say that in the asp.net code... *boggle*
Nope. the content pane *header*: not the content pane itself. What I'm
saying is that if something is a header, it should be marked up using
one of thehn tags. As you know better than me, if you use a screen
reader it tells you if you are reading a header (something betweenhn
tags). So if you just mark it up as ordinary text (albeit styled
differently), people using screen readers (or text only browsers for
that matter) don't know there's anything special about it. And if
there's nothing special about it, then why are you styling it as if
there was? :-)
There are also a couple of validation errors that you ought to attend
to. They're easy enough to fix.
What would they be?
http://validator.w3.org/
Better still, do all your testing in Firefox and install the Developer
toolbar. Then you can use the toolbar menu to call the validator. Most
professional Web developers, in my experience, use Firefox in the first
instance and then check in IE afterwards to see what they have to do to
work around IE's bugs.
As it happens, the errors on your page are just emptyul elements.
ul elements must have at least oneli child.
HTH
Cheers
Peter
--
http://www.peredur.net
--
http://www.peredur.net
__
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 sure my container turned out
Ar 11/06/10 21:19, ysgrifennodd Chris F.A. Johnson : The title is not centred. It is bold, but in Firefox it is not Georgia. The text is too small to read. Yes. To centre the title you need to centre the div that contains it. Using text-align:center on the containing div will only centre it in IE (IE6??), so you need to give the title container div a width and automatic margins. Hopefully that won't mess it up in IE. Cheers Peter -- http://www.peredur.net __ 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] nav placement issue - ff and chrome great, ie not so great
Ar 10/06/10 21:28, ysgrifennodd Felix Miata : Who in the world has Century Gothic on their computer? Not I... I have it on several, but why the question? What is it about web developers that they're so insistent visitors never get to see their defaults without disabling styles entirely? If Century Gothic is my default, it's not because someone else picked it out for me, and I'd like to see it more often than not without having to stick to pages I created myself. I think you misunderstand the point. You have, in your styles: font-family : Century Gothic; The problem here is that if users don't have it installed (as I don't, for example), then they will see whatever default their browser thinks they should see - which may not be at all what you want. You might, therefore, want to consider a font list (in order of your preference) that contains some more common fonts and ends with a generic font (e.g. 'serif' or 'sans-serif' HTH Peter -- http://www.peredur.net __ 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] Going from tables to divs...help!
I think you want to have padding-left:10px;width:760; specified for #divisions. I do not understand why you need to state the width for the ul, but it makes the page work. Peter -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Ellen Heitman Sent: June-09-10 9:41 AM To: css-d@lists.css-discuss.org Subject: [css-d] Going from tables to divs...help! I'm trying to get this page (new way, am converting to divs and semantic markup): http://www.pottersignal.com/default_tableless.html to look like this page (old way, using table structure): http://www.pottersignal.com/ I cannot for the life of me get the menu to center and lengthen itself to the proper width (760px). I think I have a poorer grasp on positioning and floats than I thought. :/ Can someone help me? What am I doing wrong? Thanks! ellen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-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] Is this a styling issue or an ASP .NET issue?
Ar 07/06/10 21:03, ysgrifennodd Ellen Heitman : So you're suggesting I just tidy up the current HTML code? Do you think it's necessary to take the time to go from tables to divs for each page? If you look at the code in Visual Studio, it will highlight the HTML errors (by underlining them with a squiggly red line). I'm not sure if Dreamweaver does the same; but you can get the free version (Express Edition, or something IIRC) of VS if you want. This will make correcting the code relatively easy. It looks to me as though it started off as an ASP.NET 2.0 project and then got ported to v2.0 or greater, thus changing the DOCTYPE to XHTML 1.0 Transitional. This has left you with loads of invalid code. Shouldn't be that big a job to make it valid, though, as far as I can see. HTH Cheers Peter -- http://www.peredur.net __ 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 tooltip bug ONLY in FF and Chrome
Ar 03/06/10 19:51, ysgrifennodd Greg Smith : I have a class with position:relative on the 'a' tag, then absolute on the hover state. The positioning doesn't work correctly in either FF or Chrome. Works fine in every other browser. Haven't been able to find any possible reason in my Google searches thus far. Anyone else experience something like this? All relevant CSS has been placed in the head for debugging. My only possible lead so far: I've placed a border around the entire 'a' tag contents, and it's not wrapping around any of it. So my assumption is that these two browsers are not reading the correct positioning, if that makes sense?? LINK: http://www.loctiteproducts.com/super-glues-debug.shtml Thanks, GS The validator gives 117 errors, Greg. I guess that this means that different browsers are going to try to recover in different ways. They don't look too hard to cure. Many of them are to do with the product table you've included as a comment. Getting rid of that might get rid of a lot of them. Then there's the usual crop of missing alt attributes, which I wouldn't think are affecting your layout; but there's also a fair few where you appear to have used elements in places where they're not allowed. I'd have a go myself, but I'm a bit busy at the moment. If it was me, though, that's where I'd start. The worst that can happen is that it'll give you a clean basis to work on. Cheers Peter -- http://www.peredur.net __ 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 tooltip bug ONLY in FF and Chrome
Ar 03/06/10 20:09, ysgrifennodd Peter Bradley : The validator gives 117 errors, Greg. I guess that this means that different browsers are going to try to recover in different ways. They don't look too hard to cure. Many of them are to do with the product table you've included as a comment. Getting rid of that might get rid of a lot of them. Then there's the usual crop of missing alt attributes, which I wouldn't think are affecting your layout; but there's also a fair few where you appear to have used elements in places where they're not allowed. I'd have a go myself, but I'm a bit busy at the moment. If it was me, though, that's where I'd start. The worst that can happen is that it'll give you a clean basis to work on. Cheers Peter Couldn't resist a little play! Yeah. Cutting out the commented product table reduces the errors to 38 or so. Your main problem then is that you have block elements like h1 and div and so on, inside inline elements - notably a. You can't do that. So you need to replace stuff like: a href=something.htmlh1A heading/h1/a with something like: h1a href=something.htmlA heading/a/h1 This will likely mess up your CSS, so you'll have to mess with it to get the look back to what it should be. After that it looks like all you'll have to worry about are some unclosed self-closing elements like input and some missing attributes. Cheers Peter -- http://www.peredur.net __ 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 wont align content in a table properly -- SAFARI issue
Ar 02/06/10 04:47, ysgrifennodd Matthew : Is this the how dare you make so many HTML/CSS violations and still seek our knowledge?!?!11? missive? Well, in my opinion, no. If your code does not validate it may well be that that is the cause of your problem. It's certainly the first place I would look. Just out of interest, I wonder why you think that suggesting you have valid markup is a kind of bureaucratic entrance exam rather than a genuine suggestion as to how you might solve your problem (or at least get a handle on it)? Do you know why it is desirable to have valid markup? Cheers Peter -- http://www.peredur.net __ 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] Background question...
Ar 02/06/10 19:56, ysgrifennodd Michael Beaudoin : Thanks to all for the help, but this one is escaping me... I have the following div's: div id=page-wrap div id=header p class=headHeadheader/p pheader copy/p/div div id=content div id=leftNavpleft nav here/p /div div id=mainpmain content here/p/div /div /div and I would like a background behind the content area, but when I put it in the page-wrap, it won't show behind the leftNav and main areas. The leftNav is floated left, and the main is floated right. What am I missing? I'm sure it's head-slapping simple. Thanks, Michael __ Heh! Yes it is - if I understand you correctly. Floats are not content in the same way as un-floated blocks are. So, your #page-wrap contains the #header, whose height is determined by the height of the two paragraphs it contains. You then have a #content div that follows the second paragraph but has no height at all because it has no non-floated content. Your floated divs float over this div and therefore display no background but their own. If you use Firefox's Web Developer's Toolbar and get it to outline block elements you'll see what I mean. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 floating right div drops below container
You are trying for fluidity and a side bar. Here's a suggestion. How about a container div width:100%. Then your float:left;width:13% left div, your float:left;width:72% main div (as now) and your side bar as a float:left;width:11%. Except the %s don't add up. Peter -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Ken Davies Sent: May-30-10 3:16 PM To: css-d@lists.css-discuss.org Subject: [css-d] IE6 floating right div drops below container Page validates CSS and Html 401strict http://www.equestrian-jewelry.com/horse_rings.htm I have been trying all sorts of variations of % width, max-width, px width of the right div (rail) I have a gallery with larger previews in the center with a div to the right (in FF and IE8) to accommodate the preview. In Ie6 the div is below the container div. One third of my Iexplorer traffic is Ie6 How can I get this div to stay right of the container div? Please? A quick question my webstats show Mozilla 5 viewers more often than Firefox, (almost as often as Ie6). Is Moz 1.7.2 the same as it views OK there. Thanks Ken __ 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] nav container /?
On 28/05/2010 04:59, David Laakso wrote: Matthew P. Johnson wrote: Please forgive my ignorance this may be a simple solution to some. Is there a simple way to put a navigation menu bar into some sort of container so when a change to the van bar needs to happen it can be done in one place instead of having to change the code on all html pages? I am still working on my girlfriends site. You can see what I mean at http://www.applegateelements.com/ Cheers, Yes, with scripting-- php (off-topic for this list). See SSI [server side includes]. http://en.wikipedia.org/wiki/Server_Side_Includes Best, ~d If you have Dreamweaver, you can use the library system, but if not, php includes or ssi is the alternative Peter __ 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] (no subject)
I'm playing around with CSS3 form elements, which are really rather
delightful (don't you wish that IE6 and 7 would creep off into a corner and
quietly die)
I want to have a visible indicator that a field is valid or invalid (easy
enough) as follows:
CSS:
style
input:valid + span::after { content: \2713 }
input:invalid + span::after { content: \2717 }
/style
HTML:
form
plabelName: input required name=name
placeholder=name (required)span//label/p
plabelE-mail: input type=email required name=email
placeholder=email (required)span//label/p
plabelcolour: input type=color required name=color
placeholder=color (required)span//label/p
plabelURL: input type=url name=url
placeholder=urlspan//label/p
plabelComment: textarea required
name=comment/textareaspan//label/p
pinput type=submit value=Do it/p
/form
This puts a tick after valid input fields, and a cross after invalid ones.
But I want neither after empty fields. I have tried all sorts of variants
on
input[value=] + span::after {content:}
but to no avail. It would appear that Firefox and Chrome both evaluate the
value= only on load, and not after the field has changed. Anyone got any
suggestions?
Peter
__
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?
Ar 12/05/10 21:10, ysgrifennodd John : I haven't been able to get a page validated all week...others seeing this too? It's been very slow for a while now. It does work in the end, if you can stand the wait. Chers Peter -- http://www.peredur.net __ 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/HTML validators down today?
On 05/05/10 23:16, John wrote: or just very slow? I've been trying to code-check a page of mine and it's been a good 5 minutes of spinning gear for me. anyone else? Yes. It's been slow for a while for me. I was thinking of posting a similar query. Cheers Peter http://www.peredur.net __ 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] IE 7/8 issues
On 03/05/10 21:13, Jenni Beard wrote: Any thoughts? I am at my wits' end with this! Just a holding answer until someone can get back to you with something more constructive... You have an html error in your link element on line 6. It just need closing, that's all. That gets your html validating OK. In your CSS you have a number of errors - according to the validator: Sorry! We found the following errors (9) URI : http://charlestonhealinghands.com/1/main.css 51 #navParse Error ]margin-right:85px; 52 #navParse Error ]left: 400px; 53 Unknown pseudo-element or pseudo-class :none 54 background-colorParse Error none; 55 background-colorParse Error } 63 #contentValue Error : padding-top http://www.w3.org/TR/CSS21/box.html#propdef-padding-top -50.0 negative values are not allowed : -50px -50px URI : http://charlestonhealinghands.com/SpryAssets/SpryMenuBarVertical.css 22 ul.MenuBarVertical Value Error : background-color http://www.w3.org/TR/CSS21/colors.html#propdef-background-color none is not a color value : none none 59 ul.MenuBarVertical ul Parse Error ]margin: -5% 0 0 -95%; 60 ul.MenuBarVertical ul Parse Error } Correcting these may help. I haven't been able to check because I can't get my hands on IE7 for the moment. HTH Cheers Peter http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ccc drop down menu breaks in mac
Hi, I'm new to css, but have managed to cobble together a web site with a drop down css only menu. It works in pc based browsers ( ie, ff, safari) but the menus will not drop down on macs. Any help or guidance would be appreciated. The site is www.bfivestudio.com Tom Buck the menus seem to function as intended, at least on my mac - safari, mozilla and opera (that's to say, the drop downs work fine). regards, Peter H. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problems - Float problem??
David Laakso wrote: It seems: to work this end in XP IE 6/7/8 on a Mac-- unless I have completely misunderstood the question? PC in sick bay so can't check it in that... Please see: http://www.chelseacreekstudio.com/ca/cssd/pp.htm Thank you, David. You are, as ever, a paragon of patience and helpfulness. I'm currently 63 and I just wonder how old I'll have to be before I stop getting caught out by browser caching! Thanks once again, and apologies for any time-wasting by posting about things I ought to have sorted out myself. Cheers Peter http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ADMIN: a warning for Gmail users
relevant news story on Macworld http://www.macworld.co.uk/digitallifestyle/news/index.cfm?newsid=3221204 Peter H. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE problems - Float problem??
Hi, I have a problem again with IE6 and 7. I'm doing a demonstration form but can't get the second fieldset to right align in either IE6 or IE7. The HTML and CSS both validate and I've tried some conditional comments, which have worked for some other problems, but not for this. Also, the conditional comments opening and closing lines are showing in all versions of IE including IE8 (but not in other browsers). This suggests a mistake in the conditional comments, but I've looked at it all ways and I can't see it. The page is at: http://www.peredur.net/tt280/pb88_sp.htm Many thanks in advance Peter http://www.peredur.net __ 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] IE problems - Float problem??
David Laakso wrote:
In your style sheet you have this hack from a couple of weeks ago:
/*Bit of nonsense for IE6 */
* html #wrapper {
width:975px;
margin: 0 auto;
}
Leave that hack in the style sheet. Immediately above it put these hacks:
*:first-child+html #wrapper {
width:975px;
margin: 0 auto;
} /*4 IE/7.0)*/
*:first-child+html fieldset.top-positioned {float: left; } /*4 IE/7.0)*/
* html fieldset.top-positioned { position: relative; zoom: 1;} /*4
IE/76.0)*/
Delete the CC and its content. If you actually need those hacks (I
didn't check) put them in the style sheet for now.
Thanks very much for that, David, but no joy, I'm afraid. It doesn't
render properly in any version of IE (6, 7 or 8). TBH, if I could just
get it working in IE8 it'd be something.
The hacks are for the background colour. I've taken them out so you'll
see what I mean. They came from Sitepoint's The art and science of CSS.
Reference: spend some time here...
http://www.satzansatz.de/cssd/onhavinglayout.html
I will.
aside
Points are not used to set type for the screen.
/aside
Aargh! I've no idea why I did that. Thanks for pointing it out. Now
corrected.
Cheers
Peter
http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 float bug
David Laakso wrote:
IE/6.0 does not support min/max width or height and trips/bounces on the
percent margins on the wrapper.
* html #wrapper {
width:975px;
margin: 0 auto;
}
* html #left-nav {
height:85ex;
}
Best,
~d
Thanks, David.
It was the * html nonsense I'd forgotten. All working now.
Cheers
Peter
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 float bug
David Hucklesby wrote: Usually, adding an extra wrapper element inside your outer #wrapper with a 'width: 100%;' declaration on it helps IE compute the sidebar width correctly first time around. The jumping comes from a recalculation once IE has figured out 25% of the actual width of #wrapper. Not tested, but this usually works for me. Cordially, David -- Thanks, David. Yes I can see how that would work. I fixed it with David Laakso's suggestion, but I'll remember yours for next time. Thanks Cheers Peter __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 float bug
Thierry Koblentz wrote: I believe your wrapper needs a layout, so David's suggestion should work as it sets a width on #wrapper. Did you try that fix? Depending on which David you mean... I got it going with David Laakso's suggestion. Also, I'd wrap the main content in another DIV and style that one with overflow:hidden and zoom:1 to create a new block formatting context to escape the left float. That's very useful. Thanks. I can see where that could be needed. Thanks for the suggestion. Cheers Peter __ 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] IE6 float bug
I have an example site that I've developed for a course I'm doing. There are no serious problems with it except in IE6; of which there is just one that I can't remember how to fix. Here's one of the pages affected: http://www.peredur.net/tt280/pb88_ph.htm On opening the page, the right sidebar is mis-positioned; but it jumps back into the correct place if I hover over a link in the main-nav navigation bar. I seem to remember that there is an easy fix for this in CSS, but I can't for the life of me find my notes. Can anyone, please, remind me as to what I have to do? It's not absolutely essential that I get the pages working in IE6, but I hate leaving a job half done. The pages validate OK, by the way. Thanks in advance Cheers Peter __ 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] 2 more problems (div width issues)
On 19/03/2010 9:14 AM, Rory Bernstein wrote:
Peter, thank you for this solution. It works perfectly. Now I just
have to ask: How are the photos in #book_images being aligned to the
bottom of the div? I don't understand what makes that happen. There
doesn't seem to be any rule for that. I am mystified!
A new question for everyone!
On this page:
http://rorybernstein.com/francesca_proto/book1.html
The text in the left nav that is contained in span class=small is
not getting as small as I want it (this the black text starting with
The Portraits of Francisco Clemente...). This is the CSS for .small:
.small {font-size: 0.8em;}
But I can't seem to get it go go any smaller. The rule works when I
make the text bigger. Is there some sort of floor to font-size that
won't let me make it smaller?
Hi Rory,
The answer to your first question is that the default settings in
browsers for images is vertical-align: baseline.
As to the font size, this could be an issue with your browser settings,
I was able to quickly made text completely unreadable in both ff and ie.
Here is an article I would recommend
-http://www.gunlaug.no/contents/wd_1_03_04.html.
--
Peter Abramowicz
Arachne Web Designs
403.990.6016
www.arachne-design.com http://www.arachne-design.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tooltip with only XHTML
Surely if the information is important enough that you want people to read it, a tooltip isn't the place to transmit it. Also (just intended as useful feedback), I think users might find it confusing that the icon in question is a link but other similar icons aren't, and there's no way of knowing unless you hover. Best regards, Peter H. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IETester vs. Real IE6: discrepancy
On 16/02/2010 3:19 PM, Brian M. Curran wrote:
Just wanted to say thanks Georg. Italics were causing my float drop. I just
replaced them with bold, which is not the best solution, but I do want the
site to work in IE6.
Why don't you use conditional comments for IE6 and leave italics for
all the other browsers.
!--[if lte IE 6]
.italic {font-style:normal;font-weight:bold;}
![endif]--
--
Peter Abramowicz
Arachne Web Designs
403.990.6016
www.arachne-design.com http://www.arachne-design.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] public websites with faulty CSS-s
Sander Sõnajalg wrote: but really, please, if anybody knows if there is some sort of a list of faulty public real-world pages, i'd appreciate really if you let me know... i've googled unsuccessfully for quite some time now. i just need something to get me started with Hi Sander, I don't know of any list, but for XHTML, just hit a few random websites. I'd bet that a good 30% would be invalid. As for CSS, even the w3c site index page is invalid: http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=http%3A%2F%2Fwww.w3.org%2F (It uses some Mozilla-only styles, I think, and some hacks to make sure the page renders properly in IE6). Cheers Peter __ 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] Fixed three-column with padding: newbie question
Doug Niven wrote:
Hi Folks,
I'm definitely a newbie, trying to wean myself off tables.
What I need is a 720px wide box with three 240px cells inside it, with 10px
padding-right for each cell.
It cannot be flexible or stretchable.
I found what I **thought** might be the recipe for such a design:
http://www.electrictoolbox.com/basic-3-column-fixed-width-css-layout/
However, I cannot get the middle cell to display 240px wide:
http://people.ucsc.edu/~class1/
Any suggestions/ideas MUCH appreciated, so I can leave tables behind!
Thanks!
Cheers, Doug
Hi Doug,
I suspect you haven't told us the full story, so here's the simplistic
answer. Note that the columns are each 240px wide (230px of content +
5px left padding + 5px right padding). Both the HTML and the CSS are valid:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
titlea propos nothing/title
meta name=GENERATOR content=Quanta Plus /
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
style type=text/css
#wrapper {
width:720px;
}
#left, #middle, #right {
width:230px;
padding:5px;
float:left;
}
/style
/head
body
div id=wrapper
div id=left
p
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi viverra dignissim dui, sit amet pellentesque orci sagittis vel.
Integer eget enim eu nibh consequat cursus nec eu erat. Pellentesque
eleifend turpis at nunc commodo vehicula. Suspendisse potenti. Praesent
nec massa sed tortor ultrices molestie fermentum sed purus. Nunc eu
lacus nisi. Aenean ultrices, ipsum in vestibulum ornare, lorem erat
auctor sapien, aliquet blandit diam justo ut dolor. Sed quis euismod
nibh. Nulla facilisi. Maecenas tempus congue leo sit amet ullamcorper.
Aenean vitae felis sit amet elit cursus aliquet. Sed venenatis vehicula
porttitor. Mauris viverra facilisis nulla, id laoreet neque consectetur
sed. Nulla in egestas felis. Aliquam a metus nulla, non feugiat ligula.
Praesent gravida, libero quis cursus dignissim, turpis justo pulvinar
orci, a pulvinar tortor est vitae augue.
/p
/div
div id=middle
p
Mauris sed ullamcorper diam. Vivamus ac risus ut nulla
placerat fermentum volutpat a ipsum. Nulla vitae dolor justo, vitae
blandit metus. Sed lobortis dapibus libero nec dapibus. Vestibulum arcu
sapien, semper et euismod eu, rutrum semper metus. Pellentesque volutpat
diam at lacus fermentum in luctus diam lobortis. Praesent nec nibh orci.
Etiam quam nisi, tempus et pharetra vel, euismod ut elit. Phasellus non
lectus nunc. Maecenas nec lacus nisl. Pellentesque malesuada elit
iaculis est euismod dictum gravida turpis elementum. Vivamus tempus,
justo at blandit dictum, lacus elit rutrum augue, eget varius magna eros
eu arcu. Integer malesuada gravida ligula, a bibendum purus semper nec.
Cras suscipit ipsum non tortor convallis ac egestas elit sollicitudin.
Vivamus imperdiet dui vitae lorem vulputate adipiscing. Vivamus ultrices
dui ac augue tincidunt vel posuere orci molestie. In tincidunt, augue id
viverra elementum, metus sapien venenatis tortor, sit amet ornare nisi
magna ac velit.
/p
/div
div id=right
p
Morbi luctus urna vitae quam malesuada tincidunt. Quisque
facilisis ligula at mauris iaculis vel luctus mi consequat. Vivamus
fermentum auctor odio a gravida. Praesent a sem a mauris suscipit
gravida. Sed massa mi, malesuada a fringilla id, molestie vel mi. Sed
risus dolor, porta sit amet tempus sed, gravida id dolor. Maecenas
libero enim, cursus a imperdiet eget, laoreet sed massa. Aliquam
consequat lacinia mattis. Mauris a quam nulla. Praesent consectetur
sagittis ullamcorper. Praesent tincidunt condimentum feugiat. Curabitur
ullamcorper dapibus dui vitae convallis. Sed placerat rhoncus
condimentum. Cras sit amet est vel turpis rutrum tincidunt.
/p
/div
/div
/body
/html
Actually, I'd let one of the columns size itself, to give the browser
some wiggle room. And don't forget that if you want borders and/or
margins that these add to the width.
Cheers
Peter
http://www.peredur.net
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 doesn't see styles [solved]
Many thanks to everybody who replied and helped with this. I've re-written the page, using floats instead of absolute positioning, and ems instead of percentages: http://www.peredur.net/swanwick It now doesn't need any conditional styles. It's not going to win any design awards, but it'll make a good demonstration, I think. Cheers, and thanks again, Peter http://www.peredur.net __ 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/
