Jump to content

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


blogsmith
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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? :)
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...