Re: [css-d] Started over - new questions
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
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
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 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 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.
http://validator.w3.org/check?uri=http%3A%2F%2Fnyslittreedata.advantex.net%2Fnew%2Fdefault%2Fdefault.htm
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...
link href=Default.css rel=stylesheet type=text/css /
...will work better - and close the link-element properly for XHTML.
Especially those li class=leaf looks suspicious, as li can't be
used outside ul or ol. 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 h1 - h5 and p 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: div id=PageTitle looks like a h1 or a h2 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
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 div-headlines with h1 h2 ... e. g.: div id=PageTitleABOUT: The NYS(CA) Lit(erary) Tree/div Same to the menus (top and left): You have a construction of div id=LeftNavHeading li class=leafLiterary Entities/li /div div id=LeftNavLink Literary Organizationsbr / ... /div which could easily be replaced (I think) by a ul liHead/li liaLink/a/li liaLink/a/li /ul 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
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
[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
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 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... !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN 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... http://www.w3.org/QA/2002/04/valid-dtd-list.html http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html 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
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... http://www.w3.org/QA/2002/04/valid-dtd-list.html http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html 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 h1 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
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... ul lih3Writers/h3/li li ul liNYS LitMap Authors/li liNYC LitMap Authors/li liNYS Native American Authors/li liLitMap Author Nomination/li liCircuit Writers/li liInterstate/International Writers/li /ul /li lih3Literary Entities/h3/li li ul and so on. Also, notice the headlines I've put in there. Example of heavily nested unordered list... http://www.gunlaug.no/contents/toc_7a.html ...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 h1 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 - why not to use PNG's?
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 - why not to use PNG's?
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?
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'); img src=imagen.png style=filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='imagen.png',sizingMethod='scale'); alt= / 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?
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');
img src=imagen.png
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:
public:component
public:attach event=onreadystatechange onevent=setAlpha() /
script language=javascript type=text/javascript
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');
}
}
/script
/public:component
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/
[css-d] Started over - new questions
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/
Re: [css-d] Started over - new questions
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/
Re: [css-d] Started over - new questions
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
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... http://www.gunlaug.no/tos/alien/td/test_3790.html ...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 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 http://www.alistapart.com/articles/negativemargins/ 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 helpfulhttp://www.alistapart.com/articles/dao/ -- 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
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 http://www.bradsoft.com/index.asp 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;
}
---
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
titlePage Title/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
/
link href=Default.css rel=stylesheet type=text/css /
/head
body
div id=Container_Header
img src=images/TreeLogo.png width=245 height=254 alt=
id=TreeLogo /
img src=images/MastheadTitle.png width=397 height=109 alt=
id=MastheadTitle /
img src=images/NYSLitMap.png width=117 height=104 alt=
id=NYSLitMap /
img src=images/NYCLitMap.png width=115 height=109 alt=
id=NYCLitMap /
/div
div id=Container_Middle_Top
div style=margin-left: 300px;HOME middot; ABOUT THE NYS
LITERARY TREE middot; CONTACT US middot; ABOUT THE MAPS middot;
SITE SEARCH/div
/div
div id=Container_Middle
div id=Container_LeftNavColumn
img src=images/LeftHairline.png width=266 height=1
alt= /br /
Navigation to go here.br /
Lorem ipsum dolor sit br /
Lorem ipsum dolor sit br /
Lorem ipsum dolor sit br /
Lorem ipsum dolor sit br /
Lorem ipsum dolor sit
/div
div id=Container_MainContent
Body content herebr /
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
Re: [css-d] Started over - new questions
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
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/
