You don't have to use different stylesheets for different browsers. I get stuff to work just fine with only one.

The following rules make pages work with all browsers:

  • Don't use deprecated tags and attributes.

  • Don't use browser-specific tags.

  • Make all HTML tags lowercase.

  • Be aware that Internet Explorer renders box objects in a different way, compared to other browsers. Don't put nonzero surrounding styles (margin, border, width) in the same tag or style that contains size styles (width, height).

  • Make all attributes, values, styles, ids, and classes lowercase.

  • Don't tangle tag pairs. Each pair of opening and closing tags must be entirely inside, or entirely outside, every other tag pair in the document.

  • Place all attribute values in quotes.

  • Don't put line breaks within attribute values.

  • Close containing tags with separate closing tags.

  • Close empty tags with self-closing tags. Put a space before the / mark. This is necessary to get Internet Explorer to work correctly with closed empty tags.

  • Don't use comments to hide scripts or styles from browsers. They cause trouble.

  • If you can do so, use styles instead of tables to create columns.

  • Don't use tables to create margins, borders, or padding. Use tables to create tabular data.

  • Set text alignment styles for tables. The defaults are different for different browsers.

  • Write your urls and filenames as though everything is case-sensitive. And don't use special characters in urls and filenames.

  • ...
commented: excellent +1 +22

You are designing for the quirks mode of the browsers without the doctype. If you are in quirks mode, the browsers do weird things.

Standard mode puts the surrounding styles (margin, border, padding) OUTSIDE the width and height declarations, so you have to leave extra space for them.

Don't use pixels and points. Use percents and em, so the page is compatible with multiple screen resolutions.

commented: Answers the "why" part of my question ! +1

It really can't be done in a way that works on all browsers. The web was designed so that you do not know what size the browser window is, and with no way to fit something exactly to the browser window. The page is supposed to flow to fit the existing space.

For width, you can simply use the width function with the appropriate percentages for what you want. You can use percent to change the sizes of images too. Use relative sizes, so all of the parts expand and contract at the same proportions.

Adjustments for the height of the browser window are not provided in a way that works on all browsers and computers. The best way to do it is to treat the web page as a scroll, not a sheet of paper. The Internet is not designed to treat information as sheets of paper.

Or use Adobe Acrobat to play the page. It can do this, because you can resize to fit..

Because most people open their browsers maximized, design the page to work on a standard browser aspect ratio. Make sure the background color is compatible, so if any background shows below the content, it is not obtrusive. If the page renders taller than the browser window, scrolling is a fact of life.

Remember that the new 16x9 monitors are throwing monkey wrenches into this.

If this is an assignment from a superior, you have the dubious task of convincing him that it can't be ...

commented: I do appreciate your coments :) +1

It's the fact that a playing movie usually expects to be on top, combined with the fact that the dropdown does not render until it activates.

We need some limits on what ads can do:

  • They must not use up all of the CPU time.*
  • They must not do anything when the mouse rolls over them.*
  • They must not scroll the screen to show the ad.
  • They must not hide the insertion point.
  • They must not freeze the mouse.
  • They must not expand to cover other parts of the page.
  • They must not make sounds.
  • They must not prevent navigation.
  • They must not advertise anything a child should not see.

And here is a lost of things I would prefer that ads not do:

  • No animation. It's extremely distracting.
  • No blinking text.
  • Any link should be a visible link, not the entire ad.
  • Following the link must not destroy the browser history.*

  • This should be true for all websites, not just ads.

How about writing on how designers have to waste time rewriting web pages that used to work, because the software makers and the W3C keep changing the standards.

It's just like the forced change to DTV that everyone hates. The clowns in charge can't leave the standards alone.

I had the same trouble.

My printer knows it can't print that close to the edge of the paper, so it won't do it.

Telling the printer that the paper is a different size just moves the definition of the bottom of the page. But the software still wants to put the border too close to the new bottom. The printer still thinks the border is too close to the edge.

Most Lexmark printers have this problem, because the rollers let go of the paper before the printhead gets that low on it.

Do this:

  • Go into the page layout dialog box and set the bottom border higher.

  • Go into the Page Borders dialog box and make the border you want. Then, before leaving the dialog box, use the Options button.

  • In the new dialog box, select to measure from the edge of the text, rather than the edge of the paper.

  • Click OK for each dialog box.

I tested this on Word 2003 and 2007. I have no earlier version of Word.

commented: Great help. Brilliant, clear solution. +6

Of course, this might result:

Languages spoken:
xhtml, css, perl, pascal, FORTRAN, Visual Basic, C, ...

(English not listed)

commented: LOL +36

Do you mean as in how Microsoft Word marks perfectly good grammar as bad, because it picks the wrong word to use as the verb?

I have never seen a grammar program that works right.

I have also never seen a spelling program that knows all of the words.

Get rid of this absurd idea.

commented: Exactly :) +36
commented: echo! +11

But be careful. If you pat yourself on the back too hard, you will fall off the pedestal you put yourself on. :icon_mrgreen:

commented: :) +12
commented: funny +18

The xml line is not necessary, and causes errors on some browsers.

Look for styles containing both a size style (width, height) and a nonzero surrounding style (margin,. border, padding). These can make things wider than 100 percent, causing the column to go down.

Look for anything wider than the page.

Check the page for W3C validation.

commented: very usefull info +1

Tips:

  • Don't use pixels for anything other than border size.

  • Use % measures for sizes and positions relative to the width of the browser.

  • Use em measures for sizes relative to the browser font size.
commented: Good tip +1

There is now a reason to use tables and css for layout, instead of divs and css.

Employers now prefer the table method. Our technical school instructors are now teaching this, instead of div and css.

Why?

Job performance!

It takes an average of four times as long to create a page using divs and css, compared to using tables and css. This is because the page author must fool around with the div settings until it works. The table always works the first time.

The employer prefers getting more pages per day, as opposed to getting pages that please the W3C.

Simple div structures work, but if the structure contains a list or a table, div messes it up. Then you have to play with height, width, margin, border, padding, and other properties, just to get the structure to hold together in all browsers.

As an example, I wanted to create a simple structure consisting of text on the left and a small table on the right, all surrounded by a border. I tried the following in sequence:

Making a surrounding div for the border:

  • I could not get the table to go to the right and stay inside the border.
  • It wanted to put the table under the text instead.

Make a surrounding div for the border, with two divs inside:

  • The div for the border became small vertically, with both the text and the table sticking out below the bottom border.

Making a surrounding ...

commented: Nice take/points. +18

0px is an invalid style. Place units of measure on nonzero values that need them. Do not place units of measure on zero values. It causes some browsers to throw the entire style away.

commented: yes +18

This is one place where absolute positioning and pixel sizing fail miserably.

If you use size styles (width, height) in the same tag or style that contains nonzero surrounding styles (margin, border, padding), it causes Internet Explorer to do this kind of thing, with a different result in Firefox.

The search function is totally useless.

I am searching for an old post I made on fixing a problem with Firefox overlapping images with tables placed below them. The solution was in the post. But the search function will not find the post.

Instead, it is finding posts that have only one of the keywords I put, instead of requiring that all of the keywords be present.

commented: I feel your pain :( +27

One page could then contain a link to the other, in a place where it is seen immediately.

Actually, I don't wrote for mobile devices, because I wish that every one of them would be crushed by bulldozers. People should not have access to such devices while behind the wheel, and those devices are the reason we are losing analog TV.

My variations on your 19 Things NOT To Do When Building a Website

  1. DO NOT resize the user’s browser window, EVER. (I agree. It's a cheap substitute for designing for variable sizes, and can mess up someone's settings needed for other purposes.)

  2. If your website requires the visitor to load your home page, and then “launch” your real website in a pop up, YOU LOSE. (Anything in a popup never gets to my browser. I swat them like flies!)

  3. If your website asks the user which version they’d like, high bandwidth or low, HTML or Flash, you ALSO LOSE. (You also lose if you don't ask, because the user who can't use either the highest resolution you use, or the scripts to make the choice, can't see it at all. Load the low res page, and provide a link to the high res one.)

  4. If your website is ALL Flash, FIRE your web development company. (Many people can't download the player due to college or employer restrictions. And animation is extremely annoying, unless it teaches something.)

  5. DO NOT try to reinvent the website navigation. ...
commented: informative, funny, and apoplectic. Commander Root, is that you? +2

I found two the validation service won't find:

  1. You have an 0px style value in your p tag style. This is invalid in Firefox, and causes the entire p tag style to be thrown away. There may be more of these.

  2. You have size styles (width, height), and nonzero surrounding styles (margin, border, padding) in the same style or on the same tag. This causes size and placement errors, because IE wrongly nests them in the wrong order. FF and other browsers place the surrounding styles outside the defined size styles, as the W3C specifies. IE crams them inside the size styles.

The trick is to not use nonzero surrounding styles and size styles in the same tag. Nest two tags, with one style in each.

commented: Well spoted +12

You have invalid code that causes FF to throw out the style it is in.

Zero values in styles must NOT have units of measures. Your 0px entries cause the style it is in to be thrown away by the browser:

Yes: 0
No: 0px, 0pt, 0in, 0%, 0em, etc

commented: Helpful and concise. +4

Both the center tag and the align= parameter are deprecated. They will stop working sometime in the near future, when HTML 4 is no longer supported. They do not work at all in XHTML now. Please don't give obsolete solutions.

There are two things going on here:

  1. For some strange reason, the W3C does not want us to center anything but text. I think they are thinking in terms of books and newspapers, as opposed to homepages and advertising. No easy way to center anything else was provided, other than styles involving automatic margins or a clear on both sides.

  2. IE doesn't follow the rules. Even when you apply the correct styles, IE doesn't understand what you wanted. But adding a style to center text alignment also makes the others work.

Don't specify sizes in pixels except for images. Using pixels for the sizes of other objects keeps the page from being compatible with various screen resolutions.

Don't use tables to create non-tabular structures, unless nothing else can be made to work. The table is not deprecated, but the use listed in the post above is an abuse.

The solution in the post above also has tangled tags, and will not pass W3C validation.

commented: His explanation of CSS center methods is great! +1

The problem is that most software developers set prices as though businesses are the only customers. Individuals can't afford those prices.

The images are Word Art, which is part of Microsoft Word.

First, make sure you have copyright permission to use the document.

Use Ctrl-PrintScreen to take a screenshot. Then use MS paint to paste it into a blank document. Cut out the parts you want, and save them as .jpg images by pasting them into blank images.

You can also use the "Save as Web Page" option in the Word file menu. But it produces a huge messy web file.

Sorry about the flowers and shrubs, honey. GPS is accurate to only 6 feet.

commented: haha +8

The real money worshipers are Congressmen, who keep stealing more of our money for their nefarious purposes. That's why nobody has enough left to give to the church.

It has to know the filenames and locations too.

Here is how it works:

  1. Each small photo is a reduced size and resolution thumbnail image of its larger photo.

  2. Each thumbnail is made a clickable device with an onclick to call a JS function for that photo. There is one function for each photo.

  3. The function loads the image into an img container for the large picture.

He means those things where you have to type in the letters visible in an image to validate the submission.

This requires a server-side script.

commented: You correct, somehow I overlooked the problem :) +8

You have an improper nesting. The ul tag pair can't be inside a p tag pair. It kept the p tag pair from wrapping around the image.

commented: Quick eye right to the problem +1

Most real-time software has to be rewritten to work with new versions of operating systems.

What OS is the game specified to run on?

[QUOTE=robothy;611258]MidiMagic, I think, well actually, I know each of the above comments are incorrect. I've used 0px for styles on all the websites I've built and likewise, I've used margin, padding and borders in a single stylesheet element for a lot of those sites.

All my websites validate to W3C HTML 4.01 strict and CSS standards with 0 errors or warnings. So, if 0px is an invalid style, it would have been picked up. Likewise, I am pleased to say that my websites using these stylesheets are pixel perfect between FFX2, FFX3, IE6, IE7, Netscape, Opera and Safari.

Just some food for thought.[/QUOTE]

0px, 0pt, and other zero values with dimensions kick Firefox into quirks mode, and often prevents the style containing it from operating. It shows up as an error in the Firefox error console. It works, but in quirks mode.

But note that I use XHTML 1.0 Strict. This might be a deprecation in XHTML, but it is not caught by the W3C validator.

I use 4 tests on each page I produce or refurbish:

  • Spellcheck

  • W3C validation

  • Browser rendering correctness and differences between browsers

  • Firefox Error Console

You misread the part about the margins, borders, and padding. What does not work right is putting size styles (width, height) in the SAME tag that has nonzero surrounding styles (margin, border, padding). Nest two tags if you need both kinds of styles.

This second item is NOT a matter of validation, and it causes ...

commented: thank you for help!!! +1

A few points:

  • 0px is an invalid style. It causes browser errors. Use 0 for values that are zero.

  • Convert all size and alignment tag attributes to styles.

  • Use classes, so each set of styles can be used on all tags needing it.

  • Use relative sizes, as percentages of the width of the containing element.

  • Don't place nonzero surrounding styles (margin. border, padding) and size styles (width, height) in the same tag or style. Putting them together causes browser incompatibilities, because IE nests them in the wrong order.

  • Convert one property type at a time. Then test the changes.

  • Use tables if you need a structure to hang together when the window size changes. Use divs if you want to allow the content to slide around for maximum visibility without horizontal scrolling.

  • Don't use absolute positioning or styles, except for image sizes.

  • Test the page with different browsers and screen resolutions. Also play with the browser window size (in restore down), to see what happens when the resolution or window size becomes small.

  • Use the W3C validator page.
commented: Thank you! +1