Re: [css-d] border-collapse bug. (?)
Jim Barraud wrote: Has anyone else run into this behavior, know what the cause is, workaround, etc? Test Case: http://jimbarraud.com/lab/borderCollapseTest.html I think Ron Pringle struggled with a similar problem, see his wiki page http://css-discuss.incutio.com/?page=StylingTableCaptions Maybe there are some ideas how to fix it in your case. Ingo -- http://www.satzansatz.de/css.html __ 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] Filling remaining available vertical space
Please see this: http://dev.r8dhex.net/test/ This is using tables, but it's there to illustrate what I'm aiming for. Viewing this in firefox, there are 3 sections, header, menu, and main. The heights for header is 85px, menu is 25px, and main should be whatever is left. I have an alternate scenario, using DIVs. It's commented out on the above-mentioned page. Using TABLEs: On IE6 and IE7-Beta2, setting height:100% on main's TR sets it to 100% of the viewport height, causing the page to become 100% + 110px. If I remove the DOCTYPE, it works properly in FF IE 5.5/6/7. But, I want to keep it in standards-mode. Using DIVs: Setting height:100% on the main DIV, sets it to 100% of the viewport height, on all browsers. Which I guess is correct, but it's not what I'm after. So, how do I get the effect of making main fill up the remaining available space, but still using standards-mode (if it is even possible)? Thanks Jonathan __ 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] Filling remaining available vertical space
I've added another, more complete example of what I want to do: http://dev.r8dhex.net/test/index2.htm This page works properly in IE5.5/6/7 and Firefox, but uses tables for layout and is not rendered in standards-mode. The page layout maintains its shape when the window is resized. Is it possible replicate this layout using standards compliant code? __ 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] A Fairly Complex Design Complete, wishing to implement using all CSS
Sorry, realized that after I posted, and just got done creating the smallest JPG I could: http://nyslittreedata.advantex.net/new/base.jpg -Original Message- From: Phil Baines [mailto:[EMAIL PROTECTED] Sent: Thursday, May 18, 2006 6:24 AM To: [EMAIL PROTECTED] Subject: RE: [css-d] A Fairly Complex Design Complete,wishing to implement using all CSS Hi Marc, It might be a good idea to post a JPEG of how the design SHOULD look exactly. From what I can see I would imagine this will be pretty easy to fix, and still keep it in CSS, but I would need to see a JPEG to avoid any assumptions on how it is supposed to look. From first impressions I would say that it seems like you have chopped up your images far too much. Remember it is always best to use as small amount of images as possible, even if they are larger. It takes longer to download many small images than one larger image of the same combined size. It is also making you're XHTML more complicated than it needs to be for the sake of the presentation. Let's see that JPEG and see what we can do?! Best regards, Phil Netring media and technology website: www.netring.co.uk telephone: 01239 711 471 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Marc Funaro Sent: 18 May 2006 11:12 To: css-d@lists.css-discuss.org Subject: Re: [css-d] A Fairly Complex Design Complete,wishing to implement using all CSS Hi Again Everyone, 1. My apologies for mentioning money... it won't happen again. And thank you all for being here for me, at no charge!! 2. Here is the layout html file and css. I've purposely broken the layout so it can be clear where the template needs to dynamically grow/shrink. The design is meant to fit on a 1024x768 resolution, and this specification can't be changed. I suppose there are actually TWO columns that need to have dynamic height - the broken content area, and the left navigation. This output is the direct result of simply slicing up the template that I have, using Adobe ImageReady. I've modified the CSS slightly, adding a couple items at the top and commenting out lines that create the brokenness of it all. I originally had the content area scrolling using overflow:auto, but after thinking about it, that's just not going to work either... it's a public site and having two vertical scrollbars was just too much. As usual, also trying to avoid a horizontal scrollbar on anything 1024x768 or larger. Sample Page: http://nyslittreedata.advantex.net/new/base.htm CSS for Sample Page: http://nyslittreedata.advantex.net/new/base.css Again, thanks for your help everyone, and my apologies for jumping right in and breaking the rules with my very first post. Marc _ From: Ian Piper [mailto:[EMAIL PROTECTED] Sent: Thursday, May 18, 2006 4:30 AM To: [EMAIL PROTECTED] Subject: Re: [css-d] A Fairly Complex Design Complete, wishing to implement using all CSS Hi Marc, I am comparatively new to using this list. I am sure you will find excellent advice here (I always have) but you need to know the etiquette! I have been slapped by the guardians of the list a couple of times. Anyway, your best bet for getting help (and if I can help I will do so) is to put up a url. This will let the gurus see a precise example of what is going on and to see both your html and your css. A jpg of the layout won't be enough. My main advice is to persevere with the standards approach. I used to waste incredible amounts of time kludging table-based layouts and *still* had problems from one browser to another. Using standards and css I now get much more predictable behaviour between browsers and I get clean easy to read code into the bargain. One final word: the people on this list won't be attracted by a $100 incentive. These people are the elite of web designers - some of them have literally written the book on the subject - so they are not doing this for money. Offering cash will just irritate them. Anyway, get that page up on the web and let's see if we can help!
Re: [css-d] A Fairly Complex Design Complete, wishing to implement using all CSS
Hi Marc, Your's is a pretty simple layout to achieve using CSS. Since you don't have a specific question, it'll be hard to start explaining. However, as always, start with good clean markup and don't bother about the CSS yet. Make sure your site is readable without any of the CSS. This means you'll have to decide on the document structure, get your headings and lists right, and stuff like that. Once that is done, you can start with the CSS. I usually go one step at a time especially if the layouts are complex, and keep checking how it looks in browser(s). Since you are new to CSS, and if you don't already know, may I also recommend that you should design your CSS for Firefox (or Netscape, or any other Mozilla flavor), then tweak it for IE - not the other way round - to ensure that you don't pull your hair over browser compatibility at a later stage. On 5/18/06, Marc Funaro [EMAIL PROTECTED] wrote: Hi Again Everyone, 1. My apologies for mentioning money... it won't happen again. And thank you all for being here for me, at no charge!! 2. Here is the layout html file and css. I've purposely broken the layout so it can be clear where the template needs to dynamically grow/shrink. The design is meant to fit on a 1024x768 resolution, and this specification can't be changed. I suppose there are actually TWO columns that need to have dynamic height - the broken content area, and the left navigation. This output is the direct result of simply slicing up the template that I have, using Adobe ImageReady. I've modified the CSS slightly, adding a couple items at the top and commenting out lines that create the brokenness of it all. I originally had the content area scrolling using overflow:auto, but after thinking about it, that's just not going to work either... it's a public site and having two vertical scrollbars was just too much. As usual, also trying to avoid a horizontal scrollbar on anything 1024x768 or larger. Sample Page: http://nyslittreedata.advantex.net/new/base.htm CSS for Sample Page: http://nyslittreedata.advantex.net/new/base.css Again, thanks for your help everyone, and my apologies for jumping right in and breaking the rules with my very first post. Marc _ From: Ian Piper [mailto:[EMAIL PROTECTED] Sent: Thursday, May 18, 2006 4:30 AM To: [EMAIL PROTECTED] Subject: Re: [css-d] A Fairly Complex Design Complete, wishing to implement using all CSS Hi Marc, I am comparatively new to using this list. I am sure you will find excellent advice here (I always have) but you need to know the etiquette! I have been slapped by the guardians of the list a couple of times. Anyway, your best bet for getting help (and if I can help I will do so) is to put up a url. This will let the gurus see a precise example of what is going on and to see both your html and your css. A jpg of the layout won't be enough. My main advice is to persevere with the standards approach. I used to waste incredible amounts of time kludging table-based layouts and *still* had problems from one browser to another. Using standards and css I now get much more predictable behaviour between browsers and I get clean easy to read code into the bargain. One final word: the people on this list won't be attracted by a $100 incentive. These people are the elite of web designers - some of them have literally written the book on the subject - so they are not doing this for money. Offering cash will just irritate them. Anyway, get that page up on the web and let's see if we can help! Regards, Ian. -- Dr Ian M Piper [EMAIL PROTECTED] skype: ianmpiper -- Where is the wisdom we have lost in knowledge? Where is the knowledge we have lost in information? On 17 May 2006, at 10:35 pm, Marc Funaro wrote: Hi Everyone, We just received a final design for a new website, in Photoshop format. It looks good and meets the need... And it is fully approved by the client. Now, I could do what I've always done -- slice it up using Adobe ImageReady and output it as HTML/Tables. But I recently did an output using CSS instead, and JUST as I've always wanted, I ended up with a very clean separation of content from layout using absolute positioning. However, the main content area is of dynamic length, and I ran into trouble when it was too long - it overran the footer, and no amount of CSS experimentation would fix it. So, I am ready to start over and reslice the template... But I'd really like the guidance of a CSS expert to help me slice this template up properly so that it does what I want, but in CSS. The main problem is, I only have about $100 left in the budget to get a guru's assistance. This was a fixed-bid project for a non-profit client. That amount is generally insulting to experts, but I'm wondering if perhaps for that amount, someone here would be willing to assist off-list, and just point me in the right direction using the tools that I have
Re: [css-d] Problem DIV footer in IE
Luca Pellanda | AS wrote:
can someone help me to understand why footer div in this page: can
not show the text, while in Firefox I see correctly?
http://lnx.fluiddesignlab.com/fresco/it/lista_news.html
IE can by default *not* paint content outside its container -
regardless of how many 'overflow: visible' we add. It's one of IE/win's
many bugs and shortcomings.
Adding...
#footer {position: relative;}
...will fix that IE-bug, but lead to #supporto being positioned relative
to #footer.
To make #supporto line up correctly again, change its margins like so...
#supporto {margin: 0px -50px -20px 0px;}
...and it will render the same across browser-land.
To your second question: I have no idea.
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] A Fairly Complex Design Complete, wishing to implement using all CSS
Thank you Rakesh, My specific question revolves around dynamic-height columns, I believe, but starts with should I start over with the slicing, and if so, what should I do different? Firefox is a definite here. =) Hi Marc, Your's is a pretty simple layout to achieve using CSS. Since you don't have a specific question, it'll be hard to start explaining. However, as always, start with good clean markup and don't bother about the CSS yet. Make sure your site is readable without any of the CSS. This means you'll have to decide on the document structure, get your headings and lists right, and stuff like that. Once that is done, you can start with the CSS. I usually go one step at a time especially if the layouts are complex, and keep checking how it looks in browser(s). Since you are new to CSS, and if you don't already know, may I also recommend that you should design your CSS for Firefox (or Netscape, or any other Mozilla flavor), then tweak it for IE - not the other way round - to ensure that you don't pull your hair over browser compatibility at a later stage. __ 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] CSS filtering, dithered.com is no more
For those of you who were unaware, Dithered.com had a great set of methods for filtering css for different browsers. The author had researched all css filtering methods up to 2004 and compiled a large table showing which methods work on which browsers. But it has just disappeared. Having got over the shock, take a look at http://www.communis.co.uk/dithered/ Phew. A partial mirror. It's sadly not all there as of the writing of this email (WYSIWYG, and the 'update table' thing won't do anything I'm afraid) but it's a whole lot better than nothing! Fingers crossed the domain may be renewed and the whole thing will return to us one day... however in the meantime, over the next few days we will put some time into tidying up the code (getting rid of broken links, casting non-validating hacks into the outer darkness) adding on newer browsers (we have Firefox 1.5, Opera 8.5, Blazer and IE7 beta already tested and ready to be added), and if anyone fancies re-testing some of the older browsers and sending us the results that would be great too. Browsers we have got in the filters list: All Moz 1.6 All Moz 1.2-1.5 All Moz 1.0-1.1 Win IE 6.0 Win IE 5.5 Win IE 5.0 Win IE 4.0 Win NS 4.05 Win Op 7.5 Win Op 7.2 Win Op 7.0 Win Op 6.0 OSX IE 5.2 OSX Op 6.0 OSX Saf 1.2 OSX Saf 1.1 OSX Saf 1.0 Mac IE 5.1 Mac IE 5.0 Mac NS 4.05 Mac Op 6.0 Unix Kon 3.0 Browsers we have tested and will be adding shortly: IE7 Beta Windows Opera 8.5 Mac OSX Firefox 1.5 Windows Firefox 1.5 Palm Blazer Browsers we need a bit of help with are: All platforms Mozilla 0.6-0.8 All platforms Mozilla 0.6-0.9 Windows Opera 3.5 Windows Opera 4.0 Windows Opera 5.0 Mac OSX iCab 2.5 Mac OSX MSN Mac OSX OmniWeb 4.1 - 4.2 Mac OSX OmniWeb 4.0 Mac OSX Opera 5.0 Mac Classic IE 4.5 Mac Classic IE 4.0 Mac Classic NS 4.00 - 4.04 Mac Classic Opera 5.0 Unix Konqueror 2.2 Unix Konqueror 2.0 If you have any of these last set and are willing to volunteer half an hour or so to run through the tests, please drop me a line direct. Hope you find this of some help. Liam http://www.communis.co.uk __ 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] No Scroll in IE
Hi All, For some reason I can't fathom, this site I'm working on doesn't have a browser scrollbar in IE. Any help is greatly appreciated. HTML: http://www.chinainmyheart.com/photos.html CSS: http://www.chinainmyheart.com/styles/style.css Regards, Ryan McGreal __ 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] A Fairly Complex Design Complete, wishing to implement using all CSS
Marc Funaro wrote: Sorry, realized that after I posted, and just got done creating the smallest JPG I could: http://nyslittreedata.advantex.net/new/base.jpg http://nyslittreedata.advantex.net/new/base.htm That's a pretty ordinary 'fixed-width 2-column layout with header and footer', well suited for floats and negative margins... http://www.alistapart.com/articles/negativemargins/ No need for that exact layout-method, but it is one of the most robust methods around and almost tailor-made to your design. Height or amount of content is not a problem. Container-height will adjust to content by simply styling them to do so. That's part of the 'negative margin' method, btw. The header is the most tricky part, I think, but not at all difficult to create. Four images floated left inside one div#header, and lined up / positioned with margins on each image. No need for divs around images - except maybe for the leftmost one for cross-browser reliable result. Leftmost image in header should overlap the left column, which is easiest done by giving it a negative margin-bottom, and layering it higher (with position: relative) than the following div#main-container. Pushing the left column down by a 'padding-top' makes the illusion perfect. Never mind cutting images to exact dimensions and putting them in divs. The 'negative margin' method allows for pixel-perfect positioning and dimensioning/overlapping as long as you're dealing with images. Using paragraphs for text and lists for navigation, will give you plenty of elements to style without adding a lot of divs. In short: avoid divitis. 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/
[css-d] Site Check please, www.1850.co.uk
Hello, I am in the process of handing over a website for an antiques company and so far I have only been able to test it under FF 1.5, IE6win, and Opera 8+. These are all fine i think but i would really appreciate it if anyone could have a look on mac browsers and earlier IE versions. The site does have some blank pages where there is a category but no products as yet so bear with it, all I'm concerned about is the layout breaking or any wierdnesses in any other browsers. http://www.1850.co.uk/ Thanks in advance Rob __ 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] A Fairly Complex Design Complete, wishing to implement using all CSS
should I start over with the slicing, and if so, what should I do different? Umm, sorry for saying that Marc, but yes, you should do it again. What you sent is just a bunch of positioned sliced pieces of images. It's merely table based layout, made of absolutely positioned pieces like #Table_01, #Base-01_, ..., #Base-28_, #Right_Spacer etc. ... This is not the way to do it, I'm afraid you should return back to literature to get a bigger overview of standards and appropriate markup. -- Jan Brasna :: www.alphanumeric.cz | www.janbrasna.com | www.wdnews.net __ 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] A Fairly Complex Design Complete, wishing to implement using all CSS
That's a pretty ordinary 'fixed-width 2-column layout with header and footer', well suited for floats and negative margins... http://www.alistapart.com/articles/negativemargins/ No need for that exact layout-method, but it is one of the most robust methods around and almost tailor-made to your design. What about the rounded corners that make up the what and light green areas? Do I still need to use images to create that effect? I'm really not sure where to start with this Photoshop file... I just don't know the process. It sounds like I need to export practically each layer as a separate image, and then place each by hand Is this correct? Height or amount of content is not a problem. Container-height will adjust to content by simply styling them to do so. That's part of the 'negative margin' method, btw. That sounds like exactly what I need, for sure. The header is the most tricky part, I think, but not at all difficult to create. Four images floated left inside one div#header, and lined up / positioned with margins on each image. No need for divs around images - except maybe for the leftmost one for cross-browser reliable result. And for the background, simply set the color of the entire background of the page to the dark green? Leftmost image in header should overlap the left column, which is easiest done by giving it a negative margin-bottom, and layering it higher (with position: relative) than the following div#main-container. Pushing the left column down by a 'padding-top' makes the illusion perfect. Is this all done by hand, or is there such a thing as a drag and drop type of CSS editor that would allow me to place images in a space and work with them visually? Not wanting to cut corners, just work most efficiently if there are better tools out there for me than TopStyle or StyleMaster... Never mind cutting images to exact dimensions and putting them in divs. The 'negative margin' method allows for pixel-perfect positioning and dimensioning/overlapping as long as you're dealing with images. Using paragraphs for text and lists for navigation, will give you plenty of elements to style without adding a lot of divs. In short: avoid divitis. Again, I understand this in theory... I have read a great deal, but I think my biggest issue at the moment is where to start - if a direct export of the entire template from Photoshop is not the way to go, or if there's not an easier way to split out each layer in PS, then what are the recommended next steps, starting with just a .psd file? __ 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] CSS filtering, dithered.com is no more
Dated, however better than nothing: http://web.archive.org/web/20050305040022/http://www.dithered.com/css_filters/css_only/ -- Jan Brasna :: www.alphanumeric.cz | www.janbrasna.com | www.wdnews.net __ 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] No Scroll in IE
For some reason I can't fathom, this site I'm working on doesn't have a browser scrollbar in IE. Any help is greatly appreciated. ...which version of IE are you viewing in, I get a scrollbar in IE6 __ 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/ -- 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] No Scroll in IE
For some reason I can't fathom, this site I'm working on doesn't have a browser scrollbar in IE. Any help is greatly appreciated. Haven;t got much time, but why do you want that scroll bar next to the photos anyway? Try adjusting the height of #main to 560px and then adjust the top of #bottom so it fits. Then I believe that ugle scrollbar will vanish. __ 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/ -- 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] Site Check please, www.1850.co.uk
Robert O'Rourke wrote:
[...I would really
appreciate it if anyone could have a look on mac browsers and earlier IE
versions.
http://www.1850.co.uk/
Rob
The text-links for 'site map,' and 'skip nav' only appear at extreme
font re-sizing; and, since they are white on white, the are only
readable when they break over the blue.
There is one minor markup error to correct on the one page I checked.
There are 50 screen captures
here:http://www.browsercam.com/public.aspx?proj_id=253101
(linux/mac/win2000/ie7).
I did not have to wait for them to load, so no idea of the outcome...
Some subjective thoughts:
body {
font-size: /*85%*/100%;bump the start point to default-- see your
page at 1400
color: /*#039*/#222 /*or #33 or a sienna*/; there is absolutely
nothing '1850 antique' about that blue sidebar; or, blue content-text,
with red accents on white.
}
and reset the nav to 0.95 or 0.9em
A measure for the content text of nearly 1000px at 1280 is very tough to
read at 15% smaller than default.
Regards,
~davidLaakso
--
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] Site Check please, www.1850.co.uk
On 18/05/06, David Laakso [EMAIL PROTECTED] wrote: Robert O'Rourke wrote: [...I would really appreciate it if anyone could have a look on mac browsers and earlier IE versions. http://www.1850.co.uk/ Rob FYI here is a very useful URL: http://www.danvine.com/icapture/ ...submit your URL and you will be given a screenshot of how your site looks in Safari. I have placed your URL in the queue (approx 28 mins wait). Very cool. -- 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] border-collapse bug. (?)
On 5/18/06, Ingo Chao [EMAIL PROTECTED] wrote: I think Ron Pringle struggled with a similar problem, see his wiki page http://css-discuss.incutio.com/?page=StylingTableCaptions Maybe there are some ideas how to fix it in your case. Ingo This is great. Thanks for the link. It helps answer some questions I had about the inconsistent behavior of captions across browsers as well. __ 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] No Scroll in IE
which version of IE are you viewing in, I get a scrollbar in IE6 Thanks for replying. I'm using IE6 and I've tested it on WinXP and Win2K. why do you want that scroll bar next to the photos anyway? To clarify: I mean the main browser scrollbar doesn't appear, so you can't scroll the page as a whole. I'm aware of the content scrollbar on the photos page, and still need to adjust that. Regards, Ryan __ 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] CSS onclick event?
Wow - a lot of you responded :) Thanks so much! Let me see what I can say about this... 1) I'm trying to avoid javascript solutions at all costs - I'd love for this to work in CSS-only. I've been playing with the idea for a lng time and I've partially gotten it to work (got it to work *great* in Firefox, but IE (of course!) and ::gasp:: Opera aren't playing nice) so I have more playtime on it to try and figure it out. 2) I've made tabbed sites before using different classes for things, so when the page switches the tab will switch as well. However, what I'm trying to do here is make it *all on one page*. No loading of new documents as you click through the tabs - just one page. 3) I did try the a:focus thing, and it didn't work, either. Now, since I've been playing with this, I can explain better what's going on, I think. I *did* look at Stu Nicholl's stuff (as well as that pmob sute) to get some ideas. They are *close* to what I want, but no cigar. I think Stu was the one that did the closest version of what I wanted: a smaller container with nav/tabbed links on the side, and content on the right. The container is set with overflow:hidden so the *lng* page of content looks like one short page (as anything set below it is invisible). The nav links basically lead to anchored links within the document. So when you click on the 2nd link, the anchor tag pulls up the 2nd area of content into the viewable area of the window - making it *appear* that the end user has switched pages, but you're really still on the same page. What I did to keep the tabbed area the same color once clicked was to place a colored bar *over* the link in question with some positioning - so it gives the illusion of tabs with sticky colors. (Hope that makes sense!) My problems have been this: Firefox requires the use of position:fixed to keep the menu in the same place on the page (if I don't use it, then as the links jump through the content, the menu scrolls up and disappears). *But* this screws things up in IE...*and* in Opera 7 8. I've found a way to make it work in Opera - but I've also discovered that my solution renders the links useless - I guess there's a bug in Opera9 that renders anchored links within a document useless when they are placed in a container with overflow:hidden. I'm starting to wonder if I could hide this fact by making it overflow:auto (which works, but adds a scrollbar) and somehow hiding the scrollbar with z-indexing or something. But I'm thinking that's a bit too complicated :) Anyway - this is just a big experiment for me - I'm only playing around, but I do love challenges. If you all would like to see what I've done so far: http://www.foolishvisions.com/test/tabbed/index6.html This does *exactly* what I want it to do in Firefox. Now, if you view that in IE6 and/or Opera (I'm gradually working my way backwards and eventually to the Mac) you'll see what I mean about the sidebar menu shifting. Just keep in mind (if you *do* come up with suggestions for me, which would be muchly appreciated!) that this is me just playing around...nothing more :) But thanks for your assistance so far! I do appreciate it! ~Shelly __ 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] No Scroll in IE
Ryan McGreal wrote:
Hi All,
For some reason I can't fathom, this site I'm working on doesn't have a
browser scrollbar in IE. Any help is greatly appreciated.
HTML: http://www.chinainmyheart.com/photos.html
CSS: http://www.chinainmyheart.com/styles/style.css
Regards,
Ryan McGreal
Ryan, you will not get a scroll bar on the rail or the page in any
browser at 1280 by 1024 because the page is not deep enough to draw one.
You'll see the page scroll bar in IE at 1024 at text-size 'largest,.'
and I am not sure why it does not show at 'medium.' One thing is that
there is a re-sizing bug in IE, that causes the fonts to go a little
goofy at anything other than text-size 'medium' when font-size in em is
declared on the body. Leaving your CSS as is, and adding this will
correct that:
that:
html { font-size: 100%; }
Your text is nice and large, so not much problem with zoom. But,
nevertheless it is sometimes a good idea to account for extreme zoom,
even though most users may not employ it. Because you've set heights on
the containers, structured the page with absolute positioning-- not even
the scroll box will help in extreme situations.
Your page could be much simpler, and more usable, by using a simple
float layout and abandoning the absolute positioning, heights, and
scroll box-- in other words, you could just let the content flow in its
natural and unrestrained order. But that's your call, not mine.
Perhaps someone else on the list can give you a specific answer to your
question.
Regards,
~davidLaakso
--
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/
[css-d] Best practices - images, ie7
Using CSS exclusively was new to me a few months ago. I read some books, and lots of online articles and have been using it ever since. I am confused by the use of images and slices with CSS. I would like suggestions of good articles on this topic. Like how to get a nice background behind text with an opacity that lets the body background show through, pretty rounded corners, and stuff like that. FYI, I am a recovering Flash addict. L Lastly, I am using IE7 beta 2. If anyone wants their page tested on IE7, just let me know. Laura webmonkey.wordpress.com __ 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] border-collapse bug. (?)
Jim wrote: On 5/18/06, Ingo Chao [EMAIL PROTECTED] wrote: I think Ron Pringle struggled with a similar problem, see his wiki page http://css-discuss.incutio.com/?page=StylingTableCaptions Maybe there are some ideas how to fix it in your case. Ingo This is great. Thanks for the link. It helps answer some questions I had about the inconsistent behavior of captions across browsers as well. Just a quick note to say that my example page is about a year out of date, so it doesn't cover newer browsers like Firefox 1.5, IE7, etc. But hopefully the tests and examples give you a fairly good idea about what's going on. If anyone has data to add to my examples for newer browsers, or additional data that I may have missed, please feel free to email me off-list and I will update the example. I've also done a simple test with aligning content within table data cells on values such as periods or dollar signs, and border spacing differences. Not fleshed out in the least, but perhaps helpful nonetheless. http://www.aurora-il.org/tbl_test.htm Regards, Ron __ 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] Site Check please, www.1850.co.uk
Thanks a bundle to everyone =] The screen shots provided by David Laasko all look good to me, there's a bit of a width issue on the product boxes in IE5.0 but it's still set out like a list so i'm going to treat that as 'acceptable' for now. I can't believe i forgot about those site map and content links! the site map feature is disabled on the cms im working with...that is until i err, add it I think i'm just going to hide them from all browsers that use css and change site-map to a skip-to-navigation link for the time being. I appreciate the design advice too David, I agree it doesn't look antiquey however the client looked at an initial design i made that featured deep red colours in the layout that he didn't like. As it was taking longer than it should have we eventually decided it should look like his existing business card... and there it is =] Cheers for link to iCapture too Dave, very useful. Thanks again to everyone. Stayed tuned for more 'Site Check please' Rob __ 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] No Scroll in IE
David, Thank you for your help. I followed your suggestion and replaced the positioned layout with a simple float for the menu and main content area, with the footer clearing below. It works great now. Regards, Ryan __ 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] Site Check please, www.1850.co.uk
Andree Hollander wrote: Here's a screen shot from Mac OS X 10.4, Netscape 7.2. Overall it looks very nice, but the last item on the left (Home Page Featured Items) has too little room. And I think it is strange that the tooltips on the links have the same text at the items themselves. Make them give an extra explanation. Thanks Andree, The normal font for it is Georgia which doesn't stretch right to the end of the link box, but i think i'm going to get rid of the bold styling on those links to give them more room. Unfortunately it's in the hands of my client as to how long the category names are... I just have to limit any possible damage to my original template. Thanks again for all your help. __ 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] Pixel gap in lists
I'm trying to use nested lists to create a tree-like navigation area.
Everything's OK in Firefox. In IE 6, there's a problem. Take a look at the
following page:
http://home.comcast.net/~rob.freundlich/css/tree/index.html
Leaf items at the second level (e.g. Item 2.1, Item 2.2, etc) have a pixel
gap above them. I don't want the gap, as I will be putting background
images into the appropriate places to give it the appearance of a tree with
lines and pluses and minuses and so on - the pixel gap breaks up the
continuity of the lines.
Initially, the problem was there on *all* items. This looked a lot like the
infamous 3-pixel gap, so I added this:
!--[if IE]
style
li
{
height: 1px;
}
/style
![endif]--
That solved it for the deep nodes (e.g. Item 2.4.1, Item 2.4.2, etc), but
the problem persists in the second-level nodes.
Anyone have advice or solutions?
Rob Freundlich
Males are biologically driven to go out and hunt giraffes. - Newt Gingrich
Some folks you don't have to satirize, you just quote 'em. - Tom Paxton
__
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] A Fairly Complex Design Complete, wishing to implement using all CSS
Marc Funaro wrote: What about the rounded corners that make up the what and light green areas? Do I still need to use images to create that effect? I'm really not sure where to start with this Photoshop file... I just don't know the process. It sounds like I need to export practically each layer as a separate image, and then place each by hand Is this correct? Focus on each, main, container, and give it the top rounded-corner part as a non-repeated background-image. Use the proper background-color on the container, and add a div (or other block-element) at the bottom to carry the bottom rounded-corner part. Repeat process/source-code for the white 'Body Content' column. And for the background, simply set the color of the entire background of the page to the dark green? In short: yes. Is this all done by hand, or is there such a thing as a drag and drop type of CSS editor that would allow me to place images in a space and work with them visually? Not wanting to cut corners, just work most efficiently if there are better tools out there for me than TopStyle or StyleMaster... No suitable html/css drag and drop editor capable of doing a good job and provide compact and efficient source-code/CSS yet - AFAIK. I arrange my source-code on 'hand coding' level - using Opera in 'accessibility - text browser' style mode, and rarely ever bother to look at it in a graphical browser until the source-code is around 90% finished. I use Notepad for CSS - *because* it doesn't disturb my creativity by doing anything on its own, and watch things take shape directly in the full-blown browser of choice - which to me is Opera 9beta at the moment. Firefox, Safari and IE6 are also up on screens, in case I want a preview in any of those. [... ]In short: avoid divitis. Again, I understand this in theory... I have read a great deal, but I think my biggest issue at the moment is where to start - if a direct export of the entire template from Photoshop is not the way to go, or if there's not an easier way to split out each layer in PS, then what are the recommended next steps, starting with just a .psd file? Skip all design stages, as you already have a design. Keep that design in your head, and move on. Choose a Doctype - preferably a Strict one, and start sketching the layout as well sequenced source-code. The usual html basics, followed by... 1: Header container-div [ include all images, but don't style any of them yet. ] 2: Main container-div [ 3: Body Content container-div (fill in some paragraphs here) 4: Added stuff container-div (the left-side one. Fill in some stuff here - preferably in an unordered list since that's what the present content seems to fit best into.) ] 5: Footer container-div (which can also carry the rounded-corner part of Main Container). Those 5 container-divs can then be roughly dimensioned, floated, cleared where necessary, and trimmed into positions - using in-flow and 'negative margins' methods. That's the basics, but it will look pretty rough to begin with :-) A few more elements must be added for styling, but leave them out until you run out of style-options with the basic ones. Never mind the details... for now. 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/
[css-d] top nav sliding right in IE
I'm trying to figure out how to get the top navigation to display correctly in IE. It tests fine in Firefox and Safari. And actually, it came up okay in IE Mac. But on the client's office PCs, the nav slides to the right. The site is http://hospicevalley.org/ the CSS is http://hospicevalley.org/css/basic.css I have used danvine.com/iecapture before to test on PCs, but I think his site is down right now. I've been in the queue since yesterday afternoon! Thanks in advance, Rose __ 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] Frames Without Frames Problem
I have been agonizing over a site lately that uses CSS to provide frames like behavior. It looks great in IE6, Safari and FireFox and comes up fine in Opera. Even after reading the article http://www.fu2k.org/alex/css/frames I still cannot get it to work in IE5 on my Mac. I am using IE 5.2.3 on OS X 10.3.9. The site is http://onehourheatandair.com . The site initially loads fine in IE5 on the Mac but then when you scroll it doesn't scroll properly - actually not at all. When I change line 239 to have a set height, like height: 400px; it begins to scroll fine. Unfortunately this won't work because the height needs to be set according to the current user's window height. I have tried setting bottom: 0px; and tweaking the margins with no visible change. Maybe I am not looking in the right place, maybe the #content block is not the cause (or where the fix will be). Of course I am at a loss. Any help would be deeply appreciated. Also, FireFox has a developer's toolbar that is a wonderful way to troubleshoot CSS problems among other things. Is there something like it for IE? Trying to figure out what Internet Exploder is doing is a nightmare. Thanks, Aaron __ 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] To style a specific image?
Anyone know of a way to target a specific image on a page with css? For
example;
#contentHmpg img images/home/hmpgLogo.gif {display: none;}
images/home/hmpgLogo.gif includes the path to the file hmpgLogo.gif.
Of course this doesn¹t work, but you get the idea.
__
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] Filling remaining available vertical space
On 5/18/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: The page layout maintains its shape when the window is resized. Is it possible replicate this layout using standards compliant code? This is a pretty straightforward two column layout with header, navigation and a footer. There are lots of ways to do this in css. You might start here: http://www.positioniseverything.net/articles/onetruelayout/ Or just google on css two column layout for some useful links. -- Ed Seedhouse __ 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] To style a specific image?
Tony asked:
Anyone know of a way to target a specific image on a page
with css? For
example;
#contentHmpg img images/home/hmpgLogo.gif {display: none;}
images/home/hmpgLogo.gif includes the path to the file hmpgLogo.gif.
Of course this doesn¹t work, but you get the idea.
Tony-
#contentHmpg img {display:none} should work, unless you have more than one
image in whatever element that has that ID. If you have more than one image,
you would need to give the image you wish to target a class:
#contentHmpg img.classname {display:none}
Regards,
Ron
__
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] To style a specific image?
Tony Watkins wrote:
Anyone know of a way to target a specific image on a page with css? For
example;
Have you considered using attribute selector?
http://www.w3.org/TR/CSS21/selector.html#attribute-selectors
like this: img[src=your image url here] {display: none;}
Just tried it on one of my sites and it seems to work fine in FF. I'm
not sure if IE supports this.
--
Joel Goldstick
www.columbuswebmakers.com
__
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] How do I receive all posts?
Sorry, new subscriber here. Should I be receiving all posts to the newsgroup? I emailed a question a short while ago and have received three responses (thanks), but should I also be receiving everyone else¹s topics and posts as well? __ 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] Frames Without Frames Problem
A couple of thoughts. IE for Mac has been discontinued and is no longer available for download on the MS site. So, one school of thought would be to ignore the problem. Another would be, depending on your programming language, to put a switch in there that detects IE Mac and then displays the height: 400px only for IE Mac users. -- Kevin Murphy Webmaster: Information and Marketing Services Western Nevada Community College www.wncc.edu 775-445-3326 On May 18, 2006, at 9:45 AM, Aaron Bono wrote: I have been agonizing over a site lately that uses CSS to provide frames like behavior. It looks great in IE6, Safari and FireFox and comes up fine in Opera. Even after reading the article http://www.fu2k.org/alex/css/frames I still cannot get it to work in IE5 on my Mac. I am using IE 5.2.3 on OS X 10.3.9. The site is http://onehourheatandair.com . The site initially loads fine in IE5 on the Mac but then when you scroll it doesn't scroll properly - actually not at all. When I change line 239 to have a set height, like height: 400px; it begins to scroll fine. Unfortunately this won't work because the height needs to be set according to the current user's window height. I have tried setting bottom: 0px; and tweaking the margins with no visible change. Maybe I am not looking in the right place, maybe the #content block is not the cause (or where the fix will be). Of course I am at a loss. Any help would be deeply appreciated. Also, FireFox has a developer's toolbar that is a wonderful way to troubleshoot CSS problems among other things. Is there something like it for IE? Trying to figure out what Internet Exploder is doing is a nightmare. Thanks, Aaron __ 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] Problem DIV footer in IE
Hi Georg thank you very much for your help, I try to resolve the
not-paint IE bug whith other trick. I see the result here:
http://lnx.fluiddesignlab.com/fresco/it/lista_news.html
How can I expand #footer @ 100% of #content? In FF now it's ok but in
IE there are some problem. Can you help me please? ...or there is
some hacks?
Just reloaded your page... and it looks like you have solved the problem
well enough on your own. That's fine :-)
Generally: the kind of problems you have experienced is related to
IE/win's weak performance when 'position: absolute' is used to lay out
main parts of web pages. IE's calculations are often messed up by its
proprietary 'hasLayout'[1] concept.
Also: IE/win can't absolute position elements to all four sides at the
same time, like other browsers can. IE/win will pick out two values for
positioning, and the rest will rely on dimensions and IE's own, messy,
calculations.
I personally make as little use of absolute positioning as I possibly
can, and do instead make full use of 'in-flow' and 'floats' for the main
parts and /maybe/ some 'position: absolute' for minor details.
---
Note that these values on a relative positioned element, are the same as
'default' - no values given...
#footer {
right: 0px !important;
left: 0px;
top: 0px;
bottom: 0px;
}
...so they won't achieve anything. They won't hurt either, so no big
deal :-)
Keep on studying CSS layout - it is fun :-)
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
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/
[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/
[css-d] Elastic layouts: want to confirm
I'm a little confused about my direction. I know that with elastic layouts you set the element widths using ems. What about margins , would those also be in ems ? TIA Mark __ 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] Elastic layouts: want to confirm
On 5/18/06, Mark Fellowes [EMAIL PROTECTED] wrote: I know that with elastic layouts you set the element widths using ems. What about margins , would those also be in ems ? That or percentages, whichever looks best to you at various resolutions. Ed Seedhouse __ 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] Fwd: Frames Without Frames Problem
I am going to try and turn off the fixed positioning for IE5 so at least the
IE5 users can use the site.
Which is exactly what I suggested to you when you wrote to me
directly and what the article itself recommends.
However, IE Mac can indeed support fixed positioning, so something
else is going on here.
I'd wager that your problem lies here:
#contentcontainer {
...
position: fixed;
overflow: hidden;
...
height: 100%;
}
See Philippe Wittenbergh's tests on overflow plus positioning
http://www.l-c-n.com/IE5tests/overflow/overflow_1.shtml
__
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] Elastic layouts: want to confirm
On 5/18/06, Mark Fellowes [EMAIL PROTECTED] wrote: I know that with elastic layouts you set the element widths using ems. What about margins , would those also be in ems ? That or percentages, whichever looks best to you at various resolutions. Ed Seedhouse Hmm. Since ems is a measure of height for a given font, wouldn't percent or pixels be a better and more accurate measurement for both margins and width/height? __ 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] How do I receive all posts?
Thanks all. But, how do I reply to a received message/email? The emails are addressed from individual addresses, not the css-discuss.org address. If I reply, my email will be sent only to that individual - correct? - Tony- Yes, its a mailing list. All questions and responses sent to the list are forwarded to all subscribers. Ron Pringle Web Developer MIS, City of Aurora (630) 844-3610 [EMAIL PROTECTED] http://www.aurora-il.org -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Tony Watkins Sent: Thursday, May 18, 2006 12:35 PM To: css-d@lists.css-discuss.org Subject: [css-d] How do I receive all posts? Sorry, new subscriber here. Should I be receiving all posts to the newsgroup? I emailed a question a short while ago and have received three responses (thanks), but should I also be receiving everyone else¹s topics and posts as well? __ 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] How do I receive all posts?
To send to the list, and the person, hit reply to all. That seems to be the common method here :) Scott. Tony Watkins wrote: Thanks all. But, how do I reply to a received message/email? The emails are addressed from individual addresses, not the css-discuss.org address. If I reply, my email will be sent only to that individual - correct? __ 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/
[css-d] [ADMIN - OFF TOPIC] Re: How do I receive all posts?
At 17:23 -0400 18/5/06, Tony Watkins wrote: Thanks all. But, how do I reply to a received message/email? The emails are addressed from individual addresses, not the css-discuss.org address. If I reply, my email will be sent only to that individual - correct? Yes you are correct. To reply to the list, you should either Reply to all or you enter the list's address manually after hitting reply. For why, please read this: http://css-discuss.incutio.com/?page=CssDiscussListHeaders Please don't post questions about the list's functioning to the list rather than to the list owner's address [EMAIL PROTECTED]. Especially after I had written to you off list and told you that that was where you should send such enquiries. And please don't top post. This thread is over - let's have some CSS folks... Alex Robinson css-d moderator __ 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] Just a couple of quick definitions...
One of the books I've been studying has used two terms I'm unfamiliar with. Some will deem these dumb questions, but here they are. What is a screenreader? The author used a phrase: Javascript with the DOM What's the DOM? Thanks for any information. Dave __ 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] Elastic layouts: want to confirm
On 06/05/18 17:17 (GMT-0400) Tony Watkins apparently typed: On 5/18/06, Mark Fellowes [EMAIL PROTECTED] wrote: I know that with elastic layouts you set the element widths using ems. What about margins , would those also be in ems ? That or percentages, whichever looks best to you at various resolutions. Hmm. Since ems is a measure of height for a given font, wouldn't percent or pixels be a better and more accurate measurement for both margins and width/height? There are different kinds of accuracies. If you want total fluidity, you can't use px. % can give unexpected results when the viewport size and text size aren't what you expect. Em can work if you're careful, particularly if you simply stop thinking in px. When the default font size is 16px, 1px is equal to .0625em. When you set a 10px margin or padding as .625em, you keep the same proportion between text size and margin/padding size as zoom or default font size varies, maintaining a constant proportion between components. As example, both http://mrmazda.no-ip.com/SS/bbcSS.html and http://mrmazda.no-ip.com/indexx.html are entirely free from % and px sizing. -- All have sinned fall short of the glory of God. Romans 3:23 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ 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] Elastic layouts: want to confirm
On 5/18/06, Tony Watkins [EMAIL PROTECTED] wrote: Since ems is a measure of height for a given font, wouldn't percent or pixels be a better and more accurate measurement for both margins and width/height? But you don't have a liquid layout if you use pixels . A px is a fixed measurement, but only for a given screen resolution. You have no way of knowing how much screen territory on your page is occupied by a px on the user's screen. If you use percentages you will know at least that the element will take up x% of the screen space at whatever resolution. The relationship between the screen size and the width of elements will remain constant as the user changes screen resolutions. If you use ems you know that the relationship between text size and the screen space use will stay the same if the user changes text size. With pixels you don't know either and have less control, not more. If you have a text heavy page it makes sense to size in relationship to the text size and use em's or ex's. With graphic heavy pages you might want to use percentages. -- Ed Seedhouse __ 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] Just a couple of quick definitions...
Dave Pierce wrote: What is a screenreader? an application that reads the screen out to you, as it were. that's one of the ways blind people surf the net. The author used a phrase: Javascript with the DOM What's the DOM? document object model __ 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] Just a couple of quick definitions...
On 19/05/06, Dave Pierce [EMAIL PROTECTED] wrote: One of the books I've been studying has used two terms I'm unfamiliar with. Some will deem these dumb questions, but here they are. They're not dumb questions. If you've never come across teh terms before, you won't know until you ask. :) What is a screenreader? A screen reader is a program that assists vision-impaired people to use the Internet. Since they can't see the screen (well or at all), the program reads to them what is being shown. It also reads certain things that normal users don't generally deal with, such as the alt text attached to images and the fact that something is a link or a bullet point or anything else other than plain text. Screenreader users can navigate a page with a series of keystrokes, but it makes it important that you page is structured in a logical way so that they can find the sections they want easily without needing to see where they are in relation to other things. Also be aware that screenreaders ignore positioning and suchlike, and will start reading from the top of your code and (barring any input from the user) will keep reading the page until they reach the bottom. The author used a phrase: Javascript with the DOM What's the DOM? The DOM is the Document Object Model. I've just hit google with the phrase what is the DOM and got back articles like: * http://en.wikipedia.org/wiki/Document_Object_Model * http://webdesign.about.com/cs/dom/a/aa120202a.htm * http://www.javascriptkit.com/javatutors/dom.shtml Have a read, and hopefulyl that will make things clearer. Cheers, Seona. __ 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] float elastic layout haywired
Oops..forgot the url www.pamshop.com/Template1/exp9.html Sorry Mark -Original Message- From: [EMAIL PROTECTED] Sent: Thursday, May 18, 2006 10:26 PM -07:00 To: CSS List [EMAIL PROTECTED] Subject: [css-d] float elastic layout haywired In my quest for experimentation I've run into some issues. This was originally a 3 col layout (using floats). The far left is the navigation, followed by the main content and the secondary content (to the far right). Since then I've decided to see how dropping the secondary below the main would be and then adding in a second secondary and having those two elements next to each other. I've also decided to stick the navigation up in the header (inspired by some site I came across). Right now the content wrapper for the main and secondary's are sitting too far below the header. Also , in IE6 the secondary and second secondary are to the right on their own. Hope it's alright that I've come to the list at this point. Not sure where to turn once things get to this stage. Perhaps my design ideas for this page don't lend themselves well to a elastic float based layout ? TIA Mark __ 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] Floats and position type
Mark Fellowes wrote: One thing I haven't seen or read but curious about, can a float be positioned [relative, absolute, static, fixed]? http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo 9.7 Relationships between 'display', 'position', and 'float' ... if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', ... (please refer to the complete text and the table) meaning that a float can - be positioned relatively, - have position:static as default. but - position:absolute or fixed let float compute to 'none' Ingo -- http://www.satzansatz.de/css.html __ 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] Elastic layouts: want to confirm
On 5/18/06, Tony Watkins [EMAIL PROTECTED] wrote: On 5/18/06, Mark Fellowes [EMAIL PROTECTED] wrote: I know that with elastic layouts you set the element widths using ems. What about margins , would those also be in ems ? That or percentages, whichever looks best to you at various resolutions. Ed Seedhouse Hmm. Since ems is a measure of height for a given font, wouldn't percent or pixels be a better and more accurate measurement for both margins and width/height? No. EMs provides the best scaling possible for a layout that is intended to grow as the font grows. When the height and width of the font characters is somewhat similar, doubly so. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ 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] float elastic layout haywired
This was originally a 3 col layout (using floats). The far left is
the navigation, followed by the main content and the secondary
content (to the far right). Since then I've decided to see how
dropping the secondary below the main would be and then adding in a
second secondary and having those two elements next to each other.
I've also decided to stick the navigation up in the header (inspired
by some site I came across). Right now the content wrapper for the
main and secondary's are sitting too far below the header. Also , in
IE6 the secondary and second secondary are to the right on their own.
Hello Mark,
I don't know if this is what you want. I had to rearrange the selectors
somewhat. Hope that doesn't bother you.
I have renamed secondsecondaryContent to secondSecondaryContent and all
its properties to keep the name convention.
Furthermore I have changed the paths of the images to /images, so please
keep this is mind when the images are missing while testing.
HTH
Niklas
!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
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
/
titleUntitled Document/title
style type=text/css
body {
font-size: 62.5%;
background-color: #00;
background-repeat: no-repeat;
background-position: 9em 11.5em;
}
/* main page elements */
#wrapper {
width: 72em;
margin: 0 auto;
text-align: left;
}
#header {
height: 20em;
background-repeat: no-repeat;
background-position: right top;
background-color: #FF;
}
#menu {
float: left;
}
#content {
width: 52em;
background-color: #33;
background-repeat: no-repeat;
background-position: left top;
float: right;
}
#mainContent {
width: 48em;
margin-left: 1.8em;
margin-top: 1em;
background-image: url(images/content_bg.gif);
border-right-width: thick;
border-bottom-width: thick;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #CC;
border-bottom-color: #CC;
border-top-width: thin;
border-top-style: solid;
border-top-color: #FF;
border-left-width: thin;
border-left-style: solid;
border-left-color: #FF;
}
#secondaryContent {
width: 24em;
margin-left: 1.8em;
margin-top: 1em;
background-color: #00;
float: left;
}
/* double margin IE bug hack */
/* only IE (Win, Mac) from version 5 */
* html #secondaryContent {
/* next definition is excluded by IE 5 (Mac) \*/
margin-left: 0.9em;
/* */
}
#secondSecondaryContent {
width: 24em;
margin-left: 0em;
margin-top: 1em;
background-color: #00;
float: left;
}
/* other and typographical elements */
#leftimage {
width: 18em;
background-image: url(images/PoserMan_alt.gif);
height: 24em;
background-repeat: no-repeat;
margin-top: 150%;
background-color: #FF;
border: thin groove #CC;
}
#triContent {
float: left;
margin-top: 2em;
clear: right;
}
#mainContent p {
font-size: 1.2em;
padding: 2%;
}
#mainContent h1 {
font-size: 1.8em;
color: #FF;
[css-d] Wrapping in thumbnail gallery
Hey, This might have been explained hundreds of times but I didn't manage to find a solution so if you'll pardon me... I found a nice CSS thumbnail gallery which I have converted to own styles: http://www.pulu.org/temp/cssgal/thumbgal.html The rows are sorted according to window's size, so by resizing the window the images are changing rows. What I want is that each row should always contain same number of images (excluding the last one) in all situations. For example in my current setup I have 5 images in the first row, 2 in the second, 5 in the third, 1 in the fourth and 1 in the fifth. When it should be 5-5-4. The width will be static and height varies. clear: both; after each row would be a semi-good solution but then I would lose the flexibility. Thanks in advance, Lassi Heikkinen __ 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] how to configure h1 (or any font) with transparent background that will validate?
Hi everyone,
-query: How can I configure a font to have a transparent background so I
can place it over a background image and still get it to validate?
-example: trying to get this test to validate:
html body {background: none;}
h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
color: #00; font-weight: normal; background-color: none}
h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
color: #00; font-weight: normal; background-color: transparent}
-validating at: W3C CSS Validator Results
(http://jigsaw.w3.org/css-validator/) gives me:
Invalid number : background-color none is not a color value : none
* Line : 1 (Level : 1) You have no background-color with your color : h-1
* Line : 2 (Level : 1) You have no background-color with your color : h-2
Yes I'm a newbie learning CSS, have built many sites, now it's time to get
the code right.
thanks for your help,
Sonic
__
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] Wrapping in thumbnail gallery
On May 18, 2006, at 10:31 PM, Lassi Heikkinen wrote: The rows are sorted according to window's size, so by resizing the window the images are changing rows. What I want is that each row should always contain same number of images (excluding the last one) in all situations. For example in my current setup I have 5 images in the first row, 2 in the second, 5 in the third, 1 in the fourth and 1 in the fifth. When it should be 5-5-4. The width will be static and height varies. clear: both; after each row would be a semi-good solution but then I would lose the flexibility. It sounds like you can just put them in a fixed width div -C __ 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] how to configure h1 (or any font) with transparent background that will validate?
On May 18, 2006, at 10:31 PM, sonic sonic wrote:
-example: trying to get this test to validate:
html body {background: none;}
h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-
size: 10px;
color: #00; font-weight: normal; background-color: none}
h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-
size: 10px;
color: #00; font-weight: normal; background-color: transparent}
-validating at: W3C CSS Validator Results
(http://jigsaw.w3.org/css-validator/) gives me:
Invalid number : background-color none is not a color value : none
* Line : 1 (Level : 1) You have no background-color with your
color : h-1
* Line : 2 (Level : 1) You have no background-color with your
color : h-2
background-color: none;
isn't valid
change it to
background-color: transparent;
-C
__
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 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/
Re: [css-d] Fun header challenge?
I've seen that page before, i think from one of your WSG posts, and was very impressed with the opera-style zoom you have goin there. Unfortunately I don't want the logo to enlarge on this page. The main thing I'm having trouble with is keeping the logo vertically centered in the h1 [1], even when it's larger than the h1. I know CSS's weakness is vertical centering, but I was hoping there was some way with non-IE-pandering CSS. [1] or div, or whatever is given the background color with a height of 3x the h1's font size __ 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] Fun header challenge?
On 5/17/06, Kenny Graham [EMAIL PROTECTED] wrote:
I'm trying to make what should be a simple header. Problem is that I
want it to expand properly with enlarged text sizes. The entire
header has a background color. In the center is a centered h1 for
the page title, and at the left is an img (a transparent png logo)
followed by a span containing the site title.
Here's where it gets fun.
The logo, of course, is a fixed height. It has more height than I
want the background color to be at normal text size. I want the
difference in height to be split above and below the colored
background. So if the logo is 100px high, and the background color is
80px high, i want the image to start 10px above the background color,
and overflow 10px below it. I also need short text above the header.
Here's a graphic:
http://www.kennygraham.net/help/small.png
What if you gave the logo image:
#logo { margin:-10px; }
This would allow the H1 to collapse on it, right? As in the H1 would
only try to contain the height of the logo - 20, instead of the full
height? It usually seems to work this way.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
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] Fun header challenge?
What if you gave the logo image:
#logo { margin:-10px; }
This would allow the H1 to collapse on it, right? As in the H1 would
only try to contain the height of the logo - 20, instead of the full
height? It usually seems to work this way.
That's similar to the way I'm currently doing it, but it doesn't work
with font-resizing. As the H1 gets taller or shorter, I want the
center of the logo to remain in the center of the H1, escaping the top
and bottom of the H1 if needed. Is it even possible? *hopes so* I'm
almost certain it's -not- possible with tables, but i'm young and
never learned to design with tables. (i was lucky i guess)
__
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/
