MidiMagic 579 Nearly a Senior Poster

The stand alone player and the plugin are two different things. Also, the IE plugin and the Firefox plugin are two different things.

MidiMagic 579 Nearly a Senior Poster

Business = you are selling something or advertising something.

But I do not think it is right to disqualify a site because the internet hosting provider forces its own ad on the site.

MidiMagic 579 Nearly a Senior Poster

I suggest that you move to xhtml.

MidiMagic 579 Nearly a Senior Poster

Get a book on xhtml and css.

MidiMagic 579 Nearly a Senior Poster

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.

sandra21 commented: very usefull info +1
MidiMagic 579 Nearly a Senior Poster

This is because target= is deprecated.

MidiMagic 579 Nearly a Senior Poster

You have used stylesheet keywords as class names. That could cause a style to be invalidated.

MidiMagic 579 Nearly a Senior Poster

Sorry, I have that backwards. The p tag can't contain ul or ol.

MidiMagic 579 Nearly a Senior Poster

Remember that lists are not block objects. They can't contain many tags, including img and p tags.

MidiMagic 579 Nearly a Senior Poster
h2 
	{font-weight:normal;
	font-size:1.7em;
	height:40px;
	margin-left:-19px;
	padding-left:10px;
	padding-top:32px;
	display:block;
	background:url(/images/boxh.gif) no-repeat;
	color:#800080;}
<a name="overhere"></a>
<h2>Overhere</h2>
<p>something about overhere...</p>

I think your code and styles are confusing it. You have several things that each can force the top of the line off the page:

- The A tag is empty. That makes it render very small at the bottom of the line of text, if it renders at all. Put the a tags inside the h2 tags and the contents between the a tags. I think this is it.

<h2><a name="overhere">Overhere</a></h2>
<p>something about overhere...</p>

Empty tag pairs cause all kinds of rendering trouble--never leave tag pairs empty. If you absolutely must have an empty tag pair, put a nonbreaking space between them.

- I often have trouble getting IE to correctly render h# tags when relative font size (em) measures are used.

- The font size of 1.7em and the height of 40px may be placing two different constraints on the same item that different browsers react to in different ways, especially under different screen resolutions.

- Negative surrounding styles are also not defined by the W3C, and can make quite a mess. Never use them.

- Try defining your padding in units other than px (try em instead).

If none of these work, one thought is to attach the anchor tag to something small in a line above the title (maybe an hr tag, a nonbreaking space, or a line of ----- …

MidiMagic 579 Nearly a Senior Poster

Stop using px for sizes, or it will behave totally different when the browser window or the screen resolution changes.

Where the object appears in the box depends on how much margin you give it on each side, and what else is in the box.

With some box objects (but not div), you can set the vertical-align attribute.

MidiMagic 579 Nearly a Senior Poster

You really do not have to do anything, except make sure the site is searchable by robots.

Your content itself determines whether or not a search engine will find it.

But beware. The searchable content must be in the plain text of the html files. The search engine can't see content in images or movies, content added by scripts, content in server-side files, or any other content. It can see the alt text for img tags.

MidiMagic 579 Nearly a Senior Poster

Those are the edges of the button the image is placed on. They are like the edges of the buttons at the ends of the scrollbar. Watch what happens when you press one.

The navy color indicates the button is selected. Selecting something else moves the selection there. Note that the first link on the page (in html code order) is always selected when a page loads. This tells you what link will be followed if you press ENTER.

MidiMagic 579 Nearly a Senior Poster

Actually, it can't be done in a way that works on all browsers, screen resolutions, and window sizes.

The internet is not designed to look like a Windows program. There is no provision for using either the window size or footers. The web is NOT intended to be used in this manner.

What is causing this sudden demand for footers on web pages?

They have never been possible in a browser-independent manner. All of the tricks used to try to get this fail on at least one browser.

MidiMagic 579 Nearly a Senior Poster

Sort of.

The availability of information for free over the Internet will eventually remove all value from anything that can be posted on the Internet. You would not need to pay for it.

MidiMagic 579 Nearly a Senior Poster

The reason we need the final code is that we need to see how it renders. There are places where different tags interact strangely.

But playing with JavaScript, PHP, and Perl can cause other rendering errors. One error I have seen is that an object that is not initially rendered is rendered wrongly when inserted later.

MidiMagic 579 Nearly a Senior Poster

The Internet will remove all of the value.

MidiMagic 579 Nearly a Senior Poster

When you place your web page online, EVERYONE has access to your source code.

MidiMagic 579 Nearly a Senior Poster

They can't prevent such a use of the data. I have some simple software that extracts text from images. It could easily reconstruct the information. So can anyone who can type.

Why are you so afraid that people will use the information? That's what the Internet is for.

I believe that intellectual property will become a thing of the past within ten years. The internet will make it totally impossible to maintain.

MidiMagic 579 Nearly a Senior Poster

This is going too far on the tableless page movement!

The original reasons they wanted tables removed from page development are:

- Tables announce their presence by row and column number when accessibility features for the blind are used.

- Before we had margins and padding, tables were the only way to put a margin around the content of the web page.

- People were cutting up images and putting them in table cells to get around server file size limitations.

- People were using tables to control layout or provide sidebars (this is not yet fully solved without using tables).

A form is a form of tabular data. So don't be afraid to use tables here. Table isn't deprecated - it's not going away like center did.

MidiMagic 579 Nearly a Senior Poster

No remote user can look at your network drives. You must upload the file to the network server, and give the file public read permission.

MidiMagic 579 Nearly a Senior Poster

Easy in Word - it's a built in style. Hard in xhtml, but doable.

You will have to use a different style for the odd rows and the even rows:

- The odd rows have dark top borders and light bottom borders.
- The even rows have dark bottom borders and light top borders.
- All rows have dark left borders, and no right borders.

Make a .class for each kind, and put the class= in the td tags, according to whether they are in odd or even rows.

MidiMagic 579 Nearly a Senior Poster

You need to design for all resolutions, instead of assuming a specific screen size. Many senior citizens have lower resolutions (e.g. 800 X 600) so they can see the text easier.

I have several tips on making a compatible screen:

1. Don't cram too much on the page.

2. Never use absolute positioning or size.

3. No images larger than 600 X 450 pixels (unless you want people to scroll).

4. Don't piece images together from smaller parts (this falls apart with low resolutions).

5. Use alignments to provide a pleasing display (I tend to place text on the left, images on the right, so the text left-justifies).

6. Design the layout so it can expand and contract.

7. Never place text on top of an image. Many people can't read text with a pattern under it.

8. Use real links, not dropdown menus or clickable parts of images.

9. No moving content, unless you are using motion to teach something. It is VERY annoying to everyone except the page designer (the ad to the right of the page as I am composing is distracting me to the point that it is taking longer to compose this).

10. Test your low-resolution "look" by reducing the size of the browser window. Also check with multiple browsers.

MidiMagic 579 Nearly a Senior Poster

This kind of equal column display works with table, but not with div. Table will automatically make the columns the same height. Div won't do this, because each div has absolutely no logical link to the div next to it.

All of the methods used to try to make divs stay the same height are kludges. The "best" kludge is to read the heights of the two containers with JavaScript, and then have the code adjust the shorter one.

You have the following choices:

1. Use tables. The div is not yet perfected enough to do this.

2. Use kudges to make the columns the same height. This usually means making both columns longer than necessary

3. Don't use distinctive backgrounds or borders to show the edges of the columns. Then it won't matter.

Try this sample code. Then try it again after removing the references to the first four styles (the colors). It doesn't work if the colors show, but it works if the backgrounds are all the same. It also acts up if you remove the titles, or if you use code that introduces incompatibilities between Internet Explorer and Firefox (see below).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Your title here</title>

<style type="text/css">
.bmag {background-color: #ff88ff;}
.byel {background-color: #ffff88;}
.bcyn {background-color: #88ffff;}
.bvio {background-color: #cc88ff;}

.bitty {font-size: 14pt;}
.nbor {border: none;}

.nocol {width: 100%; padding: 0; border: none; margin: 0;} …
MidiMagic 579 Nearly a Senior Poster

A few points:

- You can center text vertically in a container, but NOT on the browser window. The web is not designed for centering objects on the screen vertically. Web pages start at the top, and grow down enough to display the content. Different browsers, screen resolutions, and window sizes make it impossible to center objects on the screen in a way that works on all computers.

- Don't use pixel counts to define sizes. Use points or percentages.

- Divs are box objects, not text containers. Use p tags for text.

MidiMagic 579 Nearly a Senior Poster

You need to nest two divs, one with the surrounding styles, and the other with the size styles. Nest them in the order you want the styles to appear in. Then both browsers will behave the same way.

The previous solution does not work, because the styles have both size and surrounding styles.

Do this:

Styles:

.boxfix {margin: 0; border: none; padding: 0;}
.boxsiz {width: 300px;}
.boxbor {margin: 10px; border: none; padding: 0;}

HTML:

<div>
  <div class="boxbor">
    <div class="boxsiz, boxfix" id="img1">
      <img src="myimage1.gf" alt="my first image" />
    </div>
  </div>
  <div class="boxbor">
    <div class="boxsiz, boxfix" id="img2">
      <img src="myimage2.gf" alt="my second image" />
    </div>
  </div>
</div>

Use the ids to do the javascript settings.

MidiMagic 579 Nearly a Senior Poster

The problem is that the nesting order of size styles (width, height), and surrounding styles (margin, border, padding) is different with different browsers.

FF puts the surrounding styles OUTSIDE the size styles, where the W3C says they belong.

IE crams the surrounding styles INSIDE the size styles.

The problem you are having is that your code is making the styles add up to more than the width of the available space, once you add in the surrounding styles. When this happens, the div drops down under the others.

MidiMagic 579 Nearly a Senior Poster

I still hate how I can't navigate the site while the ads are moving.

MidiMagic 579 Nearly a Senior Poster

WRONG!

Table is not blasphemous, except with some idiots who don't understand what the W3C really wants people to avoid.

The things the W3C wants to remove are:

1. The use of tables to create margins, borders, and padding effects. Before CSS, table was the only way to make them.

2. The use of tables where the row and column announcements made by accessibility page readers for the blind do not make any sense in the page context.

There is a real problem: Div can't do what table can do in respect to keeping a structure together. Div is fluid in nature, and falls apart when things don't fit.

My rule on this is:

- Use table to create structures where it is important that the parts stay together in a gridlike pattern.

- Use div in other cases.

MidiMagic 579 Nearly a Senior Poster

Do they teach spelling?

MidiMagic 579 Nearly a Senior Poster

I saw it, but it disappeared before I knew to get a screenshot. It was an ad that launched popups when the mouse rolled over it.

MidiMagic 579 Nearly a Senior Poster

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.

kvdd commented: His explanation of CSS center methods is great! +1
MidiMagic 579 Nearly a Senior Poster

You are really supposed to put things side by side, rather than trying to pile stuff on top of other stuff. You might try z-axis, but don't expect it to work on all browsers.

Most players (.flv, .mpg, .pda) expect to be on top, because images can move in players.

MidiMagic 579 Nearly a Senior Poster

All you have to do is specify the .css extension in the filename when you save the file. I don't try to change the file type dropdown. It works for me for both .htm and .css files.

MidiMagic 579 Nearly a Senior Poster

You have a lot of errors:

- Values of 0 can NOT have units of measure attached.

Wrong: 0px
Right: 0

- You have size styles and nonzero surrounding styles (margin, border, padding) in the same tag or style.

MidiMagic 579 Nearly a Senior Poster

You can NOT make a page exactly fit the screen on all computers.

MidiMagic 579 Nearly a Senior Poster

First, you are using size styles (width, height) and nonzero surrounding styles (margin, border, padding) in the same style or tag. This is guaranteed to cause a FF/IE incompatibility.

Second, you need to understand the hierarchy of styles.

Highest
- specific class or id styles from a stylesheet
- specific tag styles from a stylesheet
- specific styles in html
- document-wide formatting from a stylesheet
- document-wide formatting from html
lowest

Within the same level of hierarchy, styles placed at the bottom of the stylesheet have precedence over styles placed at the top.

I suggest you use a class to assign specific styles that over ride the styles otherwise in use. Place the specific styles last in the stylesheet.

MidiMagic 579 Nearly a Senior Poster

Microsoft is greedy. They think you bought XP after the last day it is supposed to be sold.

This kind of software registration demand should be illegal. It is too easily abused.

MidiMagic 579 Nearly a Senior Poster

It's a kludge.

Don't use negative surrounding styles. They are not defined, and can do widely different things on different browsers.

MidiMagic 579 Nearly a Senior Poster

You can't have negative surrounding styles.

margin-top: -12px;
	margin-bottom: -18px;

These are causing the overlapping.

Why are you using them?

Negative surrounding styles are not really defined, and do different things in IE and FF.

- Since FF obeys the standard and puts surrounding styles outside the size of a box object, a negative surrounding style makes the surrounding style intrude on the contents of the box. This causes the boxes to overlap when rendered, since they are larger than their margins.

- Since IE does not obey the standard, it puts the surrounding styles inside the size of the box object. So negative surrounding styles stick out from the box.

The best thing to do is to not define sizes and surrounding styles on the same tag.

Always design for FF first, since it obeys the standard. Then, all browsers except IE will work. Then adjust your design to also work in IE.

MidiMagic 579 Nearly a Senior Poster

The BIOS battery might have died. It's rechargeable, but sometimes they totally give out. Then the computer forgets what hardware it has.

MidiMagic 579 Nearly a Senior Poster

Why not just stop worrying about it? Post a little box above the edit window telling how to use them, and then forget it.

If they don't use the code tags, they don't use the code tags. Ignore it. The polar ice cap won't melt because they forgot the code tags.

MidiMagic 579 Nearly a Senior Poster

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.

MidiMagic 579 Nearly a Senior Poster

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.

MidiMagic 579 Nearly a Senior Poster

Wait until Windows Update finishes. This usually takes several minutes. Then it quits using the CPU time.

MidiMagic 579 Nearly a Senior Poster

It has to know the filenames and locations too.

MidiMagic 579 Nearly a Senior Poster

The 3D effect of the picture itself is done by the photographer at the time the picture is taken.

This is a lighting technique I have used in photography. The keylight is placed in front, above and to one side of the subject (in this photo, it is to the upper left of the camera). Then, other fill-in lights are added to produce the wanted 3D effect.

The shadow is done with a gradient from the edge of the image to the transparent background.

MidiMagic 579 Nearly a Senior Poster

You learn JavaScript and write it. It must be specific to your images.

MidiMagic 579 Nearly a Senior Poster

ummm if you refering to the yahoo reset.css its perfectly fine to just say 0. afterall 0Apples == 0Oranges. But yes if your trying to say font-size:0; in respect to image replacement, it wont work in IE6. you must say

What is not OK is saying 0px, 0pt, or 0em. If the value is 0, it must NOT have a unit of measure appended. It causes errors in Mozilla browsers (Firefox, Netscape) that cancel the entire style.

Well having sent the page of to Browsershots.org we get a consistent effective layout, centerd to the page. Further i have looked at this across IE6, IE7, FF3, FF2 and all seems fine. for more info on Padding and Margins see the box model .... maybe you need to reset the browser defaults to get a consistent look

The box model is nice. Unfortunately, Microsoft doesn't observe it.

W3C says the box model is (from outside to inside):
- margin
- border
- padding
- width and height styles of object
- the object

But Microsoft uses:
- width and height styles of object
- margin
- border
- padding
- the object

These are differences in how the browsers are internally defined. The only way to get rid of the problem is for Microsoft to go belly-up (or be antitrusted into baby Bills). Microsoft will not follow the standard.

If …

MidiMagic 579 Nearly a Senior Poster

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.