Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together
From: Gunlaug Sørtun gunla...@c2i.net To: Michael Leibson michael_mabe...@yahoo.ca Cc: css-d@lists.css-discuss.org Sent: Monday, May 11, 2009 5:56:02 AM Subject: Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together www.thinkingmusic.ca/analyses I have used a copy of this page to exemplify one approach to solving your problems . . . . . The easiest way to achieve this is to leave #main un-positioned (static), so it can affect the height of main div (#top) directly. Then the sidebar (left) can be absolute positioned relative to bottom of main div (#top) for perfect alignment. Georg, I'm picking my jaw up from the floor, after it dropped in utter amazement at your solution! ; - ) You guys aren't 'mere web developers' -- you're mathematicians! I'm blown away. I'll get back to you after I've had a chance to re-gather my mind, and have tried to follow the principles involved in your solution. (Wow!) - Michael __ The new Internet Explorer® 8 - Faster, safer, easier. Optimized for Yahoo! Get it Now for Free! at http://downloads.yahoo.com/ca/internetexplorer/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Getting absolutely positioned divs with bottom: auto to end together
Thanks for your generous feedback, Philippe! Some follow-up questions, below. . . To get all containers to ‘conclude’ at the same point, at the bottom of the page, I’ve given their bottom-most elements the margin-bottom measurements required to do that. However, I’m getting unexpected results that I don’t understand: Specifying a line-height will normalise things a little. . . While the #main div has line-height on all ps, you're right -- there was no line-height in the #left div. I just tried adding the same line-height, there, but it made no difference. IE gives a 2px bottom space to every li, while FF doesn't -- but, since the problem also occurs in other browsers, it's probably not because of that. Google 'faux columns', or try one of the following techniques: I read Dan Cederholm's article (http://www.alistapart.com/articles/fauxcolumns/), but I'm not 100% sure I get it: in my situation, I already have a repeating background image on my body element, but it must tile horizontally, not vertically, because the top third of my viewport has a white body background, and the rest has a dark slate background. Am I misunderstanding how the fauxcolumns would work? http://www.positioniseverything.net/articles/onetruelayout/ I see that, since its invention, many bugs have rendered this technique almost impossible (http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems). http://www.satzansatz.de/cssd/companions.html While I think I get the concept (and it's very neat!), the technical side of this one is way beyond my current level. Personally, I'd go with a 'ragged end-of-page' by design :-) Do you mean to just let the divs end wherever they may, and forget about the aesthetic consequences -- or to come up with a design in which such a consequence will be in keeping with an important design motif? Thanks again, Philippe! All the best, Michael 2) In Firefox, zooming all elements gives the #left div greater or lesser height than its neighbouring div, depending on the degree of zoom. Text zoom or page zoom ? With page zoom, there is little difference. With text-zoom, the columns will on grow based on the text content. The margins in your left column will not change the same way, as they are specified in pixels. Are these differences the result of my own errors, or normal browser behaviour? If the result of browser behaviour, I’d rather just find a way to ensure that all divs conclude at the same point (and leave the minor differences alone), rather than write re-calibrated measurements for each browser. Is there a way to do this? Google 'faux columns', or try one of the following techniques: http://www.positioniseverything.net/articles/onetruelayout/ http://www.satzansatz.de/cssd/companions.html Personally, I'd go with a 'ragged end-of-page' by design :-) PS - the little images in your #left column contain a colour profile. This causes a (severe) colour mismatch in browsers that support colour management for images (Safari, Firefox 3.5b). The embedded colour profile is the one coming from Photoshop when saving for web. I use pngcrush to strip it out. Philippe --- Philippe Wittenbergh http://l-c-n.com/ The total height of those 2 columns will also depend on the line-height, and how browsers interpret the 'normal' keyword - you don't specify any line-height as far as I a can tell. Specifying a line-height will normalise things a little, but you might still be at the mercy of differences in rounding of values to the nearest pixel between browsers. I've got line-height: 135% on all the p text in the #main div, but none on the elements in the #left div. I just tried adding the same line-height, there, but it made no difference to the ragged-end-of-page problem. In order to see what may be happening, I gave all the #left elements borders, and saw that IE gives a 2px bottom space to every li, while FF doesn't. However, since the problem also occurs in other browsers, I don't want to begin applying hacks unless I know what I'm doing. From: Philippe Wittenbergh e...@l-c-n.com To: CSS-D css-d@lists.css-discuss.org Cc: Michael Leibson michael_mabe...@yahoo.ca Sent: Sunday, May 10, 2009 10:49:57 PM Subject: Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together On May 11, 2009, at 11:17 AM, Michael Leibson wrote: ... While building two more pages for that site -- www.thinkingmusic.ca/analyses/coltrane, and www.thinkingmusic.ca/analyses (the much smaller page of the two), I’ve begun to implement some of your recommendations. One of these was to allow containers’ heights to be deterimined by their contents, rather than by a given, fixed amount. I’ve now tried to do that, by giving my absolutely positioned divs positions for left, top, and right, but leaving their bottoms as “auto”. To get all
[css-d] Getting absolutely positioned divs with bottom: auto to end together
Hi; Several weeks ago, I sought and received some help from this list re. my www.thinkingmusic.ca website. While building two more pages for that site -- www.thinkingmusic.ca/analyses/coltrane, and www.thinkingmusic.ca/analyses (the much smaller page of the two), I’ve begun to implement some of your recommendations. One of these was to allow containers’ heights to be deterimined by their contents, rather than by a given, fixed amount. I’ve now tried to do that, by giving my absolutely positioned divs positions for left, top, and right, but leaving their bottoms as “auto”. To get all containers to ‘conclude’ at the same point, at the bottom of the page, I’ve given their bottom-most elements the margin-bottom measurements required to do that. However, I’m getting unexpected results that I don’t understand: 1) Firefox, Safari, Opera and IE each interprets the measurements between successive link-containing ul’s (within the page’s #left div) differently, which means that that div only concludes at the same point as its neighbouring div in Firefox (within which I designed the page), and no other browser. Instead of all divs ending at the same place at the bottom of the page, I get a ragged end-of-page. 2) In Firefox, zooming all elements gives the #left div greater or lesser height than its neighbouring div, depending on the degree of zoom. Are these differences the result of my own errors, or normal browser behaviour? If the result of browser behaviour, I’d rather just find a way to ensure that all divs conclude at the same point (and leave the minor differences alone), rather than write re-calibrated measurements for each browser. Is there a way to do this? Thanks, in advance, for any light you can shed on this. Michael __ Connect with friends from any web browser - no download required. Try the new Yahoo! Canada Messenger for the Web BETA at http://ca.messenger.yahoo.com/webmessengerpromo.php __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] list layout and indentation on different browsers
Hi;
I've read that, as each browser has its own defaults for list layout and
indentation, the remedy is to specify amounts for both padding and margins, so
as to address all browser methods. Sure enough, if I specify {margin: 0;
padding 0;} for both a list and its list items, I find a close-enough
similarity in how Firefox, Opera, Safari and even IE6 display them. Everything
changes as soon as I add a list-style-image, though: where IE and Opera abut
the image right beside the li content, Firefox and Safari separate the two by
10 pixels. Is this normal browser behaviour? Is there anything one can do to
offset it, besides specifying a compromise distance?
Here's a simplification of the CSS and HTML involved:
ul
{
margin: 26px 75px 0px 75px;
padding: 0;
}
li
{
list-style-image: url(image.gif);
margin: 0;
padding: 0;
}
ul
litext/li
/ul
Thanks, in advance, for your help.
- Michael
__
Be smarter than spam. See how smart SpamGuard is at giving junk email the boot
with the All-new Yahoo! Mail. Click on Options in Mail and switch to New Mail
today or register for free at http://mail.yahoo.ca
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] list layout and indentation on different browsers
Everything changes as soon as I add a list-style-image, though: where IE and Opera abut the image right beside the li content, Firefox and Safari separate the two by 10 pixels. Is this normal browser behaviour? Is there anything one can do to offset it, besides specifying a compromise distance? Best to start with something that is known work. Please see http://css.maxdesign.com.au/listamatic/vertical05.htm If that is not what you're after, please provide the page itself. Thanks, David -- that's exactly it! As a matter of fact, I had finally stumbled on the cause of the problem (that its impossible to control list-style-image placement, because each browser does it differently) in Eric Meyers' CSS book, and the solution (the same solution that you've presented), in Andy Budd's CSS Mastery, just a few minutes prior to receiving your kind reply. Oh, the esoterica of CSS! __ Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox bug on on new Macs?
Hi; I used Firefox to view my website on a friend's zillion-pixel-wide new Mac, yesterday, and I was astonished to find that all elements on all pages had a significantly increased width, so that the design was effectively spread, horizontally, to fit the (maximized) window. This would have pleased me, were my design fluid -- but it isn't: it's fixed! The site is www.thinkingmusic.ca . The home page's main div (a sandy grey colour) should be 790px wide, and the slate-blue navigation div, immediately to its left, should be 244px wide (including border). Anyone have any idea what might be going on? I've always thought that Firefox uniformly reproduces css-based designs, regardless of operating platform. . . Thanks, in advance, for any clues you'd care to share! Michael __ Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.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] Firefox bug on on new Macs?
Seems to me to be behaving as the stylesheet intends. Thanks, Peter! - Michael From: Peter Hammarling pe...@artworkers.net To: Michael Leibson michael_mabe...@yahoo.ca Cc: CSS-D css-d@lists.css-discuss.org Sent: Friday, April 10, 2009 8:07:05 AM Subject: Re: [css-d] Firefox bug on on new Macs? I used Firefox to view my website on a friend's zillion-pixel-wide new Mac, yesterday, and I was astonished to find that all elements on all pages had a significantly increased width, so that the design was effectively spread, horizontally, to fit the (maximized) window. This would have pleased me, were my design fluid -- but it isn't: it's fixed! The site is www.thinkingmusic.ca . The home page's main div (a sandy grey colour) should be 790px wide, and the slate-blue navigation div, immediately to its left, should be 244px wide (including border). On my Mac 23 display your pages will move to centre as you widen or narrow the window (in Mozilla), but the main content div and the navigation div stay at fixed width. The brown b/g box will widen with the change of window width but only up to about 1425 pixels, after which you start to see white at the right of it. Seems to me to be behaving as the stylesheet intends. HTH, Peter H __ Yahoo! Canada Toolbar: Search from anywhere on the web, and bookmark your favourite sites. Download it now http://ca.toolbar.yahoo.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] Firefox bug on on new Macs?
Hi, David; It is in part due to the width of 1426px set on #background and the issue you have is not limited to FF-- it happens in all browsers. Structuring a layout with absolute positioning seldom works. Care to amplify (no pun intended) that? All I can so far determine is that my friend has some kind of automatic zoom setting on her computer or browser, that equally magnified all elements by approximately 25%. Without that 'zoom', the only other place where I've encountered problems has been on IE -- FF seems to display properly on all systems. Try your page at minimum font-size 24px in FF. Wow, really?! I thought my current font size -- the www.thinkingmusic.ca/thinkingharmony page is more typical of my site -- was already pretty huge! Validate the markup. Thanks! I also received details on that from Georg, and I'll look into fixing it as soon as I have some free time. All the best, Michael From: David Laakso da...@chelseacreekstudio.com To: Michael Leibson michael_mabe...@yahoo.ca Cc: Eric Meyer's CSS List css-d@lists.css-discuss.org Sent: Friday, April 10, 2009 8:33:04 AM Subject: Re: [css-d] Firefox bug on on new Macs? Michael Leibson wrote: I used Firefox to view my website on a friend's zillion-pixel-wide new Mac, yesterday, and I was astonished to find that all elements on all pages had a significantly increased width, so that the design was effectively spread, horizontally, to fit the (maximized) window. This would have pleased me, were my design fluid -- but it isn't: it's fixed! The site is www.thinkingmusic.ca . The home page's main div (a sandy grey colour) should be 790px wide, and the slate-blue navigation div, immediately to its left, should be 244px wide (including border). Anyone have any idea what might be going on? I've always thought that Firefox uniformly reproduces css-based designs, regardless of operating platform. . . Thanks, in advance, for any clues you'd care to share! Michael It is in part due to the width of 1426px set on #background and the issue you have is not limited to FF-- it happens in all browsers. Structuring a layout with absolute positioning seldom works. Try your page at minimum font-size 24px in FF. Validate the markup. __ Yahoo! Canada Toolbar: Search from anywhere on the web, and bookmark your favourite sites. Download it now http://ca.toolbar.yahoo.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] Firefox bug on on new Macs?
Far from being a waste of time, I think your answer zoomed in (excuse the pun) on the key thing, Theophan, so thank-you! I hadn't even thought of a 'zoom' feature on my friend's machine. However, I've subsequently had my friend check her Firefox 3.0.8 zoom, and she said: I reset to 0 and the website fills my entire screen. If I zoom out it gradually decreases until I guess you get to the page size you intended. So it seems it is automatically set to maximum magnification. No amount of googling Firefox Zoom default brought any description of any way of automatically setting FF to always zoom, so I'm wondered if it could be her computer -- a Mac OS X 10.5.6 with Leopard. However, although I found info on a zoom feature for that computer, it didn't mention any feature that would automatically zoom everything, all the time. Any idea what could be doing this? Many thanks! Michael From: Theophan Dort theop...@bellsouth.net To: Michael Leibson michael_mabe...@yahoo.ca Sent: Friday, April 10, 2009 8:59:52 AM Subject: Re: [css-d] Firefox bug on on new Macs? I'm not an expert, just a volunteer webmaster for a couple of churches, so this is probably a waste of your time, but just in case: Firefox's default zoom now essentially magnifies the entire page, just as you seem to be describing. Is it possible that somehow when you viewed that page his browser was set to a zoom setting other than default, or that his default for some reason is larger than normal? Was it only your site? Did it change if you hit Command-Zero? Theophan On Apr 10, 2009, at 7:43 AM, Michael Leibson wrote: Hi; I used Firefox to view my website on a friend's zillion-pixel-wide new Mac, yesterday, and I was astonished to find that all elements on all pages had a significantly increased width, so that the design was effectively spread, horizontally, to fit the (maximized) window. This would have pleased me, were my design fluid -- but it isn't: it's fixed! The site is www.thinkingmusic.ca . The home page's main div (a sandy grey colour) should be 790px wide, and the slate-blue navigation div, immediately to its left, should be 244px wide (including border). Anyone have any idea what might be going on? I've always thought that Firefox uniformly reproduces css-based designs, regardless of operating platform. . . Thanks, in advance, for any clues you'd care to share! Michael __ Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.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/ __ Yahoo! Canada Toolbar: Search from anywhere on the web, and bookmark your favourite sites. Download it now http://ca.toolbar.yahoo.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] Firefox bug on on new Macs?
Hi, Georg, and thanks for this detailed reply!
your page is full of markup errors...
Thanks for bringing these to my attention -- I'll look into all of them when
some time becomes available.
Related questions: why, if using an li without an ordered or unordered list
is not allowed, does it work on my site? What are the negative consequences
of using it that way?
background is positioned 50% from the left side - regardless of window size.
Yes -- I used the 'negative margins' technique to (sort of) center the whole
thing ('sort of', because I didn't want it symmetrically centered). But while I
understand how my background's width causes the horizontal scrollbar, how does
the left: 50%; affect either the scrollbar or my friend's 'zooming' of all
elements?
what Fx version did you test in and what settings were at play?
FF 3.0.8, on a Mac OSX 10.5.6. I'm pretty sure the whole thing was 'zoomed',
but my friend says that she has to negatively zoom in order to obtain my page's
intended size! All I can imagine is that my friend has some kind of 'automatic
zoom' set up -- either on her computer, or in FF -- but, so far, I haven't been
able to discover such a feature, in any of the online literature. I'm baffled!
Individual elements hold their declared width, but the page as such needs
1650px wide windows to get rid of the horizontal scrollbar
Yes, I'm assuming that's because of the wide #background div I've used. As I
wrote to Phillipe, I added that div because I felt the design looked pretty
weak without it, when viewed on wider screens/windows. Aside from using a
fluid design, is there any way I could have it both ways?
The declared dimensions on paragraphs and parent-less list-items are creating
problems...
This sounds serious, but:
http://www.gunlaug.no/tos/alien/ml/test_09_0410.html
. . . For some reason, I keep getting a not found error message when trying
to go to that URL.
...and extra horizontal width all browsers have to cope with. Why not let
those elements auto-adjust to their containers?
Ah -- as in the following? :
FWIW: it looks like you're attempting to recreate print design on the web, and
that rarely ever works well.
I know. The problem, though, was that I needed to get the site up immediately
-- it's the second site I've ever done, and I'm very slow at this kind of
thing. With all its flaws, my only previous experience was with a print-style
design.I keep telling myself that I'll try to learn these things for my
next site, but, given that I'm still in the dark with a lot of what I've
already learned, even that may turn out to be too ambitious.
Thanks for your help, Georg!
All the best,
Michael
From: Gunlaug Sørtun gunla...@c2i.net
To: Michael Leibson michael_mabe...@yahoo.ca
Cc: Eric Meyer's CSS List css-d@lists.css-discuss.org
Sent: Friday, April 10, 2009 9:01:10 AM
Subject: Re: [css-d] Firefox bug on on new Macs?
Michael Leibson wrote:
I used Firefox to view my website on a friend's zillion-pixel-wide new Mac,
yesterday, and I was astonished to find that all elements on
all pages had a significantly increased width, so that the design was
effectively spread, horizontally, to fit the (maximized) window.
Don't know how wide the screen on a zillion-pixel-wide new Mac is, but
my trusty old win machine provides me with a 3800 px wide screen for
browsers if/when I need it.
I need nearly half of that screen-area for your page, in any browser,
just to get rid of the horizontal scrollbar. That's before adding
page-zoom to the equation.
This would have pleased me, were my design fluid -- but it isn't: it's fixed!
1: your page is full of markup errors...
http://validator.w3.org/check?uri=http://www.thinkingmusic.ca/
...and some of those are serious.
2: background is positioned 50% from the left side - regardless of
window size.
3: what Fx version did you test in and what settings were at play?
www.thinkingmusic.ca .
Individual elements hold their declared width, but the page as such
needs 1650px wide windows to get rid of the horizontal scrollbar.
The declared dimensions on paragraphs and parent-less list-items are
creating problems...
http://www.gunlaug.no/tos/alien/ml/test_09_0410.html
...and extra horizontal width all browsers have to cope with.
Why not let those elements auto-adjust to their containers?
FWIW: it looks like you're attempting to recreate print design on the
web, and that rarely ever works well.
regards
Georg
-- http://www.gunlaug.no
__
Ask a question on any topic and get answers from real people. Go to Yahoo!
Answers and share what you know at http://ca.answers.yahoo.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
Re: [css-d] Firefox bug on on new Macs?
Thanks, Phillipe! Here is how it looks like, when I force the window to the width of the monitor -windoze users call that full screen or something: http://dev.l-c-n.com/_b/ml.png I zoomed the text, note how the selected part overflows the sand background (and is then unreadable). Wow, pretty gruesome! However, I intentionally made the font size super-big, in the hope that everyone who can read will be able to do so without text-zooming. Should I worry? At my normal window width, no text zoom. Note the heavy horizontal scrollbar. Yes -- apart from the horizontal scrollbar, it looks as I intended it. Re. the scrollbar: I'd originally designed for 1024 x 768, but found the design looked quite weak without the #background div, when viewed in anything wider (I'm assuming it's that very wide div that's doing it). I don't suppose there's any way to have my cake and eat it too, is there (short of creating a fluid design, which is way beyond my current skill-level and available time)? Safari 3.2 and 4b displays exactly the same. On a another Mac with a 24inch monitor, it behaves all the same. On Ubuntu Linux, same thing. Thanks! That's very good to know. I like the colours, btw. Thank-you! One more question, if I may: I see that, on your computer, my 'contact' link (top right of page) actually displays as an email 'envelope' symbol. Is that your computer/browser's default display for any href=mailto. . . code -- or is my html incorrect? (On my FF 3.0.4, on Windows XP, I simply see what I'd intended -- contact, with no symbol.) From: Philippe Wittenbergh e...@l-c-n.com To: CSS-D css-d@lists.css-discuss.org Cc: Michael Leibson michael_mabe...@yahoo.ca Sent: Friday, April 10, 2009 8:19:08 AM Subject: Re: [css-d] Firefox bug on on new Macs? On Apr 10, 2009, at 8:43 PM, Michael Leibson wrote: I used Firefox to view my website on a friend's zillion-pixel-wide new Mac, yesterday, and I was astonished to find that all elements on all pages had a significantly increased width, so that the design was effectively spread, horizontally, to fit the (maximized) window. This would have pleased me, were my design fluid -- but it isn't: it's fixed! The site is www.thinkingmusic.ca . The home page's main div (a sandy grey colour) should be 790px wide, and the slate-blue navigation div, immediately to its left, should be 244px wide (including border). Dunno. Here is how it looks like, when I force the window to the width of the monitor -windoze users call that full screen or something: http://dev.l-c-n.com/_b/ml.png I zoomed the text, note how the selected part overflows the sand background (and is then unreadable). http://dev.l-c-n.com/_b/ml2.png At my normal window width, no text zoom. Note the heavy horizontal scrollbar. Safari 3.2 and 4b displays exactly the same. On a another Mac with a 24inch monitor, it behaves all the same. On Ubuntu Linux, same thing. I like the colours, btw. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ Looking for the perfect gift? Give the gift of Flickr! http://www.flickr.com/gift/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] border of relatively positioned container div ignores contained absolutely positioned div
Greetings; It's amazing how much CSS one can forget in a few months! I'm sure there's a very simple answer to this -- but I've forgotten it! My containing div has a border. It also contains three other divs: two that are within the normal flow, and one (class=rightside) that is absolutely positioned. Rather than figuring the absolutely-positioned div in its own border calculations, the containing div's border ignores it. 1) Why? 2) The proper way around this CSS fact-of-life? Here's where you can see the problem, and the css behind it: http://members.distributel.net/~leibson/tests/border_problem.html Many thanks, in advance. - Michael __ Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 bug changing border color?
Hi,
I just had my first look at what IE7 does to my website, via a BrowserCam.com
screencapture. The first thing I noticed is that the border to my homepage
'container' div is rendered as black, rather than as 30% black (#AAA9A9). Is
this the result of an IE7 bug, and -- if so -- any recommendations on how to
work around it?
You can find the page at:
http://members.distributel.net/~leibson/
but, of course, it will only appear black in IE7.
The relevant CSS is as follows:
#homepage_container
{
position: absolute;
left: 50%;
top: 50%;
width: 780px;
height: 430px;
margin-top: -215px;
margin-left: -390px;
padding: 0;
border: 1px solid #AAA9A9;
overflow: hidden;
background: white;
}
. . . which works fine in IE6, FF2, Opera9 and Safari3.
Thanks for any tips you'd care to share.
- Michael
Ask a question on any topic and get answers from real people. Go to
Yahoo! Answers and share what you know at http://ca.answers.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 bug changing border color?
- Original Message From: Rafael [EMAIL PROTECTED] To: Michael Leibson [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Sunday, December 23, 2007 3:22:06 PM Subject: Re: [css-d] IE7 bug changing border color? Michael Leibson wrote: Hi, I just had my first look at what IE7 does to my website, via a BrowserCam.com screencapture. The first thing I noticed is that the border to my homepage 'container' div is rendered as black, rather than as 30% black (#AAA9A9). Is this the result of an IE7 bug, and -- if so -- any recommendations on how to work around it? You can find the page at: http://members.distributel.net/~leibson/ but, of course, it will only appear black in IE7. I don't know about the rest, but I see no difference between Fx and IE7 rendering. What about sending a link to picture describing what you mean? Sorry, Rafael, I should have thought of that. Here it is: http://members.distributel.net/~leibson/tests/screencapture_of_IE7.htm If you saw no difference between FF and IE7 rendering, I wonder if all is in fact okay, with the problem simply being somewhere in the transfer from screen to screen capture via Browsercam.com? Thanks for your help, Rafael. - Michael Looking for a X-Mas gift? Everybody needs a Flickr Pro Account. http://www.flickr.com/gift/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] tables, table captions in I.E.6
From: Philippe Wittenbergh [EMAIL PROTECTED] Subject: Re: [css-d] tables, table captions in I.E.6 On Oct 11, 2007, at 12:50 AM, Michael Leibson wrote: http://members.distributel.net/~leibson/table%20or%20caption%20margins%20in%20IE.htm First problem: The margin for the table caption displays properly in FF2, but not at all in IE6. Second problem: Although the caption margins are only set for 'top' and 'bottom', IE6 gives it the same L and R margins as the table (while FF2 does not). . . . result: it is kind of a mess out there... One approach I've taken in a similar situation as yours: * don't apply margins to the table, but wrap it in a div and apply the margins to the div. * for margins on the caption: set them to 0, and wrap the text of the caption in a span, style the span with display:block + margins as needed. That still fails in WebKit/Safari. ... or don't use caption, but headings (like h5 or h6, depending on your document structure). Philippe --- Philippe Wittenbergh http://emps.l-c-n.com Thanks for answering this, Philippe! I'll try your solutions. - Michael -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ End of css-d Digest, Vol 59, Issue 12 * Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] refining text-align: justify
Ernie Finlay [EMAIL PROTECTED] wrote: You could simply add to or reduce (minor)the font size to suit.:) Thanks, Ernie. In the end, I decided to increase my paragraph's width enough to pop the offending widow back onto the end of the previous line. - Michael Get news delivered with the All new Yahoo! Mail. Enjoy RSS feeds right on your Mail page. Start today at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] re. refining tex-align: justify
Jukka K. Korpela wrote:
. . . it is easy to insert a no-break space,. . . as the entity reference
nbsp;,
e.g. likenbsp;this?
Similar things can be done in CSS . . . you can write
span class=nobrlike this?/span
with
.nobr { white-space: nowrap; }
Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/
Thanks to both you, Jukka, and Philippe, for addressing this problem.
Jukka, I don't know what I'm doing wrong, but neither nbsp; nor creating
a span class with {white-space: nowrap;} has so far worked for me.
If you could possibly take a quick look at my css and mark-up, at:
http://members.distributel.net/~leibson/justified%20text,%20with%20various%20problems.htm
-- I'd be most grateful!
Oh yes: does nbsp; work in HTML 4.01 Transitional?
Thanks!
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] re. refining tex-align: justify
Jukka K. Korpela [EMAIL PROTECTED] wrote: Checking on IE 7, the second case, with nbsp;, works well: the last line is and strategy, as desired. I wonder where it does not work. Aha -- the problem lay in my own misunderstanding! I'd mistakenly thought that by using nbsp; I could get strategy to actually remain on the prior line. Now I see that, of course, it did eliminate that widow, by adding the 2nd to last word -- and -- to the last line. The problem with the CSS way is that you have whitespace: nowrap; instead of the correct white-space: nowrap; Thank-you, Jukka -- even though I'd checked and rechecked my CSS, that had escaped me! Now I know! Thanks, again, for all your help! - Michael Get news delivered with the All new Yahoo! Mail. Enjoy RSS feeds right on your Mail page. Start today at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] refining text-align: justify
Hello;
Is there any way to refine the use of {text-align: justify;} so that one can,
for
example, prevent the last word of the last line from appearing on its own line
- like
this?
Thanks, in advance, for any tips.
- Michael
Get news delivered with the All new Yahoo! Mail. Enjoy RSS feeds right
on your Mail page. Start today at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image replacement techniques and CSS
- Original Message From: David Laakso [EMAIL PROTECTED] To: Michael Leibson [EMAIL PROTECTED] Cc: css discuss css-d@lists.css-discuss.org Sent: Wednesday, August 8, 2007 11:03:10 AM Subject: Re: [css-d] image replacement techniques and CSS Michael Leibson wrote: I've a question about image replacement techniques and CSS. For details, please see: http://members.distributel.net/~leibson/Gilder-Levin.htm Image replacement is more a means of putting heading content in your file as text. . . . Hi, David. Thanks for replying. Yes, I'm aware of its use, and am having no trouble using it. The question I have is strictly about how to add padding to the h# that contains the text without, in the process, also adding padding around the image. As far as I can tell, those two effects are inseparable, so I imagine there must be another way to do it -- eg, somehow using more than just the h# and the span. I'm surprised that yours has been the only response on this topic. From the many well-written (and well-presented) web-sites on the subject, I'd gotten the impression that image replacement is fairly commonly used, and expected that it would be well-known among the number of really good web designers using this list. I'll put this particular problem on the back burner, for now. All the best, Michael Get news delivered with the All new Yahoo! Mail. Enjoy RSS feeds right on your Mail page. Start today at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] image replacement techniques and CSS
Hi, I've a question about image replacement techniques and CSS. For details, please see: http://members.distributel.net/~leibson/Gilder-Levin.htm Thanks. - Michael Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] best way to display a non-inline image
- Original Message From: fantasai [EMAIL PROTECTED] To: Michael Leibson [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Saturday, August 4, 2007 8:02:12 PM Subject: Re: [css-d] best way to display a non-inline image Michael Leibson wrote: What is the most efficient way to display a non-inline image (eg, a logo) that will stand on its own (ie, with no superimposed text, etc)? Is the logo standing in for something, or is it just decorative? ~fantasai Hi, fantasai; The logo consists of an image + text of company name and company description. I will try to find some workable image replacement technique to ensure that that info is displayed in cases where the viewer has images turned off. Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] best way to display a non-inline image
P.S. (please see below) - Original Message From: fantasai [EMAIL PROTECTED] To: Michael Leibson [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Saturday, August 4, 2007 8:02:12 PM Subject: Re: [css-d] best way to display a non-inline image Michael Leibson wrote: What is the most efficient way to display a non-inline image (eg, a logo) that will stand on its own (ie, with no superimposed text, etc)? Is the logo standing in for something, or is it just decorative? ~fantasai P.S. Sorry, I forgot to say that the logo's 'image + text' are all contained in the one image -- that is, the text is part of the image. - Michael Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] best way to display a non-inline image
- Original Message
From: [EMAIL PROTECTED] [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Sunday, August 5, 2007 9:16:50 AM
Subject: [css-d] best way to display a non-inline image
Michael asked:
What is the most efficient way to display a non-inline image
(eg, a logo) that will stand on its own (ie, with no superimposed text, etc)?
fantasai responded:
If the image has text in it that should be there for the document to
make sense, then I would use an img tag with alt text. For example,
h1img src=logo alt=The FooBar Company/h1
pWelcome to the FooBar Company website, blah blah/p
and David L. responded, as well:
If the logo is purely decorative (no image text) then my guess is one
would use a background image.
If the logo has image text then I guess you might call it from the
source document (html); and, call the style for it from an external css
file (rather than using inline styles). For example:
#header img {...}
And, then also provide some means for users, with or without assistive
devises (screen readers), to read the image text.
Thanks, fantasai and David. While researching this, I looked up some sites on
Image Replacement Technique (including Thierry's beautiful site, David), and
eventually
figured that the Gilder/Levin Image Replacement Technique would be the easiest
one,
with enough essentials, for me to use. From what I can understand, that
technique requires a particular approach to displaying the image:
CSS:#logo {width: [same as image]; height: [same as image]; position:
relative; }
#logo span {background: url(logo.jpg) no-repeat; position:
absolute; width: 100%; height: 100%;}
Markup: h1 id=logo
span/span [logo text]
/h1
Would this come close enough to your suggestions?
Thanks!
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Padding when using Gilder/Levin IRT
Does anyone have experience with this?
In the Gilder/Levin Image Replacement Technique, an h (= text for viewers
with 'images off', etc) contains a span (that holds the image that replaces
the text):
CSS:#logo {width: [same as image]; height: [same as image]; position:
relative; }
#logo span {background: url(logo.jpg) no-repeat; position:
absolute; width: 100%; height: 100%;}
Markup: h1 id=logo
span/span [logo text]
/h1
If I want a border around the image, I must add it to the h1, so that it does
not impinge on
the text. However, if I want even more space between the text and the left/top
border, I need
to add some padding to the h1, as well. Doing this, however, axiomatically
adds space
between the border and the image!
Is there a solution?
Thanks!
- Michael
Get a sneak peak at messages with a handy reading pane with All new
Yahoo! Mail: http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] best way to display a non-inline image
Here's a very basic question (I hope!): What is the most efficient way to display a non-inline image (eg, a logo) that will stand on its own (ie, with no superimposed text, etc)? As a 'background-image' within a div? With an inline style, with 'display' set to 'block'? (Eg, img src=image.jpg style=display:block; width: 100px; margin: 0;) If as an inline style, is there a way to define this back in the style sheet - perhaps with an ID? Some other way? I can't find anything that addresses this in Meyer's 'CSS-Definitive Guide'. Thanks! - Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple margins question
From: [EMAIL PROTECTED] [EMAIL PROTECTED] Subject: Re: [css-d] simple margins question I am new to this listserve so please forgive me if I am off base. On the contrary, I appreciate your help! I have added a 3px yellow border to your containing div, and it appears to be positioned at 0 (top) of the body. am I missing something? Jamy I received quite a few helpful responses to my question, many of which recommended the same thing -- ie, adding either padding or a border to the containing div. I see that it works equally well in FF2 and IE6. Thanks, Jamy. All the best, Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] collapsing vertical margins
- Original Message From: Gunlaug Sørtun [EMAIL PROTECTED] To: Michael Leibson [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Sunday, July 29, 2007 7:09:14 PM Subject: Re: [css-d] collapsing vertical margins (definitely! I can create a bigger and more complex mess _with_ CSS, than anyone could do before CSS... :-) ) The humour helps! ; - ) I've also found (sigh) that IE6 suddenly ignores paragraph margin-right when that paragraph is absolutely positioned (it respects all other margins, however). What is THAT all about?? One of IE6' many weak spots, and a good reason not to use A:P as a fix. A:P is useful for other purposes. In your case I would reduce the styles/source code to something like... http://www.gunlaug.no/tos/alien/test_07_5080.html regards Georg Thank-you for taking the time to do this, Georg -- I really appreciate it! I've studied your code, and have saved it for future reference. Your comments show that you've used a number of specific hacks/workarounds (eg, the body's text-align: center for IE, the overflow: hidden used to [i think] subdue the 'hasLayout' in IE, etc). I'd like to find explanations of both the hacks and the problems they undo, so that I can understand the principles, rather than simply imitate the code. However, I'm new at all of this, and don't understand many of the references and terminology I encounter along the way (eg, http://www.satzansatz.de/cssd/onhavinglayout.html, which Alan so kindly provided). I've been studying Eric Meyer's CSS-Definitive Guide for three months now, but he doesn't even mention the hasLayout problem. (One would think that a detailed explanation of absolute positioning - which he furnishes - should include the rather important disclaimer that nothing else will work when using it in IE! Some tried-and-true hacks/workaround to employ so that one can actually use the absolute positioning he details would also seem fitting.) Any suggestions as to where a beginner like me can find understandable explanations for the hacks and workarounds used for IE and the problems they address? Thanks again! - Michael Get news delivered with the All new Yahoo! Mail. Enjoy RSS feeds right on your Mail page. Start today at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] effects of hasLayout (on one very discouraged student of CSS)
- Original Message
From: Michael Leibson [EMAIL PROTECTED]
To: Alan Gresley [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: Sunday, July 29, 2007 3:21:08 PM
Subject: collapsing vertical margins
Michael Leibson wrote:
. . . IE6 suddenly ignores paragraph margin-right when that paragraph is
absolutely positioned (it respects all other margins,
however). What is THAT all about??
Alan Gresley responded:
. . . Since you have a width set for your container, it has hasLayout (for IE
only),
which causes the adjoining margins not to collapse. . .
. . . Remember hasLayout only effects IE and when an elements gains hasLayout
all types of undesired
effects are seen, please see
http://www.satzansatz.de/cssd/onhavinglayout.html
Reread this several times over a few weeks and all will eventually sink in.
Hi again, Alan (and anyone else interested in this topic);
I've been trying to understand the satzansatz article, as well as other
articles to which it refers.
One of these is the article by Markus Mielke, of MS, HasLayout Overview,
at
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/expie20050831.asp.
Among other things, that article seems to say that once a CSS property triggers
IE's hasLayout, the affected
block element is given a new 'block formatting context', which I take to mean
that -- in terms of some parameters,
like dimensions -- it no longer refers to those of its parent, but to those of
some previous ancestor (eg,
body, rather than containing div). If so, this might be the explanation why
the margins of my absolutely positioned p
didn't operate in relation to its containing div, but instead extended past
that parent.
Am I on the right track??
If I am, then it would seem to me that the most direct workaround/hack would be
to somehow hide the
p's {position: absolute;} and the WIDTH, and every other CSS-provoked hasLayout
trigger from IE,
but not from all other browsers -- yet still somehow convey those directives to
IE in a 'less offensive' manner.
Am I still headed in the right direction?
If so, could you (or anyone else interested in this topic) direct me to a site
that not only gives such a hack,
but also explains it?
Thanks, in advance, for any insights you'd care to share!
- Michael
Ask a question on any topic and get answers from real people. Go to
Yahoo! Answers and share what you know at http://ca.answers.yahoo.com
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] collapsing vertical margins
Michael Leibson wrote: . . . IE6 suddenly ignores paragraph margin-right when that paragraph is absolutely positioned (it respects all other margins, however). What is THAT all about?? Alan Gresley responded: . . . Since you have a width set for your container, it has hasLayout (for IE only), which causes the adjoining margins not to collapse. Please see http://css-class.com/test/margins.htm . . . When you position a box absolutely, this itself give the box hasLayout and this causes IE6 and IE7 to not respect the right margin on your absolutely positioned paragraph. Please see http://css-class.com/test/margins4.htm . . . Remember hasLayout only effects IE and when an elements gains hasLayout all types of undesired effects are seen, please see http://www.satzansatz.de/cssd/onhavinglayout.html Reread this several times over a few weeks and all will eventually sink in. Kind Regards, Alan Thanks for taking this time, once again, Alan -- I appreciate it! I can see -- and understand -- what's happening in the two URLs you've furnished, but the terminology and references in the onhavinglayout.html article will definitely take a few weeks to sink in ;-) In the meantime -- since I'm trying to get my web pages online -- can you (or anyone else) recommend a reliable workaround for what must surely be a very common problem -- ie, how to get IE6 to properly respect margins when using absolute positioning? I'm surprised that I wasn't able to find anything relating to this particular problem anywhere via Google (lots on using 'clear' with floats, but nothing on restoring proper margins, etc, when using absolute positioning in IE). All the best, Michael Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] simple margins question
Hi;
I'm trying to position the content area of a p below the top outer edge of its
containing div, by giving the p a large margin. The div is horizontally
centered within the body, is flush with the top of the page, and has no margins
or padding. To my surprise, the resulting p ends up lowering the div's own
position -- lowering it on the page -- as though the body had a margin (which
it doesn't). The only logical explanation I can deduce is that -- as the p
has margins but the div doesn't -- this may be a case of 'collapsing margins',
where the greater of the two adjacent margins is used. But this seems so
counter-intuitive, I can't believe it's the actual cause.
What's happening here?
If this is a case of collapsing margins, what does one do to use a p's margins
to lower its content area?
Here are the styles, and markup:
body {margin: 0; }
div {width: 700px; margin-left: auto; margin-right: auto; height: 500px;
background-color: green; margin-top: 0; padding: 0;}
p {border-style: solid; border-color: red; margin: 10%;}
body
div
pthis is a paragraph/p
/div
/body
Any tips would be gratefully welcomed!
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] collapsing vertical margins
Hi;
(With all the workarounds necessary for noncompliant browsers, are you really
any further ahead than you were
before CSS?)
I've found that giving a box element absolute positioning stops its vertical
margins from collapsing.* Any good reasons why one shouldn't use absolute
positioning everywhere that collapsing margins is a threat?
I've also found (sigh) that IE6 suddenly ignores paragraph margin-right when
that paragraph is absolutely positioned (it respects all other margins,
however). What is THAT all about??
Here are my styles for both effects:
body {margin: 0; }
div {position: relative; width: 780px; margin-left: auto; margin-right: auto;
height: 500px; background-color: green;
margin-top: 0; padding: 0;}
p {position: absolute; margin: 50px; }
The markup:
body
divpthe collapsing margins are prevented by giving this p absolute
position; CSS2.1 states that absolutely
positioned boxes don't have collapsing margins. However, it appears that
absolute positioning also makes
IE disregard margin-right!/p/div
/body
Thanks, in advance, for any help you care to share.
- Michael
* I found some very interesting web articles on Block Formatting contexts, and
IE's hasLayout -- which seemed to
give an in-depth view of the mechanisms involved -- but I'm a complete
beginner to webdesign and CSS, and so
found it too difficult to fully grasp.
Get news delivered with the All new Yahoo! Mail. Enjoy RSS feeds right
on your Mail page. Start today at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple margins question
Message: 18 Date: Sat, 28 Jul 2007 13:30:03 -0700 From: Alan Gresley [EMAIL PROTECTED] Subject: Re: [css-d] simple margins question To: css-d@lists.css-discuss.org Message-ID: [EMAIL PROTECTED] Content-Type: TEXT/plain; CHARSET=US-ASCII Michael Leibson wrote: . . . If this is a case of collapsing margins, what does one do to use a p's margins to lower its content area? Hi Michael Your logic is correct, it's a case of collapsing margins [1]. Have you checked in IE though, you will see a difference, it will show how you first imagined, with the margin inside the container, but only because your container has haslayout with width: 700px. Please refer to [2] concerning the IE behavior (check also in Firefox). The way around collapsing margins is to give the container padding or a border (same color as background) and this will bring IE and the good browsers sort of into line. [1] http://www.w3.org/TR/CSS21/box.html#collapsing-margins [2] http://css-class.com/test/iehaslayoutmargins.htm Kind Regards, Alan Thanks for this detailed reply, Alan -- I appreciate it. I had noticed that IE looked okay, but I am getting used to expecting completely unpredictable differences between browsers (argh!).I had also stumbled on the CSS2.1 specifications on collapsing margins. I know the minds behind CSS 2.1 had many things in mind when they designed this, but . . . I had come across other articles on 'hasLayout' in IE, but I have to confess that, as I am a complete beginner at all this, it was way beyond me. So too, unfortunately, was this particular URL -- for some reason, ALL the examples displayed with the same amount of padding, etc, and so I couldn't trace the effects the author describes. All the best, Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] vertically centering a div
Date: Thu, 26 Jul 2007 12:09:31 +1000 From: Seona Bellamy [EMAIL PROTECTED] Subject: Re: [css-d] Background image not centring correctly in Firefox To: CSS-D css-d@lists.css-discuss.org Just out of curiosity, is there a nice easy way of vertically centring a div? I seem to recall seeing this discussion once before and the conclusion being that there isn't, but someone may have come up with a way since then. (Well, I can dream...) :) Seona. Hi, Seona; I came upon these useful URLs in a previous css-d list: For horizontal centering: http://css-discuss.incutio.com/?page=CenteringBlockElement For vertical (as well as horizontal) centering: http://tutorials.alsacreations.com/centrer/ http://vmalek.murphy.cz/ and for vertically centering elements of unknown height: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html http://brunildo.org/test/shrink_center_4.html Hope that's of some help. - Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to suppress default hypertext link 'hover'
Message: 19
Date: Fri, 20 Jul 2007 22:59:44 -0400
From: Phillip Allard [EMAIL PROTECTED]
Subject: Re: [css-d] how to suppress default hypertext link 'hover'
borders?
To: css-d@lists.css-discuss.org
Message-ID:
[EMAIL PROTECTED]
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
(re-posted to CSS-D)
You might wanna try a:active{outline:none;}, I know this works for FF. The
reason I use a:active, is to comply with TAB browsing, where you do need
some kind of indicator for the currently selected link.
Thanks, Phillip -- now that I understand the TAB browsing function, and have
learned Jukka's technique
for suppressing the default focus outline in IE6, I now fully understand your
suggestion to use a:active
in IE.
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to suppress default hypertext link 'hover'
From: Jukka K. Korpela [EMAIL PROTECTED] Subject: Re: [css-d] how to suppress default hypertext link 'hover' To: css-d@lists.css-discuss.org Message-ID: [EMAIL PROTECTED] Content-Type: TEXT/PLAIN; charset=US-ASCII; format=flowed On Fri, 20 Jul 2007, Michael Leibson wrote: Forgive my ignorance, but just how would a keyboard navigate hyperlink text, given that there are no menus, etc, to which to apply keyboard shortcuts? I hope that answering this won't be considered as too off-topic. There's at least a specific CSS technicality in my answer. . . Many thanks, Jukka! Thanks to your and many others' helpful feedback, I have come to understand this issue much better, and have figured out how to use :focus, :active and your 'Boolian-type' mark-up to replace the default focus 'outline' in both FF and IE6 with a style of my own choosing. This - your newest post - takes us even further, to a deeper perspective. What a great list! - Michael Ask a question on any topic and get answers from real people. Go to Yahoo! Answers and share what you know at http://ca.answers.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] how to suppress default hypertext link 'hover' borders?
Hi;
I've discovered that both IE6 and FF seem to put a default border (dotted)
around any hypertext link while it is being clicked. I've tried various steps
to suppress this -- eg, adding the styles a {border: none;}, a
{border-style: none;} a:hover {border: none;}, etc -- but nothing seems to
work.
Here's my (very basic) style code, which the W3C CSS Validation Service okays:
body {margin:0; padding:0; color:black;font-family: Lucida Sans Unicode,
Lucida Sans, Lucida Grande, Verdana, Arial, sans-serif;} a
{text-decoration: none; border: none}a:link {color: #79BEEA;} a:visited {color:
#79BEEA;}
a:hover {color: #C4BF66;} a:active {color: #C4BF66;}
I should add that a {text-decoration: none} does eliminate the browsers'
default underline.
Any tips?
Thanks, in advance!
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to suppress default hypertext link 'hover' borders?
- Original Message
From: Jon Hughes [EMAIL PROTECTED]
To: Michael Leibson [EMAIL PROTECTED]; css-d@lists.css-discuss.org
Sent: Friday, July 20, 2007 1:05:19 PM
Subject: RE: [css-d] how to suppress default hypertext link 'hover' borders?
I've discovered that both IE6 and FF seem to put a default border
(dotted)
around any hypertext link while it is being clicked. I've tried
various
steps to suppress this -- eg, adding the styles a {border: none;},
a
{border-style: none;} a:hover {border: none;}, etc -- but nothing
seems
to work.
I believe it's outline
So
Selector {
Ouline:0;
}
Or possibly
Ouline:none;
- Jon
Thanks, Jon -- there's no way I would have discovered that on my own (despite
having Meyer's CSS-Definitive Guide on hand)!
Your suggestion works in Firefox, but not in IE6. I've tried many variants --
a {outline-style: none;} through to a:hover {outline-width: 0;}, but IE6
ignores them all! Is there no way to suppress this in IE?
Thanks again.
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to suppress default hypertext link 'hover' borders?
From: Phillip Allard [EMAIL PROTECTED]
To: Michael Leibson [EMAIL PROTECTED]
Sent: Friday, July 20, 2007 2:54:57 PM
Subject: Re: [css-d] how to suppress default hypertext link 'hover' borders?
You might wanna try a:active{outline:none;}, I know this works for FF. The
reason I use a:active, is to comply with TAB browsing, where you do need some
kind of indicator for the currently selected link.
Hope this helps,
Philip A.
Thanks, Phillip -- I appreciate the help!
Unfortunately, I find that while it works in FF, it -- like everything else, so
far -- doesn't work in IE6.
By the way: do you mean that it's preferable to use a:active rather than
a:hover?
- Michael
On 7/20/07, Michael Leibson [EMAIL PROTECTED] wrote:
Hi;
I've discovered that both IE6 and FF seem to put a default border (dotted)
around any hypertext link while it is being clicked. I've tried various steps
to suppress this -- eg, adding the styles a {border: none;}, a
{border-style: none;} a:hover {border: none;}, etc -- but nothing seems to
work.
Here's my (very basic) style code, which the W3C CSS Validation Service okays:
body {margin:0; padding:0; color:black;font-family: Lucida Sans Unicode,
Lucida Sans, Lucida Grande, Verdana, Arial, sans-serif;} a
{text-decoration: none; border: none}a:link {color: #79BEEA;} a:visited {color:
#79BEEA;}
a:hover {color: #C4BF66;} a:active {color: #C4BF66;}
I should add that a {text-decoration: none} does eliminate the browsers'
default underline.
Any tips?
Thanks, in advance!
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ --
http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
- Original Message
Get a sneak peak at messages with a handy reading pane with All new
Yahoo! Mail: http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to suppress default hypertext link 'hover'
Message: 23 Date: Fri, 20 Jul 2007 20:00:28 +0200 From: Jens Brueckmann [EMAIL PROTECTED] Subject: Re: [css-d] how to suppress default hypertext link 'hover' borders? To: CSS Discussion Group css-d@lists.css-discuss.org Message-ID: [EMAIL PROTECTED] Content-Type: text/plain; charset=ISO-8859-1; format=flowed Hi Michael, there is a CSS method described by Stu Nicholls at http://www.cssplay.co.uk/menu/nodots.html and a javascript method by David Dorward: http://blog.dorward.me.uk/2006/01/13/focus.html Before removing these borders I recommend reading David's article. These borders do not exist just for fun but for accessibility. Cheers, jens Thanks, jens! I encountered both sites earlier today -- I understood one of them, but not the javascript one. I have assigned a different colour for the a:hover a:active states -- would that not show up if accessed by keyboard rather than mouse? - Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to suppress default hypertext link 'hover'
Message: 25 Date: Fri, 20 Jul 2007 21:43:20 +0300 (EEST) From: Jukka K. Korpela [EMAIL PROTECTED] Subject: Re: [css-d] how to suppress default hypertext link 'hover' borders? To: CSS Discussion Group css-d@lists.css-discuss.org Message-ID: [EMAIL PROTECTED] Content-Type: TEXT/PLAIN; charset=US-ASCII; format=flowed On Fri, 20 Jul 2007, Jens Brueckmann wrote: there is a CSS method described by Stu Nicholls at http://www.cssplay.co.uk/menu/nodots.html and a javascript method by David Dorward: http://blog.dorward.me.uk/2006/01/13/focus.html Moreover, there's the nonstandard hidefocus attribute recognized by IE. It's a Boolean type of attribute: a href=... hidefocus Before removing these borders I recommend reading David's article. These borders do not exist just for fun but for accessibility. Indeed, so it might be better to ask how to make them more noticeable. You could set outline properties e.g. so that the outline is thicker. But this won't affect IE. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ WONDERFUL --- it works in IE Forgive my ignorance, but just how would a keyboard navigate hyperlink text, given that there are no menus, etc, to which to apply keyboard shortcuts? As well, as I asked jens, wouldn't a colour-change on a:hover and/or a:active be just as effective? Thanks for showing me how to suppress the :active outline in IE! - Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] background-color of an absolutely positioned block element
Thanks to Philippe Wittenbergh's help, I now realize that - with the exception
of the root element - the background-color of any block element will normally
apply only to its content-area, and that area, of course, is defined by either
its actual content, or a specified width.
However, in Eric Meyer's Cascading Style Sheets: The Definitive Guide, 2nd
edition, Eric seems to indicate that in the case of absolutely positioned block
elements, the width is in many cases determined by the offsets used --- eg,
{position: absolute; top: 25%; right: 25%; bottom: 0; left: 0;} defines the
block's dimensions relative to its containing block. The accompanying
illustrations seem to imply that a background-color has been applied to that
IMPLIED width -- and not solely to the area behind the content that is entered
into the block element. Here's an example:
First, the style:
#masthead h1 {position: absolute; top: 1 em; left: 1 em; right: 25%; bottom:
10px; margin: 0; padding: 0; background: silver;}
Then an accompanying illustration, in which he has entered text into his
masthead. The masthead's background-color, however, extends far to the right of
the space occupied by the text, and below it, as well -- in effect filling up
the width that was only implied by the offsets used to absolutely position the
block element.
When I try to duplicate this, however, I end up with a block element that,
while positioned right: 25%, is completely limited to its text content -- there
seems to be no acknowledgement of the width implied by the offsets.
Can anyone point out what I'm not seeing, here?
Thanks, in advance!
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] html background-color acting against body background-color
Hi;
I'm new to CSS, and have been doing small experiments as a means to
understanding how it works.
I wanted to discover what kinds of attributes are applicable to the html
element, and wrote the following primitive style:
style type=text/css
html {background-color: green;}
body {height: 100%; background-color: blue;}
/style
To my surprise, the body's specified background-color didn't display -- the
page was the html's green. (I've tried finding the answer in Eric's book, but I
find it very hard to isolate and locate one specific subject there.) Does this
issue have to do with the body inheriting its parent's color -- even though the
body's color was also specified via the style?
I then added some text (directly) to the body, and was surprised again -- this
time to find that the body's background-color WAS applied -- but in a narrow
band that had the same height as the text, and stretched across the page. Can
anyone explain what's happening here, in terms of CSS principles?
Last, while I'm on the subject of html attributes:
I've come across a few styles that apply the height, margin, and padding
attributes to html. However, none of my own experiments have been able to show
that these have any effect. I don't know whether this REALLY means that they
have no effect, or that I'm simply not building a proper-enough situation
through which to test it.
Any comments would be very gratefully appreciated!
- Michael
Ask a question on any topic and get answers from real people. Go to
Yahoo! Answers and share what you know at http://ca.answers.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] html background-color acting against body background-color -- P.S.
P.S.
I subsequently found that:
style type=text/css
html {background-color: green;}
body {height: 100%; background-color: blue;}
/style
DID display the body background-color in IE6 -- for the entire viewport (minus
a default body margin) -- but not in Firefox 2.0. Is the attribute height
only valid in IE6 Quirks mode, or is there some other reason for this
discrepancy?
I also found that when I used this style:
style type=text/css
html {background-color: green;}
body {background-color: blue;}
/style
/head
body text/body
/html
-- that is, with no height: 100% given to the body -- that both browsers
displayed the body background-color only as a narrow band behind the text.
Thanks, again, for any tips/comments you'd care to share.
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Replying to individual posts within a digest
Date: Sat, 30 Jun 2007 10:03:32 -1000 From: david [EMAIL PROTECTED] Subject: Re: [css-d] How to reply to one message within a daily digest? . . . you CAN reply to individual posts within a digest . . . Thanks, David -- I appreciate the very helpful info! - Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] centering elements via margin: auto
Date: Sat, 30 Jun 2007 14:32:26 -0700
From: Alan Gresley [EMAIL PROTECTED]
Subject: Re: [css-d] centering elements via margin: auto
. . . If the body had no text alignment (the default is text-align: left) then
you don't have to restate text-align: left on any element unless an ancestor
has text-align: center already. The CSS is less complicated if you only center
what needs to be centered.
. . . Apart from text-align: center centering text, it also centers images. The
real poison is that for IE, text-align: center will center all descendant
elements as well, so be careful. The text-alignment that you would achieve with
the CSS as above could be stated.
#container {margin 0 auto;}
Kind Regards, Alan
Many thanks, Alan.
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering elements via margin: auto
Thank-you, Josue, and also David, for your helpful replies.
I've come across this code before, but not - yet - in Eric's book (it's a
pretty dense study, for someone starting from scratch!). I gather that
{margin 0 refers to positioning, and (maybe) means the margin should be at
maximum left. But I don't understand how 0 and auto work together. I've
also read that body {text-align: center;} requires explicit text-align
statements in all children where one doesn't want text to be aligned to centre.
I've experienced a few frustrations with Eric's book: for one, the Index is
pretty sparse -- for example, I can't find any reference to 'centering a block
element vertically'. As well, there are almost no references to how to solve
particular problems (eg, vertically centering a block element) -- I had to find
those in other texts (eg, Web Design In A Nutshell).
That's why I greatly appreciate these replies!
All the best,
Michael
Hey, Michael, create a container for your layout (a div that will house
everything else). Use this code, assuming that div is called container
body {text-align: center;}
#container {margin 0 auto; text-align: left;}
This is covered in the book. Maybe in the chapter on positioning. Hope this
helps.
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How to reply to one message within a daily digest?
Hi; I have lots of experience with forums, but not much with email list digests. Would someone kindly explain how one goes about replying to a message contained within a daily digest? Many thanks! - Michael Get a sneak peak at messages with a handy reading pane with All new Yahoo! Mail: http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] centering elements via margin: auto
Hi;
I'm new to web-design and CSS, and am studying Eric's
. . . Definitive Guide, 2nd ed.. I have some
questions regarding the proper way to horizontally
center a block element:
On p.162, Eric writes: If both margins are set to
auto. . . then they are set to equal lengths, thus
centering the element within its parent. . .
He later writes: Setting both margins to equal
lengths is the correct way to center elements.
He then cautions: In practice, only browsers released
after Feb. of 1999 correctly handle auto margin
centering, and not all of them get it completely
right.
In an embedded style sheet, I entered:
body {margin: 0;}
div {width: 780px; margin-left: auto; margin-right:
auto; height: 100px; background-color: green;}
The resulting div was centered in Firefox 2, but was
aligned left in IE 6. I therefore deduce that even
IE6 won't accept auto margin centering -- am I
correct?
If so, then here's my situation and question:
I want my div to be of fixed width (750px), and always
horizontally centered within the viewer's browser
canvas. However, I have no way of knowing the
viewer's display resolution, and therefore no way of
knowing the WIDTH of his browser window. In such a
case (which must be extremely common), how should I
set my div's margins as equal lengths, if I those
'lengths' will always shift according to viewer
resolution and window size? Do I go with a maximum
possible width (eg, 1600px) to accomodate the widest
possible display resolution, or is there a better way?
Thanks, in advance, for your feedback.
- Michael
Be smarter than spam. See how smart SpamGuard is at giving junk email the
boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] centering element via margin: auto -- p.s.
(Sorry to do this via a p.s., but as I haven't yet received the list digest, I've no way to 'reply' to my own previous email!) Re. previous post: I later realized that in order to center a div using margin:auto in IE6, I needed to get IE6 into Standards mode via entering a Doctype! (Silly me -- I didn't stop to think that working offline doesn't change the browser's need for the doctype!) Sorry to trouble you! - Michael Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
