Internet Explorer not displaying table properly

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.

maverick · 2011-03-30 16:58:33

kstewart wrote:

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.

:) — you only needed the extra closing div at that location if you kept both foot and footwrap. Since you eliminated one, the closing div was no longer needed, and if there it would just give another error.

kstewart · 2011-03-30 17:09:24

Oh right… ooops! Haha! Sorry many thanks for all your help!

GugUser · 2011-03-30 17:16:20

It’s better if you change the <div class="slideshow" /> to <div class="slideshow">.

kstewart · 2011-03-30 17:25:01

Wow! Thanks! That did it! Strangely, I had <div class="slideshow"> for the header slideshow but not the other ones… Anyway, that got rid of 3 more errors so down to 2!

edit – make that 1 error left a rogue </div>

Last edited by kstewart (2011-03-30 17:28:10)

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

The HTML can be further simplified, for example here, instead of:

<div>
	<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>
	(etc.)
</div>

Give the div a class:

<div class="tweets">
	<p><span>I posted a new photo to Facebook <a href="http://fb.me/C5ZzQrWC">http://fb.me/C5ZzQrWC</a><a href="http://twitter.com/fonmedia/status/50623359897178112" class="tweet_time">6 days ago</a>
	</p>
	(etc.)
</div>

Then you can define in the CSS:

.tweets p { …; } or .tweets span { …; }, although I can’t see that you use in the CSS the spans or the class “tweet_text”. Maybe you also can remove the spans …

colak · 2011-03-30 17:32:54

one thing

in your code you have

  <meta name="robots" content="index, follow" />
<meta name="revisit-after" content="1 week" />

I would change it to

  <meta name="robots" content="noindex, nofollow" />
<meta name="revisit-after" content="1 week" />

until the site is finished

kstewart · 2011-03-30 17:35:16

GugUser I think that’s all generated in the kml_twitter plugin. The HTML you mentioned is not anything I’ve written.
Colak Cheers, changed that.

Last edited by kstewart (2011-03-30 17:36:59)

maverick · 2011-03-30 17:39:13

By the way – I just took another look . . . I miscounted on the divs . . . my apologies.

I’m not 100% sure what all each div is doing, (I think GugUser is correct that some of the html can be simplified) but I did find one item definitely causing problems:

Note the “/>”

Divs are always container tags — they are never self-closing as this tag is trying to do.

Because of how it changes the way the divs are located on your page, fixing it may temporarily cause things to move around. But as the other divs get fixed, everything will go back place.

Last edited by maverick (2011-03-30 17:42:06)

kstewart · 2011-03-30 17:50:00

Woohoo!!! That did it! Many thanks maverick!!! I would never have spotted that! It didn’t change the layout. The small div class was to make RSS and Atom feed font smaller. It was the only way I could think to do it…

GugUser · 2011-03-30 18:05:31

You can define everything that has to do with the appearance in the CSS. For example: I suppose you write an <h4> in the HTML, because you want a smaller font. But, you don’t have any <h1> in your document.

But, the meaning and/or the function of the titles h1-h6 is another. Those should define a structure of the content.

I know, it has to do nothing with your original question, but maybe it helps to improve your work on the HTML.

Last edited by GugUser (2011-03-30 18:06:00)

maverick · 2011-03-30 18:10:50

kstewart wrote:

Woohoo!!!

Congratulations! :)

The small div class was to make RSS and Atom feed font smaller. It was the only way I could think to do it…

That’s one way, and as you see, valid. If you want less divs cluttering up your page, other options include using a <span> around the text, or more directly, use css pseudo classes where you add styling to the <a> tags themselves.

GugUser’s suggestion is a good one – you could swap your <h4> elements for <p>. He’s pointing out that semantically, they are not headlines. The benefit comes with certain browsers for the disabled, voice navigation, etc. Plus for font sizing and weighting, you will give yourself enormous control over your typography using css classes. Font families, font size, font weight, etc.

Last edited by maverick (2011-03-30 18:11:41)

kstewart · 2011-03-30 18:30:26

GugUser You’re absolutely right, they are not headlines and it makes sense not to expect my friend to use <h4> all the time. Didn’t think of that.

Maverick Thanks I’ve never heard of pseudo classes before. I like it when a link changes colour after visiting so may add this.

Textpattern CMS

Textpattern CMS support forum

#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

#49 2011-03-30 16:58:33

Re: Internet Explorer not displaying table properly

#50 2011-03-30 17:09:24

Re: Internet Explorer not displaying table properly

#51 2011-03-30 17:16:20

Re: Internet Explorer not displaying table properly

#52 2011-03-30 17:25:01

Re: Internet Explorer not displaying table properly

#53 2011-03-30 17:30:46

Re: Internet Explorer not displaying table properly

#54 2011-03-30 17:32:54

Re: Internet Explorer not displaying table properly

#55 2011-03-30 17:35:16

Re: Internet Explorer not displaying table properly

#56 2011-03-30 17:39:13

Re: Internet Explorer not displaying table properly

#57 2011-03-30 17:50:00

Re: Internet Explorer not displaying table properly

#58 2011-03-30 18:05:31

Re: Internet Explorer not displaying table properly

#59 2011-03-30 18:10:50

Re: Internet Explorer not displaying table properly

#60 2011-03-30 18:30:26

Re: Internet Explorer not displaying table properly

Board footer