Re: [css-d] Centering images with caption in a column

[David Laakso]

tedd wrote:
> At 4:21 AM -0500 1/4/09, David Laakso wrote:
>   
>> The lower IEs often need both height and width of an image. Easier to
>> include physical dimension in the html than not. Sometimes the
>> dimensions need to be set in both the html and the css to avoid image
>> distortion.
>> 
>
> David:
>
> Ah, the reason is to keep image distortion from happening for IE6 and under.
>   


I think that is just  one reason. A matter of on havingLayout [1]. The 
lower IE's need to know the image exists. It is best to state height and 
width for images to help ensure they will appear at all in IE/6.0.  IE/6 
and down posse further issues, particularly if the file is in quirksmode 
-- among them -- sometimes image distortion for 5.5 an 5.0. The easiest 
out for foreground images in IE/6 is to simply state height and width of 
the image in the html.  Even compliant software will appreciate your 
extra effort and due care.  Whether you support IE/5.5 and IE/5.01 is 
your call. Some folks do not have that privilege.

[1] 



-- 

A thin red line and a salmon-color ampersand forthcoming.

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] Centering images with caption in a column

[Del Wegener]

>>The lower IEs often need both height and width of an image. > David:
>
> Ah, the reason is to keep image distortion from happening for IE6 and 
> under.
>
> Interesting, I've never seen that happen with IE6 and considering
> that IE5 fell below 1% this year, I don't think I'll clutter up my
> html with width and height attributes anytime soon.
> tedd
>
Thanks for that brief exchange.  For certain sites, I have been omitting the 
sizes for some time.  Now I no longer need to worry about some hidden 
problem with that practice.
Del 


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[tedd]

At 4:21 AM -0500 1/4/09, David Laakso wrote:
>The lower IEs often need both height and width of an image. Easier to
>include physical dimension in the html than not. Sometimes the
>dimensions need to be set in both the html and the css to avoid image
>distortion.

David:

Ah, the reason is to keep image distortion from happening for IE6 and under.

Interesting, I've never seen that happen with IE6 and considering 
that IE5 fell below 1% this year, I don't think I'll clutter up my 
html with width and height attributes anytime soon. Besides, it seems 
so anti-css to do that, if you know what I mean.

In any event, thanks for the info.

Cheers,

tedd

-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.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] Centering images with caption in a column

[David Laakso]

tedd wrote:
>
>> http://www.clanjones.org/stnicks/20081214.php
>>
>> 
>
> http://www.webbytedd.com/b4/css-centers/
>
> see: http://www.webbytedd.com/b4/css-centers/a.css
> setting the width and height of the 
> images is not really needed either and can be done (if needed) in css.
>
> However, if setting image size IS needed, then would someone please 
> tell me why

Because IE 6 and down is stupid.

>  and provide n example showing where omitting it would 
> screw something up?
>
> tedd
>
>   

The lower IEs often need both height and width of an image. Easier to 
include physical dimension in the html than not. Sometimes the 
dimensions need to be set in both the html and the css to avoid image 
distortion.



-- 

A thin red line and a salmon-color ampersand forthcoming.

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] Centering images with caption in a column

[tedd]

At 11:32 PM +0100 1/1/09, bruce.som...@web.de wrote:
>david  wrote
>
>Hmmm, something like this?
>
>http://www.clanjones.org/stnicks/20081214.php
>--
>David


A few minor comments for the author of the above page to consider:

First, the css can be simplified, like so:

http://www.webbytedd.com/b4/css-centers/

see: http://www.webbytedd.com/b4/css-centers/a.css

Second, the html and accessibility can also be adjusted.

For example, the alt tag of 
alt="alt="thumbs/pict5792-20081214.jpg.jpg" is not really providing 
anything of value -- and -- setting the width and height of the 
images is not really needed either and can be done (if needed) in css.

However, if setting image size IS needed, then would someone please 
tell me why and provide n example showing where omitting it would 
screw something up?

Cheers,

tedd

-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.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] Centering images with caption in a column

[Gunlaug Sørtun]

bruce.som...@web.de wrote:

> 

Your understanding of proportional image-scaling is correct, and that
part of your final looks ok in all good browsers.

Note that I declared the 'max-width:' quite small (80%) because you have
margins, paddings and border-width in pixels, and these fixed values are
added to the images' width/max-width. So, with a larger 'max-width: 90%'
you'll have to make sure the images with margins, paddings and borders
don't overflow and create problems on narrow windows.

Note also that IE6 (and older) doesn't play along since it doesn't
support max-width and is horrible at image-scaling anyway, so you'll
have to provide alternative solutions for that old bugger if you aim to
support it.

> But pray tell, how on earth (where) could I have learned that without
>  your help?

At the source...



...and all one needs to do is to check what various browsers make out of
the spec-parts we need, like so...




Browsers are definitely getting better.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[bruce . somers]

Gunlaug Sørtun wrote
> 
> I don't understand what you want, which makes it a bit difficult to even
> suggest solutions. So, before going into practical matters, have a look
> at this on varying window-sizes in a reasonably CSS-aware browser...
> 
> 
> 

Georg, your assistance is invaluable. With your help, I have my site at 
http://www.maireadnesbitt.com/CSSversion.html 
displaying as desired. 

It currently has two images side-by-side. The actual images are of equal height 
but different width. As the window is 
made narrower, they are eventually displayed one above the other. I had had a 
problem with them extending outside the 
column in which they are displayed. They now remain within that column through 
your specification, max-width: 80% and 
are of equal width. And the specification max-height: auto appears to cause 
them to be scaled in height to preserve 
the proportions. Does that seem correct?

But pray tell, how on earth (where) could I have learned that without your 
help? 

Thanks a million!  Bruce


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[david]

Bob Rosenberg wrote:
> At 15:09 -1000 on 01/01/2009, david wrote about Re: [css-d] Centering 
> images with caption in a column:
> 
>> As long as visitors (like me) can use their browsers at widths narrower
>> than 1024, we should accommodate them. Also, the web reaches beyond the
>> desktop. Users of iPhones/iTouches and other mobile browsing devices
>> don't have a choice.
> 
> That difference is what the media="handheld" parm is for. To support 
> iPhones/etc. you just have a separate set of CSS definitions that 
> takes the limited screen width into account.

True, but I've gotten to use an iPhone. Its ability to zoom into and out 
of pages quickly and intuitively would leave me very frustrated with a 
page where the "handheld" parameter insisted the page could only be the 
width of a small screen.

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[Philippe Wittenbergh]

On Jan 2, 2009, at 2:02 PM, Bob Rosenberg wrote:

> At 15:09 -1000 on 01/01/2009, david wrote about Re: [css-d] Centering
> images with caption in a column:
>
>> As long as visitors (like me) can use their browsers at widths  
>> narrower
>> than 1024, we should accommodate them. Also, the web reaches beyond  
>> the
>> desktop. Users of iPhones/iTouches and other mobile browsing devices
>> don't have a choice.
>
> That difference is what the media="handheld" parm is for. To support
> iPhones/etc. you just have a separate set of CSS definitions that
> takes the limited screen width into account.

The iPhone doesn't support media=handheld.

Using mediaqueries inside a stylesheet is more interesting (and it is  
powerful !)
<http://www.w3.org/TR/css3-mediaqueries/>

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] Centering images with caption in a column

[Bob Rosenberg]

At 15:09 -1000 on 01/01/2009, david wrote about Re: [css-d] Centering 
images with caption in a column:

>As long as visitors (like me) can use their browsers at widths narrower
>than 1024, we should accommodate them. Also, the web reaches beyond the
>desktop. Users of iPhones/iTouches and other mobile browsing devices
>don't have a choice.

That difference is what the media="handheld" parm is for. To support 
iPhones/etc. you just have a separate set of CSS definitions that 
takes the limited screen width into account.
-- 

Bob Rosenberg
RockMUG Webmaster
webmas...@rockmug.org
www.RockMUG.org
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[david]

bruce.som...@web.de wrote:
> Scott Demontluzin"  wrote
> 
> change
> #wrapper { width: 55%; }  to
>  #wrapper { width: 520px;}
> 
> Scott
> 
> Thank you Scott. That takes me down to a width of 1024px at any rate. I don't 
> yet understand why it works, but I hope to.
> I wonder how much longer we will have to worry about widths less than 1024.

As long as visitors (like me) can use their browsers at widths narrower 
than 1024, we should accommodate them. Also, the web reaches beyond the 
desktop. Users of iPhones/iTouches and other mobile browsing devices 
don't have a choice.

> I still wonder whenever I see  width: 55%; , 55% of what?  I'm working on it.

55% of the block containing that element. If it were a paragraph inside 
the body inside the browser window, it would default to 55% of the width 
of the browser window.

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[david]

bruce.som...@web.de wrote:
> david wrote
> 
> Hmmm, something like this?
> 
> http://www.clanjones.org/stnicks/20081214.php
> 
> Thanks David. Looks very promising, of course. It will require some study on 
> my part. I feel that I'm about to learn something -- that's always good.

It works in FF and IE. Only problem is the fixed height of the divs that 
hold the pictures ... others on the list will have better ideas, I'm sure.

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[bruce . somers]

Georg wrote

I don't understand what you want, which makes it a bit difficult to even
suggest solutions. So, before going into practical matters, have a look
at this on varying window-sizes in a reasonably CSS-aware browser...



regards
Georg
-- 
 
 
Oh Georg! If you didn't understand what I was after, you certainly guessed 
well. 
That is just what I wanted and it even resizes the images when it becomes 
necessary. Amazing.

Added to that -- it seems to work well with FF3 AND IE7.

You folks will now get a rest --I'll be busy for some time digesting all that.

Bruce


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[bruce . somers]

Scott Demontluzin"  wrote

change
#wrapper { width: 55%; }  to
 #wrapper { width: 520px;}

Scott


Thank you Scott. That takes me down to a width of 1024px at any rate. I don't 
yet understand why it works, but I hope to.
I wonder how much longer we will have to worry about widths less than 1024.

I still wonder whenever I see  width: 55%; , 55% of what?  I'm working on it.

Bruce

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[bruce . somers]

david  wrote

Hmmm, something like this?

http://www.clanjones.org/stnicks/20081214.php
-- 
David


Thanks David. Looks very promising, of course. It will require some study on my 
part. I feel that I'm about to learn something -- that's always good.

Bruce.


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[Gunlaug Sørtun]

bruce.som...@web.de wrote:
> I don't yet see a solution.

I don't understand what you want, which makes it a bit difficult to even
suggest solutions. So, before going into practical matters, have a look
at this on varying window-sizes in a reasonably CSS-aware browser...



regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[david]

bruce.som...@web.de wrote:
> Scott Demontluzin wrote
> 
>> Hi Bruce, I did a test page that I think will work for you 
>> http://scottdemontluzin.com/test/centered_images.html I placed the
>> images in an unordered list and floated the list to the left. Best,
>> Scott 
>> __
>> 
> 
> Thank you for that Scott. I would not have thought of a list.
> 
> I am playing with three versions of my page: 
> http://www.maireadnesbitt.com/ 
> http://www.maireadnesbitt.com/CSSexp.html 
> http://www.maireadnesbitt.com/CSSul.html
> 
> The first is a version with tables that does what I want. The photos
> are displayed side by side until the page/table is made too narrow.
> They are then displayed one beneath the other. The disadvantage is
> that I need four versions of the file for different window widths,
> versions that are selected with a javascript.
> 
> The two CSS versions have the advantage that I need only one file;
> the columns at the left and right are of fixed width and the middle
> column adjusts to the remaining available width. With
> http://www.maireadnesbitt.com/CSSul.html , the wrapper (gray
> background) remains centered as the window is made smaller, but the
> photos remain side by side, extending beyond the wrapper and they
> 'slide' under the menu at the right as the window is made narrower.
> 
> I don't yet see a solution.

Hmmm, something like this?

http://www.clanjones.org/stnicks/20081214.php

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[bruce . somers]

Scott Demontluzin wrote

> Hi Bruce, I did a test page that I think will work for you
> http://scottdemontluzin.com/test/centered_images.html
> I placed the images in an unordered list and floated the list to the left.
> Best, Scott
> __

Thank you for that Scott. I would not have thought of a list.

I am playing with three versions of my page: 
http://www.maireadnesbitt.com/
http://www.maireadnesbitt.com/CSSexp.html
http://www.maireadnesbitt.com/CSSul.html

The first is a version with tables that does what I want. The photos are 
displayed side by side until the page/table is made too narrow. They are then 
displayed one beneath the other. The disadvantage is that I need four versions 
of the file for different window widths, versions that are selected with a 
javascript.

The two CSS versions have the advantage that I need only one file; the columns 
at the left and right are of fixed width and the middle column adjusts to the 
remaining available width. With http://www.maireadnesbitt.com/CSSul.html , the 
wrapper (gray background) remains centered as the window is made smaller, but 
the photos remain side by side, extending beyond the wrapper and they 'slide' 
under the menu at the right as the window is made narrower. 

I don't yet see a solution.

Bruce

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[bruce . somers]

Mustafa Quilon" 
Re: [css-d] Centering images with caption in a column

> #figure {
> text-align: center; /*This should do what you want*/
> }
>
> - Mustafa
> __

Thank you, but I hadn't made it clear. It's the 'block' of two images that I 
wanted to center.

The text is to be aligned left beneath that block.

Bruce 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[Mustafa Quilon]

#figure {
text-align: center; /*This should do what you want*/
}


- Mustafa
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images with caption in a column

[JR Heard]

On Thu, Dec 25, 2008 at 4:20 PM,  wrote:
>
> The page at http://www.maireadnesbitt.com/CSSexp.html has fixed-width columns 
> at the left and right (not of the same width) and a column of variable width, 
> depending on the screen size, in the middle - shown temporarily with a blue 
> border. In that middle column, I have a pair of images with caption, that I 
> would like to have centered. I cannot achieve that, try what I will. Making 
> it worse, however, is no problem!

If what you want to do is center the two images together in the
double-bordered block, and if you know the combined width of the
images and are sure it won't change dramatically, you could wrap them
in a div with

{
  width: 550px; /* or whatever is appropriate - ~550 does the job in ff3 */
  margin: 0 auto;
}

If that's what you want, you should probably give the  tags

text-align: center

as well.

Best,
-JR
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] centering images

[David Hucklesby]

On Wed, 4 Jul 2007 11:19:37 -0700 (PDT), Robert Morgan wrote:
> First post!!!
> I'm wanting to center my images yet be able have the text set to the right OR 
> left of
> the images.  One look at the page and you'll see what I'm going for...
> http://www.9worldstudios.com/portfolio/galleryBlockPrints.htm I'm reasonably 
> certain
> that this is the wrong approach, but it approximates the intended look. ...

Hi Robert,
Zoe wrote a tutorial[1] at Community MX on styling images and text like that.
Her example puts all images on the left, but by alternating the float
directions and the corresponding margins, you should be able to adapt
the design to your needs.

[1] 

Cordially,
David
--

__
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 images

[Robert Morgan]

And I see that it's jumbled in IE---Hopefully you can check it in Firefox to 
see what I'm going for...Thanks
Robert

   
-
Need a vacation? Get great deals to amazing places on Yahoo! Travel. 
__
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 images

[Diane Ross]

On 1/13/07 4:52 PM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote:

> Since your page...
> 
> ...is already broken in IE6, I suggest you add the extra css to the
> bottom of your stylesheet - and both the clearing hr problem and IE6'
> bugs will be gone. You can always remove those few lines later -
> especially if you comment them clearly so you know why you put them
> there and what they are supposed to achieve.

I'll add these. My audience is for Mac users. I'm a one pony show. I have a
FAQ page for a Mac application, Microsoft Entourage. I do realize that many
users search the site at work on their pcs so I do want the site to work in
all browsers.

>As an example - I keep these classes in my stylesheets...

Thanks! I'll add these.

-- 
Diane 


__
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 images

[Diane Ross]

On 1/13/07 3:27 PM, "david" <[EMAIL PROTECTED]> wrote:

>> I'm not quite sure if I should remove clear from the hr and add a clear
>> class if needed or add the corrected css you suggested above. Or do I really
>> need hr in my style sheet?
> 
> I don't think you need HR in your HTML unless you want to have a
> horizontal rule there when visitors have CSS turned off. You can use CSS
> to add a bottom border to the element above the rule instead.

I've eliminated the hr for now. You guys are great!!

-- 
Diane  


__
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 images

[Gunlaug Sørtun]

Diane Ross wrote:
>>> #main {overflow: hidden; margin: 0; }
>>> * html #main {overflow: visible; height: 1%; }
>>> * html #sidebar {overflow-x: hidden;}

> I'm not quite sure if I should remove clear from the hr and add a 
> clear class if needed or add the corrected css you suggested above. 
> Or do I really need hr in my style sheet?

I can't say what you need, since that's purely a design-choice. I most
often add a top or bottom border to a suitable element, or maybe a
padding with a background-image, as visual separator.
I always check that my designs/layouts makes sense when CSS is turned
off or not supported, and that affects my own design-decisions.

Since your page...

...is already broken in IE6, I suggest you add the extra css to the
bottom of your stylesheet - and both the clearing hr problem and IE6'
bugs will be gone. You can always remove those few lines later -
especially if you comment them clearly so you know why you put them
there and what they are supposed to achieve.

 From there you can keep on learning about things like...
- 'Block formatting contexts'

- 'hasLayout'

- 'Collapsing margins'

...and other factors that will regularly affect your layouts.

> Where I get myself into trouble is I use examples from another site 
> (I try to 'borrow" from the best) and I don't know enough to 
> understand all the attributes they have added to the style.

"Borrowed" code can be troublesome that way. It is often page/site
specific, and can contain properties that doesn't do any good in your cases.
Also: each designer has his/her own preferences, and may use, misuse and
abuse properties in a multitude of ways. May work fine for them and it
may even be perfectly in accordance with the W3C-specs, but it sure can
lead less experienced designers out on pretty thin ice at times.

There are also loads of articles and sites around with poorly tested,
incomplete, and also many completely wrong, solutions around.
Some articles and code-examples are just old - and may be excused as
long as one can sort them out.
Some designers may ignore both specs and many major browsers, and give
you something that only works in _their_ preferred browsers.
Add lack of, or weak, standards-support in all browsers - even the
latest versions, and a number of browser-specific bugs, and "borrowing"
can really create problems.


You'll really only learn in any depth when you create a number of your
own, smaller, test-cases/pages and run the "borrowed" code/examples
through its phases in all major browsers and learn how both code and
browsers work - instead of just plugging "borrowed" code into larger
layouts and hope you're lucky.


It is also important to check how each property _should_ be used, and
what it is _supposed_ to do (and if the one you "borrowed" from got it
right), by checking what the specs say about that property.

The 'CSS 2.1 Specification' covers the most essential parts...

...and you should take time to study the entire set of documents.
There's a lot to study, but you don't have to go through it all at once.
(I personally find it easier to read the specs, than I find most of the
articles that try to simplify the stuff.)

Here's a good place to start...



> Is this OK?
> 
> .clear-both { clear: both; }

Sure - that is a normal clearing class.

As an example - I keep these classes in my stylesheets...
/* high specificity clearings */
.left {clear:left!important; }
.right {clear:right!important; }
.both {clear:both!important; }
.none {clear:none!important; }
...and add the suitable one when I need to add 'clear' to an element -
in cases where it isn't more naturally to add the 'clear' property to an
existing id or class for an element.
Needless to say that I don't need the exemplified classes all that
often, but once or twice in a page is quite normal.


regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images

[david]

Diane Ross wrote:
> On 1/12/07 7:04 PM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote:
> I really appreciate your examples. It helps me tremendously.
>>> I'm having a big problem using  in the #main content area.
>>> After an  the text gets thrown way down the screen.
>>> 
>> It's pushed down because you have declared 'clear: both' on the hr.
>> That's how 'clear' works in that kind of layout. It will clear
>> *everything* in sight - including the side-columns.
>>
>> You should have a class for 'clear' so you can add it to the hr, or any
>> other element, when you need it - not add 'clear' permanently to the hr.
>>
>> Now, for that particular page/layout you can keep that hr-styling, and
>> solve it by adding...
>>
>> #main {overflow: hidden; margin: 0; }
>> * html #main {overflow: visible; height: 1%; }
>> * html #sidebar {overflow-x: hidden;}
>>
>> ...which will isolate all 'clear' inside #main (and correct the most
>> troublesome bugs in IE6). Works in all browsers I can lay my eyes on,
>> from IE6 and up.
> 
> I'm not quite sure if I should remove clear from the hr and add a clear
> class if needed or add the corrected css you suggested above. Or do I really
> need hr in my style sheet?

I don't think you need HR in your HTML unless you want to have a 
horizontal rule there when visitors have CSS turned off. You can use CSS 
to add a bottom border to the element above the rule instead.

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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 images

[Diane Ross]

On 1/12/07 7:04 PM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote:
> 
> Should be...
> 
> .img_center {display: block; margin: 0 auto;}

It's working now. Thank YOU!!
> 

> I didn't find a class .img_center in your on-line stylesheet, so I can't
> say why it didn't work. I added one with the styles from my example
> above, and it worked perfectly.

I really appreciate your examples. It helps me tremendously.
> 
>> I'm having a big problem using  in the #main content area.
>> After an  the text gets thrown way down the screen.
> 
>> 
> 
> It's pushed down because you have declared 'clear: both' on the hr.
> That's how 'clear' works in that kind of layout. It will clear
> *everything* in sight - including the side-columns.
> 
> You should have a class for 'clear' so you can add it to the hr, or any
> other element, when you need it - not add 'clear' permanently to the hr.
> 
> Now, for that particular page/layout you can keep that hr-styling, and
> solve it by adding...
> 
> #main {overflow: hidden; margin: 0; }
> * html #main {overflow: visible; height: 1%; }
> * html #sidebar {overflow-x: hidden;}
> 
> ...which will isolate all 'clear' inside #main (and correct the most
> troublesome bugs in IE6). Works in all browsers I can lay my eyes on,
> from IE6 and up.

I'm not quite sure if I should remove clear from the hr and add a clear
class if needed or add the corrected css you suggested above. Or do I really
need hr in my style sheet?

Where I get myself into trouble is I use examples from another site (I try
to 'borrow" from the best) and I don't know enough to understand all the
attributes they have added to the style.

Is this OK?

.clear-both {
clear: both;
}

-- 
Diane 


__
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 images

[Diane Ross]

On 1/13/07 1:19 PM, "Mark Lundquist" <[EMAIL PROTECTED]> wrote:

> 
> On Jan 13, 2007, at 1:17 PM, david wrote:
> 
>> Then the W3C's choice of "TEXT-align" is a bad choice. It specifies
>> "text" when it's really talking about something broader than what
>> people
>> think of as text.
> 
> I agree :-)
> ‹ml‹

>From a newbie standpoint, I agree about the wording. I questioned this and
was unsure, but in GoLive the option to select txt-center style gave an img
as one of the options when an image was selected. When it didn't work, I
entered a fugue state of more newbie confusion.  :-)

-- 
Diane 


__
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 images

[Mark Lundquist]

On Jan 13, 2007, at 1:17 PM, david wrote:

> Then the W3C's choice of "TEXT-align" is a bad choice. It specifies
> "text" when it's really talking about something broader than what 
> people
> think of as text.

I agree :-)
—ml—

__
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 images

[david]

Mark Lundquist wrote:

> On Jan 13, 2007, at 12:50 PM, david wrote:
> 
> My understanding is, no, text-align is only supposed to align text.
> 
> That's incorrect; see http://www.w3.org/TR/CSS21/text.html#alignment-prop:
> 
> "This property describes how inline content of a block is aligned [etc...]
> 
> All of this section is worded in terms of "inline content" or "inline 
> boxes", not text /per se/.

Then the W3C's choice of "TEXT-align" is a bad choice. It specifies 
"text" when it's really talking about something broader than what people 
think of as text.

Something like horizontal-align would make more sense to me, or align-x 
to parallel the repeat-x, repeat-y values for background images.

> The fact that IE6 also aligns images when you use it is wrong.
> 
> Who said anything about IE? :-)

Nobody did, but the original poster didn't specify any browser at all. 
I've quite often seen people do that when they use IE because they think 
everyone uses IE.

> All browsers do it, and it's not wrong!
> 
> Now, what IE does do wrong is that it also centers block content within 
> a container that has 'text-align: center'. This may be what you are 
> thinking of.

Yah, that's what I was thinking of.

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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 images

[Mark Lundquist]

On Jan 13, 2007, at 12:50 PM, david wrote:

> My understanding is, no, text-align is only supposed to align text.

That's incorrect; see 
http://www.w3.org/TR/CSS21/text.html#alignment-prop:

"This property describes how inline content of a block is aligned 
[etc...]

All of this section is worded in terms of "inline content" or "inline 
boxes", not text per se.

>  The fact that IE6 also aligns images when you use it is wrong.

Who said anything about IE? :-)  All browsers do it, and it's not wrong!

Now, what IE does do wrong is that it also centers block content within 
a container that has 'text-align: center'.  This may be what you are 
thinking of.

Cheers,
—ml—

__
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 images

[david]

Mark Lundquist wrote:

> On Jan 12, 2007, at 3:12 PM, david wrote:
> 
>> Diane Ross wrote:
>>> I don't know what I'm doing wrong. When I want to center an image I 
>>> can only
>>> get it to work if I select . If I use a class
>>>
>>> .txtcenter, .center { text-align: center; }
>>>
>>> Or #test img { text-align: center; } the image does not center.
>>
>> Because an image is not text.
> 
> Hmm, not quite... text-align affects images in exactly the same way as 
> it affects text or any other inline element.

My understanding is, no, text-align is only supposed to align text. The 
fact that IE6 also aligns images when you use it is wrong. But what 
would I know?

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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 images

[Gunlaug Sørtun]

Diane Ross wrote:
> OK, now I have another question...

> The majority of the images on the site will be centered while a few 
> will be wrapped in a paragraph.

> I tried a class, but this did not work. 
> 
> 
> .img_center {margin: 0 auto; }

Should be...

.img_center {display: block; margin: 0 auto;}

...as in my previous example, since only block-elements can be centered
this way.

Images default to 'inline'. So, you can either center images as inline
elements by declaring 'text-align: center;' on their container, or turn
them into block-elements and center them - individually - with auto-margins.

I didn't find a class .img_center in your on-line stylesheet, so I can't
say why it didn't work. I added one with the styles from my example
above, and it worked perfectly.

> I'm having a big problem using  in the #main content area. 
> After an  the text gets thrown way down the screen.

> 

It's pushed down because you have declared 'clear: both' on the hr.
That's how 'clear' works in that kind of layout. It will clear
*everything* in sight - including the side-columns.

You should have a class for 'clear' so you can add it to the hr, or any
other element, when you need it - not add 'clear' permanently to the hr.

Now, for that particular page/layout you can keep that hr-styling, and
solve it by adding...

#main {overflow: hidden; margin: 0; }
* html #main {overflow: visible; height: 1%; }
* html #sidebar {overflow-x: hidden;}

...which will isolate all 'clear' inside #main (and correct the most
troublesome bugs in IE6). Works in all browsers I can lay my eyes on,
from IE6 and up.


regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images

[Diane Ross]

On 1/12/07 3:23 PM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote:

> Note that text-align: center should not be targeting the image.
> Instead: target the container - the div, p or other block-element - and
> text and images /inside/ the container will be centered.
> 
> You can also center images directly with auto-margins.
> 
> I've added a couple of examples to your test page here...
> http://www.gunlaug.no/tos/alien/test_07_1560.html
> ...so you can see how it works.

OK, now I have another question...

If I don't want all my images to be centered, should I use a class for
centering or a style like your example

 #test2 img {
display: block; margin: 0 auto;
}

The majority of the images on the site will be centered while a few will be
wrapped in a paragraph.

I tried a class, but this did not work.


.img_center {margin: 0 auto;
}


I hate to put a different topic in a thread, but in your example you used:

div {border-bottom: solid 1px #777;}

I'm having a big problem using  in the #main content area. After an
 the text gets thrown way down the screen. At first I thought it was
erasing the text which made no sense until I scrolled down to see it. I
really don't want to have to make divs every where I want to use a
separation line. 

On this page, the  under the A, pushes text down where it does not
under B and C.





A



AOL


My css:
hr {
clear: both;
color: #ccc;
height: 1px;
}
> 
>> Why are these simple things so hard for a newbie? 
> 
> Probably so we who are slightly more experienced, can brag about it ;-)

It's humbling, I must say.

-- 
Diane 


__
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 images

[Gunlaug Sørtun]

Diane Ross wrote:
> When I want to center an image I can only get it to work if I select 
> 

> 

Note that text-align: center should not be targeting the image.
Instead: target the container - the div, p or other block-element - and
text and images /inside/ the container will be centered.

You can also center images directly with auto-margins.

I've added a couple of examples to your test page here...
http://www.gunlaug.no/tos/alien/test_07_1560.html
...so you can see how it works.

> Why are these simple things so hard for a newbie? 

Probably so we who are slightly more experienced, can brag about it ;-)

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering images

[david]

Diane Ross wrote:
> I don't know what I'm doing wrong. When I want to center an image I can only
> get it to work if I select . If I use a class
> 
> .txtcenter, .center { text-align: center; }
> 
> Or #test img { text-align: center; } the image does not center.

Because an image is not text. To center an image, you need to set the 
left and right margins to "auto" - #test img {margin: 0 auto 0 auto;}

> Here is my example:
> 
> 
> 
> Why are these simple things so hard for a newbie? 

I don't know, I'm still trying to figure this stuff out, too. I do 
sometimes wonder why CSS doesn't have a simple "align:center" setting!

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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 images

[Linda Quinn]

Thanks for the followup discussion on min/max width in IE. Daniel's  
suggestion of adding a width declaration above the min/max width  
declarations does make the page look better in IE. Thanks!
__
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 images

[Gunlaug Sørtun]

Daniel wrote:
> without a specific width it'll default to 100% or whatever the 
> windows width is (someone could correct me if I'm wrong)

> so something like
> #pagewrapper {
> width:780px;
> min-width:780px;
> max-width:950px;
> margin: 0 auto inherent; /*not sure about the inherent*/
> padding: 5px 0 0 5px;
> border: 2px solid #cd9923;
> }

Won't work as intended in any browser, as they will all lock
#pagewrapper to a fixed 'width' of 780px and the 'min/max-width'
properties will have no effect since 'width' is within their range.

On the other point...
margin: 0 auto;
...is more likely to work.

A working min/max-width solution for IE6 is described here...

...under "pixel-based min/max-width expression".

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] centering images

[Daniel]

without a specific width it'll default to 100% or whatever the windows 
width is (someone could correct me if I'm wrong)

so something like
#pagewrapper {
width:780px;
min-width:780px;
max-width:950px;
margin: 0 auto inherent; /*not sure about the inherent*/
padding: 5px 0 0 5px;
border: 2px solid #cd9923;
}

david wrote:
> Daniel wrote:
>   
>> No it doesn't.
>>
>> david wrote:
>> 
>>> Does IE<7 understand max- or min-width?
>>>   
>
> Then for IE<7, it would think the original poster's container (with only 
> max-width and min-width specified) has no width specified and default to 
> "auto", yes?
>
>   
__
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 images

[david]

Daniel wrote:
> No it doesn't.
> 
> david wrote:
>> Does IE<7 understand max- or min-width?

Then for IE<7, it would think the original poster's container (with only 
max-width and min-width specified) has no width specified and default to 
"auto", yes?

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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 images

[Daniel]

No it doesn't.

david wrote:
>
> Does IE<7 understand max- or min-width?
>
>   
__
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 images

[david]

Linda Quinn wrote:
> I must be missing something in centering images. The following CSS is  
> set up to contain the contents of a page, and center the contents  
> regardless of the size the browser window is set.
> 
> #pagewrapper {
>   min-width:780px;
>   max-width:950px;
>   margin-left:auto;
>   margin-right:auto;
>   margin-top:0;
>   text-align:left;
>   padding:5px 0 0 5px;
>   border:2px solid #cd9923;
>   }

Does IE<7 understand max- or min-width?

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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/