Why <div Style=""> Works Only In Ie7

[blogsmith]

I used the <table border="1">...</table> to make a horizontal menu bar at Songs lyrics video and surrounded the table tag with <div style="text-align:center">...</div> that is:<div style="text-align:center"><table border="1">....</table></div>The menu bar was in the blog title of a blog created in the Blogger platformHowever, the menu bar is not centered in Chrome, Firefoxbut is centered when viewed with IE7Why is this so and how can I get it centered in all browsers?Thanks.

[Ingolme]

Not that it's the best practise, you'd have to make quite a few changes for that, but try this:

<table style="margin: 0 auto;">

[Jerry62704]

I used the <table border="1">...</table> to make a horizontal menu bar at Songs lyrics video and surrounded the table tag with <div style="text-align:center">...</div> that is:<div style="text-align:center"><table border="1">....</table></div>The menu bar was in the blog title of a blog created in the Blogger platformHowever, the menu bar is not centered in Chrome, Firefoxbut is centered when viewed with IE7Why is this so and how can I get it centered in all browsers?Thanks.

You have a table inside a span. Ditch the span and apply the style to the table. Look into giving the table container div a "margin: 0 auto" as well.Better yet, ditch the table and use the proper tool (UL) for the job. If you are going to stick with a table, use it properly. You are missing a lot of tags for it needed for accessibility.Your page has 718 errors on it. You might want to spend some time on fixing that.Your first css page (http://www.blogger.com/widgets/3825235830-widget_css_bundle.css) has 21 errors on it.

[blogsmith]

Look into giving the table container div a "margin: 0 auto" as well.

What is the purpose of "margin: 0 auto"?

Better yet, ditch the table and use the proper tool (UL) for the job.

I presume UL is unordered list. Why is using UL better than table?

If you are going to stick with a table, use it properly. You are missing a lot of tags for it needed for accessibility.

sorry don't understand

Your page has 718 errors on it. You might want to spend some time on fixing that.Your first css page (http://www.blogger.com/widgets/3825235830-widget_css_bundle.css) has 21 errors on it.

I remembered a long time ago I tried validation on a test blog using a standard Blogger template with just a single word post and absolutely no customization and it failed validation with many errors. How important is validation?

[blogsmith]

I edited it to<table border="1'" style="margin: 0 auto; text-align:center;">It worked. The menu is now aligned center. But I don't understand what I am doing because in the beginning I had put text-align:center within the <table> tag but it didn't work, that was why I tried to use <div> then <span> both of which failed. So I suppose what made it work this time is style="margin: 0 auto;" but why?

[jesh]

So I suppose what made it work this time is style="margin: 0 auto;" but why?

If a block level element (DIVs, Ps, TABLEs, etc) has a width that is smaller than 100% and you set the left and right margins to auto, the browsers are supposed to render out that element in the center of that element's containing element, be that another DIV or even the BODY.

[Jerry62704]

What is the purpose of "margin: 0 auto"?

That is short hand for margin-top:0; margin-right:auto; margin-bottom:0; and margin-left:auto;What it means is don't add margins to the top or bottom of the object. Add as much to the left and right to make it fit the page.

I presume UL is unordered list. Why is using UL better than table?

Most people don't have a clue as to how to do a table (see below). Beyond that, using CSS allows SEO to work better in ranking your page as it finds the content faster. Your page will also load faster as there is no need to render the whole page before displaying it. Why tables are bad.

sorry don't understand

Tables are pretty hard to write correctly. Most just blow it and do a <table><tr><td> combination. For accessibility (508) reasons you should use the rest of the tags. Try browsing a web site that doesn't and use JAWS. Lots of luck. You would never get the page past a professional review without 508 considerations.

I remembered a long time ago I tried validation on a test blog using a standard Blogger template with just a single word post and absolutely no customization and it failed validation with many errors. How important is validation?

The problem is when you have an error on the page (why else be here?) and you have hundreds of them, fixing the problem may 1) break something else or 2) get broken when something else is fixed. I wouldn't waste my time fixing the deck chairs on the Titanic - would you?

[blogsmith]

The problem is when you have an error on the page (why else be here?) and you have hundreds of them, fixing the problem may 1) break something else or 2) get broken when something else is fixed. I wouldn't waste my time fixing the deck chairs on the Titanic - would you? (IMG:style_emoticons/default/Pleased.gif)

Sorry, English not my mother tongue. Does that mean I should try to fix the "errors" or should I give up? What are the consequences of not fixing the "errors"? Errors in quotation marks because the blog is displayed as intended, so to non-IT blokes they are not errors?

[Synook]

Sorry, English not my mother tongue. Does that mean I should try to fix the "errors" or should I give up? What are the consequences of not fixing the "errors"? Errors in quotation marks because the blog is displayed as intended, so to non-IT blokes they are not errors?

He means that unless you fix the underlying invalidity of your markup it would be very hard to fix the more minor problems, in the way that refilling the tank of a car with four flat tires won't really help that much.

[jeffman]

I presume UL is unordered list. Why is using UL better than table?

Good question. The first thing to notice is that there is no native way to construct a "menu." Menu is a concept. A list is a page element. A table is a page element. In other words, a thing instead of a concept The trick is to match the concept "menu" to the best thing. So how do we choose?A table is a grid used to hold tabular data, like a spreadsheet. A list is, well, a list.So, conceptually, a menu is more like a list than a table.With CSS, a table can function as a menu as well as a <ul> can. Neither is perfectly adapted, and you have to tweak and coerce either of them to make a good menu. The fact that you might be more familiar with the tweaking process for adapting a table to a menu might be good enough in the short run, but in the big picture, it's random. If you had first learned the method for tweaking a list into a menu, that would seem more natural.Again, how do you choose?HTML is a strange beast, because it has a strange, not-quite-logical history. It began as a very logical approach to marking up technical reports. Then came 5-6 years of pseudo-logic, in which meaning and presentation were hopelessly confused. This is also the time when a lot of us learned HTML. Learning a thing as it's being invented can lead to weird habits.HTML today strives to emphasize meaning as much as possible. CSS exists to shape the presentation once the meaning has been determined.So if a menu is more like a list than a table, and CSS can make a list look like a really nice menu, then that is the way to go. The fact the CSS can make table look like a nice menu is beside the point, from this perspective. So is the fact that CSS can make complicated menus look very very good if the foundation is a list instead of a table.If your only concern is presentation ("looks"), then the choice really doesn't matter. But if you are concerned with the logic of the thing as well, then the choice is everything. And logic-wise, the list wins out.That's all.Search Engine Optimization happens to emphasize logic, because it's handled by machines with no sense of appearance. That's what Jerry's been talking about. But that's kind of a random thing too. Why worry about SEO if it's just a family blog, or whatever?Because, in a logical environment, logic is good. That's a zen-like answer, but you have to go with something. Go with logic, and let CSS handle the presentation. The good news is, this path generally yields the most attractive results.

[blogsmith]

Basic Principles and Techniques: * Always use a STRICT doctype. Always validate your code.

I use Google Blogger for my blogs and when I first learned about W3C validation, I tested a practically empty blog with a brand new standard template obtained from Blogger itself, even that yielded errors in the double digits so I thought to myself if even something made by I presume experts can yield error, why bother to check validation? Now I am pretty sure all my blogs will yield lots and lots of validation errors. But I check the appearance and working of the blog and it appear (to me) OK and (to me) it worksWhat to do? What will happen if I don't bother and leave it as is?Maybe from now on everytime I make some codes I check for validation first before using it?Hope I am asking intelligent questions?Thanks to all who responded. I may use some of the information I get from here for a post and will like to acknowledge your contributions. If you can email me direct or specify here how to acknowledge, I will keep that in mind when I post.

[blogsmith]

He means that unless you fix the underlying invalidity of your markup it would be very hard to fix the more minor problems, in the way that refilling the tank of a car with four flat tires won't really help that much.

So what should I do? Learn how to distinguish between major errors and minor errors and try to fix the major ones first. How to tell which one is major and which one minor. Or just give up and let it be praying hard everything will still work reasonably well.

[Jerry62704]

I use Google Blogger for my blogs and when I first learned about W3C validation, I tested a practically empty blog with a brand new standard template obtained from Blogger itself, even that yielded errors in the double digits so I thought to myself if even something made by I presume experts can yield error, why bother to check validation? Now I am pretty sure all my blogs will yield lots and lots of validation errors. But I check the appearance and working of the blog and it appear (to me) OK and (to me) it worksWhat to do? What will happen if I don't bother and leave it as is?Maybe from now on everytime I make some codes I check for validation first before using it?Hope I am asking intelligent questions?Thanks to all who responded. I may use some of the information I get from here for a post and will like to acknowledge your contributions. If you can email me direct or specify here how to acknowledge, I will keep that in mind when I post.

One thing to remember is a single corrected item might remove a LOT of errors. Further, the code you added to your page may reflect preexisting errors on the page, not new ones from the template.Give us a link and we can sort this out for you to get you started.

[Jerry62704]

Sorry, English not my mother tongue. Does that mean I should try to fix the "errors" or should I give up? What are the consequences of not fixing the "errors"? Errors in quotation marks because the blog is displayed as intended, so to non-IT blokes they are not errors?

I think all pages should have correct code so I'd fix them, period.What I was saying is trying to fix an existing page with 729 errors on it is putting the priorities wrong. First fix those errors. The error in line 4 causes a lot of errors to pop up in line 17 which is what I mean when I say fixing one may fix many.Start with the asking your template source about any updates to their template. Or did you make that script stuff on line 4?Ditto the variable statements in the css. I don't use this, but it looks wrong synthetically. I thought it was @variable {YourLocalNameInsteadOfASelector: blue}