Internet Explorer not displaying table properly

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)

kstewart · 2011-03-30 16:19:18

Snap! Been meaning to change the footer since I discovered tables are way more hassle than they’re worth! I just finished changing that but used 3 divs footleft1, footleft2, footright with decoration…

edit: closing the first container div before </body> creates another error. And closing it before  <div class="container" id="sidebar-2" > makes the layout go crazy. I thought the errors were from a couple too many closing divs? (which I can’t seem to locate).

Last edited by kstewart (2011-03-30 16:29:27)

maverick · 2011-03-30 16:35:43

Nice progress.

You still have a couple of open divs. The first container div needs to be closed (I’m guessing that it is meant as an empty container/placeholder for the moment and you’ll want the </div> directly after the opening?).

Also, you still have an open tag in the footer

<div id="foot">
<div class="footwrap">

You can just add an extra </div> before the </body> tag, or, while I didn’t double check your css, it looks like you could get rid of one them (they should be doing about the same thing). If you have css for both, just combine the declarations together in you style sheet.

I’m not positive those two closing tags will remove the last of your validation errors, but from a quick look at your code, I think they might, or at least come close. :)

Last edited by maverick (2011-03-30 16:35:58)

kstewart · 2011-03-30 16:46:53

Cheers maverick have combined footwrap and foot into just foot. Tried to add </div> before the </body> after your post #45. However it generated an additional error in validator.

Textpattern CMS

Textpattern CMS support forum

#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

#46 2011-03-30 16:19:18

Re: Internet Explorer not displaying table properly

#47 2011-03-30 16:35:43

Re: Internet Explorer not displaying table properly

#48 2011-03-30 16:46:53

Re: Internet Explorer not displaying table properly

Board footer