Markup error and display errors

[Knut Krueger]

Hi to all

1. question

http://arnfelser.knut-krueger.de/index.php?db=text:10
(only the links -> "Bilder" have no html errors except the <h2>, the
other text files are build and frequently changed with an online web
editor and have some more errors.

There is a markup error because I would like to get the first line
bigger. What else could I use to get an bigger fontsize without markup
error:
document type does not allow element "H2" here; missing one of "OBJECT",
"MAP", "BUTTON" start-tag

<li><a href="http:...php?db=text:11"><h2>Junges Theater</h2></a></li>
<li><a href="http:...php?db=text:12"><b>Das Stück</b></a></li>
<

2. question .. always the same problems with IE and Firefox:

the grey box is more left in IE, and not on the right side
There must be any mark up mismatch but I do not find it.

3. question
there is a gap over the blue box, any suggestions why?

Thanks in advance for your help
Knut



tread: how to arrange container with three pictures
p.s I changed from 3 pics to two pics
Now is is more easy than before.

 

[Jonathan N. Little]

Hi to all

1. question

http://arnfelser.knut-krueger.de/index.php?db=text:10
(only the links -> "Bilder" have no html errors except the <h2>, the
other text files are build and frequently changed with an online web
editor and have some more errors.

There is a markup error because I would like to get the first line
bigger. What else could I use to get an bigger fontsize without markup
error:
document type does not allow element "H2" here; missing one of "OBJECT",
"MAP", "BUTTON" start-tag

<li><a href="http:...php?db=text:11"><h2>Junges Theater</h2></a></li>

Then style with CSS and not use an inappropriate bit of markup.

1) H# are block elements
2) A elements can only contain inline elements not block so your H2 is a
no-no.
3) H1-6 are "heading" elements meant for headings! Not to style text to
be larger, just that by default headings are usually larger than body text.
4) Style your A element

CSS:

..noticeMe { font-size: 2.5em; font-weight: bold; }


HTML:

<li><a href="http:...php?db=text:11" class="noticeMe">Junges
Theater</a></li>

 

[richard]

Hi to all

1. question

http://arnfelser.knut-krueger.de/index.php?db=text:10
(only the links -> "Bilder" have no html errors except the <h2>, the
other text files are build and frequently changed with an online web
editor and have some more errors.

There is a markup error because I would like to get the first line
bigger. What else could I use to get an bigger fontsize without markup
error:
document type does not allow element "H2" here; missing one of "OBJECT",
"MAP", "BUTTON" start-tag

<li><a href="http:...php?db=text:11"><h2>Junges Theater</h2></a></li>
<li><a href="http:...php?db=text:12"><b>Das Stück</b></a></li>
<

2. question .. always the same problems with IE and Firefox:

the grey box is more left in IE, and not on the right side
There must be any mark up mismatch but I do not find it.

3. question
there is a gap over the blue box, any suggestions why?

Thanks in advance for your help
Knut



tread: how to arrange container with three pictures
p.s I changed from 3 pics to two pics
Now is is more easy than before.

Try

<li><h2><a>text</a></h2></li>

What is the point of font-size:100.01%????

In this pixelated world that is really doing nothing.
You're using em everywhere else so why not use it here as well?

 

[Adrienne Boswell]

Try

<li><h2><a>text</a></h2></li>

No! That makes no sense structurally.

<h2>Cats</h2>
<ul>
<li>content</li>
<li>content</li>
</ul>
<h2>Dogs</h2>
<ul>
<li>content</li>
<li>content</li>
</ul>

 

[Knut Krueger]

...
Then style with CSS and not use an inappropriate bit of markup.

<li><a href="http:...php?db=text:11" class="noticeMe">Junges
Theater</a></li>

Thanks I tried to style the text with css but it didn't work
I did not try to style the <a ..> element.

Knut

 

[Knut Krueger]

<li><h2><a>text</a></h2></li>

What is the point of font-size:100.01%????

Good question, it was in an example of an css layout. I forgot why and
Do not have the remarks of that.
Does anybody knows whether it is an workaround for any Browser bug?
I would suggest, because it makes no other sense to increase the
fontsice from 100% to 100.01%

Regards Knut

 

[Knut Krueger]

Knut Krueger wrote:

CSS:

.noticeMe { font-size: 2.5em; font-weight: bold; }

Hi Jonathan,
why isn't color not working in this excample?

..noticeMe { font-size: 2.5em; color: white; font-weight: bold; }


..noticeMe { font-size: 2.5em; font-weight: bold; }

<li style="color:white"><a href="http:...php?db=text:11"
class="noticeMe">Junges Theater</a></li>

does also not work


Regards Knut

 

[richard]

No! That makes no sense structurally.

<h2>Cats</h2>
<ul>
<li>content</li>
<li>content</li>
</ul>
<h2>Dogs</h2>
<ul>
<li>content</li>
<li>content</li>
</ul>

<ul>
<li>
<h2>
<a href="http://www.google.com">
search
</a>
</h2>
</li>
</ul>


validates just fine in 4.01 transitional.

 

[Knut Krueger]

On Wed, 17 Jun 2009 18:18:50 +0000 (UTC), Adrienne Boswell

<ul>
<li>
<h2>
<a href="http://www.google.com">
search
</a>
</h2>
</li>
</ul>

validates just fine in 4.01 transitional.

I validated in 4.01 strict

Regards Knut

 

[John Hosking]

http://arnfelser.knut-krueger.de/index.php?db=text:10

3. question
there is a gap over the blue box, any suggestions why?

Actually, that's not so much a gap over the blue box as it is a gap
under the bar_r.jpg image.

That gap is there for the descenders (low-hanging parts of letters like
y, p, q, g, etc.) in your text. What? You say you don't have any text
there? The browser doesn't know that, so you get the extra space by
default, just in case.

One way to fix this is to tell the browser there's no text, by giving
the img display type block.

img { display:block; }

Try it and test it (in various browsers). You may have to apply an id or
class, depending on what other images you have on the page or other
pages in the site.

 

[Jonathan N. Little]

Thanks I tried to style the text with css but it didn't work
I did not try to style the <a ..> element.

And how did you try to "style the text with css" without styling the A
element?

 

[Jonathan N. Little]

Hi Jonathan,
why isn't color not working in this excample?

.noticeMe { font-size: 2.5em; color: white; font-weight: bold; }


.noticeMe { font-size: 2.5em; font-weight: bold; }

<li style="color:white"><a href="http:...php?db=text:11"
class="noticeMe">Junges Theater</a></li>

does also not work

Because links A element colors are set elsewhere with greater specificity

a:link.noticeMe { font-size: 2.5em; color: white; font-weight: bold; }
don't forget about

a:visited
a:active

 

[dorayme]

....
validates just fine in 4.01 transitional.

Making no sense structurally, Adrienne's point, is nothing to do with
validation. Think grammatical nonsense.

 

[John Hosking]

http://arnfelser.knut-krueger.de/index.php?db=text:10

2. question .. always the same problems with IE and Firefox:

the grey box is more left in IE, and not on the right side
There must be any mark up mismatch but I do not find it.

I don't know why this difference is visible, but the two browsers (I'm
using IE6 here, although you say only "IE"; maybe you mean IE7?) seem to
react to em-based margins differently. I did see that the problem starts
to go away when #Info isn't sized relative to font size, but to pixels.

So, how about setting the width of #Info to match its content, namely
the image which is 219px wide? Then you can set the right margin to 0,
and the whole thing should snap over with its right edge up against the
edge of the rest of your content. Like:

div#Info {
font-size: 0.9em;
float: right; width:219px;
margin: 0em 0em 0em 2em; padding: 0em 0em 0em 1em;;
/* Notice the extra semi-colon up here................^ */
background-color: white; border: 0px;
}

Tested in FF2 and IE6 only.

I notice you're moving font-sizes up and down and back up again. Aren't
you happy with just 1em for everything (except the footer, which is a
smidge smaller) and the headings (which are larger by default)? I think
you are accumulating a confusing amount of compound multiples, IYKWIM.

 

[richard]

Making no sense structurally, Adrienne's point, is nothing to do with
validation. Think grammatical nonsense.

Point taken, but the question was why the markup did not validate.

 

[Knut Krueger]

Because links A element colors are set elsewhere with greater specificity

a:link.noticeMe { font-size: 2.5em; color: white; font-weight: bold; }
don't forget about

a:visited
a:active

yes it is set in
ul#Navigation a:link {...
so a:... does not work,
but when I change the ul.. all others are changed of course

Regards Knut

 

[Knut Krueger]

And how did you try to "style the text with css" without styling the A
element?

first attempt was an <div> container instead <h2> but it is also not
validated.

Knut

 

[Ari Heino]

Knut Krueger kirjoitti seuraavasti:

Thanks in advance for your help

Try the following. It fixes some of the problems.
Sorry for posting code on the NG. Didn't have time to put it online.

I'm still puzzled with the right edge box and how its positioning works,
namely the 6.5 em right margin is odd.


*** CSS***

body {
color: black;
background-color: white;
font-family: Helvetica, Arial, sans-serif;
margin: 1em 3em;
padding: 1em;
border: 2px solid #000000;
min-width: 41em; /* Mindestbreite verhindert Umbruch und
Anzeigefehler in modernen Browsern */
}

h1 {
font-size: 1.5em;
margin: 0 0 0.7em;
padding: 0.3em;
text-align: center;
background-color: white;
border: 2px ridge silver;
}

ul#navigation {
font-size: 1.5em;
float: left;
width: 197px;
margin: 0 0 1.2em;
padding: 0;
text-align: center;
min-height:600px;
color: white;
background-color: rgb(209,77,73);
font-weight: bold;
}

ul#navigation ul {
font-size: 0.75em;
margin: 0;
padding: 0;
}

ul#navigation li {
list-style: none;
margin: 0;
}

ul#navigation a {
display: block;
border: 3px solid rgb(209,77,73);
margin: 3px;
padding: 0.1em;
}

ul#navigation a:link {
color: white;
background-color: rgb(209,77,73);
}

ul#navigation ul a:link {
color: #999;
background-color: rgb(209,77,73);
}

ul#navigation a:visited {
color: white;
background-color: rgb(209,77,73);
}

ul#navigation ul a:visited {
color: #666;
background-color: rgb(209,77,73);
}

ul#navigation a:hover {
border-color: white;
}

ul#navigation ul a:hover {
color: black;
background-color: white;
}

ul#navigation a:active, ul#navigation ul a:active {
color: white;
background-color: gray;
}

#navigation h2 {
font-size: 1.5em;
margin: 0; padding: 0em;
text-align: center;
}

#hl {
color: white;
background-color: rgb(209,77,73);
font-size: 1.5em;
margin: 0; padding: 0em;
text-align: center;
}

div#info {
font-size: 0.9em;
float: right;
width: 10em;
margin: 0em 6.5em 0em 2em;
padding: 0em 0em 0em 1em;
background-color: white;
}

div#info h2 {
font-size: 1.33em;
margin: 0.2em 0.5em;
}

div#info p {
font-size: 1em;
margin: 0.5em;
}

div#inhalt {
margin: 0 220px 1em 200px;
padding: 0 1em;
}

* html div#inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet
Explorer bis Version 6 */
}

div#inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#inhalt p {
font-size: 1em;
margin: 1em 0;
}

p#fusszeile {
clear: both;
font-size: 0.9em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: white; border: 1px solid silver;
}

p#adresse {
clear: both;
font-size: 1.2em;
color: white;
margin: 0; padding: 0em 1em;
text-align: left;
vertical-align:middle;
background-color: rgb(0,0,128);
height: 30px;
}

..topbox {
background: #ffff66 url(bar_m.jpg) no-repeat;
height: 140px;
text-align: center;
width: auto;
}

..topbox img {
display: block;
}

..topleft {
float: left;
}

..topright {
float: right;
}

..margin_main
{
min-width: 800px;
}

#editor {
margin: 0;
padding: 0;
}

a:link { color:#000000; text-decoration:none }
a:visited { color:#804000; text-decoration:none }
a:hover { color:#E00000; text-decoration:none}
a:active { color:#F00000; text-decoration:none }
a:focus {color:#00E000; text-decoration:none }
a.an { text-decoration:none; }

h1 { font-size:150%; margin-bottom:0.5em; }

h2 { font-size:130%; margin-bottom:0.5em; }

h2.sh2 { font-size:120%; }

h3,h3.xmp,h3.xpl,h3.inf,h3.tip,h3.akt { font-size:110% }

h4 { font-size:100%; font-weight:normal; color:black;}
h5 { font-size:90%; font-weight:bold; color:black;}
p,ul,ol,li,div,td,th,address,blockquote { font-size:92%;}


li { margin-top:0.3em; }

h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
font-family:Arial,sans-serif; }

pre { font-family:Courier New,Courier; font-size:93%; color:#0000C0; }
..xmpcode { border-width:85px; border-style:solid; border-color:#EEEEEE;
background-color:#FFFFE0; }
..qbar { background-color:#FFFFE0; font-size:93%;
font-family:Arial,sans-serif; }


code,kbd,tt { font-family:Courier New,Courier; color:#0000C0; }

var { font-style:normal; color:#0000C0; }

blockquote,cite { font-style:italic; }

..code { background-color:#FFFFE0; }

..tabxpl { background-color:#E4EEFF; }

..doc { background-color:#EEEEEE; }

..nav { background-color:#FFEEDD; }



..blue { color:#0000C0; }

pre.normal { color:#000000; }


*** HTML ***

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head lang="de">
<title>Arnfelser Schloßspiele - Bilder</title>
<link type="text/css" rel="stylesheet" href="css/layout.css">
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
</head>
<body>
<div id="margin_main">
<div class="topbox"><span class="topright"><img
src="bilder/bar_r.jpg" alt="" title="right" height="140" width="220"></span>
</div>
<p id="adresse">A-8454 Arnfels - Südsteiermark - Österreich</p>
<ul id="navigation">
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:1">Schlossspiele</a>
<ul>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:2">Das
Stück</a></li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:3">Inhalt</a></li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:4">Termine</a></li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:5">Bilder</a></li>
</ul>
</li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:6">Theater im
Kino</a>
<ul>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:7">Das
Stück</a></li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:8">Inhalt</a></li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:9">Termine</a></li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:10">Bilder</a></li>
</ul>
</li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:11">Junges
Theater</a>
<ul>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:12">Das
Stück</a></li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:13">Inhalt</a></li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:14">Termine</a></li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?db=text:15">Bilder</a></li>
<li><a
href="http://arnfelser.knut-krueger.de/index.php?id=impressum.php">Impressum</a></li>
</ul>
</li>
</ul>
<div id="info">
<img src="bilder/schlossspiele_theme.jpg" alt="Schloßspiele">
</div>
<div id="inhalt">not ready</div>
<p id="fusszeile">Fußzeile</p>
<!--<p><a style="color:black"
href="../mehrspaltige.htm#kopf_fuss">zur&uuml;ck</a></p>-->
</div>
</body>
</html>

 

[Jonathan N. Little]

first attempt was an <div> container instead <h2> but it is also not
validated.

Again DIV like H2 is a *block* element and therefore cannot be a child
of A. Being a code-monkey is not a very efficient method of learning
HTML. Might I suggest perusing the tutorials at htmldog.com and
(although not the most exciting read):

http://www.w3.org/TR/html4/index/elements.html

If you look up the A element:

http://www.w3.org/TR/html4/struct/links.html#edef-A

<cite>
<!ELEMENT A - - (%inline* -(A) -- anchor -->
</cite>

Notice the "(%inline" meaning that only inline elements can be inside
an A element. Click it and discover which are inline elements...


http://www.w3.org/TR/html4/sgml/dtd.html#inline

if you look up block elements

http://www.w3.org/TR/html4/sgml/dtd.html#block

<cite>
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

</cite>

you can see headings and DIV are block elements. BTW you can also see
you cannot using a TABLE, P, FORM, etc in an A element for the same reason.

 

[Jonathan N. Little]

On Thu, 18 Jun 2009 09:06:15 +1000, dorayme



Point taken, but the question was why the markup did not validate.

Just because it validates does not necessarily guarantee proper markup.