[css-d] email: 3 column alignment

[Ron Zisman]

ricochet.org/revised.html 

hi,

i was tinkering around with something making client changes, and i broke it.

in the middle of the page is a table with 3 columns in it (price chart)

they used to align, and i’d like em to again, but can’t find the problem.

the percentage value for the column widths can change, but when i tried the 
widths didn’t seem to change.

thanks in advance,

ron

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

Re: [css-d] help with media queries for email...mercy, mercy

[Ron Zisman]

you’ve all been helpful. it’s been years since i’ve done any coding..so my html 
probably sucks… but it seems to work.

i don’t know why i opted to lay the type over the hero image instead of doing 
it all in mages…thought it might be “the right way”

i’ve found a tutorial on MQs at lynda.com <http://lynda.com/>…hopefully that 
will help.

and i thought tables would be easy..

rgds,
ron

> On Feb 21, 2017, at 9:45 AM, Rod Castello <rodcastel...@gmail.com> wrote:
> 
> Hi Ron,
> I see a lot of issues with your media queries. They need to be target to
> the classes you've tagged onto your 's. Such as "top" and "header".
> You should just try to get one thing working at a time, such as the hero
> area, which will need to turned into an image. Email clients don't
> consistently support background images, especially with live text over
> them.
> Take  the headline" ANTEC 2017, subhead and date and merge with the
> background image and create a "hero image".
> Then just try and set that up in a table using an absolute url for the
> image. Give the image width as 100%.  If needed you can create multiple
> hero images if the text looks too small when reduced to "320px" on small
> screens. Then you show an hide those when appropriate with your MQ's.
> For the copy, try using "em" sizes instead of "px" sizing and they will
> resize automatically when the screen size is reduced. You can use "px" but
> will probably need to use different sizing at your various break points.
> 
> I would offer more help with examples of code, but need to get to work.
> 
> Rod Castello
> 
> 
> On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman <ronzis...@mac.com> wrote:
> 
>> karl,
>> 
>> http://ricochet.org/plastics_feb20.html
>> 
>> i’ve been trying to work with media queries. i think understand the basic
>> concepts, i’ve done some tutorials, rebuilt the html and am still banging
>> my head.
>> 
>> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
>> container. when i apply the query, it goes liquid and won’t hold the 600
>> measure.
>> 
>> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
>> litmus .no <http://litmus.no/> luck. i was hoping to get an extremely
>> simple example.
>> 
>> 
>> most of the examples i’ve seen have a ton of resets and queries—its a
>> blur. its not from not trying. —thanks again,
>> 
>> ron
>>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers <k...@designdrumm.com>
>> wrote:
>>> 
>>> Ron,
>>> Quick and simple.
>>> 
>>> Google: CSS Media Queries example
>>> 
>>> Download, dissect and learn.
>>> 
>>> GL!
>>> 
>>> Best,
>>> 
>>> Karl DeSaulniers
>>> Design Drumm
>>> http://designdrumm.com
>>> 
>>> 
>>> 
>>> 
>>>> On Feb 18, 2017, at 7:14 PM, Ron Zisman <ronzis...@mac.com> wrote:
>>>> 
>>>> hi all,
>>>> 
>>>> http://ricochet.org/plastics_engineering.html
>>>> 
>>>> i’m new to email, but most of the table coding went ok, but as i’m
>> trying to make it responsive,
>>>> i need media queries. i understand the concept, but am having trouble
>> with reality.
>>>> 
>>>> a little direction would be appreciated.
>>>> 
>>>> thank you in advance,
>>>> —ron
>>>> __
>>>> css-discuss [css-d@lists.css-discuss.org]
>>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>>> List policies -- http://css-discuss.org/policies.html
>>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>> 
>>> __
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> 
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Suppo

Re: [css-d] help with media queries for email...mercy, mercy

[Ron Zisman]

karl,

http://ricochet.org/plastics_feb20.html

i’ve been trying to work with media queries. i think understand the basic 
concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
head.

i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
container. when i apply the query, it goes liquid and won’t hold the 600 
measure.

sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
.no <http://litmus.no/> luck. i was hoping to get an extremely simple example.


most of the examples i’ve seen have a ton of resets and queries—its a blur. its 
not from not trying. —thanks again,

ron
> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers <k...@designdrumm.com> wrote:
> 
> Ron,
> Quick and simple.
> 
> Google: CSS Media Queries example
> 
> Download, dissect and learn.
> 
> GL!
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> 
>> On Feb 18, 2017, at 7:14 PM, Ron Zisman <ronzis...@mac.com> wrote:
>> 
>> hi all,
>> 
>> http://ricochet.org/plastics_engineering.html
>> 
>> i’m new to email, but most of the table coding went ok, but as i’m trying to 
>> make it responsive,
>> i need media queries. i understand the concept, but am having trouble with 
>> reality.
>> 
>> a little direction would be appreciated.
>> 
>> thank you in advance,
>> —ron
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

[css-d] help with media queries for email

[Ron Zisman]

hi all,

http://ricochet.org/plastics_engineering.html

i’m new to email, but most of the table coding went ok, but as i’m trying to 
make it responsive,
i need media queries. i understand the concept, but am having trouble with 
reality.

a little direction would be appreciated.

thank you in advance,
—ron
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Checking up on buggy behavior in latest Google Chrome versions.

[Ron Zisman]

in chrome Version 31.0.1650.48 on mac OS X 10.8.5 (12F45)

it appears to work. text shadow on hover.

ron
On Nov 15, 2013, at 8:38 AM, Georg ge...@gunlaug.com wrote:

 Hi all,
 
 In this page...
 
 http://www.gunlaug.com/contents/design/q-a-construct.html
 
 ...there are 4 separate elements with show/hide function based on INPUT 
 status. For orientation: all 4 are on gray image-background, and with 
 text-shadow that changes on hover.
 
 As support and bug check note at bottom of side-column says, this works as 
 intended in most browsers.
 
 However, latest Chrome and Opera Dev versions only make the list in main 
 column under demo work, the others don't react much.
 So I am trying to figure out if I'm dealing with a real bugs in chrome, or if 
 it just a local problem with those browser versions - not the first time 
 browsers do strange things on my laptop.
 
 Will someone please check in latest Google Chrome and let me know if I'm 
 dealing with real bugs or not.
 
 regards
Georg
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

[css-d] responsive video

[Ron Zisman]

http://decal-bone.com/lab_stories.html

i'm trying to embed a video from youtube and make it responsive. i'd like to 
make 100% of the center column; but i'm getting a miniature version.

css is in the head of the document.

any help would be appreciated

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

Re: [css-d] responsive video

[Ron Zisman]

guys, thanks, but i'm pretty thick
i've tried a few times with no success.

here's the page: http://decal-bone.com/lab_stories.html

the video lives in the center column under the text

html for the vid:

div class=video-container
iframe width=640 height=480 
src=//www.youtube.com/embed/wbIe9tXo5wM frameborder=0 
allowfullscreen=/iframe
/div

css in the style sheet:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


don't see where i'm messing up. insight appreciated

ron



On Sep 18, 2013, at 3:10 PM, Chris Rockwell ch...@chrisrockwell.com wrote:

 Fitvids is a good solution if you're not worried about whether JavaScript is 
 available and/or you are trying to retrofit an old site with lots of videos 
 and don't want to mess with the markup.  It just automates Thierry's solution 
 (i.e., it wraps your tags and applies necessary styles)
 
 
 On Wed, Sep 18, 2013 at 2:53 PM, Nate Turnage pixeln...@gmail.com wrote:
 I know this list is CSS-centered, but you could always use: 
 http://fitvidsjs.com/
 
 
 On Wed, Sep 18, 2013 at 12:43 PM, Tom Livingston tom...@gmail.com wrote:
 I'm not seeing the css in the head as having any effect on the video
 or it's wrapper for some reason. FireBug in FF 23.0.1.
 
 On Wed, Sep 18, 2013 at 1:41 PM, Chris Rockwell ch...@chrisrockwell.com 
 wrote:
  I use the last solution here:
  http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php 
  which
  is taken from Thierry Koblentz' solution here:
  http://alistapart.com/article/creating-intrinsic-ratios-for-video
 
 
  On Wed, Sep 18, 2013 at 1:37 PM, Ron Zisman ronzis...@me.com wrote:
 
  http://decal-bone.com/lab_stories.html
 
  i'm trying to embed a video from youtube and make it responsive. i'd like
  to make 100% of the center column; but i'm getting a miniature version.
 
  css is in the head of the document.
 
  any help would be appreciated
 
  --ron
  __
  css-discuss [css-d@lists.css-discuss.org]
  http://www.css-discuss.org/mailman/listinfo/css-d
  List wiki/FAQ -- http://css-discuss.incutio.com/
  List policies -- http://css-discuss.org/policies.html
  Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
 
 
 
 
  --
  Chris Rockwell
  __
  css-discuss [css-d@lists.css-discuss.org]
  http://www.css-discuss.org/mailman/listinfo/css-d
  List wiki/FAQ -- http://css-discuss.incutio.com/
  List policies -- http://css-discuss.org/policies.html
  Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
 
 
 
 --
 
 Tom Livingston | Senior Front-End Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
 
 
 
 
 -- 
 Chris Rockwell

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

Re: [css-d] responsive video

[Ron Zisman]

i think i got it….

that comma was the offender… would have never caught that.

thanks to all

ron

On Sep 18, 2013, at 7:54 PM, Tim Arnold tim.arn...@gmail.com wrote:

 On Wed, Sep 18, 2013 at 4:40 PM, Ron Zisman ronzis...@me.com wrote:
 guys, thanks, but i'm pretty thick
 i've tried a few times with no success.
 
 here's the page: http://decal-bone.com/lab_stories.html
 
 the video lives in the center column under the text
 
 html for the vid:
 
 div class=video-container
iframe width=640 height=480 
 src=//www.youtube.com/embed/wbIe9tXo5wM frameborder=0 
 allowfullscreen=/iframe
/div
 
 css in the style sheet:
 
 .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
 }
 
 .video-container iframe,
 .video-container object,
 .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
 }
 
 
 don't see where i'm messing up. insight appreciated
 
 ron
 
 
 
 
 Get rid of that comma at the end of this rule.  I would have thought
 it would still work, but it's definitely not being applied and when I
 add the same rule without the comma, things happen.
 
 div#content div div .video-container iframe, {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
 }
 
 
 
 -- 
 
 tim.arn...@gmail.com
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

[css-d] background displays locally, but not remotely

[Ron Zisman]

http://ricochet.org/evolutionery.com/index.html

stupidly simple, a background image with 2 links… only the links show (not bg 
imgs)
styles in the head of doc.

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

Re: [css-d] Browser compatability

[Ron Zisman]

thanks guys,
the image in the folder used a cap 'i' opposed to 'i'.
On Jun 12, 2013, at 1:14 PM, Alex M a...@alexm.co wrote:

 We'd probably have to look at the code to fully examine it, but if its got 
 sensitive data, for the mean time have you run it through a CSS-validator to 
 make sure it's error-free? ( http://jigsaw.w3.org/css-validator/ )
 
 Alex M
 Sent from my iPad
 
 On 12 Jun 2013, at 18:04, csimpson csimpson@gmail.com wrote:
 
 Hi Guys,
 
 I have an issue figuring out why the menu is moving when i test it in chrome!
 
 As displayed here in firefox its set fine 
 http://www.flickr.com/photos/92511398@N03/9024884789/
 
 but however when tested in chrome it jumps up 
 http://www.flickr.com/photos/92511398@N03/9024885229/
 
 i have searched around to try and figure it out myself but nothing i read 
 corresponds exactly to the issue, I'm a junior web developer who's teaching 
 himself so forgive me if its a simple fix to guys..
 
 
 Thanks in advance for any assistance
 Carl
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

Re: [css-d] scaling images and backgrounds

[Ron Zisman]

http://ricochet.org/rollover_test/rollover_test.html

hello,

i'd like to be able to scale a container and the images and background images 
as well as maintain the links. i'm not having much success.
a few pointers would be appreciated.

the above link represents what i'd like to end up with, except for scaling.
thanks in advance,

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

Re: [css-d] scaling images and backgrounds

[Ron Zisman]

On Jul 12, 2012, at 12:23 PM, Georg wrote:

 On 12.07.2012 17:14, Ron Zisman wrote:
 http://ricochet.org/rollover_test/rollover_test.html
 
 hello,
 
 i'd like to be able to scale a container and the images and background 
 images as well as maintain the links. i'm not having much success.
 a few pointers would be appreciated.
 
 The following works in supporting browsers...
 
#container
{
max-width:46em;
min-width:160px;
margin: 0 auto;
}
 
.nav {
margin:0;
padding:0;
background:url(images/rollover2.jpg) no-repeat;
float:left;
 background-size: 100% auto;
 max-width: 50%;
}
 
 .nav a img {max-width: 100%; height: auto;}
 
.nav a, .nav a:link, .nav a:visited {
display:block;
 width: 100%;
 height: auto;
}
georg,

i tried looking at the example you sent, but the stylesheets were so extensive, 
i couldn't make heads or tails of it.

http://www.ricochet.org/rollover/home.html

i would like four images per row, and changed max-width on .nav to 25% as 
suggested which seems to work.
the rollovers aren't working, and i'd like to eliminate the gap between the 
rows. do the background images scale?

rgds,
ron

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

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

Re: [css-d] positioning issue; flexible layout

[Ron Zisman]

http://www.ricochet.org/test/test5.html


the desired effect i'm looking for is that the gray element with the red border 
align and scale with the images below it.

i've been staring at for some time and can't figure out what the issue is. some 
insight would be greatly appreciated.

thanks in advance,

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

[css-d] basic positioning problems-newbie

[Ron Zisman]

hey,

thanks in advance for helping

png mock-up here:
http://www.ricochet.org/dn_test/micrositeB_specs.png

page:
http://www.ricochet.org/dn_test/micro_1.html

css:
http://www.ricochet.org/dn_test/stylesheets

having trouble sizing video in level 1
also padding seems to be ignored

maybe it just early..

thanks
ron
http://www.ricochet.org
the ox is slow but the earth is patient

__
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] :: makeready ::

[Ron Zisman]

david,

technically and from an infrastructure design perspective, it's  
masterfully done (not that i could really tell).

but your copy really sucks and really doesn't betray the level of work  
that you do. how long have you been at this?
did you put nearly as much time into the content development as you  
did in building the site?

you say no smoke and mirrors... but all those collapsing divs--really  
cool--but IMHO, doesn't enhance the experience.
being lazy, i usually want to scan things.. and having to choose  
whether to expand all or 1 or 2 or 3???
i'm a product of the 60's--few brain cells left. i think it would be  
stronger to show all at the outset.

the portfolio is also a little much with the interactivity. clicking  
on the name deletes all information except the 2 links... why???
then the possibility of seeing the full page... at this point, why not  
link to the site?

while i'm venting, i'm not wild about the heavy black border on the  
page images.. to me, it detracts from the subject of the page... which  
is the focus
visually, the out dented, flush right menu, creates a weird visual box  
to the left of the image. i mention it because i notice it.

the resource section and the journal are real contributions to all of  
us.

lastly, and this one is really subjective. the strongest portfolio  
pieces (IMO) are dolphins back and lars. redon, dwight and soldiers  
home seem more like studies, and as nicely done as they are detract  
some from the 'business' of developing sites.

again. i admire your courage of putting this in front of so many  
people and asking for opinions. you'll certainly get them.
i don't quite know how to be constructive, you know i have a lot of  
respect for you as a developer and designer.

i'm my toughest client, especially when i comes to my own work.

wrm rgds,
ron
http://www.ricochet.org

*
the ox is slow but the earth is patient

On Dec 22, 2009, at 2:01 PM, David Laakso wrote:

 I'd appreciate your comments and suggestions on this site.
 http://chelseacreekstudio.com/

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

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

Re: [css-d] stand-down

[Ron Zisman]

david,

i'm glad you took my comments in the spirit intended. design is  
greatly subjective.
so i have no idea of whether or not they have any value.  i hate  
critics and am uncomfortable imposing my aesthetic on others.

i've been watching the process/updates and your willingness to examine  
the feedback. hats off to you!!
i would be too chicken shit to be that naked.

it's been interesting as i''m just starting the process with my site  
and will be dealing with the same issues.
somehow, presenting your own work is so much harder than seeing  
someone else.
worse than working with your kids.

so, if you were twittering, i'd be following...

rgds,
ron
http://www.ricochet.org

**
the ox is slow but the earth is patient

On Jul 22, 2009, at 1:37 PM, David Laakso wrote:

 tedd wrote:
 At 10:43 PM -0400 7/21/09, David Laakso wrote:

 http://chelseacreekstudio.com/dl/index.php



 David :

 As always, looks great.

 Functionality concern. To review some examples, I have to scroll down
 to get to the pagination. If you place the pagination on the top,  
 then
 problem solved.



 That's a thought. The images proper are clickable. Although Ron  
 seems to
 have missed that, too. Hmm. I guess I need to stop assuming users will
 get it.




 Also, you might consider using ajax. That way everything remains  
 while
 only the example changes.

 Here's a couple of examples:

 http://webbytedd.com/a/ajax-site/
 http://webbytedd.com/b/ajax-old/



 Neat. But I'd prefer a method that will enable going from page to page
 even if js is disabled...






 Cheers,

 tedd

 Westmoreland







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

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

Re: [css-d] stand-down

[Ron Zisman]

http://www.ricochet.org
the ox is slow but the earth is patient

On Jul 22, 2009, at 6:03 PM, David Laakso wrote:

 Ron Zisman wrote:
 david,

 i'm glad you took my comments in the spirit intended. design is
 greatly subjective.
 so i have no idea of whether or not they have any value. trimmed


 Everyone who has replied made very valuable and extremely helpful
 comments for which I am most grateful. Reload and take no prisoners.

 Best,
 Westmoreland

you asked for it!!!

i want to see the whole damn page. i don't care if i have to scroll.  
chopping the samples off really doesn't show your concern for balance,  
organization or beauty--like looking at the top half of a photograph.

also, most of your pages have generous margins, yet your samples are  
cropped so tightly, they lose their eloquence.

the navigation on top is definitely less aggravating and easier to use.

but... talk is cheap.

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

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

Re: [css-d] stand-down

[Ron Zisman]

 Dawn will arrive soon enough.
 In the meantime, your comments and suggestions -- thus far -- are  
 always
 welcome.

sometimes the dawn never comes.

comments from a print designer so consider the source...

being a 'lazy' print designer, i resent having to move my mouse and  
scroll to flip through the pages.
to add further insult, i actually have to scroll down and move, as the  
page reverts to top on page refresh.

and being rather simple myself, the template has a little too much  
style for me and seems more like a distraction.. i mean yellow? what  
happend to fuscia?

it took me going through a number of pages before realizing the the  
little thumbnail indicated the next slide in the show, and even then  
didn't really add to the experience.

and since i'm being so negative, the drop shadow helps the right and  
bottom edge of the sample, but on many the right edge is  
disconcerting--maybe a light gray rule could define the page?

then your numbered boxes... i like squares.. they're so consistent...  
but #10 looks like an elephant stood on it and squashed it.

the 'i' in portfolio is cute and artsy... us print designers love that  
shit... it's so personal

and i wonder if the presentation would be stronger showing the entire  
page rather than clipping to fit an arbitrary shape or depth.

in some ways, you're trying too hard to design a web page and  
overpowering the design of the work that you're showing.

yar's site was exquisitely clean and powerful as was ingo's... why not  
let us see the whole page and keep the focus on what you're presenting

and do you really have to tell me you've got style? i mean i know i'm  
a print designer... even i recognize style when i see it.

print designer's no nothing about code and are terrified to even look  
at that gobbly gook. we prefer the square brackets to those curly  
thingies... but hey, design is subjective, right?

and all that type is soo big, you must be one of those oldsters, eh?
we like mouse type speced in pixels so nobody can mess with it.

--the toad in ny


 Best,
 Westmoreland
 http://chelseacreekstudio.com/dl/index.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-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] site check in IE + background image issue

[Ron Zisman]

http://www.beaverdamgallery.com

hey all,

i've cobbled together what i thought was an ultra simple site, but IE  
has been playing havoc with my simplicity. a fellow list member has  
tried to straighten me out (thanks), and i think i'm home, but ask for  
a check.

i'm also having issues with a background image (a slight gradation on  
the red background)

body {
background:#890209 url(images/red_bkg.jpg) repeat-x;
font : 90%/1.5 georgia, palatino, 'palatino linotype', times, times  
new roman, serif;
}

i can call the image here, so i assume it's not currupt:

http://www.beaverdamgallery.com/images/red_bkg.jpg

thanks in advance,
ron
http://www.ricochet.org

**
the ox is slow but the earth is patient

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

[css-d] image link works in opera but not safari or firefox and ? in IE

[Ron Zisman]

i'm trying to put  link on the logo to the home page (flippingpixels).  
while it's functional in opera, it's failing in ff and safari. could  
someone please have a glance.

thanks in advance


link:

http://www.flippingpixels.com/images.html



code:
 div id=bar

   diva href=index.htmlimg src=images/ 
flippin_logo.gif width=158 height=20 alt=flippingpixels.com // 
a/div

 /div

--ron

http://www.ricochet.org
the ox is slow but the earth is patient
__
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] Pragmatic look at our CSS future - ripped from: The CSS Overlords

[Ron Zisman]

On Jan 19, 2009, at 7:13 PM, Gunlaug Sørtun wrote:


Erika Meyer wrote:

I think that one issue is that there still tends to be a big real- 
world divide between designers and developers.  Very few people  
design in CSS, and from what I've seen, there is little  
financial incentive to do so.


That's a huge barrier.

Instead, the web dev model is still (as far as I can tell)  
wireframe - photoshop - CSS .  Web design is still a relatively  
new field, and a lot of designers (and perhaps more importantly,  
employers) are still thinking in print. The ongoing desire to have  
a site look and behave the same in all browsers is evidence of that.


I know my broad content concept -- source-code -- CSS -- test  
across

media -- add imagery -- enhance -- repeat until finished model is
not widely used. One has to visualize in code from the start to use  
it,

which probably throws visual designers - print designers - off.
Much easier to start with the picture itself and trivialize the rest
until it breaks. One can't easily blame the picture for weakening  
the

code necessary to realize it, so the picture-makers go free and the
overall cost goes up.


my two cents from a 'print designer gone web. when i started work  
with css, my concerns were more structural and content centered...  
basically a pencil sketch of the basic page layout, semantic  
organization of content (main content first) html. then css. then  
rework, validate, test, rework. at a certain point, i felt i needed  
to revisit actual surface design, and started doing photoshop mock- 
ups. as i understood how css works, and the need for scalable fonts  
and images, the mock ups represented a balance between different  
content types, but allowed for flexibility-- but none of this  
deterred me for having robust structure and validating and testing  
pages for cross browserland functionality. so, because i do photoshop  
mock-ups doesn't mean i'm using tables and slicing and dicing  
graphics to make 100lb pages (though admittedly some are heavier than  
a dial up line likes). I always keep in mind that georg sets his  
minimum font size to 14pt... and try to make it look ok for the poor  
old folks that don't see so well. There are benefits to doing  
alternate compositions and making decisions in advance of coding, not  
to mention the benefits of communicating ideas to clients before  
major time investments. so, i'm not so sure all us picture makers  
really go that free if we want our sites to validate and perform  
across browserland. though we can be slow on the up-take.


Guess that's why so many web creations tend to break under the  
slightest
amount of stress and can not be easily redesigned with CSS alone to  
work
in/on other media than the regular browser defaults on screens  
setting

- that's most likely all they are made for.

The way toward change in web design trends is always by setting  
examples, especially high-profile examples.


Know of any existing ones out here?

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/


__
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] use of title attribute on image

[Ron Zisman]

http://www.musiccityyo.org/gallery.html

hey all,

i preparing a photo galley for a small site for kids. the images  
don't have captions, but i want interested people to be able to  
identify the images to be able to order prints from the photographer.  
i know i could just put the image number into a caption, but would  
rather it no be there unless needed. dumb question 1? what is a  
tooltip (it shows on mouseover) and would that work using the title  
attribute on each image?

duh, thanks
--ron
__
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] use of title attribute on image

[Ron Zisman]

georg,
as usual, you're unbelievable.
On Oct 4, 2008, at 2:43 PM, Gunlaug Sørtun wrote:

 Ron Zisman wrote:
 http://www.musiccityyo.org/gallery.html

 i preparing a photo galley for a small site for kids. the images  
 don't have captions, but i want interested people to be able to  
 identify the images to be able to order prints from the photographer.
  i know i could just put the image number into a caption, but  
 would rather it no be there unless needed.

 Demo: http://www.gunlaug.no/tos/alien/rz/test_08_1004.html

 First row show captions in hover.
 (IE6 needs more help than I've included in the example for that one to
 work, but other browsers will do fine.)
 With such a hidden caption the alt-attribute on images can be left  
 empty.

this certainly comes up strong and quick on mouseover. but it also  
demonstrates a small problem. as people run their mouse across the  
images to click to larger images, the numbers come up right away,  
which is a little distracting.

 Second row has title-attributes - tootips. Title-attributes can not
 replace text in alt-attributes.

this seems to take a little more 'intention' for the tooltip to come up

 Note that IE/win is buggy and presents text in alt-attributes as
 tooltips by default - unless there's a non-empty title-attribute in
 which case it'll present the title-text instead.

you might ask why i didn't do this little experiment myself instead  
of running to mama. i'm such a slug!

thanks georg,

--ron

 what is a tooltip (it shows on mouseover) and would that work  
 using the title attribute on each image?

 A title-attribute is where you can place short pieces of extra,
 non-vital, information, and hope browsers present it on hover.
 Nearly all browsers do present title-text as tooltip - after a short
 delay, but _how_ browsers present tooltip is outside our (CSS) control
 and the tooltip text is often hard to read.

 regards
   Georg
 -- 
 http://www.gunlaug.no

__
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] homage to the square

[Ron Zisman]

On Jun 22, 2008, at 7:40 PM, David Laakso wrote:

 Greeting from Havana!
greeting from vega (third planet past pluto)

observations of a blind print designer:

 Just a simple means of presenting portfolio visuals -- could use any
 feedback, nevertheless...
 http://www.chelseacreekstudio.com/ca/portfolio/

designwise, extremely attractive, great use of type, very balanced.

but having gone through a similar exercise recently, i'm left with  
some questions:

as a portfolio, one assumes the purpose of the exercise is to present  
the work, first and foremost.
in your example, the page layout seems almost more important than the  
work you're trying to present.
the work itself is given almost equal weight as the title, the text  
and the rollovers. so the first impression is of the layout of the page.

also, what happens if the paintings are different shapes--a wide  
piece, becomes  smaller when all are equal width, and a tall piece  
forces the rollovers down.
with different shaped art, the rollovers bounce, forcing the user to  
move the mouse to smoothly transition between clicks.

the rollovers take up a good bit of screen real estate, and as i have  
to scroll down to get to latter states, it becomes a small  
inconvenience...

and as a print designer, i'm of the mind that anything that hampers  
immediate gratification is not necessarily good thing.

most of my compatriots are dull witted and superficial egoists and  
want to be able to flip though quickly, then maybe go back if  
something peaks their curiosity.
not very considerate, but its part of the dna

but it is a beautiful page.
 :: embedded::

 Respectfully.
 Joseph Albers

--molly the cat's arch nemesis

 -- 
 http://chelseacreekstudio.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-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] simple rollover

[Ron Zisman]

resolved. should have gone to the validator before the list. i'll  
learn. sorry.

thanks
ron
__
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] positioning issue

[Ron Zisman]

http://www.ricochet.org/ricochet2/company_principal.html

original page (above) validates and goes cross browser fairly well, i  
think.
it has some scaling issues on fonts, messing badly with alignment.

at issue was as the gray box expands vertically, it changes the  
positions of the arrows which are intended to let people cycle  
through the site quickly.
i want the position of the arrows to remain constant, and wanted to  
move them under 'Communications Design'


http://www.ricochet.org/ricochet2/company_principal_alt.html

the page validates, works and scales well in firefox, but opera and  
safari push the #rightcol to the bottom left corner.

looking for a remedy.

any help?

--ron
__
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] page check-positioning gap, font issues/questions

[Ron Zisman]

http://www.ricochet.org/ricochet2/company_principal.html

i haven't yet viewed the page in msie; only opera and firefox on the  
mac. i'll deal with msie when the page is stable

gap issue:

at the top of the page (on top of yellow box and menus), i'm getting  
a gap.
i've tried zeroing out margins and padding, but am obviously missing  
something.

font question/issue

originally, i speced .8em font size on html/body

looked and worked fine. i know it's a no-no as i've been informed it  
causes issue in msie, i have been taught (by a list member) to use  
100% on body and rescale further down the document.

when i use 100% on body/html, and move the .8em to the wrapper, i  
don't get what i'm looking for. it would be nice to size the font  
once and forget it.

suggestions...

i know only a print designer would use such small type... what can i  
say?

thanks in advance

ron
__
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] css positioning problems

[Ron Zisman]

http://www.ricochet.org/ricochet2/company_principal2.html


2 more positioning problems:

in the blue bar at the top is contact copy

  #top {width:100%}

#top p { positioned from the left } which means if the font scales  
differently in different browsers, it's not going to expand as i'd like.
didn't know how to position the right side of the copy as top is 100%  
and the right margin is a variable.
tried to position absolute, probably didn't know what i was doing,  
but the blue bar (#top) disappeared completely.

so , i'd like the right side of the text to align with right hand  
side of the yellow box (header), and expand to the left.

second issue:

the 'Communications Design' #header h2. actually all h2's. ah,  
scaling doesn't work so well.

the major issue is with the header h2, as positioned, when type is  
scaled, it loses position and drops down and to the left, yellow on  
yellow and yellow on gray, not very attractive, at least not to this  
print designer.

it also screws up the line-up of the navigation columns

  i know this is a lot to ask for on the cheap, but... can you throw  
me a bone?

thanks,

ron
__
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] general css structure and positioning questions

[Ron Zisman]

On Dec 16, 2007, at 9:38 PM, Gunlaug Sørtun wrote:

 Ron Zisman wrote:

 i moved the image to the body, as the outer wrap only extended as
 deep as the last div, leaving the bottom of the screen blue. it
 seems to work in the body...


 Difficult to give more intelligent advices since I don't know all the
 details behind the visual design. Focus on getting the design to work
 for now, as it will reveal your ideas a lot better when all visual  
 bits
 are in place.

http://www.ricochet.org/ricotest/ricotest.html

a number of additions and questions

this generally looks close to what i think i want. when you first  
land, there will only be the first column of menu options
after selecting choice, a sub-directory presents, and a third set.

if you pick case studies, you'll have 4 to choose from.
pick one and get an overview of design brief and views of the project(s)

a problem that i foresee is that when i'm writing briefs i want to be  
able to scroll the overflow... and i'd like to create a scroll bar  
thats unobtrusive.
is it simply overflow visible?

if you would look at the structure again and point out weaknesses,  
i'd be appreciative (the pics will fill the box)

thanks, ron

ps. got the backgrond to 140kb at 1800px wide

 regards
   Georg
 -- 
 http://www.gunlaug.no
 __
 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-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] general css structure and positioning questions

[Ron Zisman]

thanks georg, see below

On Dec 16, 2007, at 3:46 AM, Gunlaug Sørtun wrote:

 Ron Zisman wrote:

 http://www.ricochet.org/ricotest/ricotest.html

 problem. file validates as css and xhtml 1, but it's not picking up
 the background image i've assigned to the #outerwrap.

 The background-image is picked up, but #outerwrap looks and behaves  
 like
 it's struck by collapsing margins[1]

 Adding either...

 #outerwrap {
 float: left;
 }
i moved the image to the body, as the outer wrap only extended as  
deep as the last div, leaving the bottom of the screen blue.
it seems to work in the body...

question on size??? this is a whopping 600kp and is about 1800 px  
wide and 1000 px deep. what are your thoughts on size? and  
compression... i'm sure i can squeeze a little more... but what is a  
sane size and weight? also, i have a blue background on the body, but  
it doesn't extend beyond the image.as it shows as white.. what goes?

 ...or...

 #outerwrap {
 padding: 1px 0 0 0;
 margin: -1px 0 0 0;
 }

it did that. then i moved it to the body

 ...will reveal the background-image.

 These fixes also reveal a weak spot in the styling of h2, in that  
 IE/win
 has its own interpretation of 'margin:auto;' on these elements -
 creating what looks like unwanted gaps in IE/win.

 Change that to...

 h2 {
 margin: 0 auto;
 }

applied.
 ...and IE/win will get back in line.
 Declare specific top and bottom margins if you want any.

and about the navigation the intention is to have 2 of 3 columns  
of sub-navigation--3 or 4 columns floated next to each other. no list  
will have more than 4 entries.


but before that, why is my list (ul) being pushed to the bottom of  
#navigation?

definitely open to a more intelligent approach


 regards
   Georg

thanks,
--ron

 [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
 -- 
 http://www.gunlaug.no
 __
 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-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] general css structure and positioning questions

[Ron Zisman]

http://www.ricochet.org/ricotest/ricotest.html

somewhat of a newbie.

on the mac platform in opera, firefox and safari it is basically  
working as intended, though each of the 3 browsers interpret border  
colors vastly differently. is it something in my mark-up definition?

is the basic direction i am heading structurally sound, or is there a  
more robust approach?

i suspect i will run into issues with ie on a number of fronts  
including min and max heights and will deal with them as the template  
gets more resolved.

thanks in advance for your time.

--ron
__
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] general css structure and positioning questions

[Ron Zisman]

On Dec 15, 2007, at 6:59 PM, Gunlaug Sørtun wrote:

 Ron Zisman wrote:
 http://www.ricochet.org/ricotest/ricotest.html

 somewhat of a newbie.

  :-)

 on the mac platform in opera, firefox and safari it is basically
 working as intended, though each of the 3 browsers interpret border
 colors vastly differently. is it something in my mark-up definition?

 Colors and exact appearance for 'groove' and 'ridge' are not  
 defined in
 standards. It is left to the browsers.

 is the basic direction i am heading structurally sound, or is there a
  more robust approach?

 Looks like you have lost a div-ending near the bottom...
 http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ricochet.org% 
 2Fricotest%2Fricotest.htmlcharset=%28detect+automatically% 
 29doctype=Inliness=1group=0
 ...which gives you more validity-errors than there really are.

 In your example both 'innertop' and 'innerbottom' can be replaced by
 styling of the relevant headlines (h2).

 Otherwise there's nothing much to improve on until we can see a more
 content-populated example.

 i suspect i will run into issues with ie on a number of fronts
 including min and max heights and will deal with them as the template
  gets more resolved.

georg/david

thanks for the assistance. suggestions incorporated in current file.

http://www.ricochet.org/ricotest/ricotest.html

problem. file validates as css and xhtml 1, but it's not picking up  
the background image i've assigned to the #outerwrap.

 IE6 may need a couple of min/max workarounds, but IE7 shouldn't  
 give you
 any problems.

 regards
   Georg
 -- 
 http://www.gunlaug.no

thanks
--ron
 __
 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-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] Validation and I E 6 Help please

[ron zisman]

On Jul 12, 2007, at 5:56 AM, Phil Turner wrote:

 now I have some IE 6 spacing issues I cant check it on my mac but
 have been told
 the portfolio thumbnails aren't spaced as they should be as well as
 other spacing that is out of wack!

 http://www.philturner-uk.com/index.html
 http://www.philturner-uk.com/portfolio.html

 Any help much appreciated

IE6 shows signs of the missing Layout bug, which affects layouts  
based on absolute positioning severely.
For solutions - see 'hasLayout'...
http://www.satzansatz.de/cssd/onhavinglayout.html
... for ways to work around that, and related, bugs.

Note: the fact that your pages' HTML and CSS validates, doesn't make  
them comply with anything -- especially not with W3C standards.  
Transitional doctypes are meant for upgrading old pre HTML 4.0  
sites without completely rewriting them, and as an intermediate  
solution when one has to deal with weak CMS and/or the designers/ 
coders are too far behind regarding standards. Transitional doctypes  
are not meant to be standards for creating new pre HTML 4.0 sites  
in the year 2007.
You should at least try to mark up for a Strict doctype and make that  
validate, and make more proper use of elements, attributes and CSS  
properties/values.

Another problem that makes validity -- and even the problems with IE6  
-- more or less irrelevant in your case, is that your web designs  
live in a print on paper world, and can't take any stress on the  
web -- in any browser. You should apply some of your unique skillset  
to make your web designs work for able visitors and their browser- 
options, and not just for the disabled ones. That would help both  
able and disabled visitors a lot, and also probably reduce your cross- 
browser problems to a minimum.

regards
Georg
__
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] Website Check and IE Problem

[ron zisman]

On Jul 12, 2007, at 11:23 AM, Sol Sinclair wrote:

 http://www.robertsmart.ca/

 and was wondering how it looked on the Mac browsers and on IE 5.x  
 and IE 7
 on PC.

On Safari, Firefox  Opera on Mac - same as in Firefox on windows.

Color-variations / -depth are visible on all screens available to me  
- on win and Mac, but you can't expect minor variations to be visible  
on all screens.

 Also, on IE 6 on Windows 2000, the menu which is positioned  
 absolutely at a
 point of left: 0, top: 160px; is not dropping down far enough. It is
 overlapping the header which I don't want.

Looks like you have over-compensated, and not adjusted for different  
defaults on lists in browsers.

Add / correct to...

div#menu, div#menu ul {margin-top: 0;}

... and IE/win and other browsers will agree, and position the menu  
at the right height.

Note: the page has all the usual weaknesses for a layout based on  
absolute positioning - text / containers will overlap on narrow  
windows and when subjected to font resizing.

regards
Georg

__
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] IE6 issues: height, and right-column content

[ron zisman]

On Jul 11, 2007, at 6:37 PM, Stanley Dankoski wrote:

 http://www.dankoski.com/clients/brightmoves/template.html


 1.
 In IE6, most of the right column is cleared below the left column,  
 beginning
 with the full-width image (of kids exercising in front of paper  
 flowers on
 the wall). I'm not sure why. Any ideas?

Looks like clearing-elements are acting across columns. That's a quite
normal problem with a construction like yours.

One solution is to add...

* html div#right {width: 424px;}

... (a 'hasLayout' trigger) to make IE6 isolate that container and  
keep it
together (all clearing-elements inside).

Alternatively you may add...

* html div#right{float: right; width: 424px; margin-left: 0;}

...to restyle the entire container for IE6 (and older versions) only.  
That
will have the same effect, but give a better line-up in IE6 compared  
with
better browsers.


 2.
 In IE6, div.whiteLine has a taller height than the 3px that I  
 assigned to
 it. This div is really an empty one with a white background. The  
 div is just
 above the section with the header, What is tutoring with the body  
 in mind?
 I created .whiteLine as an easy way of adding a 3px line wherever  
 needed.

Inserting a comment into empty divs, will prevent IE6' white-space bug
from seeing a space with a line-height in there.

Tightly, like this...
div class=whiteLine!-- --/div
... and...
div class=clear!-- --/div

Apart from that: adding new elements just to create space is not a  
good solution.
Adding a suitable margin on an existing element, is the proper way to  
do it.


 (Further explanation on how text is laid out: There is a #left div  
 and a
 #right div within the page, and all text is in either of those,  
 except for
 the half-column text, which is within div.blurb.)

a: h1 is normally used only once in a page -- as main headline.

b: all browsers can resize text, and your layout with fixed height on
elements can't take much of that. It may not help that you already are
using large text, as browsers may be set to resize text in all pages,
regardless of actual text size in any single page.

regards
Georg



__
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] bg divs with banner

[ron zisman]

On Jul 8, 2007, at 12:37 AM, [EMAIL PROTECTED] wrote:

 Here's the effect I'm trying to achieve (set up in images and HTML):
 http://ecologic.taopowered.net/templates/webtest/design4b.htm

 How do I set this up?

You may try this method...

 http://www.gunlaug.no/tos/alien/us-nc/test-1.html

regards
Georg


__
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] page check :: ~dL

[ron zisman]

On Jul 8, 2007, at 1:25 AM, David Laakso wrote:

 I get frequent reminders from the guy that the thing [1] is  
 supposed to
 work in all versions of win/ie.

It does work just fine -- unless you count that the left add may  
overlap the last nav-element on extremely narrow windows and font- 
size 'largest'.

 Comments, suggestions, and links to an anger management seminar
 appreciated.

For links to anger management seminars: ask Killer ... or maybe you  
want need one once you've had a chat with him.

 [1]  http://www.chelseacreekstudio.com/ca/ct1/

regards
Georg

__
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] Stopping div extending underneath floated image

[ron zisman]

On Jul 7, 2007, at 6:47 AM, Gary Benson wrote:Hi all,

 ... on the main page (http://www.relaxshiatsu.co.uk/) there is a  
 floated image and the box
 extends underneath it.  Is there some way I can make the div fill only
 the width available to it and no more?  I know I can do it by giving
 it an absolute width, but I wondered if there's a neater way.

Add...

#findOutMore {overflow: hidden; zoom: 1; }

... and the box will auto-adjust to the float as/when necessary.

The method is described here...
http://www.gunlaug.no/contents/wd_example_01_02.html

regards
Georg
__
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] Getting the z-index right in my css

[ron zisman]

On Jul 6, 2007, at 8:55 AM, Ian Piper wrote:

 Interesting - that seems at a stroke to have sorted out the behaviour
 for everything except IE6. IE6 doesn't show the thumbnail or popup
 images. I do have a set of styles that are supposed to be for IE6 -
 do I have to do something with those styles?

I can't play with - or debug - your IE styles at the moment, as I  
don't have all the tools available where I am now. It is however to  
be expected that IE6 creates layering problems - making elements  
invisible, and it may also need some debugging for float-margins. IE6  
does however tend to present such cases rather well once we have  
killed a few of its bugs. Others may be able to help you with that.

 I'm curious about the technique you have described here - what is the
 purpose of applying those large negative right and bottom margins?
 Presumably these only apply to the descendant styles (in this case,
 just the popups)?

Yes, and the idea is to make those floats take up no space when they  
come into view - as if they are absolute positioned but still acting  
and positioning themselves as floats.

The method is presented and described here...

http://www.gunlaug.no/contents/wd_demo_float_03.html

... and on previous pages in that short series on floats. It's all  
according to CSS standards, and IE behaves relatively well - after  
debugging. I use this method all the time, to create impossible  
line-ups, overlapping and layering, without losing track of  
positioning when dealing with multi-column layouts across browser-land.

regards
Georg
__
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] IE 6 site check needed

[ron zisman]

On Jul 3, 2007, at 6:38 AM, Alan Gresley wrote:

 I will dare say that xml doctypes, mime types and parsing seem to  
 confuse people more than it does IE6.

Indeed :-)

However, note that Internet Explorer (any version) doesn't understand  
correctly served xhtml, so we have to serve xhtml as 'text/html' for  
the time being -- if we want it to work.

 http://www.gunlaug.no/contents/wd_1_06_03.html

The above page is duplicated -- 6 versions -- so one can test across  
browser-land and see how each browser handles it with different MIME  
types and with flaws in the source code.

 Remember that browsers usually show xhtml or html in standard mode  
 (or almost standard mode) with a URI or quirksmode without a URI.  
 There was a good page on Georg's site about why he likes to send  
 IE6 into quirksmode with the xml prolog, but I can not find it now.

It's here...

http://www.gunlaug.no/contents/wd_additions_16.html

... and I haven't found a good reason to change my mind on the  
subject. I find it easier and less hacky to get a reasonably good  
styling through to IE6 when it's in quirks mode, than having to deal  
with its not very standard compliant mode

 http://www.gunlaug.no/

 I still have a lot to learn myself since some pages on Georg's site  
 don't even have a mime type. Very confusing indeed.

Shouldn't be all that confusing, really. It's according to standards,  
and I'll expand slightly on it here since it may affect how our CSS  
is working.

All my pages are sent with a MIME type -- by the server. Browsers  
don't need the information in the meta element, since they get the  
information in the header sent by a properly set up server. The  
server usually takes its information from the 'html/xhtml/xml'  
extension, so the meta element isn't used by the server either. If a  
server doesn't serve up the correct/wanted MIME type, the that's  
dealt with in the set-up for that particular server.

The meta element is only of some use when testing locally -- on our  
own computers, and for the W3C HTML validator. Since I use an 'xml  
declaration' on top, I don't even need the meta element for that.

What one preferably should do when preparing to serve xhtml as 'text/ 
html' -- which is what most of us do all the time, is to start by  
serving, and testing, our work as 'application xhtml+xml' and make it  
work in all browsers that understand that MIME type. Once that's  
working perfectly well, we can change MIME type to 'text/html' and  
give IE/win (and the rendering in other browsers) some attention.  
Doing it in this order is a quick way to create pretty future-proof  
web solutions, and we don't even need to check the validity of our  
source code all that much, since the good browsers will immediately  
inform us about any flaws -- there's no error recovery for properly  
served xhtml. I find this procedure to be a time-saver, as it reduces  
the amount of testing and use of on-line and off-line test-tools and  
validators.

IMPORTANT: NOTE that our CSS (and javascript) may not work as  
intended for properly served xhtml. A few details are handled  
differently, so a bit of MIME type switching and testing is required  
if one wants to use xhtml 1.0 -- regardless of how the final version  
is served. If one can't, or won't, do the necessary MIME type  
testing, then it's better to stick to HTML 4.01 where we only have to  
deal with 'text/html' anyway -- for ever.

regards
Georg (still on vacation :-) )
__
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] Opera 9 display bug?

[ron zisman]

 http://www.kdwebstudio.com/contact.html


You have 'style=overflow:hidden' in the source-code (html), and no
stylesheet has any effect on that inline style.

Delete that inline style, and Opera will present those borders. At  
least it
did at my end.

regards
Georg

__
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] Position-fixed design looks bad under high resolution monitors

[ron zisman]

On Jun 8, 2007, at 8:35 PM, mixty wrote:

 http://www.bchclmc.edu.hk/motherland/index.html

 I wonder if there's any way to limit the position fixed to only  
 within a certain width? Maybe not through position:fixed but  
 absolute or any other way that works.

Yes, there are ways to solve the problem - visually, by controlling  
max-width (and min-width).
Last time I tested - more than a year ago - some browsers weren't  
cooperating unless I added extra containers and some somewhat complex  
styling, but that may have changed - browsers have improved - now.

Anyway, my old solution, with comments, is here...

http://www.gunlaug.no/tos/moa_8e.html

... based on a frame-like construction of mine...

http://www.gunlaug.no/tos/moa_8c.html

... and I use it in the regular 'table of contents' page(s) on site...

http://www.gunlaug.no/contents/toc_7a.html


I use expressions as workarounds for old IE6' lack of CSS support...

http://www.gunlaug.no/contents/wd_additions_15.html
http://www.gunlaug.no/contents/wd_additions_14.html

... while other browsers do fine when served standard CSS.

regards
Georg




__
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] Firefox and Opera bug

[ron zisman]

On Jun 10, 2007, at 3:49 PM, trevor bayliss wrote:

 Hi all, the .gw_aTab is not showing the same in size as in IE (the  
 gain Gain a unique insight into your industry part with the border  
 around it and the uk image).  http://216.219.94.105/index1.cfm
   The div .gw_aTab is not showing right in Opera and Firefox. In IE  
 it is perfect and can be seen at this screen grab: http:// 
 216.219.94.105/lowres_grab_IE.jpg

Well, IE is _wrong_, as there isn't anything in there that should  
make it expand that element.
Conclusion: you are debugging the wrong browser :-)

The solution is to add...

.gw_aTab {min-height: 190px;}

... and all good browsers should present it just fine. IE will be  
saved by its own bugs - as usual.

regards
Georg


__
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] Using a:hover to show an image

[ron zisman]

On Jun 8, 2007, at 8:23 AM, Ian Piper wrote:

 http://www.tellura.co.uk/fenditching/page4/case_studies.htm


Basically, the hovered (large) image is positioned relative to the
browser-window, while it should be positioned relative to the element
holding the link. It is essential, for the effect you're after, that the
hovered (large) image is in the link-position, or else it'll lose focus
when hovered.

Add...

.hoverpic_reed_fen_farm {position: relative;}

...to establish the relation.

Correct position to something like...

.hoverpic_reed_fen_farm a:hover img, .hoverpic_reed_fen_farm a:active
img, .hoverpic_reed_fen_farm a:focus img {left: -10px; top: -70px;}

...to keep it in correct place when hovered.

regards
 Georg



__
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] Weak layout

[ron zisman]

On Jun 7, 2007, at 1:26 AM, Paul Novitski wrote:

 I've never understood the sense of that criterion, e.g. the page
 should survive two [or three] font size enlargements.  Doesn't that
 depend entirely on what size the smallest font on the page is?

Indeed, it does. We need the real font to be of a readable size,  
which means the degree of resizability in itself doesn't really matter.

 If my vision were so weak that I needed to enlarge text to 1/2-inch
 type on the screen, it wouldn't matter whether that required one
 click or ten, I'd still need it to become that large.  It's not the
 number of enlargements that's relevant, it's the size of the  
 resulting type.

I agree 100%.

 What I don't know is if there's any kind of a minimum font size that
 we should ensure our readers can achieve.  I doubt that there is one,
 given the variation in vision impairments, but I'll be curious to
 know what others think.

I use 200% of the default - which on my OS results in 'font-size: 
32px', for 'minimum font size' testing. This is based on what I use  
as normal font-family - 'georgia', and I adjust slightly for  
readability when I use font-families with smaller x-height.
Such a test should - in my opinion - not result in severe layout- 
breaking or overlapping and such.

I don't expect a layout, any layout, to survive such a test in a  
pixel-perfect manner, but well enough to not cause reading problems

This should cover the need for resizing for normally aging eyes. for  
visitors up to at least 90 years of age, and I intend to be in, or  
pass, that age - one day :-)

There will always be visitors who need more - larger real font size,  
Browser-options and AT should cover those needs - as long as we don't  
build barriers into our designs.

regards
Georg (on vacation in USA - using a borrowed address to respond ;-) )








__
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] Divs moving up the page

[ron zisman]

  http://216.219.94.105/index1.cfm

Basically, IE/win (all versions) is saving your layout - see: the
'hasLayout' bug. Other browsers need proper styling, since they don't  
have
that particular bug.

To get the basics working across browser-land, add...

.gw_aTab {clear: left; }
#footer_home {clear: both; }

Note: your layout is a bit weak, and can't take much, if any,
font-resizing in any browser. See also: IE/win's 'ignore font sizes'
option on this point.
Test in browsers and you'll see how easily it breaks.

Normally I would suggest a complete rewriting of such a weak layout -
using a different approach, but I don't have time to create demos/ 
examples
these days.

regards
 Georg
__
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] div in absolute center of screen

[ron zisman]

On Jun 5, 2007, at 8:16 PM, Joanne wrote:

 I know you can center the x-axis with margin: 0 auto;, but I don't  
 know how
 to center the y-axis


CSS for compliant browsers - expressions for IE/win...
http://www.gunlaug.no/tos/moa_15a.html
... and a few more demos.

Description...
http://www.gunlaug.no/contents/wd_additions_20.html

regards
Georg
__
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] font size when page first opens

[ron zisman]

On Jun 5, 2007, at 10:20 PM, [EMAIL PROTECTED] wrote:

 I'm not sure how to phrase this question, but here goes:

 when a page opens in a browser the first time during a session, what
 governs the
 size of the font displayed--the style sheet specification or the  
 browser font
 setting or some combination of both?


If I have understood you correctly, then the answer is: it depends on  
the browser, the browser-options used _and_ what's in the stylesheet.

IE/win, any version:
- font-sizes in absolute units rule - unless IE is set to 'ignore  
font-sizes.
- resizable fonts in the stylesheet means the browsers _and_ the  
stylesheet work together. IE starts at whatever font size the user  
has chosen - of the 5 levels available.

Most other browsers start at default - using what's in the  
stylesheet. The user can then resize, in some browsers until the  
browser choke and give up its spirit - needing a restart :-)
Options like 'minimum font size' will take immediate effect and  
override what's in the stylesheet.

Also, add in browsers default-variations based on resolution.

regards
Georg

__
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] Extra space between floated divs in IE6

[ron zisman]

On Jun 4, 2007, at 9:00 AM, Erik Olivier Lancelot wrote:

 http://www.jester-records.com/releases-div.php.

 IE6 outputs extra space between the covers and the release info. It  
 looks right in FF, O and NN.


IE6 is in quirks mode, and you are therefore seeing the effects of  
the old box-model.

The quick fix is to delete the 'xml declaration' on top in your  
source code, and thereby bring IE6 into a slightly more standard- 
compliant mode. That fixes most in that browser.

regards
Georg
__
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] peekaboo bug? something else?

[ron zisman]

On Jun 3, 2007, at 10:36 PM, Rita Crisafi, Crisafidesign.com wrote:

 http://www.crisafidesign.com/ICS/laundry.html

 it doesn't render correctly in AOL 9.0 and IE 6 on Windows 2000
 according to browser cam (see here
 http://www.browsercam.com/public.aspx?proj_id=352351 page 2)


Looks like one of those situations where 'hasLayout' triggers makes  
things worse for the old Trident Engine, which IIRC is behind the  
surface on both mentioned browsers. The trigger is probably  
unavoidable though, so I suggest you change layout-method - using  
float for the body-text container.

Add ...

#bodytext {float: right; margin: 0;}

... for ALL browsers - and leave other styles as is, and it should  
turn out right.
Looking alright in my browsers once corrected.

regards
Georg ( a.k.a. gunlaug :-) )
__
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] background image not showing

[ron zisman]

On May 17, 2007, at 6:47 PM, Phil Turner wrote:

 Hi Everyone
 I've started a new site here http://www.philturner-uk.com/trish/
 index and I have put a background image in #lgeimagepanel
 can someone tell me why it wont show, first test in firefox on a mac
 not tried anything else yet

perhaps your id in the html was missing? seems you bave div but  
identify it with a comment:

div!-- start of lgeimagepanel --

perhaps div id=lgeimagepanel/div

silly boy.

 Phil Turner
 FREELANCE DESIGNER
 NEW BOOK - YOUR PLANET NEEDS YOU
 http://www.yourplanetneedsyou.org


 __
 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-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] containing floats

[ron zisman]

yo css-d'ers,

http://www.ricochet.org/adv_buyer/new_tue.html

can't seem to get clear on how to contain floats.

i've assigned heights to some elements so i could see what i was doing, 
they'll be removed as problems are resolved.

the wrapper has a background image and includes the light yellow, the 
only reason it can be seen is that it has a height assigned;
what can't be seen, is that the container (770px) isn't within the 
wrapper, and it appears both the content (green) and sidebar (blue) 
will also not be contained in the wrapper and i'm not sure about the 
container. newbie stuff. i remember the idea of float to fix a float, 
but it seems to have floated away over time.

a little insight would be appreciated


ron zisman
ricochet.org
845-735-3392

__
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] doc type question

[ron zisman]

still a newbie. so, a newbie query. I'm beginning a new site and had 
thought of using a xhtml strict declaration... or transitional, but, as 
the site is for a small realtor, it will need to import data from the 
local MLS (listing service). i'm assuming (don't know why) that the 
data will be formatted as html 4.0.
what's a guy to do? does this imported data demand consideration of the 
doc type? thanks.

ron zisman
ricochet.org
845-735-3392

__
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] 3 column backgrounds not spanning tallest column height?

[ron zisman]

On Jan 12, 2006, at 2:51 PM, Magenta Placenta wrote:

 http://www.5finger.com/css/fox/
 http://www.5finger.com/css/fox/stylesheet.css

 I have 3 gray content columns in the middle of the page, but they're 
 not
 spanning the height of whatever the tallest column will be (most 
 likely will
 always be the middle one.)  Any ideas how to fix this?  I tried nesting
 those 3 columns in a secondary shell div, but that didn't seem to do
 anything.

a newbie here, but i might try something like this


div id=content
div id=left/div
div id=right/div
br class=clear /
/div

i would pad both sides of content to allow room to float left #left; 
and float:right; #right

but...

ron

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] more confusion over containing floats

[ron zisman]

hey listees,

http://www.ricochet.org/flippingpixels/movies/index.html

On the above page i have a number of definition lists floated across 
the page. the client (my kid) wants the pictures to align vertically 
and horizontially. my thinking (or lack thereof) was to float the lists 
in a container, then stack containers. I posted a page last week that 
had floated elements in a container, and with a clearing element, i 
think i got the container to contain the floats. while what i have is 
functional, and seems to play ok across browser land, i don't 
understand what is happening. i have wrapped three lists in a 
container(.wrapper), and stacked the containers. .wrapper has a fixed 
width, which the floats respect. yet, when i put a border on the 
wrapper (blue), it appears to collapse between groups. i understand 
that by floating the lists, they are taken out of the flow... so as 
there is no content, the container collapses. is this kosher? is there 
a better way? i had thought that i might use the .wrapper for borders 
or other styling but no chance in the current incarnation. floats 
and my brain seem totally incompatible. thanks for looking.

ron

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css positioning--revised url

[ron zisman]

On Dec 19, 2005, at 11:41 PM, Roger Roelofs wrote:
 trying to contain #content (red border) within #outer (blue border).
 http://www.ricochet.org/flippingpixels/movies/movie.index.html

 The validator is your friend.  It found your problem when I couldn't
 see it.

you are right, i was lazy.

 change dv id=content  to div id=content

solved issue.

 Floated elements are removed from the page 'flow'.  Because this is
 true, #content has no content.
can't say i understand this

 Remove the height from #outer, it will only frustrate you later.  You
 could float #outer also and get the 'enclosing' behavior you seek, but
 then it wouldn't be centered anymore.  Once the typo noted above is
 fixed, your clearer will work fine for clearing #outer, but #content
 will still collapse to nothing because all elements inside it are
 floated.  As an aside, I'd make it a class instead of an id.

is there a better way of setting up the page? doesn't #content serve as 
a container to position #content_left and #right
with floats, and then for positioning #left and #content in #outer?

 hth
 Roger,

thanks much.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css positioning--revised url

[ron zisman]

On Dec 20, 2005, at 8:57 AM, Gunlaug Sørtun wrote:
thanks georg

 ron zisman wrote:
 doesn't #content serve as a container to position #content_left and 
 #right with floats, and then for positioning #left and #content in 
 #outer?

 Yes, it does :-) Positioning isn't the problem.
 However, #content won't _contain_ floats by default.
duh. are you suggesting that i don't need '#content' to make my layout 
work.

 A quick look at specs:
 http://www.w3.org/TR/CSS21/visuren.html#q15
 ...will give you the rule(s) for _containment_ which in your case might
 be a simple 'display: table' on #outer.
disply:table... i'm not using any tables : ). where does this come from 
and what does it do?

 You can also improve things a lot by not setting 'height' on those
 floats. You can set 'min-height' instead so they can expand naturally.
i do know better, i forgot to take that one out. i had it there 
initially before entering content
 Of course, a few more, strategically placed, 'display: table;' will
 solve that even if you like to keep those 'height'. It's all in those
 CSS specs.

again, is display:table a hack sorry to be so dense.

 regards
   Georg
 -- 
 http://www.gunlaug.no

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] css positioning issue_mac pc

[ron zisman]

newbie positioning issue

http://www.ricochet.org/flippingpixels/movies/movie.index

issue: the #outer div (red) is not containing the #content div (blue).
it seems to want a clearing element after closing content and before 
closing outer (in my mind)

something is eluding me.

css in the head--simple page.
thanks

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] css positioning--revised url

[ron zisman]

posted earlier with url missing extension...sorry

trying to contain #content (red border) within #outer (blue border).


http://www.ricochet.org/flippingpixels/movies/movie.index.html

sorry for the misspost

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Need help figuring out how to implement a page layout

[ron zisman]

newbie response here.

my approach might be to place 2 divs in a container, floating 
everything left or right; then enclosing the container in a wrapper 
with the third column floated opposite the inner container. the wrapper 
could have a fixed width or be flexible.

div id=wrapper
div id=container
div id-first
/div
div id=center
/div
/div
div id=third
/div
/div

css something like this:

#wrapper {
width: 100%
}

#first {
width: 200px;
float: left;
}
#center {
width: auto;
margin-left: 220px
}
#container {
float: left;
}
#third {
width: 200px;
float: right;
}

again, newbie brain, but this kind of makes sense to me.

On Dec 10, 2005, at 2:52 PM, Mike Soultanian wrote:

 Better: Make column 1 and 2 fixed, and column 3 width:auto, so it
 fills the rest of the available space.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] recomendation of 3column layouts

[ron zisman]

On Nov 28, 2005, at 5:29 PM, Erland Flaten wrote:

   Is there any recomendation of some 3 column layout that works in
 Dreamweaver 8?
  a design that works in DW and later in Contribute is a must.
 Thanks for any advices.

 Erland Flaten

sounds like project IIV would cover your needs

http://www.projectseven.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Netscape not showing what it should

[ron zisman]

this is the first time safari has given me the message that i need to 
download internet explore to view the page. this could be an issue for 
folks on macs.
On Nov 26, 2005, at 1:58 AM, Lizet Pena de Sola wrote:

 Hello all,
 I'm new to the list and glad I found it.
 I recently finished a small interface project  that required the
 customization of windows media player a couple of web pages.

 The test url is:
 http://216.197.219.40/am/LESA_ONE_am_7_files/

 It works fine with IE6 but fails to load an entire part of the page
 with NN. Any idea as to where the incompatibility is will be more than
 welcome. Thanks in advance!


 The code of that part (that is missing in NN) is as follows:

 Note: I haven't cleaned up the code to show here.

 !--  SLIDES FRAME   --
   div id=SlidesWrapper class=SlidesWrapperOndiv 
 id=SlidesDiv
 align=center valign=middle style=position:relative; top:40px;
 left:-2px;display:none;WMPrerollDisplay:none; z-index:0;
   IFRAME src= id=SlidesFrame name=SlidesFrame width=100%
 height=100% scrolling=no FRAMEBORDER=0 allowTransparency=true
 /IFRAME
   IFRAME id=SlidesCmd name=SlidesCmd
 style=visibility:hidden;display:none;/IFRAME
   /div/div


 div id=Agenda class=AgendaOff/div
 div id=Speakers class=SpeakersOff
 onClick=javascript:showTab('Speakers');/div
 div id=Materials class=MaterialsOff/div
 div id=Help class=HelpOff/div
 div id=RightHandArea style=position:absolute; top:180px;
 left:374px; HEIGHT: 373px;WIDTH: 415px;
 background-image:url(images/shadow-window-behind.gif);
 background-repeat:no-repeat;display:none;WMPrerollDisplay:none/div
 div id=SlidesOver onClick=javascript:showTab(this);/div
 div id=AgendaOver onClick=javascript:showTab(this);/div
 div id=SpeakersOver onClick=javascript:showTab(this);/div
 div id=MaterialsOver onClick=javascript:showTab(this);/div
 div id=HelpOver onClick=javascript:showTab(this);/div
 style
 #SlidesOver
 {
   position:absolute;
   top:152px;
   left:378px;
   HEIGHT: 33px;
   WIDTH: 75px;
   background-color:transparent;
   background-repeat:no-repeat;
   display:none;
   WMPrerollDisplay:none;
   z-index:400;
   OVERFLOW: hidden;
   cursor:hand;
 }
 #AgendaOver
 {
   position:absolute;
   top:152px;
   left:465px;
   HEIGHT: 33px;
   WIDTH: 75px;
   background-color:transparent;
   background-repeat:no-repeat;
   display:none;
   WMPrerollDisplay:none;
   z-index:400;
   OVERFLOW: hidden;
   cursor:hand;
 }
 #SpeakersOver
 {
   position:absolute;
   top:152px;
   left:553px;
   HEIGHT: 33px;
   WIDTH: 75px;
   background-color:transparent;
   background-repeat:no-repeat;
   display:none;
   WMPrerollDisplay:none;
   z-index:400;
   OVERFLOW: hidden;
   cursor:hand;
 }
 #MaterialsOver
 {
   position:absolute;
   top:152px;
   left:638px;
   HEIGHT: 33px;
   WIDTH: 75px;
   background-color:transparent;
   background-repeat:no-repeat;
   display:none;
   WMPrerollDisplay:none;
   z-index:400;
   OVERFLOW: hidden;
   cursor:hand;
 }
 #HelpOver
 {
   position:absolute;
   top:152px;
   left:720px;
   HEIGHT: 33px;
   WIDTH: 75px;
   background-color:transparent;
   background-repeat:no-repeat;
   display:none;
   WMPrerollDisplay:none;
   z-index:400;
   OVERFLOW: hidden;
   cursor:hand;
 }
 .SlidesWrapperOn
 {
   position:absolute;
   top:152px;
   left:372px;
   HEIGHT: 373px;
   WIDTH: 413px;
   background-image:url(images/slide-window-on.gif);
   background-repeat:no-repeat;
   display:none;
   WMPrerollDisplay:none;
   z-index:300;
   OVERFLOW: hidden;
   cursor:arrow;   
 }
 .SlidesWrapperOff
 {
   position:absolute;
   top:152px;
   left:372px;
   HEIGHT: 373px;
   WIDTH: 413px;
   background-image:url(images/slide-window-off.gif);
   background-repeat:no-repeat;
   display:none;
   WMPrerollDisplay:none;
   z-index:0;
   OVERFLOW: hidden;   
   cursor:arrow;
 }
 .AgendaOn
 {
   position:absolute;
   top:152px;
   left:374px;
   HEIGHT: 373px;
   WIDTH: 415px; background-image:url(images/agenda-window-on.gif);
   background-repeat:no-repeat;
   display:none;
   WMPrerollDisplay:none;
   POSITION: absolute;
   OVERFLOW: hidden;
   z-index:300;
   cursor:arrow;
   
 }
 .AgendaOff
 {
   position:absolute;
   top:152px;
   left:374px;
   HEIGHT: 373px;
   WIDTH: 413px; background-image:url(images/agenda-window-off.gif);
   background-repeat:no-repeat;
   display:none;
   WMPrerollDisplay:none;
   POSITION: absolute;
   OVERFLOW: hidden;
   z-index:0;
   
 }
 .SpeakersOn
 {
   

Re: [css-d] Aligning text in same line

[ron zisman]

a newbie guess:

ul
li class=catThe Opera/li
li class=date(Fri, July13)/li
li class=descrip/li
/ul

.cat {float: left}
.date {float:right}
.descrip {clear: both}

at least conceptually... i think...


On Nov 23, 2005, at 4:36 PM, Lst Recv wrote:

 Is there anyway to have one line of text, with part of it aligned to
 the containers left and part of it to it's right?

 Floats don't seem to work here - I don't know widths in advance, and I
 don't want flow, just justification.

 Crude example of what I'd like:

 The Opera  (Fri, July 13)
 The opera was very fun, I enjoyed it very much...


 Or does this require a table?
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] collapsing divs

[ron zisman]

being a rank newbie, i would have guessed that the blue div would need 
to be followed by a clearing element before closing the green div.
On Nov 15, 2005, at 9:41 PM, Peter Michaux wrote:

 Hi,

 Probably this has been discussed before but I can't find an answer to 
 my
 question. I hope someone can help me figure out what is going on with 
 this
 aspect of divs.

 In the example attached below why doesn't the green div extend at 
 least as
 far down the page as the blue div? It seems to me that if the green div
 contains the blue div in the code then also the green div should 
 appear to
 contain the blue div in the rendered view. Why did the CSS standards 
 folks
 decide to make CSS work so the green section collapes up? How can I 
 make it
 so the green div extends at least as far down the page as the blue div?

 Thanks!
 Peter



 html
 head
 style type=text/css
 body {
 margin: 0;
 padding: 0;
 }
 #green {
 background: lightgreen;
 }
 #blue {
 background: lightblue;
 width: 30em;
 float: left;
 }
 /style
 /head
 body
 div id=green
 div id=blue
 asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
 asdf
 asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
 asdf
 asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf 
 asdf
 asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
 /div
 text in the green
 /div
 /body
 /html
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] font-size and line-height: inheritance, specificity, or something

[ron zisman]

hey mike,

glanced at the sample gallery page and at your css file and noticed a 
couple of things:

before i start..i'm somewhat of a newbie.. so take it for what it is 
worth.

the first thing i noticed was your help text, and moron that i am, kept 
hovering over different images waiting for a big image to pop up. 
lightning struck, i noticed the look below, and scrolled my beautiful 
20 inch monitor down to see the image in the lower left corner... was 
larger. technically , probably correct, but beware morons like me are 
all over the web.

while different people write css differently i've seen some people spec 
a font size in the body tag...i'm rambling. in your p id=help you 
spec your css to be .9em which would bring you in around (roughly 90% 
of 24 point or 21+pt (assuming default 16pt) and the user hasn't 
changed it, which you increased in sidebar by 150% to 24.  if it's too 
big, reduce it to .8em, .7em, 90%, *0%..i digressing again...sorry

i think maybe...
ron


On Nov 7, 2005, at 5:31 PM, M. Montgomery wrote:

 Finishing up a site for a client: http://photosbykat.net/
 I know it doesn't validate, but she absolutely insists on the
 right-click disable (though I explained it's easy to work around), and
 I don't know how to do it validly.

 I'm working on the gallery pages, and a sample from a ministry trip is
 posted at: http://photosbykat.net/cuba/
 The css file is at:http://photosbykat.net/textpattern/css.php?s=cuba
 The xhtml and css for the gallery page both validate.

 My question is about the (ugly) help text on the right, below the
 search box, a paragraph currently in what ought to be an unnecessary
 div=help
 The css includes some generic styling for p elements.
 The #sidebar sets font-size and line-height, and the #help div (inside
 the #sidebar) attempts to bring the size back down to something
 reasonable.
 Why isn't it working?
 --
 Best regards,
 Mike Montgomery
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] spacing between line items in unordered lists

[ron zisman]

sorry to ask such a lame question but:

currently my list items have no space between them, it would be nice to 
have .5em.


i think placing a br / in a ul is unkosher.

would it be as simple as adding padding or margin to the bottom of the 
li?


here is the offender

http://www.ricochet.org/abec_test/why_so_important.html

http://www.ricochet.org/abec_test/stylesheets/abec_global.css

thanks guys (and gals)

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/