Internet Explorer not displaying table properly

GugUser · 2011-03-29 22:07:54

Regardless of whether you are looking for the construction of websites (…), Fon Media Solutions can realise your media brief with exceptionally fresh and professional results.

If you want to deliver professional work, then you have to learn HTML, CSS, etc. Your proceeding shows me that you don’t know what you’re doing. At the moment, no browser is the problem. First, the code must be correct, then one looks for solutions for poorly developed browsers.

kstewart · 2011-03-29 22:31:29

Yes, thank you for your input. The company is not mine and they were just looking for a simple cheap option. They are primarily delivering radio, video and animation content. The latter being my usual work.

I do know basic HTML and CSS however it’s my first time with Textpattern and the site’s not quite finished. Still tweaking bits.

Last edited by kstewart (2011-03-29 22:53:46)

GugUser · 2011-03-29 23:54:40

I do know basic HTML and CSS however it’s my first time with Textpattern and the site’s not quite finished. Still tweaking bits.

The topics we are discussing here has nothing to do with TxP, mainly with HTML …

The current problems you have to solve are in the HTML … maverick showed you the basic scheme. The divs have nothing to do outside the <body>.

And you still have  inside  and and other errors in the HTML. Your job in this stage is to improve the HTML. Nothing more.

And then you can work in the details with CSS and JS …

kstewart · 2011-03-30 12:48:56

If you mean the from kml_twitter… I have this:

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

and it outputs as

	<p class="tweet"><span class="tweet_text">I posted a new photo to Facebook <a …

Without breaktag="p" wraptag="p" it doesn’t look the way I wanted it to.

GugUser · 2011-03-30 13:03:46

HTML is not for determine the appearance.

I mean this:

<p>
    <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>
    <p class="tweet"><span class="tweet_text">Currently getting snapped for our press shots. Grrr work it darling the camera loves you! <a href="http://twitter.com/dave2huphreys">@dave2huphreys</a></span> <a href="http://twitter.com/fonmedia/status/49544454524243968" class="tweet_time">Mar 20th</a> </p>
    <p class="tweet"><span class="tweet_text">Moral of the story: you come up with the idea, Fon Media will help you execute it:… <a href="http://fb.me/BX1QL2c6">http://fb.me/BX1QL2c6</a></span> <a href="http://twitter.com/fonmedia/status/48784307208208384" class="tweet_time">Mar 18th</a> </p>
    <p class="tweet"><span class="tweet_text">Interesting reading: How are small businesses using social media? [infographic] <a href="http://bit.ly/hwFj80">http://bit.ly/hwFj80</a></span> <a href="http://twitter.com/fonmedia/status/48071148331737088" class="tweet_time">Mar 16th</a> </p>
    <p class="tweet"><span class="tweet_text">Pleased to be the official social media administrator for the Poynton Town clerk: follow <a href="http://twitter.com/poyntontownclerk">@poyntontownclerk</a></span> <a href="http://twitter.com/fonmedia/status/46993986233184256" class="tweet_time">Mar 13th</a> </p>
</p>

In terms of a proper semantics you can use an unordered list.

You decide whether you want to learn or not.

GugUser · 2011-03-30 13:07:32

Divs are not part of <head>.

Why do you ask in this forum and do it as if you all knew better?

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  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="Recent tweets..." 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. 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 will yield Txp output (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: (as the code GugUser posted shows). GugUser means you put inside of a in the sense that you set the breaktag=””.

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 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)

Textpattern CMS

Textpattern CMS support forum

#25 2011-03-29 22:07:54

Re: Internet Explorer not displaying table properly

#26 2011-03-29 22:31:29

Re: Internet Explorer not displaying table properly

#27 2011-03-29 23:54:40

Re: Internet Explorer not displaying table properly

#28 2011-03-30 12:48:56

Re: Internet Explorer not displaying table properly

#29 2011-03-30 13:03:46

Re: Internet Explorer not displaying table properly

#30 2011-03-30 13:07:32

Re: Internet Explorer not displaying table properly

#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

Board footer