[css-d] Valid(?) document not validating

[Robert Ginn]

Greetings CSS experts,

I have a page ( http://www.sitkamusicfestival.org/1-sitka_valid.html ) 
that validates just fine in Homesite, but fails the validation at 
http://validator.w3.org because w3 thinks the final  element is 
closing a div that was never opened.  The page has nested div's, but 
I've checked and double-checked them and they look good to me.

The  in line 77 closes in line 192.  I've added
 to remind me what it's doing.  The 
validator doesn't like that last  in line 192.

If you need the style sheet, it's at 
http://www.sitkamusicfestival.org/2-basic.css

Can anyone tell me what I'm missing?

BTW, this page is still under development and much of its CSS is 
inline.  I'll move the CSS to the style sheet once I get the page ironed 
out.

Comments about any part of the page would be welcome, too.

Thank you,

Bob
Sitka, Alaska
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Blank Wiki?

[Robert Ginn]

A recent posting contained several links, one of which was:

There is helpful info on avoiding hacks for IE6 on the wiki


This link appeared to load in Firefox, but the page was blank.  Choosing 
"View page source" yielded nothing.  I loaded the URL into IE7 and got 
"Internet Explorer cannot display the webpage."

This same scenario has happened before when I tried to view a wiki 
link.  Is there a secret formula for viewing this web page?

Thanks,

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

Re: [css-d] Extra padding in Firefox

[Robert Ginn]

 > >  >From: david <[EMAIL PROTECTED]>
 > >
 > >  >Perhaps you could:
 > >
 > >  >1. Leave the  tags alone, unstyled except for one thing in CSS: hide
 > >  >them. When CSS is enabled, the HR isn't shown.
 > >
 > >  >2. Get the desired "horizontal rule" effects you want using the border
 > >  >of either the block element above or below it. Much more power, that
 > >  >way, and much better across browsers.
 > >
 > > Thanks very much, gentlemen.  I've cleaned up the page, but haven't tried
 > > any cross-browser styles for hr elements.  I need to progress further in 
 > > CSS
 > > before I understand that coding well enough to use it.  Instead, I first 
 > > used
 > > top and bottom borders to provide visual separation.  These worked
 > > fine until I reduced the size of the viewing window.  When using ,
 > > the horizontal rule separated the narrowed text perfectly.  When using 
 > > borders
 > > on existing  elements as separators, the effect was awful when the 
 > > viewing
 > > window was reduced.

What do you mean by "awful"? Tells me nothing about what happened.

 > > http://www.sitkamusicfestival.org/6-strictindex.html
 > > http://www.sitkamusicfestival.org/6-strictssmf.css

-- David [EMAIL PROTECTED]


Sorry I wasn't very descriptive, David.

When using  elements as visual separators in the page and shrinking the 
viewing screen size, 
the logo appeared, below which was the text contained in the header, below that 
was the horizontal 
rule at the bottom of the header, and below that was the rest of the page, all 
in order and quite 
readable.  As I recall, this was the case both in FF and IE7.

When using the border of a separator  to define the bottom of the header 
section, shrinking 
the viewing screen (in IE7) causes the header text to overrun the bottom border 
line and the text 
below it, presenting an unintelligible mess (that is the "awful" which I 
mentioned).  The text 
flows below the separating border even though the  with the separating 
border contains a 
"clear: both;" property.  The presentation in Firefox, however, is clear and 
readable.

Conversely, in the box for "Coming Events," lower on the page, all the text and 
separator lines 
appear in order and the text is again quite readable.  Here, separators are 
provided by border 
lines on  elements, rather than separator 's.  That probably accounts 
for the fact that 
the text isn't overriding lower text, as the separators are in the text 
elements themselves.

I'm testing my pages in a reduced screen size to simulate a lower resolution 
screen, and in an even 
smaller screen, to simulate the view in a PDA-size screen.  I may be mistaken 
about the validity of 
these tests.

I'm also not terribly concerned about the above effects and may decide just to 
go ahead with the 
page as it is, or close to its present state.  I don't have IE6 and am not 
aware how this page will 
show in that browser version, which may be a more significant problem.

At any rate, thanks for your help and I'm still open to any suggestions you 
might have.

Regards, Bob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Extra padding in Firefox

[Robert Ginn]

Robert Ginn wrote:
 > > I've been working in XHTML Strict, mostly for experience, but it
 > > doesn't like the  tag, at least the "noshade" attribute.  I'd
 > > like this page to work in Strict, but am stuck on the noshade
 > > problem.  Without it, the hr's look strange---and without any hr's at
 > >  all, half my design skills would be gone.  Is there a CSS element
 > > similar to the hr, or should I make this a Transitional page?

 >Add some styles to hr...

 >hr {border: none; /* good browsers */}
 >* html hr {border-style: solid; /* IE6 */}
 >*:first-child+html hr {border-style: solid; /* IE7 */}

 >and it will look pretty consistent across browser-land.

 >Also, the hr is an "empty element", and as such is written as  for
 >xhtml 1.0 - *not* 

 >We often use the top and/or bottom border on ordinary elements as purely
 >visual separators.
 >For example, the addition of...

 >h1#top {border-top: solid 3px #fff; clear: both; margin-top: 0;}

 >can replace the  in your page, and is
 >self-clearing.

 >A  with suitable border, width,
 >height, background-color, and margins for centering, can also replace
 >the hr visually - and creates no cross-browser problems. It'll disappear
 >if CSS support is missing, but that's rarely ever a problem when dealing
 >with separators.

 >regards
 >  Georg


 >From: david <[EMAIL PROTECTED]>

 >Perhaps you could:

 >1. Leave the  tags alone, unstyled except for one thing in CSS: hide
 >them. When CSS is enabled, the HR isn't shown.

 >2. Get the desired "horizontal rule" effects you want using the border
 >of either the block element above or below it. Much more power, that
 >way, and much better across browsers.


Thanks very much, gentlemen.  I've cleaned up the page, but haven't tried any 
cross-browser styles 
for hr elements.  I need to progress further in CSS before I understand that 
coding well enough to 
use it.  Instead, I first used top and bottom borders to provide visual 
separation.  These worked 
fine until I reduced the size of the viewing window.  When using , the 
horizontal rule 
separated the narrowed text perfectly.  When using borders on existing  
elements as 
separators, the effect was awful when the viewing window was reduced.  I then 
went to a separator 
 as Georg suggested, and it looks just fine in Firefox when viewed in a 
small window, but IE7 
allows the text of the header to extend below the separator  below it.

More trial and error (and help) is needed, but here is the current incarnation:

http://www.sitkamusicfestival.org/6-strictindex.html
http://www.sitkamusicfestival.org/6-strictssmf.css

Many thanks.

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

Re: [css-d] Extra padding in Firefox

[Robert Ginn]

Gunlaug Sørtun wrote:
> Robert Ginn wrote:
>> http://www.sitkamusicfestival.org/4-index.html
>
>> http://www.sitkamusicfestival.org/1_css_update.css
>
>> In my original page, I found that the extra padding that Firefox 
>> inserted at the top was actually inside the table which contained the
>>  logo and header text (I learned this by enclosing the table in a 
>> border).
>
> Only thing is: it isn't a padding but the default margin-top on
> paragraphs. It is important to keep track of "where such spaces comes
> from", as the rules for handling paddings are different from those for
> handling margins. For instance, see 'collapsing margins'[1].
>
>> Finally I was able to manufacture a header without using a table and
>> the problem disappeared.
>
> Your header construction is not really valid - yet, as images can not
> have body as the only container in "Strict". The logo-image has to go
> inside header itself, or be given some other container.
>
> Also, IDs are used more than once, which isn't allowed either.
> See:
> <http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sitkamusicfestival.org%2F4-index.html&charset=%28detect+automatically%29&doctype=Inline&ss=1&verbose=1>
>  
>
> ...for details.
>
> Other than that it's quite alright.
>
> regards
> Georg
>
> [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Thanks again, Georg.  I knew you couldn't duplicate ID's, but thought 
the preceding tag (such as p#header and div#header) gave it a different 
name.  I know better now, and have distinct ID's.  Also, the logo is in 
a  now.  Thank you.

I've been working in XHTML Strict, mostly for experience, but it doesn't 
like the  tag, at least the "noshade" attribute.  I'd like this page 
to work in Strict, but am stuck on the noshade problem.  Without it, the 
hr's look strange---and without any hr's at all, half my design skills 
would be gone.  Is there a CSS element similar to the hr, or should I 
make this a Transitional page?

I'll need to read the reference on padding and margins several times 
before it seeps in.

I appreciate the help very much.

Bob


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

Re: [css-d] Extra padding in Firefox

[Robert Ginn]

>> In trying to develop a new header, I've found that Firefox 1.5 puts 
>> extra padding at the top of the page.
>
> That's the default margin on paragraphs - which differs between browsers.
>
> Declare something like...
>
> table p {margin: 20px 0;}
>
> ...(put in your own values) for cross-browser consistency.
>
>> Another difference is that the color (#80) for the  below the
>>  text in the header shows correctly as maroon in IE7, but shows an 
>> empty, colorless line in Firefox.  This is an experiment to try to 
>> make an  tag without using the deprecated attributes available 
>> within .  I found that "height: 5px;" gives about what I want in 
>> IE7 (a heavy line), but Firefox shows an empty line.
>
> Again, the defaults differ between browsers, and they interpret styles
> and attributes to have different meaning. The  is particularly hard
> to style for identical look across browser-land.
>
> In your case, you'll get the correct appearance in Firefox by adding
> background-color...
>
> 
>
> I hope you will abstain from such heavy use of inline-styles - once you
> have finished testing, as it will make maintenance pretty difficult.
> Better to use the style-element in the page-head for experimentation,
> and then move all styles to an external CSS file once you've finished.
>
> regards
> Georg

Many, many thanks, Georg.  With your help and another healthy dose of 
trial and error, I've come up with:
http://www.sitkamusicfestival.org/4-index.html
which incorporates part of what you advised (I went another route on the 
other), and I moved all my in-line CSS to an external style sheet:
http://www.sitkamusicfestival.org/1_css_update.css

In my original page, I found that the extra padding that Firefox 
inserted at the top was actually inside the table which contained the 
logo and header text (I learned this by enclosing the table in a 
border).  Finally I was able to manufacture a header without using a 
table and the problem disappeared.

As for , your advice took care of the whole problem.  I did find 
that some hr's didn't like having both [color: #80;] and  
[background: #80;] defined in the style (they showed gray or not at 
all), but worked fine with just the background attribute.

Again, thanks very much.  This list is superb.

Bob Ginn
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Extra padding in Firefox

[Robert Ginn]

Greetings from a nugget, barely past the basics in CSS.  In trying to 
develop a new header, I've found that Firefox 1.5 puts extra padding at 
the top of the page.  A little padding is needed to make IE7 look 
proper, but even without any padding, the header in Firefox shows well 
below the top of the page.

The prototype page is at
http://www.sitkamusicfestival.org/0-index.html

Another difference is that the color (#80) for the  below the 
text in the header shows correctly as maroon in IE7, but shows an empty, 
colorless line in Firefox.  This is an experiment to try to make an  
tag without using the deprecated attributes available within .  I 
found that "height: 5px;" gives about what I want in IE7 (a heavy line), 
but Firefox shows an empty line.

I'd appreciate any insight, comments or suggestions.

Thanks.

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