Internet Explorer not displaying table properly

GugUser · 2011-03-30 13:17:54

<div> isn’t allowed in <head> elements …

missing </a> before <a> … the a-Element is not self closed …

<img> attribute “width” has invalid value “16px” …

etc.

Please, make your HTML valid before you ask about other problems.

kstewart · 2011-03-30 13:21:51

I did not put in <p> before all the twitter stuff. It’s from this line:

<txp:kml_twitter user="fonmedia" count="5" title="<u>Recent tweets...</u>" titletag="h4" breaktag="p" wraptag="p" />

I do not understand why you are being so rude. I am trying to learn and you are not explaining yourself well. You are just making unhelpful patronising remarks.

GugUser · 2011-03-30 13:33:45

I would not be rude, I’m not good with English (I am learning ;-) ).

With wraptag="ul" and break="li" (or the plug in need breaktag="li"?) you solve the problem.

kstewart · 2011-03-30 13:48:42

My apologies, some of your comments came across a bit sharper than perhaps you meant.

I have changed it to what you said (the plugin’s default is breaktag="li") but now it looks awful! This is what has happened before. Though it does fix a few errors in validator, I prefer it to look good with errors. Is that bad?

colak · 2011-03-30 13:54:41

I think that <txp:kml_twitter user="fonmedia" count="5" title="<u>Recent tweets...</u>" titletag="h4" breaktag="p" wraptag="" /> might be closer to what you want

maverick · 2011-03-30 13:58:47

Kim

You’re getting there! :)

If your specialty is animation I’m going to take a guess that you learning and working process is visually oriented. Which likely means you’re core process strives for visual outcome, and thinks in terms of visual outcome. Html and css are tools to get there – like using a brush and paint on a canvas, or using Bryce on a computer? Thus you start with the visual end in mind, and work backwards into the code? Am I close?

If so, that is a somewhat different process than starting with the code, and working forward into the visual design. Neither of the ways are wrong in and of themselves, but priority of importances are processed differently. For a great website the two have to come together.

Theoretically, and most times practically, you can move all your presentation to one or more style sheets and control it from there. Html functions just as the bones of the document that you hang all else on. There are rules that have been developed over the years by working groups regarding how to process html and css. Browser developers have generally tried to adhere to those rules. Html code is then supposed to adhere to the rules also so that everything displays as intended. That’s where GugUser is coming from.

You probably know this already, but not knowing you, I’m wanted to cover that just in case you had not had that background.

The good news is that there is almost always a way to get the visual effect you want and to have your html and css line up with the the rules, and minimize the chance there will be problems down the road. GugUser is noting one of those code issues. Certain html elements (block) allow other html elements to be nested in (or inside of) them. <html>, <head>, <body>, <div> are examples. <p> are only supposed to be for paragraphs (though they do get used for other content frequently), but more importantly, will throw tons of errors if they have another html block element nested in them.

With Textpattern tags, a wraptag will wrap the whole block of code it is outputting with that tag. So wrapping with a <p> will yield <p>Txp output</p> (note the opening and closing tags.) A breaktag will be inside the wrap tag and used between individual items of content that Txp outputs. So with your current code, you are getting this effect: <p><p></p></p> (as the code GugUser posted shows). GugUser means you put <p> inside of a <p> in the sense that you set the breaktag=”<p>”.

Since html is meant to be the bones of a document, think in structural terms of what you want your visual outcome to be. Example – your twitter feeds are a list of posts. Html has a set of bones for that. It’s either the ordered list (which is numbered) and written as:

<ol>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
</ol>

or as an unordered list (bulleted by default, css can turn it into a plain or “undecorated” list), written as:

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
</ul>

You can achieve the exact effect (same as with the <p> breaktag) that you are after with your twitter feed using an unordered list as your breaktag instead. And the browsers will be much happier and consistent. Plus your page will validate.

Use the same class designation you currently are. Set your style and look using css. In order to get rid of the bullets (assuming you don’t want some type of bullet that is), use list-style-type: none; in your css. (By the way, I use several reference sites like w3cschools or htmldog.com when I need to double check tag properties or css declarations).

so your css declaration might look something like:

.twitter ul li{
             list-style-type: none;
             }

You will also want to set your font size there as well.

In your kml_twitter tag, you will need to add your .twitter class using either or both breaktag_class=”“ or wraptag_class=”“ (depending on the situation and results you are trying to achieve).

This should get the appearance you want :)

Hope this helps

Mike

Last edited by maverick (2011-03-30 14:09:35)

colak · 2011-03-30 14:01:13

kstewart wrote:

I prefer it to look good with errors. Is that bad?

Yes, as what might look good in your browser might look horribly broken in other browsers.

Not that valid xhtml performs uniformly across all browsers but if you do use it, you are indirectly advocating for standards across all browser/platforms.

kstewart · 2011-03-30 14:01:43

Mmm… thanks that kinda worked… Looks better but getting <> and some warnings now. Possible duw to nothing in wraptag quotes.

colak · 2011-03-30 14:02:44

try <txp:kml_twitter user="fonmedia" count="5" title="<u>Recent tweets...</u>" titletag="h4" breaktag="p" wraptag="div" />

Last edited by colak (2011-03-30 14:03:05)

maverick · 2011-03-30 14:03:13

Both GugUser’s and Colak’s solutions will help you get valid output and let you get the look you want. Choices are good!:D

GugUser · 2011-03-30 14:11:01

I have changed it to what you said (the plugin’s default is breaktag=“li”) but now it looks awful! This is what has happened before. Though it does fix a few errors in validator, I prefer it to look good with errors. Is that bad?

I repeat: HTML is not for define the appearance. A short example:

<div class="small" id="sidebar-3" /> (…)
<h4><u>Recent tweets...</u></h4>
   <>
   <p class="tweet"><span class="tweet_text">I posted a new photo to Facebook <a href="http://fb.me/C5ZzQrWC">http://fb.me/C5ZzQrWC</a></span> <a href="http://twitter.com/fonmedia/status/50623359897178112" class="tweet_time">6 days ago</a> </p>

The appearance from the title <h4>Recent tweets …</h4> you can define with #sidebar-3 h4 { text-decoration: underline; }, and if you use a list, you can define the appearance of the list with #sidebar-3 ul { … } etc.

But, something like <> is not HTML.

kstewart · 2011-03-30 14:13:52

Perfect! Thanks everyone! I used Colak’s option in post #39

maverick Many thanks for your detailed explanation and post there! You are spot on. I think visually and often even communicate better visually (if that makes sense?) I’ve used w3cschools before for help. There’s just so much on there, it can be a little overwhelming.

GugUser Cheers, changed CSS now. Understanding it all a bit better now, thanks!

Really appreciate everyone’s help! Down to only 7 errors in validator. I know I cannot have a div tag in the header but as there’s a slideshow there, I’m not sure how else I can avoid it. I’ll maybe try looking at it again later tonight as I haven’t done any of my animation today :(

Last edited by kstewart (2011-03-30 14:19:02)

maverick · 2011-03-30 14:47:53

kstewart wrote:

Many thanks for your detailed explanation and post there!

You’re welcome. Though it erred on information overload.

I know I cannot have a div tag in the header but as there’s a slideshow there, I’m not sure how else I can avoid it.

Are you maybe confusing the html <head> tag with the css a id or class called “head”? It’s one of the places that html created an overlapping concept and it can confuse people at first. Even more so with html5’s new <header> tag.

x/html looks at the whole file as a document. Thus <head> is the “head” of the entire html file, not of the displayed page you see in your browser. For the most part, what you see in your browser is only what’s in-between the <body> tags.

The problem of course, is that on the displayed page, most times we’ll have an area of layout we want to call the header or the head. So we create ids and classes and arbitrarily call them “head” or “header” (html5 has recognized this common practice and added header tags for use in the body. Which is likely to confuse beginners even more).

Confusion comes from the fact they have absolutely no connection to one another. Since your slideshow is meant to display in the browser, it needs to be in-between the body tags. The browsers are being very forgiving, because technically your slideshow isn’t even in the viewed page.

Therefore, you don’t need to worry, because you are not moving it out of the “head” of the viewed page. You are moving it out of the meta data (meta, link, title, script tags) of the html document. Sort of geekish, but hopefully it makes sense :)

Another way to look at it — it’s like a digital photo. Anything between <body></body> is the actual picture. Anything between <head></head> is the meta data telling about the picture.

Your (abridged) page code:

<head>
 <!-- head -->
      <meta http-equiv="X-UA-Compatible" content="IE=7" />
      <title>Fon Media Solutions</title>
      <link rel="stylesheet" type="text/css" media="screen" href="http://www.fonmedia.co.uk/css.php?n=default" />
      <script type="text/javascript" src="/files/jquery-1.4.4.min.js"></script>
      <div class="slideshow">
            <img src="http://www.fonmedia.co.uk/images/3.png" alt="" width="700" height="84" />
            <img src="http://www.fonmedia.co.uk/images/4.png" alt="" class="hidden" width="700" height="84" />
            <img src="http://www.fonmedia.co.uk/images/5.png" alt="" class="hidden" width="700" height="84" />
      </div>
      <div id="head">
            <ul class="section_list">
                  <li><a class="active" href="http://www.fonmedia.co.uk/index.php">Home</a></li>
                  <li><a href="http://www.fonmedia.co.uk/index.php?s=our_work">Our Work</a></li>
                  <li><a href="http://www.fonmedia.co.uk/index.php?s=our_people">Our People</a></li>
                  <li><a href="http://www.fonmedia.co.uk/index.php?s=contact_us">Contact Us</a></li>
            </ul>
      </div>
</head>

Should be

<head>
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
	<title>Fon Media Solutions</title>
	<link rel="stylesheet" type="text/css" media="screen" href="http://www.fonmedia.co.uk/css.php?n=default" />
        <script type="text/javascript" src="/files/jquery-1.4.4.min.js"></script>
</head>

<body>
      <div class="slideshow">
            <img src="http://www.fonmedia.co.uk/images/3.png" alt="" width="700" height="84" />
            <img src="http://www.fonmedia.co.uk/images/4.png" alt="" class="hidden" width="700" height="84" />
            <img src="http://www.fonmedia.co.uk/images/5.png" alt="" class="hidden" width="700" height="84" />
      </div>
      <div id="head">
            <ul class="section_list">
                  <li><a class="active" href="http://www.fonmedia.co.uk/index.php">Home</a></li>
                  <li><a href="http://www.fonmedia.co.uk/index.php?s=our_work">Our Work</a></li>
                  <li><a href="http://www.fonmedia.co.uk/index.php?s=our_people">Our People</a></li>
                  <li><a href="http://www.fonmedia.co.uk/index.php?s=contact_us">Contact Us</a></li>
            </ul>
      </div>

</body>

I would suggest the following changes for clarity and control of your layout. (note the new div called “header” wrapping the whole block, and the change of the links class from “head” to “nav”)

<body>
   <div id="header"
      <div class="slideshow">
            <img src="http://www.fonmedia.co.uk/images/3.png" alt="" width="700" height="84" />
            <img src="http://www.fonmedia.co.uk/images/4.png" alt="" class="hidden" width="700" height="84" />
            <img src="http://www.fonmedia.co.uk/images/5.png" alt="" class="hidden" width="700" height="84" />
      </div>
      <div id="nav">
            <ul class="section_list">
                  <li><a class="active" href="http://www.fonmedia.co.uk/index.php">Home</a></li>
                  <li><a href="http://www.fonmedia.co.uk/index.php?s=our_work">Our Work</a></li>
                  <li><a href="http://www.fonmedia.co.uk/index.php?s=our_people">Our People</a></li>
                  <li><a href="http://www.fonmedia.co.uk/index.php?s=contact_us">Contact Us</a></li>
            </ul>
      </div>
   </div>
   Rest of your page's code
</body>

Last edited by maverick (2011-03-30 14:50:58)

kstewart · 2011-03-30 15:05:16

Many thanks Maverick!

My page now looks like this:

<!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" xml:lang="en" lang="en">
<!-- head -->
<txp:output_form form="meta" />
<body>
<txp:output_form form="slideshow_header" />
<txp:output_form form="head" />
<!-- accessibility -->
<div id="accessibility">

With the meta form having opening and closing head tags and changed to “nav” in the head form. Haven’t wrapped the two forms yet. I need to apply a class to header.

maverick · 2011-03-30 15:50:52

It’s looking a lot better Kim!

For the closing div errors your page is throwing when validating look for the following two areas:

<div id="container">
<!-- left -->
<!-- right -->
<div class="container" id="sidebar-2" >

and

<div id="foot">
<table id="tablefoot">
.... stuff
</table>
</body>

In the first, close your first container div (second one is okay). In the second, close your footer div (between the </table> and </body> That should help clean up some more validation errors. :)

edit: if you want to clean up the table footer (not ideal for layout), three divs using ul (no-decoration) lists will work perfect.

Last edited by maverick (2011-03-30 15:56:09)

Textpattern CMS

Textpattern CMS support forum

#31 2011-03-30 13:17:54

Re: Internet Explorer not displaying table properly

#32 2011-03-30 13:21:51

Re: Internet Explorer not displaying table properly

#33 2011-03-30 13:33:45

Re: Internet Explorer not displaying table properly

#34 2011-03-30 13:48:42

Re: Internet Explorer not displaying table properly

#35 2011-03-30 13:54:41

Re: Internet Explorer not displaying table properly

#36 2011-03-30 13:58:47

Re: Internet Explorer not displaying table properly

#37 2011-03-30 14:01:13

Re: Internet Explorer not displaying table properly

#38 2011-03-30 14:01:43

Re: Internet Explorer not displaying table properly

#39 2011-03-30 14:02:44

Re: Internet Explorer not displaying table properly

#40 2011-03-30 14:03:13

Re: Internet Explorer not displaying table properly

#41 2011-03-30 14:11:01

Re: Internet Explorer not displaying table properly

#42 2011-03-30 14:13:52

Re: Internet Explorer not displaying table properly

#43 2011-03-30 14:47:53

Re: Internet Explorer not displaying table properly

#44 2011-03-30 15:05:16

Re: Internet Explorer not displaying table properly

#45 2011-03-30 15:50:52

Re: Internet Explorer not displaying table properly

Board footer