Re: [css-d] Started over - new questions

[Gunlaug Sørtun]

Marc Funaro wrote:
> I notice that my left nav in opera is not condensed the way it is in 
> firefox or ie... Not a big deal - I don't mind the look too much, but
> just curious as to why the instructions I put in my CSS, which seem
> logical and valid, are not being adhered to with Opera.

You're experiencing different defaults in Opera vs. other browsers, I
think. Defaults are not "universal", so it's always a good idea to add
your own preferences if such differences are too disturbing.

Try adding...

#leftNav {line-height: 1.28;}

...and see if that's close enough for comfort across browser-land.
Adjust to taste.

Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Marc Funaro]

Disregard my horizontal list question - it was a stupid typo.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Marc Funaro]

>   Add this "nonsense" styles...
>   
>   #leftNav {display: inline;}
>   #mainContent {display: inline;}

This worked great, thanks.  I notice that my left nav in opera is not
condensed the way it is in firefox or ie... Not a big deal - I don't mind
the look too much, but just curious as to why the instructions I put in my
CSS, which seem logical and valid, are not being adhered to with Opera.

Also, I'm trying to create horizontal navigation using lists, and I can't
seem to get display: inline; to be recognized by ANY of the browsers.  Is
there something simple I am missing?

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Gunlaug Sørtun]

Marc Funaro wrote:
> http://nyslittreedata.advantex.net/new/default/default.htm

> 1.  ... Opera seems to ignore my list-style:none on sublist items for
>  some reason.  It made my CSS a little more complex with regards to 
> spelling out the appearance of each level in the navigation, but it's
>  something that really makes sense to me.  Am I way off here?

Not sure. Haven't had any such problems in Opera lately. Will have to
look into it a bit more. Maybe someone else know what's bugging it.

> 2.  Per a suggestion I read that content come before navigation (for 
> screen readers or those browsers that won't display CSS), I moved my 
> navigation div so that it appears in the HTML below the content area,
> and adjusted my CSS to follow "floating" per one of the alistabove
> articles.  Now, I cannot get this layout's content area to look the
> same between FF/Opera and IE, no matter what I do.

It's the 'margin-doubling bug on floats' in IE that needs a "kick in the
butt" :-)

Add this "nonsense" styles...

#leftNav {display: inline;}
#mainContent {display: inline;}

...they are "nonsense" because 'floats' are 'block-elements' and can't
revert to 'inline', but somehow the buggy rendering-engine in IE comes
to it senses when it sees that 'display: inline;' rule on 'floats'.
Other browsers are not disturbed by the "nonsense".

> Is it simply not important enough to worry about having content come 
> before navigation in the HTML -- because I had this looking great in 
> all three browsers until I moved it around...

It will look fine with the above IE-corrections.

The 'line of thought' that it is better to have main content before a
lot of navigation, makes sense in a non-CSS browser, and most assisting
browsing-software seems to approach web pages similarly - with limited
CSS-support.

It isn't the only 'line of thought' though, as some prefer to pepper
their pages with 'skip to main content' and/or 'skip to navigation',
while others line up everything the old way: based on look in
graphical/CSS browsers.


Personally, I prefer to have main content high/first in the source-code,
as I think main content is the most important part of a web
page/article. Organizing source-code this way gives better separation
between content and presentation, IMO, and one can style it to appear as
one like to anyway.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Marc Funaro]

>   Wrong nesting of lists.
>   
>   Each subsequent ul should be wrapped in a li, like so...
>   
>   
>   
>   Writers   
>  
>   
>   NYS LitMap Authors
>   NYC LitMap Authors
>   NYS Native American Authors
>   LitMap Author Nomination
>   Circuit Writers
>   Interstate/International Writers
>
>  
>   

Latest versions:

http://nyslittreedata.advantex.net/new/default/default.htm
http://nyslittreedata.advantex.net/new/default/default.css

I have adjusted both my html and my css in the following ways:

1.  My nav list is very "minimalist" html now (I LIKE IT!!), and the
designation of how the lists/sublists appear is handled completely via CSS.
The only 'hack' that I had to put in was an empty image for list items that
I wanted to have no bullets or leaf -- Opera seems to ignore my
list-style:none on sublist items for some reason.  It made my CSS a little
more complex with regards to spelling out the appearance of each level in
the navigation, but it's something that really makes sense to me.  Am I way
off here?

2.  Per a suggestion I read that content come before navigation (for screen
readers or those browsers that won't display CSS), I moved my navigation div
so that it appears in the HTML below the content area, and adjusted my CSS
to follow "floating" per one of the alistabove articles.  Now, I cannot get
this layout's content area to look the same between FF/Opera and IE, no
matter what I do.  Just moving them around in the HTML broke it somewhat in
IE and I've tried all combinations of margins/padding on the objects and
their containers... Nothing works.  Anyone have any suggestions on this?  Is
it simply not important enough to worry about having content come before
navigation in the HTML -- because I had this looking great in all three
browsers until I moved it around...

Thanks again - this list is awesome!

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions - why not to use PNG's?

[David Gee]

kuasar wrote:
> I've found something in a page (
> http://www.cristalab.com/tips/21618/png-con-transparencia-alpha-en-internet-explorer)
> suposed to correct transparency problems, which I don't quite understand.
> What do you think?:
>
> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
> (src='imagen.png',sizingMethod='scale');
>
>  style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
> (src='imagen.png',sizingMethod='scale');" alt="" />
>   
I use a slightly more complex method to accomplish this, I attach a 
behavior file in an IE-only stylesheet (using conditional comments) to 
everything with a class "png":

.PNG {
behavior: url(/path/to/pngbehavior.htc);
}

The behavior file is a modified version of something I found on the web 
somewhere a long time ago:




   document.transparentImage = "../img/trans.gif";
   function setAlpha()
   {
// images
if (this.src && this.src.indexOf(document.transparentImage) == -1 && 
this.src.toLowerCase().indexOf(".png") != -1) {
  this.runtimeStyle.filter += 
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + 
"',sizingMethod='scale')";
  var width = this.width;
  var height = this.height;
  this.src = document.transparentImage;
  this.width = width;
  this.height = height;
 
}
   
// background images
var bgImg = this.currentStyle.backgroundImage;
bgImg = bgImg.slice(bgImg.indexOf('"')+1,bgImg.lastIndexOf('"'));
if (bgImg.indexOf(document.transparentImage) == -1 && 
bgImg.toLowerCase().indexOf(".png") != -1) {
  this.runtimeStyle.backgroundImage = "none";
  this.runtimeStyle.filter += 
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bgImg + 
"',sizingMethod='crop')";
}
   }



I've never really gotten around to optimizing and/or checking out edge 
cases for this file, so YMMV. It should really only be running the 
script when readystate=4, that's pretty obvious now that I look at it...

The thing to be aware of here is that you can't use this for tiling 
background images, or when you need to adjust the background-position 
property. As far as I know, there's no way to accomplish that in IE. 
Also, IE's proprietary filters are resource hogs, so I tend not to use 
these for icons that appear too many times on a page (for example in 
long lists or grids).

david



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions - why not to use PNG's?

[kuasar]

>
> One thing to be aware of is PNG color-shifting in IE. If you try to use
> a non-transparent PNG with non-square edges and "fill in" the background
> color, then place it inside a region with a CSS background-color, they
> may not match up exactly, even with supposedly the same hex values. Even
> when opening the PNG in Photoshop, it will show the PNG as having the
> correct hex value. In these circumstances, it's best just to use a 10x10
> pixel flat color PNG as your background-image for the container region.
> Don't use smaller tiles than 10x10 (i generally go for at least 20x20
> myself) as this puts a lot of strain on the client and you may get
> strange rendering glitches, especially on older machines.
>
> Of course, similar problems arise with JPEGs, especially when saved at
> low-quality, but at least with JPEGs you can validate the hex value
> shift in Photoshop.
>
> david


That is an interesting tip I didn't know about. I've always preffered PNGs
for their quality and for being free (as in freedom ;-))...
I've found something in a page (
http://www.cristalab.com/tips/21618/png-con-transparencia-alpha-en-internet-explorer)
suposed to correct transparency problems, which I don't quite understand.
What do you think?:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='imagen.png',sizingMethod='scale');




There's also a way of coming around png problems in IE using javascript.
http://www.aoyama.com.mx/foros/viewtopic.php?t=24
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions - why not to use PNG's?

[David Gee]

Erik Gyepes wrote:
> Hi!
>
> Niklas Kanthak wrote:
>   
>> Don't use PNG for images, only GIFs or JPGs.
>>   
>> 
> I'm just curious, why not to use PNG's. You mean PNG's in general, or 
> only transparent PNG's? Because I like this format much more than GIF's 
> or JPG's for it's better quality. I know that IE doesn't support 
> transparent PNG's but support of "normal" PNG's is okay, or have I 
> missed something?
>   

One thing to be aware of is PNG color-shifting in IE. If you try to use 
a non-transparent PNG with non-square edges and "fill in" the background 
color, then place it inside a region with a CSS background-color, they 
may not match up exactly, even with supposedly the same hex values. Even 
when opening the PNG in Photoshop, it will show the PNG as having the 
correct hex value. In these circumstances, it's best just to use a 10x10 
pixel flat color PNG as your background-image for the container region. 
Don't use smaller tiles than 10x10 (i generally go for at least 20x20 
myself) as this puts a lot of strain on the client and you may get 
strange rendering glitches, especially on older machines.

Of course, similar problems arise with JPEGs, especially when saved at 
low-quality, but at least with JPEGs you can validate the hex value 
shift in Photoshop.

david

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions - why not to use PNG's?

[Niklas Kanthak]

> or JPG's for it's better quality. I know that IE doesn't support 
> transparent PNG's but support of "normal" PNG's is okay, or have I 
> missed something?

Hello Erik,

no, your're probably right, my dislike of PNG as a format is a relict of 
my stone age of the internet.

Niklas
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions - why not to use PNG's?

[Erik Gyepes]

Hi!

Niklas Kanthak wrote:
> Don't use PNG for images, only GIFs or JPGs.
>   
I'm just curious, why not to use PNG's. You mean PNG's in general, or 
only transparent PNG's? Because I like this format much more than GIF's 
or JPG's for it's better quality. I know that IE doesn't support 
transparent PNG's but support of "normal" PNG's is okay, or have I 
missed something?

Thanks,

Erik
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Gunlaug Sørtun]

Marc Funaro wrote:
> HTML 4.01 Strict is what I think I'll shoot for.

Good choice.

> It seems the validator does not like the ULs nested inside, but 
> that's what I think I need to accomplish...?

Wrong nesting of lists.

Each subsequent ul should be wrapped in a li, like so...



Writers   
   

NYS LitMap Authors
NYC LitMap Authors
NYS Native American Authors
LitMap Author Nomination
Circuit Writers
Interstate/International Writers
 
   


Literary Entities
   
 
and so on. Also, notice the headlines I've put in there.

Example of heavily nested unordered list...

...with valid nesting.

> Once I have the markup validated, I'm not sure where to start, in 
> order to apply different styles to lists and "sub lists" and "sub sub
>  lists", which this left navigation DOES contain... Can you point me 
> to a good article?

Someone else might chime in with a suitable article.
I think you'll do fine on your own.

Zero out margins and paddings first, and then try adding them back along
with some styles. Setting 'list-style: none' will also probably work
well from the start.
Doing it from the bottom yourself, may take slightly longer than just
borrowing some solution, but you'll learn more that way.

> Also, I have changed PageTitle to  and applied a style there, 
> which works.  I have also put all my text into P's and applied the 
> style there as well.

Looking much more organized now.

> I am slowly working through the list of suggestions... This is 
> turning out much better now.  I can see that my overriding 
> skills-needed area is in planning the HTML part of the document, long
>  before the styles are applied. I just never would have envisioned 
> the "sections" or "tiles" of this document as they have turned out, 
> and so my starting point was already quite poor.

Plan the source-code well, and you can style it to look like almost
anything. Only IE/win's weaknesses are giving us some real headaches at
times, the other browsers create mostly minor problems.

> What are all of you using for regular development - Opera to start? I
>  read in one of the (many) articles that Opera now always tries to do
>  everything without a "quirks" mode, and the latest version now 
> supports the DOM standard... So does that make it the best browser 
> with which to do the primary development tasks?

Opera's 'quirks mode' replicates IE/win in most parts, and will continue
to do so, I think. Its support for standards are growing steadily, but
it isn't perfect or bug-free yet.

Choice of browser as design-tool is mostly a "personal preference" thing
that we rarely discuss - apart from mostly agreeing that it should be
one of the most standard compliant ones.

I /personally/ think Opera 9.0 beta is the strongest browser at the
moment - so that's the one I always start designing in. Some prefer the
latest Firefox or Safari. Any design should be tested in all of these
and a few more anyway, so it's no big deal, IMO.

Just don't design for/in IE/win. Those buggers (IE6 & IE7) should be
left out till later... much later :-)

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Marc Funaro]

>   If you can manage to get some kind of "control" over 
>   those CMS users, then a complete 'HTML 4.01 Strict' 
>   would be the right choice.
>   
>   More info...
>   
>   


HTML 4.01 Strict is what I think I'll shoot for. The WYSIWYG editor I
believe is capable of using styles-only to apply bold, italics, etc. to the
text that's entered, and that should be sufficient.

I have uploaded my latest changes.  I have converted the left menu to all UL
and LI's, but it still will not validate... It seems the validator does not
like the ULs nested inside, but that's what I think I need to accomplish...?
Once I have the markup validated, I'm not sure where to start, in order to
apply different styles to lists and "sub lists" and "sub sub lists", which
this left navigation DOES contain... Can you point me to a good article?

Also, I have changed PageTitle to  and applied a style there, which
works.  I have also put all my text into P's and applied the style there as
well.

I am slowly working through the list of suggestions... This is turning out
much better now.  I can see that my overriding skills-needed area is in
planning the HTML part of the document, long before the styles are applied.
I just never would have envisioned the "sections" or "tiles" of this
document as they have turned out, and so my starting point was already quite
poor.

What are all of you using for regular development - Opera to start?  I read
in one of the (many) articles that Opera now always tries to do everything
without a "quirks" mode, and the latest version now supports the DOM
standard... So does that make it the best browser with which to do the
primary development tasks?

Thanks to everyone... I've learned a lot in a short time here.  You all have
been great!!

Marc

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Gunlaug Sørtun]

Marc Funaro wrote:
>> [2]http://www.gunlaug.no/contents/wd_1_06_03.xhtml
> 
> Having read this, I think it might be wise for me to declare my 
> document as simply HTML.  I ignorantly used XHTML only because that's
>  what was output originally by Photoshop on my very first foray into 
> an all-CSS layout.

> ... but I'm not sure what I should put in place of my XHTML 
> declaration...

I would suggest...
http://www.w3.org/TR/html4/loose.dtd";>
...if it's gonna end up as 'tag-soup' anyway :-)

If you can manage to get some kind of "control" over those CMS users,
then a complete 'HTML 4.01 Strict' would be the right choice.

More info...



regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Dave Goodchild]

>
>
>
>
> Sorry to sound grumpy... This CSS stuff has taken me back to beginner
> level
> and maybe I've chosen the wrong time to try this, as I really do want to
> get
> this done and the learning curve is steeper than is expressed in the
> documents I've read online.  Say what you want about tables, they have
> been
> around long enough to "just work", quickly.  I'm not usually THIS
> impatient,
> but every time I solve one problem, two more crop up.  :(
>
> _



 Tables may be quicker when you are used to using them, but they are nasty,
hard to maintain, compromise accessibility and semantics, and are just plain
wrong. They are artifacts from a certain period of the web and should now be
returned to their rightful place as display containers for tabulra data.
Trust me, I am learning css and finding it a challenge, but the more your
learn the more you understand and in the future you will be a cutting-edge
happier designer, as table layout will one day be totally redundant.

A great book on css is Cascading Style Sheets (friendsofed.com) and for the
next level CSS Mastery (again friendsofed).



_
>



-- 
http://www.web-buddha.co.uk

dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css)

look out for project karma, our new venture, coming soon!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Marc Funaro]

>   [2]http://www.gunlaug.no/contents/wd_1_06_03.xhtml

Having read this, I think it might be wise for me to declare my document as
simply HTML.  I ignorantly used XHTML only because that's what was output
originally by Photoshop on my very first foray into an all-CSS layout.

HOWEVER, the content area is going to be dynamic, and probably populated by
a lot of crap entered by the users of the content management system.
Therefore, it'll NEVER by XHTML by definition of the above resource.

In the case where users are going to be using a WYSIWYG editor for the
content part of the page, what should my page declaration be?  I'm okay with
using regular HTML declaration - I haven't studied enough of the standards
to attempt XHTML yet and at some point have to give control to those who own
the site and would do what they will with the content area - but I'm not
sure what I should put in place of my XHTML declaration...

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Niklas Kanthak]

Rehi Marc,

I think that the relative positioning of the Header and the TreeLogo 
which Gunlaug's proposed would be a better an more unproblematic solution.

Niklas

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Niklas Kanthak]

> Suggestions with this latest one are welcome -- am I closer to "a good way
> of doing it" now than I was earlier? (I hope so!)

Hello Marc,

this is far better than your very first approach, I think you are on the 
right track.


Further steps (after clearing the main layout probs):

Why not extend the accessibility and replace the -headlines with 
  ... e. g.: ABOUT: The NYS(CA) Lit(erary) 
Tree


Same to the menus (top and left):
You have a construction of

Literary Entities
  

Literary Organizations
...


which could easily be replaced (I think) by a

Head
Link
Link

construction.

Keep going.

Niklas




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Gunlaug Sørtun]

Marc Funaro wrote:
> http://nyslittreedata.advantex.net/new/default/default.htm

> I have renamed my div/ids and cleaned up a bunch of naming 
> conventions, and I'm using a little javascript called "Nifty Corners"
>  to round out the boxes where I wanted to.  (yes, I cheated... So 
> punch me later ;)

No problems with javascript-generated corners here :-)
You should however test and trim so it's looking alright if javascript
isn't supported.

> This latest version looks fine as long as there's enough content in 
> the white area in the middle, but as you can see, in Firefox, without
>  enough content, the left column and main column do not extend down 
> to the footer. However, in IE 6, they do... Strange.

I used 'min-height' and an 'IE min-height' hack in my example-CSS. And,
yes, it is an acceptable method.

I also used 'display: table' on the main container for the two columns -
which will make it expand like a table does even with a set 'height'.
IE6 doesn't understand that property, but it doesn't matter since IE6
will expand height anyway because of a bug. A bit worse with IE7, which
doesn't understand any of it either way.

Your latest addition of 'min-height' does not take the rounded corners
into account. See 'CSS suggestions' below.

> Is this a case where I need to use the technique found at 
> http://www.alistapart.com/articles/fauxcolumns/ ...?  And if so, 
> should I create an image to be applied to the BODY to fill in behind 
> everything?

That is one option - if the 'min-height' solution doesn't work properly.

> Suggestions with this latest one are welcome -- am I closer to "a 
> good way of doing it" now than I was earlier? (I hope so!)

Much closer, but you've forgotten to take care of source-code quality.

Good source-code will not necessarily make it render better/different in
any graphical browser, but it will prevent 'tag-soup' related problems
and ease maintenance.

The CSS validator can't get through to your stylesheet because of errors
in the source-code, so at least get those UPPERCASE turned into
lowercase...

...will work better - and close the link-element properly for XHTML.

Especially those  looks suspicious, as  can't be
used outside  or . You're using divs as sub-containers there,
and there shouldn't be the need for a single div inside #LeftNav, IMO.
Use proper unordered lists, and style them to look identical to what
you've got now.

Use proper  -  and  for headlines and paragraphs, and style
them to taste. That will prevent even more "divitis" and make that
source-code work even without CSS.

'Separation of content and style', that you mentioned earlier, means
that the page should deliver 100% - without a single style.
At the moment it's pretty weak without CSS applied.
Example:  looks like a  or a  to me, but not
without CSS.

-

CSS suggestions:

Add...
html {font-size: 100%;}
...to avoid the 'em font-resizing bug'[1] in IE/win'.

Move 'min-height:892px;' from #MainContent to #ContentText, so those
bottom-corners get pushed down to where they belong.

If you want IE6 to simulate 'min-height' also, then add something like...

* html #ContentText {height: 892px;}

(let me know if you want to support IE/Mac, as that last style will
disturb that browser.)

-

Comment:

Since you use an XHTML doctype, you should also see to that it is
working when served as XHTML[2]. Few "XHTML" pages on the web do, and
your isn't working either :-)
Something for another day, maybe?
After all; IE/win won't support XHTML properly for at least a year or two.


regards
Georg


[1]http://www.gunlaug.no/contents/wd_additions_13.html
[2]http://www.gunlaug.no/contents/wd_1_06_03.xhtml
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Marc Funaro]

Regarding my last post, I just found a fix that "seems" to work... I added
min-height and tweaked the two containers to remain the right height to fill
the bottom gap... But I don't know if this is "acceptable" or not.  I have
updated my online versions to use this new setting, but (anyone) let me know
if you want me to  put it back in favor of a different solution...

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Marc Funaro]

Hi Georg (and everyone!),

Using your suggestions as a reset-point, I have come up with the following:

http://nyslittreedata.advantex.net/new/default/default.htm

To be compared to the "static/broken" version:

http://nyslittreedata.advantex.net/new/base/base.htm

I have renamed my div/ids and cleaned up a bunch of naming conventions, and
I'm using a little javascript called "Nifty Corners" to round out the boxes
where I wanted to.  (yes, I cheated... So punch me later ;)

I have not re-exported my images yet, but that will come.

This latest version looks fine as long as there's enough content in the
white area in the middle, but as you can see, in Firefox, without enough
content, the left column and main column do not extend down to the footer.
However, in IE 6, they do... Strange.

This is very close to what I want... But unless I stick a single pixel image
in the "MainContent" area and force the height (a no-no, I'm sure :), I'm
still not quite there yet.  I tried adding height:100% to html and body, and
to the two columns and even their container, but then the footer stays put
and the content runs over it when the content is longer.

Is this a case where I need to use the technique found at
http://www.alistapart.com/articles/fauxcolumns/ ...?  And if so, should I
create an image to be applied to the BODY to fill in behind everything? 

Suggestions with this latest one are welcome -- am I closer to "a good way
of doing it" now than I was earlier? (I hope so!)

Thanks for your help!

Marc


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Niklas Kanthak]

Hell Marc,

here's a quick'n'dirty fix. NEVER again go for tables - keep on CSS. 
Please accept that it might not be fail-save for all browsers (not 
tested) and that again you have to work it over. Hope that it can give 
you some hints - keep in mind that I'm still learning, too.

Get TopStyle  and validate your CSS 
as well your XHTML often cause there were some in your slips of the pen 
in your code. You will learn a lot of TopStyle and its results while 
validating. You will see...

Don't use PNG for images, only GIFs or JPGs.

HTH

Niklas

First the CSS then the XHTML:

body {
margin: 0;
padding: 0;
background-color: #346667;
}


/* main page elements */
#Container_Header {
height: 117px;
}
#Container_Middle_Top {
background-color: #CDFFCC;
width: 943px;
height: 40px;
margin-left: 8px;
font-size: 0.8em;
letter-spacing: -0.05em;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 1.0em;
/* here the background-image with the rounded
corners like Container_Middle_End */
}
#Container_Middle {
background-color: #CDFFCC;
width: 943px;
margin-left: 8px;
}
#Container_Middle_End {
background-color: #CDFFCC;
width: 943px;
height: 69px;
margin-left: 8px;
/* this image has a too large left margin,
yout have to cut it on the left */
background-image: url(images/Base_29.jpg);
background-position: left top;
background-repeat: no-repeat;
}
#Container_LeftNavColumn{
width: 266px;
margin-left: 10px;
margin-top: 120px;
float: left;
}
#Container_MainContent {
background-color: #FF;
width: 600px;
margin-left: 300px;
}
#Container_MainContent_Footer {
background-color: #FF;
width: 600px;
margin-left: 300px;
}


/* header elements */
#TreeLogo {
position: absolute;
top: 0px;
left: 10px;
margin-left: 24px;
margin-right: 3px;
}
#MastheadTitle{
margin-left: 260px;
margin-bottom: 4px;
}
#NYSLitMap {
margin-left: 33px;
margin-right: -12px;
margin-bottom: 4px;
}
#NYCLitMap {
margin-bottom: 4px;
}



---

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml";>


Page Title














HOME   ·  ABOUT THE NYS 
LITERARY TREE  ·  CONTACT US  ·  ABOUT THE MAPS  · 
  SITE SEARCH


 


Navigation to go here.
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit 
Lorem ipsum dolor sit


Body content here
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero


Copyright © 2006, nyslittree.org · Website design 
by 
Genden Graphic Design LLC  · Development & Hosting by Advantex LLC











__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[David Laakso]

Marc Funaro wrote:
> I've started over with my design, and have a pretty good idea of what I want
> to do now.  I've managed to get my top area to look very much like the
> actual PSD design, and now I am stuck...
I am not good at being cooperative or subtle :-P . So you are welcome to 
take this or leave it.

To get unstuck, permanently delete the PSD design, all images related to 
same, both sets of html documents you've produced, and both related css 
files from your operating system *and* your mind.

Learning CSS is an exercise in attempting to understand the Web. Work 
with her and she'll reward you. The two column layout on this page 
 is known to work 
cross-browser. Reproduce it following the tutorial /exactly as it is/, 
without any variation whatsoever. The Web will reward you for your 
cooperation with her, and enable you to go on to fame, fortune, and 
everlasting glory. If, in the meantime, you get stuck in the tutorial, 
write the list without hesitation. And hang in there-- persistence and 
determination rule success.
> Marc
>   
Best,
~davidLaakso
PS This is a good article that is very 
helpful

-- 
http://www.dlaakso.com/gustave/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Gunlaug Sørtun]

Marc Funaro wrote:

> http://nyslittreedata.advantex.net/new/default/default.htm

> 1.  How can I get #Container_Middle, which provides the light green 
> background, to fit the height of the browser, but allow it to grow 
> longer as needed?  Same with #Container_MainContent?

You can solve it for #Container_Middle by giving html and body full
height: 100%; and rethink the positioning a bit. Not quite that easy for
#Container_MainContent.

> 2. As you can see, I've placed the horizontal line that marks the top
>  of the navigation area, but I cannot seem to move it downward, using
>  margin-top for that image.  Instead, it stays sitting across the 
> tree.

1: I deleted that line-image since it isn't needed.
2: a margin-top and a border on #Container_LeftNavColumn will do. Adjust
to taste.

> 3.  My PNG files look fine in Firefox, but not in IE.  What the heck 
> did I do wrong?

Nothing. As Erik said: IE can't handle those pngs.

> 4.  All my hard work adjusting margins on the various page elements 
> seems to be for nothing... When I view the same default page in IE, 
> it's all messed up.  How frustrating... Ready to just go back to 
> tables after feeling like I've just wasted my entire afternoon.  :(

No problem. I've wasted several minutes on it already, so if you prefer
tables then just say so ;-)

> 5.  My navigation div is before my content div.  From what I've read,
>  I assume this is bad, for accessibility reasons.  But when I move my
>  nav div to "after" my content div, the top of the #Container_Middle 
> moves out of position.  Argh!

I reversed it, just in case you wanted that body content first. Will
work either way, so no big deal.

> Anyone want to keep helping a newbie?

Sure :-)

Most of your questions are answered in this quick-sketch...

...which should give you a few ideas about how it can be done (and I'm
sorry I "ruined" your images :-) ).

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Marc Funaro]

>   Hi, I can answer your question number 4: Internet 
>   Explorer don't support transparent PNG's.

So I have to recreate all my images yet again, and this time get the
backgrounds to be the same color as what they will be sitting on top of...
Meaning that they can only be used when sitting on that particular
background?!  God, I hate browser differences... Maybe I'm just not up to
this, as my productivity has dropped to zero.  What is everyone else using
for transparent images - are you all using bigger, fatter, older, tried and
tru GIFs for everything?  JPGs?

>   And about the CSS versus table layuots. You cannot give 
>   up it, just look after some CSS tutorials, or some good 
>   book about CSS and web design.
>   You will appreciate it in future.

I was hoping for specific comments on what I've built so far in my CSS and
HTML document, as I've been reading frantically but still don't seem to have
it right.

Sorry to sound grumpy... This CSS stuff has taken me back to beginner level
and maybe I've chosen the wrong time to try this, as I really do want to get
this done and the learning curve is steeper than is expressed in the
documents I've read online.  Say what you want about tables, they have been
around long enough to "just work", quickly.  I'm not usually THIS impatient,
but every time I solve one problem, two more crop up.  :(

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Started over - new questions

[Erik Gyepes]

Hi, I can answer your question number 4: Internet Explorer don't support 
transparent PNG's.
And about the CSS versus table layuots. You cannot give up it, just look 
after some CSS tutorials, or some good book about CSS and web design.
You will appreciate it in future.

Erik

Marc Funaro wrote:
> Hi Everyone,
>
> I've started over with my design, and have a pretty good idea of what I want
> to do now.  I've managed to get my top area to look very much like the
> actual PSD design, and now I am stuck... Here are my new, (hopefully) more
> intelligent questions. =)
>
> To compare:
>
> Here is the desired layout, only with better CSS:
>
> http://nyslittreedata.advantex/new/base/base.htm
> http://nyslittreedata.advantex/new/base/base.css
>
> Here is my NEW layout, started from scratch:
>
> http://nyslittreedata.advantex.net/new/default/default.htm
> http://nyslittreedata.advantex.net/new/default/default.css
>
>
> My questions:
>
> 1.  How can I get #Container_Middle, which provides the light green
> background, to fit the height of the browser, but allow it to grow longer as
> needed?  Same with #Container_MainContent?
>
> 2. As you can see, I've placed the horizontal line that marks the top of the
> navigation area, but I cannot seem to move it downward, using margin-top for
> that image.  Instead, it stays sitting across the tree.
>
> 3.  My PNG files look fine in Firefox, but not in IE.  What the heck did I
> do wrong?
>
> 4.  All my hard work adjusting margins on the various page elements seems to
> be for nothing... When I view the same default page in IE, it's all messed
> up.  How frustrating... Ready to just go back to tables after feeling like
> I've just wasted my entire afternoon.  :(
>
> 5.  My navigation div is before my content div.  From what I've read, I
> assume this is bad, for accessibility reasons.  But when I move my nav div
> to "after" my content div, the top of the #Container_Middle moves out of
> position.  Argh!
>
> Anyone want to keep helping a newbie?
>
> Marc
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- 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
IE7b2 testing hub -- 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/