[css-d] Help needed with IE6
I'm designing a Drupal theme and, unsurprisingly, am running into some problems with IE6. All of these things are displaying correctly in FF, IE7, Safari, and Opera. 1. The main (horizontal) menu is displaying in the wrong place. 2. There's a blank space between div#main and div#footer. 3. Bizarrely, all of the text is centered! The site is here: http://testdrupal.transformativeworks.org/ CSS: http://testdrupal.transformativeworks.org/sites/all/themes/cavatica/cavatica.css The PHP page template is not directly accessible from the site, so I've archived a copy here: http://purplelagoon.org/Stuff/template.zip Any help would be greatly appreciated. Thanks! Kristen Murphy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
On 2009/08/10 22:05 (GMT-0700) Michael Stevens composed: From: Felix Miata [offlist, BTW] Not the monitor's actual DPI, but the DPI actually applied to the viewport, assuming a compliant browser with JS enabled: http://fm.no-ip.com/auth/dpi-screen-window.html http://fm.no-ip.com/auth/Font/fonts-ptdemo.html I checked both of those and neither told me my DPI. One showed me a picture and said 'if this box isn't 1 then your DPI is not properly set.' I guess The word on those pages is accurately, not properly. Properly is a matter of opinion, while accurately is not. If you want to find your system accurately set, you'll either need a display that actually is 96 DPI, or you'll need to run an OS that facilitates use of an accurate setting, such as Linux. FireFox isn't a compliant browser. When I use IE it give me 96 dpi which is not correct since the 1 box is not 1. I can't recall ever having found any version of a Gecko browser incapable of producing a DPI report from either of those URLs. Firefox 3.0.13, Firefox 3.5.2 SeaMonkey 1.1.17 work just fine on them here. http://fm.no-ip.com/SS/Fnt/midori-font-default096.png shows some relatively recent browser versions that get most of it right on a 96 DPI system. http://fm.no-ip.com/SS/Fnt/fonts-cooker-0706-120LS.png shows a couple from more than two years ago at 120 DPI. http://fm.no-ip.com/SS/michst01.png is fresh at 144 DPI (and shows typical results at high DPI of authors using px to size web page objects). OTOH, MSIE 6.0 as found on Windows NT 5.1 is the least compliant browser in widespread use today, and may or may not bother to fill in the cells which it is actually capable of properly filling. It takes a great deal of effort to get Windows to use a DPI that isn't directly selectable in its settings applet. If it reads 96 in IE, it is as set by M$ or as reset to M$'s default by someone else. Unless DPI is _accurately_ set, that image will not measure 1 in IE, or in any other browser. Even if DPI is accurately set, if the actual accurate applied DPI is less than 96, common browsers will typically use 96 instead of the desktop setting for their viewport content, and thus those URLs will show 96 rather than the actual setting applied. In recent Geckos you can get around that via about:config by changing the layout.css.dpi setting from -1 to 0. So, is coding based off of incorrect data any better than ignoring the data altogether? Better to ignore it because it shouldn't be relevant rather than because of any difficulty involved in getting it. When you design for accessibility, usability and resolution independence, resolution and DPI don't matter. Personally, I try to make my job easier and not more difficult. And worrying about a measurement that likely is incorrect and largely irrelevant is not making my life easier. Forget pixels/px exist. Forget resolution exists. Forget DPI exists. Forget trying to control that which you cannot see. Size in em, and designer life will, at least after eventually unlearning the pixel perfection fallacy, be easier. -- How much better to get wisdom than gold, to choose understanding rather than silver. Proverbs 16:16 NKJV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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] Screen resolution?
2009/8/11 Michael Stevens bigm...@bigmikes.org: -Original Message- From: hramr...@gmail.com [mailto:hramr...@gmail.com] On Behalf Of Michal Suchanek The problem is that the physical size is what the user sees, not the pixel resolution. That's why it's better to avoid pixels and specify sizes in points or other physical units where possible. -- Agreed. But using px vs % vs em is not at all the topic. Most monitor brochures do mention DPI or its inverse - the pixel pitch. So any moderately knowledgeable electronics salesman can tell you they don't have any 72 DPI monitors. -- You must have some really smart salesmen where you are... My experience is that not many people know a great deal. Well, around here many can read the brochures which is pretty much as far as their knowledge goes. Case in point would be this entire discussion. Anyone moderately knowledgable in computers will tell you a monitor's RESOLUTION (the origional question) is measured ONLY by pixels wide by pixels tall. A monitor can have a value that is labelled dots/pixels per inch but that is not a monitor's resolution. That is also called resolution. That's why the question was resolution (DPI) to tell it apart from the number of pixels. And asking for a value that can range from 20 or less to 120 or more is a waste of time, IMO. It's more like 90-150 for common screens with lower values if you use something like a TV for a screen (tends to be huge with few pixels) or some high-res screen - these would be around 200. Asking for the size in pixels which can vary from 320x200 to thousands x thousands is even more pointless. Even on a 30 screen the browser window still can be only 600x300 pixels but the DPI resolution applies to windows of all sizes. Other people have already pointed out that some 90%+ environments are broken and the resolution in DPI cannot be determined or the obtained value is not accurate. Still knowing the range you can expect can give you some idea what you are dealing with. Yes, having a photograph's resolution mean dots per inch and a monitor's resolution meaning pixels wide by pixels tall is confusing but that's the way it is. Pixel pitch is not a value of how many pixels are crammed into a given area (which is slightly related to the OP). A smaller value is better because it means there is less space between pixels and therefore a clearer image. But, it's irrelevant to the topic. It's very relevant if you are talking about DPI. A pixel pitch of 0.26 mm gives you about 4 pixels/mm or about 98 DPI. Thanks Michal __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
Felix Miata wrote: [...] The reason why IE does what it does, like other non-Gecko Linux browsers other than Opera, is that its preference sizing is done in pt rather than px. It is because 12pt equals 16px at (the Windows default of) 96 DPI that medium happens to be 16px on most Windows systems. Increase Windows system DPI to the next increment of 120, and the conversion of 12pt shifts to 20px, the next, 144 DPI, to 24px, and the last, 192 DPI, to 32px. Medium is always 12pt, but the px size of 12pt depends on the DPI setting applied to the desktop. Even 72 DPI, for a 1 to 1 12px to 12pt ratio, is possible (but not recommended) on Windows. O_O Hello Felix, Very interesting discussion in which I am learning much. What you say above got me thinking and I have decided to do a test case. http://css-class.com/test/css/box/pixels-points-dpi.htm This is what I note: 1. The 96px and 72pt boxes are the same size with a 96 DPI setting for the monitor. 2. The 100px and 75pt boxes are the same size with a 96 DPI setting on a monitor but also they are exactly 1 inch (using a ruler) in height and width. 3. When the DPI setting is changed to 120 DPI, the boxes using pts become 125% of their size at 96 DPI. 4. The boxes using pixels are the same size and the box of 100px at either 96 or 120 DPI still equals exactly 1 inch (using a ruler) in height and width. On the same test case are screenshots using both 96 DPI and 120 DPI. My question to you is why a box of 100px equals a inch measured by a ruler and not what I expected 96px? BTW, I thought the higher DPI setting would make the text smaller. I now discover the reverse is true where the text and chrome of the browser is larger. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen resolution?
On Mon, Aug 10, 2009 at 11:24:40AM -0700, Theresa Mesa wrote: Interestingly enough, as a learning exercise, I opened an image in Photoshop, set the image size to 300px x 454px. File size was 399.3K, regardless of what PPI it was. You were correct, Mike. Then I saved the image in Photoshop's Save for Web and Devices. Image quality, jpeg, maximum (100). Image size, 300x454. File size, 93.25K. When I open that image that I saved from Web and Devices to my desktop, it's 399K. But Save for Web and Devices just told me the image was 93K. Now we're getting out of the realm of CSS, so I'll take this interesting question to Adobe's forums. That's an easy one... 300px x 454px x 3 bytes/px = 408,600px, or 399.0234k of actual, uncompressed image data. Add some headers and metadata, and 399.3k sounds about right as a final uncompressed file size. Save for Web and Devices applied jpeg compression to the image, producing a file size smaller than the actual uncompressed image size, but it still has to be decompressed in memory back up to its full 399k to be displayed. -- Dave Sherohman __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
2009/8/11 Felix Miata mrma...@earthlink.net: On 2009/08/10 16:22 (GMT-0700) Theresa Mesa composed: What I find amusing about the admonition to use points is that points are printing-industry-based, not monitor- or Web-based. There are 12 points in a pica, or 72 points in an inch. Back in the day, one pica was .166 of an inch; now it is 1.6 of an inch. But we don't use inches or picas when discussing the web. I'm aware of the discussions about using point sizes on the web, so I'm not opening that discussion. A pt has the same meaning in CSS, but the problem is its inaccuracy as used in a web browser. Most personal computers used for the web use an arbitrarily assumed DPI, while an accurately sized pt requires an accurate DPI be applied for a screen pt to match the physical size of a printed pt. The result of the wild variation in accuracy is that pt, like px, as a CSS sizing unit, bears little predictable relationship to the resulting physical size of the objects it is applied to, or any physical size any particular user of a page styled in CSS would find appropriate for his own use on his _personal_ computer. Consequently, on today's web, CSS styling in px should be no more or less objectionable than CSS styling in pt. An em is another issue. On the surface, an em is a unit of measurement that uses the width of the capital M in a font... http://en.wikipedia.org/wiki/Pica_(unit_of_measure) http://desktoppub.about.com/cs/intermediate/a/picaspoints.htm Theresa (graphic designer - and old-time typesetter - for 38 years now) The CSS specs define em differently than you are used to for media other than the web: http://www.w3.org/TR/CSS21/syndata.html#em-width In contrast to px and pt, sizing in em results in a predictable physical size; predictable in the sense that it bears a useful relationship to a size the user finds suitable for personal use, 1em, the size of his browser's default font. If you think about it, you may find sizing in em isn't vastly different than sizing in picas. The main difference is that the visitor via his browser prefs determines the size of the em, while the pica is a fixed physical size. When a web author uses em sizing in his CSS, he's essentially creating resolution independent design. IOW, to an author sizing primarily or totally in em, resolution is a totally non-issue. Even though computer desktops are not yet resolution independent, CSS styled web pages can be. Even if points are not precise unit in CSS because of browser and OS problems most users can set their DPI in their preferences if it is not automatically determined from screen size (unless they are running a particularly abhorrent browser + OS combination). Once you set the DPI properly sites designed in points, mm or em should be reasonably readable for you. On the other hand, designing in pixels is like saying I design this web for my screen and I don't care the least how it looks for other people. Thanks Michal __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
On 2009/08/11 16:10 (GMT+1000) Alan Gresley composed:
Very interesting discussion in which I am learning much. What you say
above got me thinking and I have decided to do a test case.
http://css-class.com/test/css/box/pixels-points-dpi.htm
This is what I note:
1. The 96px and 72pt boxes are the same size with a 96 DPI setting for
the monitor.
2. The 100px and 75pt boxes are the same size with a 96 DPI setting on a
monitor but also they are exactly 1 inch (using a ruler) in height and
width.
3. When the DPI setting is changed to 120 DPI, the boxes using pts
become 125% of their size at 96 DPI.
4. The boxes using pixels are the same size and the box of 100px at
either 96 or 120 DPI still equals exactly 1 inch (using a ruler) in
height and width.
On the same test case are screenshots using both 96 DPI and 120 DPI.
My question to you is why a box of 100px equals a inch measured by a
ruler and not what I expected 96px?
You flunked the part of the thread about desktop DPI and actual display DPI
in most cases being different. :-) Only when the DPI applied to the desktop
matches the DPI of the display will the measured size of a screen object in
pt, mm or inches be accurate. In your case, the actual DPI of the display
does not match the desktop's assumption, and is exactly or is very close to
100. Examples of this match to 100 can be seen in the
http://fm.no-ip.com/auth/dpi.xhtml chart for 1600x1200 on 20, 1440x900 on
17, 1280x800 on 15, 1680x1050 on 20 and 1280x960 on 16.
BTW, I thought the higher DPI setting would make the text smaller. I now
discover the reverse is true where the text and chrome of the browser is
larger
A applied DPI change does affect sizes in pt (which is used for chrome sizing
in all modern desktop environments), mm or in, but not those in px. As DPI
increases, the quantity of px required to achieve any certain physical size
increases. This is why images rendered at their intrinsic size at higher DPI
are physically smaller than at lower DPI, and why users of high resolution
displays who are unfamiliar with zoom and forcing a minimum text size
complain about too small fonts when authors declare things like body
{font-size: 12px}.
Viewport behavior and chrome behavior don't always follow each other, and
sometimes a browser (e.g. Safari on Windows) ignores the desktop's assumed
DPI setting. IOW, it's possible for e.g. 10pt chrome/menu text and 10pt text
within the viewport to be different in size due to different DPI being
applied to each. If on Windows you set desktop DPI to 120, Safari's
chrome/menu text will be smaller than that of IE and Firefox.
It used to be that in Firefox a DPI override in about:config's layout.css.dpi
would apply to both the viewport and the chrome, but for over a year now (all
of the 3.x varieties IIRC) its chrome obeys the desktop setting regardless of
the about:config layout.css.dpi setting.
--
How much better to get wisdom than gold, to choose
understanding rather than silver. Proverbs 16:16 NKJV
Team OS/2 ** Reg. Linux User #211409
Felix Miata *** http://fm.no-ip.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] Screen resolution?
On Tue, Aug 11, 2009 at 04:10:45PM +1000, Alan Gresley wrote: 2. The 100px and 75pt boxes are the same size with a 96 DPI setting on a monitor but also they are exactly 1 inch (using a ruler) in height and width. ...which means that, within the limits of the accuracy of your ruler, your monitor is actually displaying at 100DPI, regardless of your operating system's DPI setting. 3. When the DPI setting is changed to 120 DPI, the boxes using pts become 125% of their size at 96 DPI. Correct. Always remember that monitors operate purely in pixels and cannot display based on any other unit or size. The monitor's physical DPI is purely a function of the screen's physical size and the active display resolution (e.g., 1024x786, 800x600, etc.). The DPI setting in your operating system is a pretend value, as in the operating system will pretend your monitor is 96DPI or 120DPI, since it doesn't know the actual physical DPI, which is used to convert physical measurements (such as inches or points) into pixels so that the monitor can display them. When you change the DPI setting, the ratio used for that conversion changes, so 75pt or 1 will be translated into a different number of pixels. 4. The boxes using pixels are the same size and the box of 100px at either 96 or 120 DPI still equals exactly 1 inch (using a ruler) in height and width. Yep. 100px is already in pixels, so it can be displayed directly without having to use the DPI setting to convert its size into pixels first. My question to you is why a box of 100px equals a inch measured by a ruler and not what I expected 96px? Because your monitor isn't actually 96DPI. BTW, I thought the higher DPI setting would make the text smaller. I now discover the reverse is true where the text and chrome of the browser is larger. At 96DPI, the operating system converts a 1 line into 96 pixels. At 120DPI, the operating system converts a 1 line into 120 pixels. The actual pixels on the screen are the same size regardless - remember that their size is purely a factor of the physical screen size and the active display resolution, not of the DPI setting - so the (supposedly) 1 line becomes 24 pixels longer when you change from 96DPI to 120DPI. (And note that 24 is 25% of 96, matching the 25% size increase that you noted in your 3rd observation.) -- Dave Sherohman __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
On Tue, Aug 11, 2009 at 11:11:04AM +0200, Michal Suchanek wrote: Even if points are not precise unit in CSS because of browser and OS problems most users can set their DPI in their preferences if it is not automatically determined from screen size (unless they are running a particularly abhorrent browser + OS combination). Once you set the DPI properly sites designed in points, mm or em should be reasonably readable for you. Not really, at least as far as points/mm are concerned[1], assuming that by properly you mean determined from screen size. Setting your browser/OS DPI setting to match the physical DPI of your display means that 12pt text on the screen will be the same size as 12pt text on a printed page. However, this does not mean that the text will be readable if, say, the screen is an HDTV and you're sitting on the far side of the room. I would argue that display DPI should be based on what the user finds most usable in their particular environment and physical screen DPI should be completely ignored except in a handful of special cases, such as computers being used for print design, where it's actually important to be able to clearly relate the screen display to the size of a physical object. But, then, I would also argue that, aside from those few special cases, DPI should be abandoned when dealing with computer displays, as trying to relate on-screen display sizes to physical sizes is fundamentally misguided, since you have no way of knowing whether the user wants ultra-dense display to fit on their iPhone or five-inch-high text for their gigantic HD rig. [1] As already mentioned in this thread, modern browsers base em on the user's default font size, not an actual physical unit, so em-sizing should work regardless of whether the DPI setting is accurate or not. -- Dave Sherohman __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
Even if points are not precise unit in CSS because of browser and OS problems most users can set their DPI in their preferences if it is not automatically determined from screen size (unless they are running a particularly abhorrent browser + OS combination). This brings up a very good point that should not be overlooked. While you can labor over POINTS, PIXELs, etc., and do the same with COLOR. When you do that you are NOT designing for your users. You are designing for your own nicely calibrated system. Users, except for some professionals (photographers, designers, video editors, etc.), do not calibrate their systems. They will do loose adjustments to their monitor. They may also set their system to large fonts (Windows, not sure what the equivalent is on Mac). I know this because I've been there. Coming from a print and print design background it was perfectly natural to me to adjust the DPI of my monitor with a ruler held up to the screen so that when I viewed a document at 100% on screen it measured exactly. I also did numerous color adjustments using commercial color targets. Guess what? People told me Type is too large Text is too small That color is too red That color is black (when it was actually dark brown) So now I have one monitor that *is* color adjusted with a print and a video profile, and an uncalibrated monitor that just has minor contrast/brightness adjustments. I let my OS use default DPI, occassionally switching to the preset large fonts on Windows for testing purposes. While this thread has been very informative, it seems like it has long lost it's relevance to CSS. Are all of the moderators on vacation? Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com Please note: Return e-mail messages are only accepted from discussion groups that this e-mail address subscribes to. All other messages are automatically deleted. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen resolution?
2009/8/11 Dave Sherohman d...@sherohman.org: On Tue, Aug 11, 2009 at 11:11:04AM +0200, Michal Suchanek wrote: Even if points are not precise unit in CSS because of browser and OS problems most users can set their DPI in their preferences if it is not automatically determined from screen size (unless they are running a particularly abhorrent browser + OS combination). Once you set the DPI properly sites designed in points, mm or em should be reasonably readable for you. Not really, at least as far as points/mm are concerned[1], assuming that by properly you mean determined from screen size. Setting your browser/OS DPI setting to match the physical DPI of your display means that 12pt text on the screen will be the same size as 12pt text on a printed page. However, this does not mean that the text will be readable if, say, the screen is an HDTV and you're sitting on the far side of the room. That's what falls under proper setting. Typically you look at the screen from a distance similar to that from which you look at printed paper so the physical DPI is a good starting point for most desktop systems. There is nothing stopping you from setting the DPI smaller or larger to accommodate for different conditions. Unlike sites designed in pixels sites designed in points will obediently resize to match you DPI settings. Thanks Michal __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
2009/8/11 Rob Emenecker list-s...@hairydogdigital.com: Even if points are not precise unit in CSS because of browser and OS problems most users can set their DPI in their preferences if it is not automatically determined from screen size (unless they are running a particularly abhorrent browser + OS combination). This brings up a very good point that should not be overlooked. While you can labor over POINTS, PIXELs, etc., and do the same with COLOR. When you do that you are NOT designing for your users. You are designing for your own nicely calibrated system. Users, except for some professionals (photographers, designers, video editors, etc.), do not calibrate their systems. They will do loose adjustments to their monitor. They may also set their system to large fonts (Windows, not sure what the equivalent is on Mac). I know this because I've been there. Coming from a print and print design background it was perfectly natural to me to adjust the DPI of my monitor with a ruler held up to the screen so that when I viewed a document at 100% on screen it measured exactly. I also did numerous color adjustments using commercial color targets. Guess what? People told me Type is too large Text is too small That color is too red That color is black (when it was actually dark brown) So now I have one monitor that *is* color adjusted with a print and a video profile, and an uncalibrated monitor that just has minor contrast/brightness adjustments. I let my OS use default DPI, occassionally switching to the preset large fonts on Windows for testing purposes. Since you have calibrated your monitor you can say with confidence that the colour is brown. People with non-calibrated monitors may disagree about the exact colour but if you designed the page with decent contrast they should be able to see the elements clearly on any usable monitor. I have been where a web was designed in pixels to look nice on the designer's screen and on the bosses screen. The fact that a somewhat aged secretary in another department has a smaller screen with the same pixel count (and thus higher DPI) and cannot read anything on the web was, of course, completely irrelevant to the design. What's worse, outside users might often face the same issue. It was a while back when there was no IE7 so 90% people would browse the site with IE6 that refuses to resize pixel based sizes at all. Were it done in points/em/mm/whatever the windows use large fonts setting would apply. Some other browsers offer the option to make the text larger but the design breaks then because it is done in pixels and while the text resizes the surrounding elements stay the same. Recently browsers offer an option that works around this poor design. Iinstead of resizing just the text they scale the whole content as bitmap. It still looks ugly, though. Thanks Michal __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Question about width and min-width in ul
I have a menu system that uses nested ULs. The main menu is a fixed size, but I want the sub menu's to be variable width that will grow to encompass the entire width of the menu item. I figured min-width would do this; however, it only grows to be as big as the longest non-breaking string. I thus have a two line menu looking like this: Photo Library When I want a menu item like this: Photo Library I've been using Firebug, Web Developer, and DOM Inspector to help me figure out what may be going wrong and I've even tested my code at http://www.w3schools.com/CSS/tryit.asp?filename=trycss_dim_min-width where it seems to work fine. Any help would be appreciated. I'm new to this mailing list, but not new to CSS. The offending menus can be found at http://www.wynright.com/robotics2/ on the left side; the top menus are fixed width. Chris Barth __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
On 2009/08/11 11:11 (GMT+0200) Michal Suchanek composed: Once you set the DPI properly sites designed in points, mm or em should be reasonably readable for you. Em, yes, as long as the designer makes no assumption that the predetermined em is wrong and (arbitrarily) changes it. With pt mm it might seem so, but it isn't. That most people should be happy with a size of Xmm or Ypt leaves it not OK for the rest. Personal computers are personalizable, which makes them at least theoretically much better than print precisely for that reason, that those who require larger or prefer smaller than most can have it, and can have it automatically work for them just as well as for the majority. With em designs far more visitors can have instantly acceptable results than with pt, mm or px designs, because it is the sole province of each visitor to determine the em that works best with his own eyes on his own hardware. On the other hand, designing in pixels is like saying I design this web for my screen and I don't care the least how it looks for other people. Unfortunately, using pt, mm or in, regardless of DPI accuracy or screen resolution, doesn't work out all that much better than px. All but em/ex leave visitors' needs and preferences totally out of the sizing equations. -- How much better to get wisdom than gold, to choose understanding rather than silver. Proverbs 16:16 NKJV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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] How to get window to crop image?
Hi guys, I guess I could just crop the image and make it 100%, but I would be settling, I think, because based on what the current version is doing, I'm pretty sure I would see a little of my black background on either side. It won't really look like it continues beyond the window edge. Chris, the header on your Neil Parish site looks like it's what I want on the right, but not on the left; that's what happened to me before--the image anchors itself to the left, and only bleeds off on the right. Lalena -Original Message- I have a new challenge. In CSS, is it possible to get an image to be cropped off on both sides? Or in print language, to bleed on both sides? -- Any particular reason why you wouldn't just make the image the size you want? It seems kinda silly and a waste of time to make an image larger than necessary and position it off the page so that it will get cropped when viewed. Mike I agree. However if you positioned the background image to centre and it was indeed bigger than the div it would be cropped equally on the left and right. Kinda pointless unless the containing div is flexible so that on a big high res screen, with full screen broswer the user can still see an image. I did that for an old site, see: http:// blakeys.com/mep/about.html and the header image. CB __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen resolution?
I've learned much from this discussion. Thank you! Theresa On Aug 11, 2009, at 1:37 AM, Dave Sherohman wrote: That's an easy one... 300px x 454px x 3 bytes/px = 408,600px, or 399.0234k of actual, uncompressed image data. Add some headers and metadata, and 399.3k sounds about right as a final uncompressed file size. Save for Web and Devices applied jpeg compression to the image, producing a file size smaller than the actual uncompressed image size, but it still has to be decompressed in memory back up to its full 399k to be displayed. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
2009/8/11 Theresa Mesa trixiesirishe...@gmail.com: But...the web isn't print. So, unless I'm creating a separate style sheet for print, I really don't care how it looks for other people. Theresa Then you can as well draw a picture, print it out, and stick it to your wall. Or put plain text files on your site, no need to bother with those angular HTML tags or styles. Or put Illustrator files there. The fact that 90% people cannot open them should not stop you - you don't care how it looks for them, do you? Thanks Michal __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
2009/8/11 Felix Miata mrma...@earthlink.net: Unfortunately, using pt, mm or in, regardless of DPI accuracy or screen resolution, doesn't work out all that much better than px. All but em/ex leave visitors' needs and preferences totally out of the sizing equations. The difference is that with pt preferences like Windows' Large fonts apply. With pixels the page is completely cemented to certain number of pixels. Fortunately browsers at least tend to scale up the pages when printing. Imagine those 16px letters on 1200dpi printouts. Thanks Michal __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Weird alignment issue with IE 7...
On 11/08/2009, at 1:10 AM, Michael Beaudoin wrote:
I just finished roughing out a site for a client and it looks good in
all browsers, except there is an alignment issue in IE 7. If you look
at these sample pages:
- http://www.ba-doyn.com/junk/saw/index.htm
- http://www.ba-doyn.com/junk/saw/services.htm
you will see that the vertical white line, which should be between
the
paragraphs, is off to the right.
It looks fine in Firefox/Safari for Mac, and Firefox for PC.
Any suggestions on this one? I can't seem to figure out why.
Hi Michael - Why don't you put a left border on the element itself? I
would suggest that this is a much more straightforward approach.
Remove div id=vert-bar/div
#secondBody {
border-left: 1px solid #FFF;
padding: 0 0 10px 10px; /* Tweak these if need be */
margin: 10px 0 10px 10px; / * Tweak these if need be */
}
If you wanted to get fancier you could set it up so that either side
could be taller by setting a right border on the other div and pushing
it across 1px.
Also, #firstBody and #secondBody could be ps rather than divs.
Just a thought.
I liked your solution with the border, makes it a bit nicer with the
rule extending down.
Now, in IE 7, the rule extends all the way down into the footer
without stopping at the bottom.
Did I code something wrong with regards to the bottom of the rule?
- http://www.ba-doyn.com/junk/saw/index.htm
- http://www.ba-doyn.com/junk/saw/services.htm
Thanks,
Michael
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen resolution?
I'm designing for a *web* site. I'm not designing a business card. If I plan for people to print it out, I can create a style sheet for that. I design for greatest usability and accessibility, if possible, checking on the PC platform and Mac platform in a number of browsers on each, but it's still for the web, not for print. What other people would I be designing for? I don't see your point. Theresa On Aug 11, 2009, at 7:33 AM, Michal Suchanek wrote: 2009/8/11 Theresa Mesa trixiesirishe...@gmail.com: But...the web isn't print. So, unless I'm creating a separate style sheet for print, I really don't care how it looks for other people. Theresa Then you can as well draw a picture, print it out, and stick it to your wall. Or put plain text files on your site, no need to bother with those angular HTML tags or styles. Or put Illustrator files there. The fact that 90% people cannot open them should not stop you - you don't care how it looks for them, do you? Thanks Michal __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
2009/8/11 Theresa Mesa trixiesirishe...@gmail.com: I'm designing for a *web* site. I'm not designing a business card. If I plan for people to print it out, I can create a style sheet for that. I design for greatest usability and accessibility, if possible, checking on the PC platform and Mac platform in a number of browsers on each, but it's still for the web, not for print. What other people would I be designing for? You are designing web pages for yourself? Web pages are typically designed for other people who visit them. Their equipment may range from mobile phones through low-end office PCs to high-end graphics workstations. So if the page usability depends on readability of an element that is only available in certain pixel size I would not call it accessible. If you do not care how it looks what do you design then? The look is part of the design for visual browsers, Thanks Michal On Aug 11, 2009, at 7:33 AM, Michal Suchanek wrote: 2009/8/11 Theresa Mesa trixiesirishe...@gmail.com: But...the web isn't print. So, unless I'm creating a separate style sheet for print, I really don't care how it looks for other people. Theresa Then you can as well draw a picture, print it out, and stick it to your wall. Or put plain text files on your site, no need to bother with those angular HTML tags or styles. Or put Illustrator files there. The fact that 90% people cannot open them should not stop you - you don't care how it looks for them, do you? Thanks Michal __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Styling forms
Hi, maybe this isn't 100% CSS question, but I'm looking to build a simple contact form, name, email, message and submit button (maybe captcha too, but optional). The thing is that no matter how I construct a form it displays wrong, either in FF, IE7 or IE8. I've found some tutorials on Google, but they don't display right on ie8 or I simply can't adapt them. Any help would be appreciated. Regards, -- Krystian Szastok Affordable, Freelance Web Designer in Eastbourne, East Sussex: http://eastbournewebdesign.net Mobile UK (Orange): 07528 036 337 Call for more information or email me. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
- Original Message From: Michal Suchanek hramr...@centrum.cz 2009/8/11 Felix Miata : Unfortunately, using pt, mm or in, regardless of DPI accuracy or screen resolution, doesn't work out all that much better than px. All but em/ex leave visitors' needs and preferences totally out of the sizing equations. The difference is that with pt preferences like Windows' Large fonts apply. With pixels the page is completely cemented to certain number of pixels. Fortunately browsers at least tend to scale up the pages when printing. Imagine those 16px letters on 1200dpi printouts. I hate to skew the discussion by introducing another variable, but while it is true that a layout designed using px for sizing is essentially cemented in that size, all of the modern browsers I have seen now emphasize page zooming over text scaling. So it is certainly true that a user may choose to increase or decrease the font-size locally, I consider that out of my control and by doing so, the user accepts that a layout may not hold together as well as it was originally designed. However, if a user has poor eyesight, for example, and wants larger text, they can use the page zoom features of the browser to safely increase or decrease the zoom and NOT impact the layout of the page at all. I understand the argument from a purist perspective, usability should be first and foremost in any design and/or layout, but realistically, I don't see this as a practical issue given the more common usage of page zooming over the now declining exposure of any sort of text scaling behavior in modern browsers. How long do we design or build in support for what is essentially becoming a deprecated behavior? -- -Sam __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Styling forms
In order to help we'll need more information about what you've tried and a link of what your doing would be nice. Many of us have successfully created forms before, so this is not a technical difficulty. Also letting us know which technology your using would be very helpful. This is a form that even impliments Google's Goal Tracking: http://wynright.com/Contact_Us/Request_Info.aspx. Chris Barth -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Krystian - Sunlust Sent: Tuesday, August 11, 2009 11:25 AM To: CSS-D Subject: [css-d] Styling forms Hi, maybe this isn't 100% CSS question, but I'm looking to build a simple contact form, name, email, message and submit button (maybe captcha too, but optional). The thing is that no matter how I construct a form it displays wrong, either in FF, IE7 or IE8. I've found some tutorials on Google, but they don't display right on ie8 or I simply can't adapt them. Any help would be appreciated. Regards, -- Krystian Szastok Affordable, Freelance Web Designer in Eastbourne, East Sussex: http://eastbournewebdesign.net Mobile UK (Orange): 07528 036 337 Call for more information or email me. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Weird alignment issue with IE 7...
Michael Beaudoin wrote: On 11/08/2009, at 1:10 AM, Michael Beaudoin wrote: I just finished roughing out a site for a client and it looks good in all browsers, except there is an alignment issue in IE 7. If you look at these sample pages: - http://www.ba-doyn.com/junk/saw/index.htm - http://www.ba-doyn.com/junk/saw/services.htm you will see that the vertical white line, which should be between the paragraphs, is off to the right. It looks fine in Firefox Famous last words... :-) . Not on this end. Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 Header is broken -- same as it was with your previous URL from a day or so ago. In part the header nav ul may need margin:0; and zero out padding on right and bottom for same. I did not look at it in IE/7. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Weird alignment issue with IE 7...
Michael Beaudoin wrote: I think I know. Are you enlarging the type? M On Aug 11, 2009, at 12:47 PM, David Laakso wrote: Michael Beaudoin wrote: What is broken? I'm looking at Firefox v3.5.2 and it looks ok to me. - http://www.ba-doyn.com/junk/saw/index.htm - http://www.ba-doyn.com/junk/saw/services.htm It looks fine in Firefox Preferences: Font-size: Default. Minimum Font-size: 14. Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 http://chelseacreekstudio.com/ca/cssd/mb.png PS Replies to the list. Please bottom post. Thanks :-) . __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
But...the web isn't print. So, unless I'm creating a separate style sheet for print, I really don't care how it looks for other people. Theresa On Aug 11, 2009, at 2:11 AM, Michal Suchanek wrote: On the other hand, designing in pixels is like saying I design this web for my screen and I don't care the least how it looks for other people. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Weird alignment issue with IE 7...
On Aug 11, 2009, at 1:08 PM, David Laakso wrote: Michael Beaudoin wrote: I think I know. Are you enlarging the type? M On Aug 11, 2009, at 12:47 PM, David Laakso wrote: Michael Beaudoin wrote: What is broken? I'm looking at Firefox v3.5.2 and it looks ok to me. - http://www.ba-doyn.com/junk/saw/index.htm - http://www.ba-doyn.com/junk/saw/services.htm It looks fine in Firefox Preferences: Font-size: Default. Minimum Font-size: 14. Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 http://chelseacreekstudio.com/ca/cssd/mb.png PS Replies to the list. Please bottom post. Thanks :-) . Is anyone seeing what David sees in Firefox? It looks fine to me in Firefox Mac and PC. http://www.ba-doyn.com/junk/saw/index.htm http://www.ba-doyn.com/junk/saw/services.htm David's view: http://chelseacreekstudio.com/ca/cssd/mb.png Thanks. Michael __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling forms
On Aug 11, 2009, at 12:25 PM, Krystian - Sunlust wrote: Hi, maybe this isn't 100% CSS question, but I'm looking to build a simple contact form, name, email, message and submit button (maybe captcha too, but optional). The thing is that no matter how I construct a form it displays wrong, either in FF, IE7 or IE8. I've found some tutorials on Google, but they don't display right on ie8 or I simply can't adapt them. Styling of web form elements consistently is very improbable. I created a collection of Web forms: http://webformelements.com/ looking how browsers handle the styling of Web forms. Browsers vendors don't agree on how to render forms and the W3C spec doesn't spell out how they should be designed. Result? Not so good. Best, Christopher Schmitt http://www.christopherschmitt.com/ Web Design Specialist Co-Lead, Adobe Task Force for The Web Standards Project Digital Communications Director, AIGA Cincinnati -- Register Now for The DIY Summit! 8 Speakers Offering Design Solutions for the One-Person Web Team September 17, 2009 • 9am - 6pm CT • Online http://diysummit.eventbrite.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] Main Content Following Left Sidebar
sono...@fannullone.us wrote:
Hi David,
Thank you for responding to my problem.
sono...@fannullone.us wrote:
I think I've narrowed it down. If I remove the following code in
the css-ui.tabs.css file: .ui-tabs-nav:after { display: block;
clear: both; content: ; }
[...]
http://www.superiorshelving.com/mfg/nexel/test/test6.php
You have correctly diagnosed your problem. It's the clear: both;
on your clearing element. This clears the sidebar before the tabbed
content appears.
Try using overflow: hidden; on .ul-tabs-nav to contain the floats
instead.
This does fix the problem of the content following the left sidebar,
but it gives me the same problem as I mentioned in my 2nd e-mail.
The horizontal line is now above the tabs instead of below them.
How can I drop that line below the tabs? I tried adding extra spaces
to content: ; but that didn't do anything.
Odd. Adding overflow: hidden; to .ul-tabs-nav put the .ul-tabs-panel
border below the tabs this end. On which browser does this not work? (I
am on a Mac...)
The generated content is not needed with the overflow method of
containing the floated tabs...
BTW - You have HTML code in your css-superior.css file. That won't do.
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Min-Width Question
Under what circumstances might a container that has min-width set not grow beyond the size of min-width? Chris Barth __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Weird alignment issue with IE 7...
Michael Beaudoin wrote: On Aug 11, 2009, at 1:08 PM, David Laakso wrote: Michael Beaudoin wrote: I think I know. Are you enlarging the type? M On Aug 11, 2009, at 12:47 PM, David Laakso wrote: Michael Beaudoin wrote: What is broken? I'm looking at Firefox v3.5.2 and it looks ok to me. - http://www.ba-doyn.com/junk/saw/index.htm - http://www.ba-doyn.com/junk/saw/services.htm It looks fine in Firefox Preferences: Font-size: Default. Minimum Font-size: 14. Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 http://chelseacreekstudio.com/ca/cssd/mb.png PS Replies to the list. Please bottom post. Thanks :-) . Is anyone seeing what David sees in Firefox? It looks fine to me in Firefox Mac and PC. http://www.ba-doyn.com/junk/saw/index.htm http://www.ba-doyn.com/junk/saw/services.htm David's view: http://chelseacreekstudio.com/ca/cssd/mb.png Browsers act differently to minimum font-size settings, and are especially vulnerable to problems when you set a base font-size of less than 100%. Explanation here: http://www.gunlaug.no/contents/wd_1_03_04.html Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird alignment issue with IE 7...
Michael Beaudoin wrote: On Aug 11, 2009, at 1:08 PM, David Laakso wrote: Michael Beaudoin wrote: I think I know. Are you enlarging the type? M On Aug 11, 2009, at 12:47 PM, David Laakso wrote: Michael Beaudoin wrote: What is broken? I'm looking at Firefox v3.5.2 and it looks ok to me. - http://www.ba-doyn.com/junk/saw/index.htm - http://www.ba-doyn.com/junk/saw/services.htm It looks fine in Firefox Preferences: Font-size: Default. Minimum Font-size: 14. Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 http://chelseacreekstudio.com/ca/cssd/mb.png PS Replies to the list. Please bottom post. Thanks :-) . Is anyone seeing what David sees in Firefox? It looks fine to me in Firefox Mac and PC. http://www.ba-doyn.com/junk/saw/index.htm http://www.ba-doyn.com/junk/saw/services.htm David's view: http://chelseacreekstudio.com/ca/cssd/mb.png Thanks. Michael Michael, See for yourself. FirefoxPreferencesSize 16AdvancedMinimum font size: 14. Anyplace is better Starting from zero got nothing to lose Maybe well make something But me myself I got nothing to prove --Tracy Chapman Lyrics. Fast Car. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Main Content Following Left Sidebar
On Aug 11, 2009, at 11:48 AM, David Hucklesby wrote: Odd. Adding overflow: hidden; to .ul-tabs-nav put the .ul-tabs-panel border below the tabs this end. On which browser does this not work? (I am on a Mac...) Same here - I'm using both Safari 4.0.1 and Camino 1.6.8 on OS 10.5.7 and the tab border is showing above the tabs on both. I decided to check it in Parallels with IE6, and the border displays properly (go figure). Strangely, though, in IE6 the selected tab gets disconnected from the other tabs and stays put on the screen when scrolling down the page! The generated content is not needed with the overflow method of containing the floated tabs... I commented out the content: ; line but it didn't change anything. Is that not what you meant? BTW - You have HTML code in your css-superior.css file. That won't do. There shouldn't be. What are you seeing? Thanks, Frank __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird alignment issue with IE 7...
-- Message: 22 Date: Tue, 11 Aug 2009 15:22:02 -0400 From: David Laakso da...@chelseacreekstudio.com Subject: Re: [css-d] Weird alignment issue with IE 7... To: Michael Beaudoin mich...@ba-doyn.com Cc: css-d@lists.css-discuss.org Message-ID: 4a81c4da.6000...@chelseacreekstudio.com Content-Type: text/plain; charset=ISO-8859-1; format=flowed Michael Beaudoin wrote: On Aug 11, 2009, at 1:08 PM, David Laakso wrote: Michael Beaudoin wrote: I think I know. Are you enlarging the type? M On Aug 11, 2009, at 12:47 PM, David Laakso wrote: Michael Beaudoin wrote: What is broken? I'm looking at Firefox v3.5.2 and it looks ok to me. - http://www.ba-doyn.com/junk/saw/index.htm - http://www.ba-doyn.com/junk/saw/services.htm It looks fine in Firefox Preferences: Font-size: Default. Minimum Font-size: 14. Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 http://chelseacreekstudio.com/ca/cssd/mb.png PS Replies to the list. Please bottom post. Thanks :-) . Is anyone seeing what David sees in Firefox? It looks fine to me in Firefox Mac and PC. http://www.ba-doyn.com/junk/saw/index.htm http://www.ba-doyn.com/junk/saw/services.htm David's view: http://chelseacreekstudio.com/ca/cssd/mb.png Thanks. Michael Michael, See for yourself. FirefoxPreferencesSize 16AdvancedMinimum font size: 14. Ok. I see what you mean now. Do many people go in and change that? How do I get around that? Thanks, Michael __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Min-Width Question
On 12/08/2009, at 6:59 AM, Christopher Barth wrote: Under what circumstances might a container that has min-width set not grow beyond the size of min-width? I'm not sure exactly what you mean by this question. Do you mean - what are some possible reasons as to why an element that you believe should expand beyond it's min-width is not expanding? Or is there a more subtle question there that I'm not seeing? If you are in a situation where a box that you believe should be able to expand is not expanding I'd recommend providing a link for us to look at. Possibilities off the top of my head... - invalid HTML (always the first test) - invalid CSS (always the second test) - the width of the element's content is narrower than the min-width! - the browser doesn't support min-width (and perhaps has a width set in a separate stylesheet) - absolute or fixed positioned content (outside of document flow) - floated content (not really a width issue but if floats aren't contained then it may not be apparent what the width of an element is) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Question about width and min-width in ul
Christopher Barth wrote: I have a menu system that uses nested ULs. The main menu is a fixed size, but I want the sub menu's to be variable width that will grow to encompass the entire width of the menu item. I figured min-width would do this; however, it only grows to be as big as the longest non-breaking string. I thus have a two line menu looking like this: Photo Library When I want a menu item like this: Photo Library -- Theoretically you could use whitespace: nowrap; to do this. Certain older browsers don't respect this, so I suggest using a non-breaking space between the two words instead. Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird alignment issue with IE 7...
On 12/08/2009, at 7:41 AM, Michael Beaudoin wrote: -- Message: 22 Date: Tue, 11 Aug 2009 15:22:02 -0400 From: David Laakso da...@chelseacreekstudio.com Subject: Re: [css-d] Weird alignment issue with IE 7... To: Michael Beaudoin mich...@ba-doyn.com Cc: css-d@lists.css-discuss.org Message-ID: 4a81c4da.6000...@chelseacreekstudio.com Content-Type: text/plain; charset=ISO-8859-1; format=flowed Michael Beaudoin wrote: On Aug 11, 2009, at 1:08 PM, David Laakso wrote: Michael Beaudoin wrote: I think I know. Are you enlarging the type? M On Aug 11, 2009, at 12:47 PM, David Laakso wrote: Michael Beaudoin wrote: What is broken? I'm looking at Firefox v3.5.2 and it looks ok to me. - http://www.ba-doyn.com/junk/saw/index.htm - http://www.ba-doyn.com/junk/saw/services.htm It looks fine in Firefox Preferences: Font-size: Default. Minimum Font-size: 14. Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 http://chelseacreekstudio.com/ca/cssd/mb.png PS Replies to the list. Please bottom post. Thanks :-) . Is anyone seeing what David sees in Firefox? It looks fine to me in Firefox Mac and PC. http://www.ba-doyn.com/junk/saw/index.htm http://www.ba-doyn.com/junk/saw/services.htm David's view: http://chelseacreekstudio.com/ca/cssd/mb.png Thanks. Michael Michael, See for yourself. FirefoxPreferencesSize 16AdvancedMinimum font size: 14. Ok. I see what you mean now. Do many people go in and change that? How do I get around that? Felix? ;-) Not to be too trite about it but there isn't a simple answer. It's just an issue that you always need to be aware of with HTML/CSS development. You do not know many things about how a user is going to see your site - user agent, screen resolution, viewport dimensions (i.e. maximised browser window or not), fonts installed, font preference, minimum font size, what the length of the content is going to be... There are also many techniques and approaches to this. The most basic thing you can do is to avoid setting the height of elements where you don't need to. That way if the content needs to wrap it can push other elements down. You could also consider setting dimensions in ems. That way your element will be sized in proportion with the user's font size. It can seem relatively easy to get a layout working correctly for *you* but setting it up so that your site will remain intact in a range of circumstances can take a bit trickier. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Weird alignment issue with IE 7...
Michael Beaudoin wrote: http://chelseacreekstudio.com/ca/cssd/mb.png Is anyone seeing what David sees in Firefox? It looks fine to me in Firefox Mac and PC. http://www.ba-doyn.com/junk/saw/index.htm http://www.ba-doyn.com/junk/saw/services.htm David's view: http://chelseacreekstudio.com/ca/cssd/mb.png Thanks. Michael Michael, See for yourself. FirefoxPreferencesSize 16AdvancedMinimum font size: 14. Ok. I see what you mean now. Do many people go in and change that? It only takes one person to go in and do that. You never know what a user or savvy client may do. This does not mean that you need live in fear. But it is best not to make assumptions. Rigorous stress testing is always a good idea. How do I get around that? See my reply earlier today (if not the same suggestion made a couple of weeks ago) regarding the ul. It is only a start point. And David H. pointed you to Georg's article. If you run into difficulty, bring it back. Thanks, Michael Tracy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Main Content Following Left Sidebar
sono...@fannullone.us wrote:
On Aug 11, 2009, at 11:48 AM, David Hucklesby wrote:
Odd. Adding overflow: hidden; to .ul-tabs-nav put the .ul-tabs-panel
border below the tabs this end. On which browser does this not work? (I
am on a Mac...)
Same here - I'm using both Safari 4.0.1 and Camino 1.6.8 on OS
10.5.7 and the tab border is showing above the tabs on both. I decided
to check it in Parallels with IE6, and the border displays properly (go
figure). Strangely, though, in IE6 the selected tab gets disconnected
from the other tabs and stays put on the screen when scrolling down the
page!
--
Using the code from your site this morning, and simply adding
overflow: hidden; to the rule for .ul-tabs-nav put the border line
below the tabs, as I believe you want. See this screen shot:
http://www.sendspace.com/file/5tmy1c
That screen shot is from Firefox 3.5, but I get the same result on
Safari 4 and Opera 9.6, so I don't know what else to suggest.
BTW - You have HTML code in your css-superior.css file. That won't do.
There shouldn't be. What are you seeing?
--
I see this @ line 273 et seq.
--
/style
!--[if IE]
style type=text/css
/* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 0; }
/* the above proprietary zoom property gives IE the hasLayout it needs
to avoid several bugs */
/style
![endif]--
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen resolution?
--- On Tue, 8/11/09, Sam Brown freejack_in...@yahoo.com wrote: I understand the argument from a purist perspective, usability should be first and foremost in any design and/or layout, but realistically, I don't see this as a practical issue given the more common usage of page zooming over the now declining exposure of any sort of text scaling behavior in modern browsers. How long do we design or build in support for what is essentially becoming a deprecated behavior? Personally, I rue this so-called 'advance'. It smacks very much of 'not everyone can design their site to handle text scaling nicely, so let's just settle for second best by default'. - Bobby -- www.fiveminuteargument.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] Min-Width Question
Under what circumstances might a container that has min-width set not grow beyond the size of min-width? If the container doesn't need to grow beyond min-width. To put that answer in the context of your previous question, browsers would rather expand down than out. If an item can wrap, it will, and then the element width doesn't need to grow. So there are two ways around this: You can use nbsp; between your words to force the words to not wrap. (Non-Breaking SPace means that a line can't break at it. I forget, but I think some browsers may not actually implement this correctly) Or you can make your min-width big enough so your longest list-item doesn't wrap (300px will do, unless someone decides your text is too small, which is pretty likely). ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] image cut-off in IE7
I did not create the original styles on this site - but am working to fix some things... Anyone see/know why the thumb image on the top middle content item (Consultancy Draws on Intimate Knowledge...) is cut off in IE7? http://www.apparelnews.net/features/profiles_qa/ I believe that this is the only browser with the issue. (It works/loads correctly in IE8, by the way...) TIA, Greg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Screen resolution?
On 2009/08/11 12:24 (GMT+0200) Michal Suchanek composed: ... Typically you look at the screen from a distance similar to that from which you look at printed paper Probably correct for laptops, but not for desktops, which is a large part of why the Windows default DPI assumption is 96: http://blogs.msdn.com/fontblog/archive/2005/11/08/490490.aspx so the physical DPI is a good starting point for most desktop systems. There is nothing stopping you from setting the DPI smaller or larger to accommodate for different conditions. Indeed, on Linux a designer can test multiple DPI configurations on a single physical display in a few seconds or less per switch, facilitating emulation of a panoply of user environmental possibilities without consuming extra desktop space or electricity. Unlike sites designed in pixels sites designed in points will obediently resize to match you DPI settings. But, unlike with em sizing, this doesn't necessarily correlate to matching what a visitor finds to work best. -- How much better to get wisdom than gold, to choose understanding rather than silver. Proverbs 16:16 NKJV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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] Screen resolution?
On 2009/08/11 12:26 (GMT-0400) Sam Brown composed: I hate to skew the discussion by introducing another variable, but while it is true that a layout designed using px for sizing is essentially cemented in that size, all of the modern browsers I have seen now emphasize page zooming over text scaling. So it is certainly true that a user may choose to increase or decrease the font-size locally, I consider that out of my control Thank goodness. :-) CSS is supposed to be suggestive, not domineering. and by doing so, the user accepts that a layout may not hold together as well as it was originally designed. He shouldn't. It needn't be that way except for extreme cases. However, if a user has poor eyesight, for example, and wants larger text, they can use the page zoom features of the browser to safely increase or decrease the zoom and NOT impact the layout of the page at all. Page zoom is no panacea. Each variant has its flaws, besides being a defense mechanism that wouldn't be needed absent an offense. I understand the argument from a purist perspective, usability should be first and foremost in any design and/or layout, but realistically, I don't see this as a practical issue given the more common usage of page zooming over the now declining exposure of any sort of text scaling behavior in modern browsers. How long do we design or build in support for what is essentially becoming a deprecated behavior? 1-Becoming is the keyword in your question. It will be quite some time yet before all common browsers incapable of page zoom fall into disuse. In the meantime and beyond, designing for resolution independence via em remains as a method of universal support regardless of browser features and user personalizations. 2-Minimum font size, text zoom, and page zoom are all defense mechanisms, implemented after CSS gave designers the power to completely disregard a user's desktop and browser settings, needs and preferences. Designs that require users to employ defenses are by definition offensive, and rude, considering it is perfectly feasible to design politely using em sizing instead of px or absolute sizing. 3-In discussions among designers about the capabilities and effects of text zoom it is often overlooked that most users' browsers have the capability to text zoom before the fact, in the form of personalizable default text settings for the browsers installed on their personal computers. Pages shouldn't, and needn't, fall apart simply because a user chooses to personalize his personal computer instead of employing a page zoom defense against offensive web page designs. 4-Even when it does come to pass that most browsers in common use offer page zoom, users may still prefer to leave images at their intrinsic or specified size, and change only the size of text, before or after the fact. -- How much better to get wisdom than gold, to choose understanding rather than silver. Proverbs 16:16 NKJV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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] Weird alignment issue with IE 7...
Michael Beaudoin wrote: What is broken? I'm looking at Firefox v3.5.2 and it looks ok to me. - http://www.ba-doyn.com/junk/saw/index.htm - http://www.ba-doyn.com/junk/saw/services.htm It looks fine in Firefox Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 http://chelseacreekstudio.com/ca/cssd/mb.png __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Question about width and min-width in ul
Thanks. This did the trick. Chris Barth -Original Message- From: David Hucklesby [mailto:huckle...@gmail.com] Sent: Tuesday, August 11, 2009 3:04 PM To: Christopher Barth Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Question about width and min-width in ul Christopher Barth wrote: I have a menu system that uses nested ULs. The main menu is a fixed size, but I want the sub menu's to be variable width that will grow to encompass the entire width of the menu item. I figured min-width would do this; however, it only grows to be as big as the longest non-breaking string. I thus have a two line menu looking like this: Photo Library When I want a menu item like this: Photo Library -- Theoretically you could use whitespace: nowrap; to do this. Certain older browsers don't respect this, so I suggest using a non-breaking space between the two words instead. Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Main Content Following Left Sidebar
On Aug 11, 2009, at 1:42 PM, David Hucklesby wrote:
Using the code from your site this morning, and simply adding
overflow: hidden; to the rule for .ul-tabs-nav put the border line
below the tabs, as I believe you want.
Oh, man... I had added it to the .ui-tabs-nav:after rule instead. I
moved it to the .ul-tabs-nav rule and it's working now!
I see this @ line 273 et seq.
--
/style
!--[if IE]
style type=text/css
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 0; }
/style
![endif]--
Wow, I've been staring at this for too long. IIRC, that was put in
by Dreamweaver(?) when I started with it's 2-column template. I've
now removed all the style tags.
Thanks a million, David! I really do appreciate your help.
Frank
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen resolution?
Dave Sherohman wrote: On Tue, Aug 11, 2009 at 11:11:04AM +0200, Michal Suchanek wrote: Even if points are not precise unit in CSS because of browser and OS problems most users can set their DPI in their preferences if it is not automatically determined from screen size (unless they are running a particularly abhorrent browser + OS combination). Once you set the DPI properly sites designed in points, mm or em should be reasonably readable for you. Not really, at least as far as points/mm are concerned[1], assuming that by properly you mean determined from screen size. Setting your browser/OS DPI setting to match the physical DPI of your display means that 12pt text on the screen will be the same size as 12pt text on a printed page. However, this does not mean that the text will be readable if, say, the screen is an HDTV and you're sitting on the far side of the room. I would argue that display DPI should be based on what the user finds most usable in their particular environment and physical screen DPI should be completely ignored except in a handful of special cases, such as computers being used for print design, where it's actually important to be able to clearly relate the screen display to the size of a physical object. But, then, I would also argue that, aside from those few special cases, DPI should be abandoned when dealing with computer displays, as trying to relate on-screen display sizes to physical sizes is fundamentally misguided, since you have no way of knowing whether the user wants ultra-dense display to fit on their iPhone or five-inch-high text for their gigantic HD rig. Or my boss, who runs his 17 1280x1024 twin displays at 800x600 so he can get a desktop text size he can read. -- David gn...@hawaii.rr.com authenticity, honesty, community __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
