[css-d] Supporting legacy browsers considered harmful
Hi. Here's another topic for debate: http://onwebdev.blogspot.com/2010/08/supporting-legacy-browsers-considered.html HTH ^^ Gabriele Romanato http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floating images - understanding the details
Making progress. As you kindly recommended, my images now use a float
property for both left and right. Here's the glitch. In order to provide
white space for text that flows around each one, I lifted the following
code directly from Eric Meyer's book:
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
Second, I especially don't understand how he has illustrated margin. Why
do '1' and '1em' and '1em' follow each other that way, and what are they
accomplishing.
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
Finally, I need the images to indent 140 pixels like the text. Easy?
I will include the same caveat I have repeated before: If I am depending
on you folks too much and not relying on my own brain power, simply
refer me to the correct section in my bible; Cascading Style Sheets,
The Definitive Guide
http://www.keithpurtell.com/kthings/a_body_vance_divs.htm
--
- Keith Purtell
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating images - understanding the details
I'm absolutely no guru here (not anywhere), and I'm sure you will get
better replies.
Still:
2010/8/18 Keith Purtell keithpurt...@keithpurtell.com
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
To know what it's doing, you need to tell where it is been applied.
What is the *selector* part of your code line?
Second, I especially don't understand how he has illustrated margin. Why
do '1' and '1em' and '1em' follow each other that way, and what are they
accomplishing.
Not sure why we specify units on some cases and others don't, but
by having margin: 1 1em 1em; It's a shortcut way to declare margin
properties. In your case it's the same as:
margin-top: 1; (the first '1' that appears on the shortcut version)
margin-right: 1em; (the first '1em' that appears on the shortcut version)
margin-left:1em; (again, the first '1em' that appears on the shortcut version)
margin-bottom: 1em; (the second '1em' that appears on the shortcut version).
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
I believe the box-model could provide you same answers to that ;)
http://www.w3.org/TR/CSS2/box.html
- Keith Purtell
Regards,
Márcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating images - understanding the details
On Wed, Aug 18, 2010 at 3:26 PM, Keith Purtell
keithpurt...@keithpurtell.com wrote:
Making progress. As you kindly recommended, my images now use a float
property for both left and right. Here's the glitch. In order to provide
white space for text that flows around each one, I lifted the following
code directly from Eric Meyer's book:
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
Its a scalable width that will scale up or down if the user changes
the font size.
Second, I especially don't understand how he has illustrated margin. Why
do '1' and '1em' and '1em' follow each other that way, and what are they
accomplishing.
Dunno really. What I do know is.
1 value: represents all four sides;
2 values: The top and the bottom is represented by the first value.
Left and right represented by the second value.
3 values: The first value is top. Second value is left and right and
the final value is bottom.
4 values: are Top, bottom, left and right.
see also http://www.w3schools.com/css/css_margin.asp
With this in mind it looks like a top margin of 1 without a unit which
doesn't makes sense to me. The subsequent 1em 1em represents
left-right and bottom of 1. I believe that certain browsers may take
this as a pixel magin.
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
The padding is the area inside the border (if it exists). So if you
had a border arround the image it would have 0.25em background arround
the image. Try this with either a background-color or a border to see
the effect, Margin is the area outside. So basically your text would
start a quater of a charachter to the right of the image (if there was
no margin).
Finally, I need the images to indent 140 pixels like the text. Easy?
The margin is usually used to indent in this way so you may have
something like margin: 0 1em 1em 140px
Dunno really if this is what you wanted. You should try playing with
margin + padding sometimes.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating images - understanding the details
On Wed, Aug 18, 2010 at 4:08 PM, Wesley Acheson wesley.ache...@gmail.com wrote: Dunno really if this is what you wanted. You should try playing with margin + padding sometimes. The diagram on this page helps too http://www.w3schools.com/css/css_boxmodel.asp __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating images - understanding the details
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
The width is the width of whatever element you're applying the CSS to. Could
be the image, but as Marcio pointed out, you didn't include the selector, so we
don't know.
Second, I especially don't understand how he has illustrated margin.
Why do '1' and '1em' and '1em' follow each other that way, and what
are they accomplishing.
That's not valid CSS. All non-zero measures need to have a unit. So I'm not
sure what
margin: 1 1em 1em would do exactly. But in general, it applies a margin of 1
(whatever that means) to the top margin, 1em to the right (and left) margin,
and 1em to the bottom.
margin: 1em; applies 1em to the top (and the bottom, and the right, and the
left)
margin: 1em 2em; applies 1em to the top (and the bottom), and 2em to the
right (and the left).
margin: 1em 2em 3em; applies 1em to the top, 2em to the right (and the left),
and 3em to the bottom.
margin: 1em 2em 3em 4em; applies 1em to the top, 2em to the right, 3em to the
bottom, and 4em to the left.
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
Padding is like margin, except that it's inside the border (so background
colors apply to it), and it doesn't collapse. So, if you had a border around
your image, but you wanted some space between the image and the border, use
padding. Or if you wanted a margin, but you wanted it to be green, you could
use padding for that too. Or if you wanted the margins to not overlap on
adjoining elements, you can use padding for that as well. Or if you need an
inside margin and an outside margin, padding is the inside, and margin is the
outside. (see below)
Finally, I need the images to indent 140 pixels like the text. Easy?
Depends on your HTML. If all your images are in a container, you could put a
padding-left: 140px on that, and it would do the trick. There are also other
ways to do it. A link would help.
---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/
Re: [css-d] Fwd: Sigh three column layout.
On 8/17/10 1:04 PM, Wesley Acheson wrote: Hi I've been trying to do a three column layout with the following constraints one content column and two sidebar columns with the following constraints. 1. Changing a selector(s) on one of the ancestors of the columns should switch the primary and sidebar positions. 2. Any content that appears underneath appears underneath. I suggest that you study Layout Gala[1] - 40 different layouts from one HTML. View source for the two layouts you prefer, and note the differences. [1] http://blog.html.it/layoutgala/ 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] Floating images - understanding the details
On Wed, Aug 18, 2010 at 8:26 AM, Keith Purtell keithpurt...@keithpurtell.com wrote: Finally, I need the images to indent 140 pixels like the text. Easy? Not trying to assume, but based on your link, it looks like you may be wanting ALL content in the cream colored area to be 140px from the left, thus reserving the brown column for other stuff. In this case, rather than putting margins or padding on each and every element type that might show up in that content area (paragraphs, images, lists, etc. ) I think a more streamlined approach would be to put a wrapper div around all that content and use a margin-left: 140px; to shift that whole div over. Then everything inside that div comes along for the ride. div id=mainContent img src=something.jpg class=floatL / pparagraph of interesting stuff/p pparagraph of interesting stuff/p pparagraph of interesting stuff/p more content of various types /div __ 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] Horizontal navbar problem
On Tue, Aug 17, 2010 at 5:07 PM, Jakub kuba.off...@gmail.com wrote:
Hello all!
This is my first post here, be merciful please...
Anyway, I am trying to create a horizontal navbar, widely known from
http://css.maxdesign.com.au/listamatic/horizontal03.htm; all looks good,
except that when zooming in (Opera, Firefox, Safari, Chrome - those I've
checked) list items are dropping down. It doesn't happen in IE6, IE7
though... Is there any way to prevent this happening?
li are display:inline, and a is floated as well as ul
Here is the link... http://www.jakub.zxq.net/
I would greatly appreciate any help.
Thank you all in advance
Jakub
The issue lies within the width:100%;
This command says that the content will expand as far as the width of its
container, then it will wrap. When a user zooms, since 100% in your case is
the width of the viewport, The size of the viewport doesn't change, and all
the content gets too big to fit in that 100%.
This problem can be easily fixed. Since it's working fine in IE6/7, we can
use the min-width property.
#menu ul {
list-style-type: none;
float: left;
min-width:700px; /* if the viewport gets smaller than 700px then the content
won't wrap and it will create a bottom scrollbar. */
width: 100%;
background-color: #036;
}
You may want to play with the actual number of pixels, this is just a rough
draft. I've posted it at http://gumware.com/cssd/onyourfeet.html
Hope this helps,
Alex Mitchell
In addition, you may want to change
html, body {
margin: 0;
padding: 0;
}
to
html, body, ul, li {
margin: 0;
padding: 0;
}
Because, right now you are getting a bottom scrollbar, caused by the
padding/margin browsers set on an unordered list by default. If you reset
them like this, it will get rid of the bottom scrollbar and you will be able
to more effectively style your lists.
__
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] Horizontal navbar problem
Alex!
Thank you very much for your time and help.
Much appreciated.
Jakub
- Original Message -
From: Alex Mitchell
To: Jakub
Cc: css-d@lists.css-discuss.org
Sent: Wednesday, August 18, 2010 6:27 PM
Subject: Re: [css-d] Horizontal navbar problem
On Tue, Aug 17, 2010 at 5:07 PM, Jakub kuba.off...@gmail.com wrote:
Hello all!
This is my first post here, be merciful please...
Anyway, I am trying to create a horizontal navbar, widely known from
http://css.maxdesign.com.au/listamatic/horizontal03.htm; all looks good,
except that when zooming in (Opera, Firefox, Safari, Chrome - those I've
checked) list items are dropping down. It doesn't happen in IE6, IE7
though... Is there any way to prevent this happening?
li are display:inline, and a is floated as well as ul
Here is the link... http://www.jakub.zxq.net/
I would greatly appreciate any help.
Thank you all in advance
Jakub
The issue lies within the width:100%;
This command says that the content will expand as far as the width of its
container, then it will wrap. When a user zooms, since 100% in your case is the
width of the viewport, The size of the viewport doesn't change, and all the
content gets too big to fit in that 100%.
This problem can be easily fixed. Since it's working fine in IE6/7, we can
use the min-width property.
#menu ul {
list-style-type: none;
float: left;
min-width:700px; /* if the viewport gets smaller than 700px then the content
won't wrap and it will create a bottom scrollbar. */
width: 100%;
background-color: #036;
}
You may want to play with the actual number of pixels, this is just a rough
draft. I've posted it at http://gumware.com/cssd/onyourfeet.html
Hope this helps,
Alex Mitchell
In addition, you may want to change
html, body {
margin: 0;
padding: 0;
}
to
html, body, ul, li {
margin: 0;
padding: 0;
}
Because, right now you are getting a bottom scrollbar, caused by the
padding/margin browsers set on an unordered list by default. If you reset them
like this, it will get rid of the bottom scrollbar and you will be able to more
effectively style your lists.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] font rendering in IE8 and FF
There's always a difference between the font rendering from IE8 to FF, IE always looking larger and bolder. Is there a fix for this? Averill Ring This personally is something that drives me nuts. But after reading through many emails from this list on font render I have decided to bow to the experts and not try to control the look of the type on all browsers but to concentrate on the site not breaking when a viewer changes the type to suit themselves. Which is very hard to do at times. Kris J __ 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] Horizontal navbar problem
On Wed, Aug 18, 2010 at 2:07 AM, Jakub kuba.off...@gmail.com wrote: Hello all! This is my first post here, be merciful please... Anyway, I am trying to create a horizontal navbar, widely known from http://css.maxdesign.com.au/listamatic/horizontal03.htm; all looks good, except that when zooming in (Opera, Firefox, Safari, Chrome - those I've checked) list items are dropping down. It doesn't happen in IE6, IE7 though... Is there any way to prevent this happening? For firefox try setting padding to 0 on the list. the ul element. __ 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] mac os x 10.4 camino/2.0.3
is adding /vertical/ space between the blocks when there is a text-image in the .outer column. Browser bug or human bug? Is there a simple fix [other than to ap the text-image] markup http://chelseacreekstudio.com/ca/cssd/ron1.htm css http://chelseacreekstudio.com/ca/cssd/ron1_files/micro000.css Thanks. Best, ~d -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mac os x 10.4 camino/2.0.3
On Aug 19, 2010, at 7:19 AM, David Laakso wrote: is adding /vertical/ space between the blocks when there is a text-image in the .outer column. Browser bug or human bug? Is there a simple fix [other than to ap the text-image] markup http://chelseacreekstudio.com/ca/cssd/ron1.htm css http://chelseacreekstudio.com/ca/cssd/ron1_files/micro000.css It is a Gecko bug (affects anything that uses Gecko 1.9.0 or older). The image comes first in then source, than the floated element. solutions: don't float the div, but position the image (a.p. or float) – or float both. Philippe --- Philippe Wittenbergh http://l-c-n.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] mac os x 10.4 camino/2.0.3
Philippe Wittenbergh wrote:
On Aug 19, 2010, at 7:19 AM, David Laakso wrote:
is adding /vertical/ space between the blocks when there is a text-image
in the .outer column.
http://chelseacreekstudio.com/ca/cssd/ron1.htm
It is a Gecko bug (affects anything that uses Gecko 1.9.0 or older). The
image comes first in then source, than the floated element.
solutions: don't float the div, but position the image (a.p. or float) – or
float both.
Philippe
Excellent! That's the ticket to ride...
.outer_a img, .outer img { float: left !important; }
Best,
~d
PS Bows and scrapes :-) .
--
:: desktop and mobile ::
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] (no subject)
http://mqquuxbbfiimmqt.ru.gg __ 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] The big picture (formerly floating images understanding the basics)
Wow. I got a mountain of suggestions that I did not expect; all valuable. There were common themes. Many involved the way I lifted example code and expected it to work real time without understanding the specifics. In my own defense, this fascinates me, and I'm probably trying to go too fast to arrive at the result I can see in my mind. Several people also made comments that made me think about which code belongs in the style sheet and which items must be handled at the page level. Here are two responses giving me the most to think about: 1. Tim wrote about putting page elements in containers (hope I paraphrased him correctly). That brings up an issue I will have to deal with quickly. My goal for each image is this: Beneath each one should be a bit of text crediting the source/photographer. In print publications, it's not only standard courtesy, but there are some legal issues concerning copyright and fair use. I can either add the credit by going into Photoshop and re-processing every single image so that it includes said text (NOT going to happen), or I can devise some way via html/css to display the credit beneath the image. 2. Also, the mail I got from Chris. He touched on something crucial. Notice how I named this document a_body_vance_divs.htm? One of my first thoughts when I started this was that I should use divs to speed download. Not so important now that dial-up is mostly dead, but I'd still like to simplify page loading. If I understood him correctly, he was also pointing out that using divs would be the most efficient way to push all body text and images 140 pixels to the right. That leads me to a what I'm planning for that cleared area on the left Remember how I prefaced an early query by saying something like ignore the attempted fly-out navigation links at the top left? My preferred design for this site is that the user will navigate to categories via some type of links in a column occupying the medium-brown area on the left. (I'll wait until a future version to use fly-outs, although I think Amazon.com has implemented them successfully.) One method I've seen (I won't provide a link because it was at a porn site) featured a link the user could click on and up would pop a tall vertical box with main topics in bigger gray text and individual pages within that category in smaller gray text. It was all seamless and the user merely had to mouse up to the target and click. Clever, but a little too graceless for my taste. What I prefer for this first revision of my little hobby site is a vertical row of lighter-brown boxes in the medium-gray area on the left, each with the category only (books, music, etc). Upon arrival in that category, the links at left will change to separate pages. Apologies for this lengthy note. - Keith Purtell __ 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] The big picture (formerly floating images understanding the basics)
Keith Purtell wrote: Wow. I got a mountain of suggestions that I did not expect; all valuable. - Keith Purtell Keep it simple. All will be well [ sort of ]. Best, Simon [1] PS I must remember /not to forget/ to keep it simple myself :-) . [1] http://en.wikipedia.org/wiki/Simon_says -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The big picture (formerly floating images understanding the basics)
On Wed, 2010-08-18 at 21:45 -0500, Keith Purtell wrote: My goal for each image is this: Beneath each one should be a bit of text crediting the source/photographer. In print publications, it's not only standard courtesy, but there are some legal issues concerning copyright and fair use ... or I can devise some way via html/css to display the credit beneath the image. You can place the image and the text into a div then float the div. The image and the text will end up together. HTH Erica __ 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/
