[css-d] [ADMIN - OFFTOPIC] Re: Rules for generating valid CSS
My four rules are: 1. No p tags within p tags. 2. No div, hr, h1 to h6, ul, or li tags inside p tags. 3. No p tags inside li or ul tags. 4. No empty p tags. Are those rules sensible from a validation point of view? This is about markup and validation of the resulting HTML and really doesn't have anything to do with CSS. Please keep any answers offlist. Alex css-d moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Markup Validation img align=
Bob Cohen wrote:
I'm trying to get my template to validate xhtml strict
Markup validation as such is not a CSS issue, so it's off-topic in the
css-discuss list. In many cases, it's more or less a non-issue, since if
the problem is in the use of deprecated elements or attributes, changing
the doctype solves the validation problem.
However, if you wish to stick to a Strict version of HTML and the page
now uses deprecated features, the you are faced with the problem of
replacing those features by non-HTML things. And this of course makes it
a CSS problem in practice.
As a quick (and dirty?) reference to mapping presentational HTML to CSS,
check my
http://www.cs.tut.fi/~jkorpela/html2css.html
img src=hedTie.gif alt= width=78 height=158 align=top
align=top /
But . . . W3W's code validator complains about align=top and
border=x
There's no border attribute in the sample code, so you must be referring
to such an attribute elsewhere in the code. The border attribute for
img is simple: it corresponds to the border-width property in CSS,
though with different syntax for values. You can replace border=0 by
border-width: 0 but border=2 maps to border-width: 2px (i.e., no unit
is implied here in CSS). You can also use the border shorthand, e.g.
border: 0, though it's technically a bit different (it also sets
border-style and border-color).
img class=alignTop src=hedTie.gif alt= width=78 height=158
/
And created a CSS rule
img.alignTop {
align: top;
}
which does validate.
Well it validates in the proper technical sense of validation, namely
markup validation, but this says _nothing_ about the CSS code, since
markup validation does not process it all. You should use CSS checkers,
such as http://jigsaw.w3.org/css-validator/ (well, there aren't many
feasible alternatives) to check your CSS code.
It would tell you that there is no such property as align in CSS. The
HTML align attribute is really polymorphic (mixed, messed up): as my
quick summary shows, it needs to be mapped to different CSS properties,
depending on the attribute value and context (element). In this case,
you would need
vertical-align: top
Beware that there are oddities in browser implementations of
vertical-align. In some situations, you might need to set line-height,
too (to 1, probably, for an image and its container).
However, doing so introduces a break between
the header and the body in IE5-7.
That's because align: top has no effect, so it does not do what
align=top did.
Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Markup Validation img align=
Bob Cohen wrote:
I'm trying to get my template to validate xhtml strict and behave
well in the various browsers when displaying an image. http://
www.mojotools.com/priv/tst/d/3mb-d.html works in FireFox Mac/Win,
Safari, IE5 - 7 with the following html:
img src=hedTie.gif alt= width=78 height=158 align=top
align=top /
But . . . W3W's code validator complains about align=top and
border=x
I rewrote the code to:
img class=alignTop src=hedTie.gif alt= width=78 height=158 /
And created a CSS rule
img.alignTop {
align: top;
}
which does validate. However, doing so introduces a break between
the header and the body in IE5-7.
http://www.mojotools.com/priv/tst/d/3mb-d-3.html
Thanks,
Bob
/I think/ adding this selector to your style sheet may close all image
gaps IE is leaving for lowercase descenders and eliminate the need for
any css/markup class to do so.
img {display: block; border : 1px solid fuchsia; }
Subjective: A sensual mood combined with readability is a challenge...
Best,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ] Problem with values in form fields
Thanks Ingo: I fixed it by removing the sIFR headline. Seemed the only way to do it. sIFR3 is not perfect yet. Marje __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] div appears to close before /div
Hi all,
I'm having a strange problem with this page:
http://www.cprtools.net/downloads/dl4.php
in that the series of tables are all wrapped in a div (#container)
which has its background set to white (css in
http://www.cprtools.net/downloads/dl.css):
#container {
margin: 3em 10em;
background-color: white;
height: 100%;
min-width: 770px;
border: 1px black solid;
}
The idea is that the white background will be behind all the listed
tables, right through the end of the content.
The issue, in each browser I have checked in (FF, Opera, Safari - all
Win) is that 'container' seems to close after the caption on the VDx
ViewDisk table (about 3/4 the way down the page).
I've traversed through the markup and definitely do not see a /div for
that box until just before the /body tag, but it sure seems as if the
div is closing early.
I realize that the page markup doesn't validate at present due to the
use of two deprecated tags in td id=foot which is being pulled in as
an include, but I don't think that has anything to do with this issue.
CSS seems to pass validator muster.
Any suggestions would be greatly appreciated.
Kind regards,
~Ray
--
Non scholae sed vitae discimus
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div appears to close before /div
Subject: [css-d] div appears to close before /div
Hi all,
I'm having a strange problem with this page:
http://www.cprtools.net/downloads/dl4.php
in that the series of tables are all wrapped in a div (#container)
which has its background set to white (css in
http://www.cprtools.net/downloads/dl.css):
#container {
margin: 3em 10em;
background-color: white;
height: 100%;
min-width: 770px;
border: 1px black solid;
}
Colin Clark wrote:
Hi Ray,
I tried removing height:100% from the container div and it appears to
solve your problem.
Colin
Hi Colin,
Thanks for that! I don't know why 100% would cause the div to truncate,
but your solution sure worked.
Anyone know why that would cause the displayed behaviour?
Kind regards,
~Ray
--
Non scholae sed vitae discimus
=
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div appears to close before /div
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Ray
Leventhal
Sent: Thursday, December 06, 2007 4:59 PM
To: css-d
Subject: Re: [css-d] div appears to close before /div
Subject: [css-d] div appears to close before /div
Hi all,
I'm having a strange problem with this page:
http://www.cprtools.net/downloads/dl4.php
in that the series of tables are all wrapped in a div (#container)
which has its background set to white (css in
http://www.cprtools.net/downloads/dl.css):
#container {
margin: 3em 10em;
background-color: white;
height: 100%;
min-width: 770px;
border: 1px black solid;
}
Colin Clark wrote:
Hi Ray,
I tried removing height:100% from the container div and it
appears to
solve your problem.
Colin
Hi Colin,
Thanks for that! I don't know why 100% would cause the div to
truncate, but your solution sure worked.
Anyone know why that would cause the displayed behaviour?
Kind regards,
~Ray
--
Non scholae sed vitae discimus
=
The question with 100% is: 100% of what?
100% is 100% of your browser window's height, or to be precise the
viewport's height. If you scroll the contents in a way that the top border
of the div is at the top border of the browser's viewort, then the bottom
border of the div should be at the bottom border of the browser's viewport.
Thus the height is exactly 100%.
Regards,
Christian Kirchhoff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hey, I'm new to the list...
I thought I'd say hi.. I'm Matt Lee, Campaigns Manager at the Free Software Foundation, and Chief Webmaster for the GNU Operating System. Currently, I'm looking after http://www.gnu.org/ and http://www.fsf.org/ gnu.org is my own work, hand crafted markup with some SSI and CSS. fsf.org is a Plone site, and well, a bit brown and yucky. I'm going to be working on that one next. I've been using CSS now for about 3 or 4 years, and while I'm not really a designer, I'm extremely interested in seeing new examples of good CSS design. I don't really know quite what to expect from css-discuss, but I have a feeling it'll be a positive experience. I also expect to see one or two familiar names on here from time to time. Cheers, matt signature.asc Description: OpenPGP digital signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print Style Help
Thanks Georg. I have tried several things, with no luck. My main content
div was a float, and I set it to float:none because of this. Still didn't
work. It's almost to the point where I'm going to get rid of the style
because if someone prints, they are not getting everything. Very
frustrating.
Below is my latest attempt, still without success.
If anyone has any suggestions, I'm all ears. I am moving towards CSS
layouts and was looking forward to being able to provide print styles.
Todd
#header_logo, #footer, #header, #header_nav, #top_banner, #menu, #feature
{display: none;}
body, #shell, #content {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
html body #shell {background: none;}
html body #content {
padding: 0 0 0 .5em;
margin: 0 0 100px 0;
text-align: left;
background: none;
position: relative;
}
#content {
color: #000;
font: 10pt Times New Roman, Times, serif;
}
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun
Sent: Friday, November 30, 2007 4:39 PM
To: [EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Print Style Help
Todd Richards wrote:
www.ldstrategies.com
When I do a print preview in either Firefox or IE 6, the content gets
chopped off. In IE 7, it shrinks it down to fit.
Start by making sure no printed containers are floated or absolute
positioned, as that may upset the mentioned browsers/versions.
You should also make sure width is 'auto' and that no javascript gets
through to IE6 in print-mode.
Shrink to fit is a user-option that only affects width. Test with
different paper-sizes.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hey, I'm new to the list...
I thought I'd say hi.. I'm Matt Lee, Campaigns Manager at the Free Software Foundation, and Chief Webmaster for the GNU Operating System. I've been using CSS now for about 3 or 4 years, and while I'm not really a designer, I'm extremely interested in seeing new examples of good CSS design. Cheers, matt Hi Matt, welcome to the list! There are all sorts of CSS galleries if you are interested in just seeing what else can be done. My first recommendation is always http://www.csszengarden.com/ through - Dave Shae has just started approving new designs (from a several-year lull) and there's some really creative stuff in there. Anyhow, enjoy your stay! - Jon __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] disable scrollbar in IE Select Tag
Is there a way to prevent the scrollbar in a select tag from not
appearing in IE? When you click on the dropdown button in Firefox it
does not appear.
CSS:
.formveld {
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #00;
background-color: #ff;
border-bottom: #00 1px solid;
border-left: #00 1px solid;
border-right: #00 1px solid;
border-top: #00 1px solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
display:inline;
}
Steve LaBadie, Web Manager
East Stroudsburg University
200 Prospect St.
East Stroudsburg, Pa 18301
570-422-3999
[EMAIL PROTECTED] mailto:[EMAIL PROTECTED]
http://www.esu.edu http://www.esu.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hey, I'm new to the list...
Jon Hughes wrote: I thought I'd say hi.. I'm Matt Lee, Campaigns Manager at the Free Software Foundation, and Chief Webmaster for the GNU Operating System. I've been using CSS now for about 3 or 4 years, and while I'm not really a designer, I'm extremely interested in seeing new examples of good CSS design. Cheers, matt Hi Matt, welcome to the list! There are all sorts of CSS galleries if you are interested in just seeing what else can be done. My first recommendation is always http://www.csszengarden.com/ through - Dave Shae has just started approving new designs (from a several-year lull) and there's some really creative stuff in there. Anyhow, enjoy your stay! - Jon Hi Matt and welcome, I'm not a fequent flyer on the list but I had to share this link, it came up on www.webcreme.com which is more of a design gallery than CSS gallery but nonetheless. The site in particular is http://www.volll.com, it's just beautifully done and a really good concept. Good luck with fsf.org Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hey, I'm new to the list...
Jon Hughes wrote: There are all sorts of CSS galleries if you are interested in just seeing what else can be done. My first recommendation is always http://www.csszengarden.com/ through - Dave Shae has just started approving new designs (from a several-year lull) and there's some really creative stuff in there. Oh good! CSS Zen Garden was, for a long time, one of my favourite places to hang out. For a while, I considered and even started to attempt to bring GNU Mailman's markup up to date and inline with the standard HTML page that Dave has. The idea being that it provides more than enough room for your typical designer to make GNU Mailman look, well, a bit less like 1998. It certainly looks like a bit of work on this has already happened:- http://lists.css-discuss.org/mailman/listinfo/css-d Which compared to say:- http://lists.gnu.org/mailman/listinfo/info-gnu Is a fairly drastic improvement. Would this be something other site owners would be interested in participating with? matt signature.asc Description: OpenPGP digital signature __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Markup Validation img align=
On Dec 6, 2007, at 9:24 AM, David Laakso wrote:
/I think/ adding this selector to your style sheet may close all image
gaps IE is leaving for lowercase descenders and eliminate the need for
any css/markup class to do so.
Ah. So that's why the gap was happening. I used to wonder why
people hated IE so much. But now that I'm trying to write standards
compliant code, I understand. Oi!
img {display: block; border : 1px solid fuchsia; }
This appears to work. Question: when I change the color to something
different, I explicitly see a border around the image. It would
appear that specifying the border and the color both removes extra
space and blends the block in with the background. It would appear
that I'd have to manipulate the border according to the background
if, say, I wanted to do something similar on the right column, I'd
have to write something like?
img.differentBackground {display: block; border: 1px solid
differntColor; }
Bob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Markup Validation img align=
Bob Cohen wrote:
On Dec 6, 2007, at 9:24 AM, David Laakso wrote:
/I think/ adding this selector to your style sheet may close all image
gaps IE is leaving for lowercase descenders and eliminate the need for
any css/markup class to do so.
Ah. So that's why the gap was happening. I used to wonder why people
hated IE so much. But now that I'm trying to write standards
compliant code, I understand. Oi!
I do not hate IE. I do find it difficult to work with at times. But if
it were easy, then anyone could do it. And there goes all the fun...
img {display: block; border : 1px solid fuchsia; }
This appears to work. Question: when I change the color to something
different, I explicitly see a border around the image. It would appear
that specifying the border and the color both removes extra space and
blends the block in with the background. It would appear that I'd
have to manipulate the border according to the background if, say, I
wanted to do something similar on the right column, I'd have to write
something like?
img.differentBackground {display: block; border: 1px solid
differntColor; }
Bob
As usual, I have difficulty understanding question(s) (not just your
question, but all questions).
I used the border and its color in this: img {display: block; border :
1px solid fuchsia; } as a test to see all images on the page because I
am lazy and did not take time to read or target the specific image or
images you wrote about. It is nothing more than a fast and dirty test
border/color.
In a real scenario, it depends on the situation-- generally, target only
what you need where you need it.
If an image is to have different background-color, the class could be:
.c1 {different background-color;}
If an image is to have different border, the class could be:
.c2 {different border-color;}
If an image is to have different background-color and different color
border, the class could be:
.c3 {different background-color and different color border}
If all images have a border except one or another one, the class could be:
.c4 {border: none;}
The class name, does not describe what is to happen-- but rather that
/something/ about it is different. This gives you more flexibility to
make changes to the CSS without modification /or/ misunderstanding in
the markup. And the shorter the class name string in the CSS and markup,
the faster the software loads it.
Or, something like that...
Best,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] creating navigation in css
Does anyone know how to create a drop-down navigation in CSS? Here is the link to the nav that I have built so far: http://www.pcg-advisors.com/tests/test8.html Thanks! _ You keep typing, we keep giving. Download Messenger and join the i’m Initiative now. http://im.live.com/messenger/im/home/?source=TAGLM __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] creating navigation in css
It looks as though you haven't gotten very far yet- do you know any CSS or javascript already? If not, you may be better off using a tool to create the menus. A while back, I wrote a guide to using Fireworks for this purpose for my coworkers who just wanted to be able to make menus without learning a lot of code: http://thedesignspace.net/MT2archives/000190.html Ellen http://thedesignspace.net On Dec 6, 2007, at 4:29 PM, juliann wheeler wrote: Does anyone know how to create a drop-down navigation in CSS? Here is the link to the nav that I have built so far: http://www.pcg-advisors.com/tests/test8.html Thanks! _ You keep typing, we keep giving. Download Messenger and join the i’m Initiative now. http://im.live.com/messenger/im/home/?source=TAGLM __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] creating navigation in css
juliann wheeler wrote: Does anyone know how to create a drop-down navigation in CSS? Here is the link to the nav that I have built so far: http://www.pcg-advisors.com/tests/test8.html Thanks! _ Hi Juliann, One quick google search on CSS Drop Down Navigation will return a link to 'A list apart', a great resource for things design/css related. [1] HTH, ~Ray [1] http://www.alistapart.com/articles/horizdropdowns -- Non scholae sed vitae discimus __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] creating navigation in css
juliann wheeler wrote: Does anyone know how to create a drop-down navigation in CSS? Here is the link to the nav that I have built so far: http://www.pcg-advisors.com/tests/test8.html Thanks! Navigation in CSS is usually coded as a list. It is, in a sense, a list of places to go; and, it can be a horizontal or a vertical list. A drop-down is both a horizontal and a vertical list combined. Drop-down navigation is difficult to execute, even for advanced practitioners. Lots of people create drop-downs-- few can make them work satisfactorily cross-browser. And IE6.0 usually requires scripting (javascript) to enable drop-down behavior execution which complicates matters more. Some say drop-downs are the bane of a Web designers existence: I am one of them. But, I have had luck with both of these: http://sperling.com/examples/menuh/ http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp I'd suggest doing either, or both, straight out-of-the-box first. Even minor modification can prove difficult. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] creating navigation in css
juliann wheeler wrote: Does anyone know how to create a drop-down navigation in CSS? Here is the link to the nav that I have built so far: http://www.pcg-advisors.com/tests/test8.html Thanks! And I'm really happy with Open Cube's quick menu: http://www.opencube.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New to group
- Original Message - From: Lisa G. Wilcox [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Thursday, December 06, 2007 2:32 PM Subject: [css-d] New to group Hi gang, I just wanted to say hi. My name is Lisa, and I've been using CSS for about 3 yrs now. I'm looking forward to being a part of the discussion. I'm having issues with IE6 vs IE7 and how horribly they both render websites. I have a web site that I did for a client that looked beautiful on FF on WinXP and FF Mac OSX and worked fine in Vista with IE7 and XP with IE7, but it seems IE6 on XP has distorted the menus and what not. www.webgirlwebdesigns.com/testing/Family First/index.html Can anyone lend me some ideas? Lisa Wilcox Web Girl Web Designs Stress-free internet solutions for your business 223 E. Lincoln Hwy DeKalb, IL 60115 (815) 307-8163 voice (815) 981-8163 fax [EMAIL PROTECTED] http://www.webgirlwebdesigns.com Welcome, Lisa: First, you need to validate the site, as my validator is showing 64 errors, but most likely the majority are a result of you using an uncoded '' in portions of what is supposed to be text. As text, the ampersand should be coded amp; or #38; so go through your code and replace those first, then retest the lot. There's at least a couple in your nav lists, so I am sure that's part of the problem. Cheers, Peter www.fatpawdesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Top Bottom - Lets Keep Them Apart
Ian Rutgers wrote: I have been charged with rewriting this www.aslslimited.org such that the top nav stays at the top of the page and the bottom nav stays at the bottom of the page and the content makes up the rest. In other words as the browser window is resized the content section of the site is the only fluid portion of the site. My preference is to write the code using divs but need some guidance on the positioning without using JavaScript (if that is possible as I am assuming that I would have to do some browser detection) . help what have I got myself into?! Ian Hi Ian, This link may help, make sure to read the limitations at the bottom then have a play with position: fixed; in modern browsers. http://divinentd.com/experiments/emulating-position-fixed.html It's worked well for me so far.but does require some IE hacks, depending on your design. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Top Bottom - Lets Keep Them Apart
I have been charged with rewriting this www.aslslimited.org such that the top nav stays at the top of the page and the bottom nav stays at the bottom of the page and the content makes up the rest. In other words as the browser window is resized the content section of the site is the only fluid portion of the site. My preference is to write the code using divs but need some guidance on the positioning without using JavaScript (if that is possible as I am assuming that I would have to do some browser detection) . help what have I got myself into?! Ian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Top Bottom - Lets Keep Them Apart
Ian Rutgers wrote: I have been charged with rewriting this www.aslslimited.org such that the top nav stays at the top of the page and the bottom nav stays at the bottom of the page and the content makes up the rest. In other words as the browser window is resized the content section of the site is the only fluid portion of the site. My preference is to write the code using divs but need some guidance on the positioning without using JavaScript (if that is possible as I am assuming that I would have to do some browser detection) . help what have I got myself into?! Ian No browser detection is necessary. No tables for non-tabular data are necessary. This layout [1] works in any browser. Navigation is a list, whether horizontal or vertical. Here are some lists [2] (pick ones that meet your need from the browser compatibility chart on the site). [1] http://www.alistapart.com/articles/negativemargins/ [2] http://css.maxdesign.com.au/listamatic/index.htm Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Top Bottom - Lets Keep Them Apart
Here it is with 100% full height. Just remove the height calls if you do not want it full browser height. http://www.xs4all.nl/~peterned/examples/csslayout1.html Blessed Be Phillip On Dec 6, 2007 5:08 PM, Ian Rutgers [EMAIL PROTECTED] wrote: I have been charged with rewriting this www.aslslimited.org such that the top nav stays at the top of the page and the bottom nav stays at the bottom of the page and the content makes up the rest. In other words as the browser window is resized the content section of the site is the only fluid portion of the site. My preference is to write the code using divs but need some guidance on the positioning without using JavaScript (if that is possible as I am assuming that I would have to do some browser detection) . help what have I got myself into?! Ian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Blessed Be Phillip __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] problems with CSS and floats
This is my first post and I hope I am requesting help in the correct
way. I am trying to replace tables with a CSS and try to also use float
left and float right and they do not seem to work correctly. Could
someone take a look [http://wacowebdesigns.com/test.html] and see what I
am doing wrong?
Verse of the Day is supposed to float right and text should go to the
left and under it.
TIA,
Rayburn Taylor
.content {
padding: 10px;
width: 750px;
color : #663300;
background-color : #D9D1C4;
border : #786658 solid;
border-width : 0px 1px: .65;
}
#f-left {
width: 250px;
float: left;
margin: 15px 0 15px 15px;
padding: 10px;
color : #663300;
background-color : #D9D1C4;
border : #786658 solid;
border-width : 0px 1px: .65;
}
#f-right {
width: 250px;
float: right;
margin: 15px 0 15px 15px;
padding: 10px;
border:1px solid #000;
background-color : #CC;
border:1px solid #fff;
}
Waco Web Designs
http://wacowebdesigns.com
~~~
TAYLOR's BOOK PAGE
http://taylorsbookpage.com
Member of (IOBA) http://www.ioba.org
Independent Online Booksellers Association
~~
School, Church, Library discount of
15% when purchased from TBP web site.
~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problems with CSS and floats
bookpage wrote:
This is my first post and I hope I am requesting help in the correct
way.
You have hijacked someone else's thread, and messed up the list-archives
a bit. You should really, really, start a new thread from scratch, and
not just copy and change subject-line in an existing one.
I am trying to replace tables with a CSS and try to also use float
left and float right and they do not seem to work correctly. Could
someone take a look [http://wacowebdesigns.com/test.html] and see
what I am doing wrong?
You forgot to check the quality of the source-code for one...
http://validator.w3.org/check?uri=http://wacowebdesigns.com/test.html
...and there are too many meaningless flaws in the stylesheets...
http://jigsaw.w3.org/css-validator/validator?uri=http://wacowebdesigns.com/test.htmlwarning=1profile=css21
Verse of the Day is supposed to float right and text should go to the
left and under it.
Which sounds more like this...
http://www.gunlaug.no/tos/alien/bp/test_07_1207.html
(top-part didn't cooperate, so that's left out.)
First: you must move the Verse of the day container before the text,
as it'll otherwise stay down below the text-container. Floats can't
float upwards and the text can not adjust to anything that follows it in
the source-code.
Second: at least delete the 'width' and 'float' on #f-left so its
content can truly adjust. You probably don't need that #f-left div at
all since the paragraphs will behave fine on their own, and those
border-width values don't make sense - see CSS validation.
Third: make .content expand to contain float and text in all browsers no
matter what, as only IE/win is buggy enough to do so with your existing
styles. You won't see much of this correction, simply because the now
unfloated text is taller than the floating verse.
New and corrected styles:
#f-left {
/* width: 500px;
float: left; delete these commented-out styles */
margin: 15px 0 15px 15px;
padding: 10px;
color : #663300;
background-color : #D9D1C4;
}
.content {
padding: 10px;
width: 750px;
color : #663300;
background-color : #D9D1C4;
border : #786658 solid;
border-width : 0px 1px: .65;
overflow: hidden; /* added */
}
* html .content { /* added for older IE-versions */
overflow: visible;
}
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
