MidiMagic 579 Nearly a Senior Poster

As much as I hate the hover feature, it seems to be working the way you said you wanted it to in Firefox. Have you tried looking at it in several different browsers?

The problem is probably in the stylesheet, which you did not show us. Have you made the mistake of combining the following attributes in the same class or placing their classes in the same tag?

  • width or height attributes
  • margins, borders, or paddings
  • Absolute object locations

Internet Explorer makes a mess when this happens. It interprets these inside out from how the standard defines them.

I also do not see html tags or a doctype declaration. If both are missing, the browser will go into quirks mode.

jonsan32 commented: The style sheet is linked in the code: https://dl.dropboxusercontent.com/u/5739741/OMAR/code/megamenu_files/HTML/css/megamenu.css +2
MidiMagic 579 Nearly a Senior Poster

The <p> </p> tag pairs enclose a paragraph.

A single <p> tag is not allowed to be used as a line break.

The <p> </p> tag pairs can not be directly inside <ul> </ul> tag pairs.

Only <li> </li> tag pairs are allowed to be directly inside the ul or ol tag pairs.

For a single line break, use the <br /> tag.

MidiMagic 579 Nearly a Senior Poster

IE applies the width setting outside the margins, borders, and padding.

The W3C standard, Firefox, and others apply the width setting inside them.

MidiMagic 579 Nearly a Senior Poster

It depends on the content. Use these styles

Use

text-align: center;

for text. That is the only thing the W3C allows centering of.

To center a photo, use

clear: both; text-align: center:

. The last style is to make it work with IE.

To center something else, use

margin-left: auto; margin-right: auto; text-align: center;

. Again, the last makes it work with IE, which for some reason wants both.

MidiMagic 579 Nearly a Senior Poster

It can't be done in a way that works on all computers, browsers, screen resolutions, aspect ratios, numbers of extra toolbars installed, and restored-down window sizes.

Stop trying. This is not Microsoft Word. If you want a footer that always stays at the bottom of the page, use Word, and print the document. Then tape it to your monitor.

If your boss is demanding this, he needs to understand that it is impossible.

Many people have come up with kludges that work on a specific browser, a specific screen resolution and aspect ratio, on only those computers that allow scripts blocked by popup blockers, or only when the window is maximized with no extra toolbars. But there is no standard way to do it that always works.

The web is not designed to do this. It was not intended when the web was designed. So no way to do it is provided. There are two things you can't reliably do on a web page:

1. Make your content exactly fit the browser viewport.

2. Place content at the very bottom of the viewport.

Just put your footer at the bottom of your content. or better yet, don't make a footer.

MidiMagic 579 Nearly a Senior Poster

Don't use proprietary features, and css works - almost.

The css2 and css3 standards are not yet universal. Wait until more browsers are using them.

The other thing to not do if you want browser compatibility is to not put size styles (width, height) in the same tags or styles that contain nonzero surround styles (margin, border, padding).

MidiMagic 579 Nearly a Senior Poster

Check the following:

- Is your firewall or router blocking it?

- Is your ISP blocking it because of spam?

- Is the site larger than your internet cache space?

- If you are at work, has your employer blocked it?

MidiMagic 579 Nearly a Senior Poster

So what do you suggest I do?

I suggest you "DON'T."

DON'T expect a web page to behave like a Word document. The web standards aren't designed for that. Web pages flow to fill the available space.

DON'T expect to place things at certain places within the browser viewport. They will not stay put with a different browser, a different screen resolution, or a different sized restored down window. And all of it changes with the new widescreen monitors.

DON'T expect to place a footer at the bottom of the viewport and have it actually be there on all computers. Footers are not defined for any web device except the table, and they go at the bottom of the table, not the screen.

DON'T define things in terms of absolute measurements, such as pixels and points. Use percentages and ems.

DON'T expect to exactly fill the entire screen with an image. You can have it fill the width (with width: 100%; ), but because of the varying aspect ratios, you can't make it fill the height on all computers. Note that if several attributes conflict, the browser will sacrifice a height attribute first to satisfy the others.

DON'T expect a tight design to stay together on all screen resolutions. Design it for a low resolution screen, and use percentages, so the parts stay in the same relative positions on higher resolutions.

MidiMagic 579 Nearly a Senior Poster

That doesn't always work. It is browser dependent. And the size is determined when the page loads, not after a script adds content to the page.

Do not try to make content exactly fit either the screen or other content. It won't work on a different browser, or a different screen resolution.

Those new widescreen monitors play havoc w3ith making things fit.

MidiMagic 579 Nearly a Senior Poster

Idea: Make the background color match one of the elements. Then the white space is not white.

Centering objects is much harder in css than it was in the old html. But you can do this by setting the margins to auto, or clearing both sides.

MidiMagic 579 Nearly a Senior Poster

The only way to make that happen is to make everything resize, even the font. That is hard to do.

I don't normally make a page scroll horizontally, but those with forms in them just about have to, or you will not be able to enter the data. And many images blur into illegibility when resized.

MidiMagic 579 Nearly a Senior Poster

We don't embed anymore. The embed tag is deprecated code, and was never supported by all browsers. It never did validate.

Your code may be correct, but not supported by Chrome. Chrome is new enough that they might have left something out.

MidiMagic 579 Nearly a Senior Poster

Design with Firefox first. Then fix the bugs in the IE version.

Never put size styles (width, height) and surrounding styles (margin, border, padding) on the same tag or in the same stylesheet style. If you do, IE will render them differently than any other browser does.

Instead, nest two tags, putting the size styles on one and the surrounding styles on the other. Then all browsers will render them the same.

Note that IE renders font characters one pixel wider than FF does, but reduces the space between characters by 1 pixel.

If you use tables, define the vertical alignment. IE and FF have different defaults.

MidiMagic 579 Nearly a Senior Poster

The purpose is to make sure that your pages keep working when browser upgrades occur. I learned this lesson the hard way, when half of my pages that used to work suddenly quit working right. I then had to rewrite the whole site. Changes in the way browsers interpret bad code were responsible.

If your code has no doctype or does not validate, then the browser has to try to figure out what the heck you intended to do. Different browsers use different methods to do that. Often they get lost when you have unclosed tags, and make a total mess of your page.

You do not have to write your own doctype line. Just copy the ones from the w3c site that matches the doctype you want to use.

MidiMagic 579 Nearly a Senior Poster

Negative numbers are not part of the W3C definition for margin. Browsers go into quirks mode when they encounter them.

Note that it is NOT necessary to make a separate style sheet for IE. I have been able to make web pages that render the same for all browsers. The trick is to not put size styles (width and height) and surrounding styles (margin, border, padding) on the same tag. Also, do not use anything that throws the browser into quirks mode, and do not use nonstandard extensions provided by some browsers.

MidiMagic 579 Nearly a Senior Poster

I'm not sure where to put my background image in this code and how to make the image transparent. Could you please help me out. Thank you

The background image url belongs in a style for the body tag.

I am not sure what you mean to make the image transparent. The background is supposed to be on the bottom, so there should be nothing under it to be seen through it.

If something is fully transparent, you can't see it.

If you intend to make the image very light and barely visible (like a watermark), you need to modify the image with your graphics editor before you upload it to the web server. Adjust the brightness and contrast of the image to get this effect.

There is nothing in standard html/css that allows an image to be partly transparent. There are some nonstandard features that do not work on all browsers. And there are scripts that do not work on all computers.

I still do not see why you want a transparent image.

MidiMagic 579 Nearly a Senior Poster

I don't click on links with IP addresses in them. They can go to malware sites.

Check these:

- Don't put size styles (width, height), and surrounding styles (margin, border, padding) on the same style or apply them to the same tag.

- Make sure your site validates with W3C.

- If you have tables, set the vertical-align attribute to the alignment you want. The browsers do not agree on the defaults.

MidiMagic 579 Nearly a Senior Poster

It usually works. But you can not guarantee that it will work every time. When it doesn't work, the user can refresh the page, and hopefully the path will not go though an old routing computer the second time.

It will become a big problem if a selling transaction is disrupted by an old routing computer. With a missing packet, a business transaction may not look the same on both ends, to the point where the ordered merchandise is different or the money amounts are different.

This happened to me a few weeks ago. i was filling out a required government form online, and a packet was lost. This caused several of the questions and text boxes to be missing, and one text box to be paired with the wrong question. I filled it out as I saw it, and then had to go into the government office when they emailed me about the crazy answers.

Why didn't their page follow the ASCII filenames? They have an omega in their name.

MidiMagic 579 Nearly a Senior Poster

It could be that the server doesn't know how to use a .pptx file yet. Or it might not know to serve some auxillary file.

Did you use some built in file in the presentation, but forget to upload it? Missing parts can make corrupt downloads.

Note that the client computer has to actually have Office 2007 to play the .pptx file, or it must have a compatibility package for Office 2003 installed.

I would not yet use .pptx files on web pages. There are too few people with Office 2007 at this time.

MidiMagic 579 Nearly a Senior Poster

The contents of the file do not matter. They get passed along, no matter what.

It is the name of the file, in the url, that has to meet these standards.

Like others said, your web page may not stay within the borders of the country you want on its way from the server to the client. The Internet chooses the route that momentarily looks like will take the least time to get there. When the request packet for a web page goes from Shanghai to Beijing, it may pass through Finland, Netherlands, Nigeria, Namibia, Greece and Pakistan. On the way from Beijing to Shanghai, the beginning of the file may go through nodes in India, Saudi Arabia, Dubai, and Turkey. Meanwhile the second packet goes through Japan, Juneau Alaska, Chicago, and Russia. This is beyond your control. But if ANY of those routing computers along the way can't read the filename, it returns an error message and throws away the packet. Then the client does not get part of the page.

Any routing hardware and software must be able to handle and send on the packet. That means that the software in that unit must be able to read the packet header. The filename is in the url in the packet header.

There is not a simple little fix for this. It would take billions of dollars and man-hours to upgrade all of the routing computers in the world. And with various security and copyright …

MidiMagic 579 Nearly a Senior Poster

That's experience.

MidiMagic 579 Nearly a Senior Poster

You should not have this information. Spamming is the only reason anyone wants it.

The IP address is usually useless anyway. Most ISPs, hosts, and routers now generate one-time IP addresses, to prevent spamming. Each time someone logs in, they get a new one.

You don't need it.

MidiMagic 579 Nearly a Senior Poster

There are two kinds of css failure:
1. The css has errors in it that prevent correct rendering.
2. The css renders, but not the way the page creator wants.

1. Look for the following css errors if the css does not render:
- Look for typogoofical errors first.
- On Firefox, use the error console. It will tell you the line containing any syntax error.
- Make sure you spelled the classes and ids the same in all references.
- Make sure you didn't use the same name for two different classes or ids.
- Make sure you didn't use an id twice.
- Make sure that there are no units of measure on 0 values. Some browsers do not allow them.
- No special characters in classes and ids.
- Beware of deprecated and browser-specific styles and properties.

2. Look for the following if the css does not render the way desired:
- Remember that the surrounding styles (margin, border, padding) are rendered OUTSIDE any box object. Leave enough space for them to fit.
- If something intended for the same row renders below the row, it probably does not fit in the remaining space.
- Don't put size styles (width, height), and surrounding styles in the same style or tag. This is the key to inter-browser compatibility.
- Is the div shrinking, instead of containing the contents? Use the style: display: …

ggeoff commented: Excellent contribution! +2
MidiMagic 579 Nearly a Senior Poster

There's a world outside of USA. If a system doesn't allow characters outside the limited ASCII set, it's the system that needs to be changed.

The problem is that this will take years to accomplish. Because governments do not agree with each other, it may never happen. You need a solution that works now.

Think about all of the various nodes, servers, and routers in different countries. They use different software, they were made by different manufacturers, and they are owned by different entities. Some of these entities are private companies, and others are owned by various governments.

The Internet is not one big uniform system. It is patched together by hundreds of organizations. It is amazing that it works as well as it does.

You have to realize that your website files may pass through ANY of these devices in its path from your server to the client's computer. In fact, different packets from the same file might pass through different devices.

You do not know how current the software is on any of these devices. Some countries can't import anything newer than 2001, because the US export ban applies to them. So you need to supply files that are compatible with all of these devices that your file might encounter on its path across the world to the user.

The one thing that is available among ALL of these devices is the US ASCII one byte code. You can't count on anything else …

MidiMagic 579 Nearly a Senior Poster

You are always going to have screen resolution problems when you define things in terms of pixels. Use percent and em to define sizes.

MidiMagic 579 Nearly a Senior Poster

It is not a good idea to use any special character in a filename, because some servers and Internet nodes don't know what to do with them. Stick to the US ASCII letters and numerals.

MidiMagic 579 Nearly a Senior Poster

Use the blocks to build something.

MidiMagic 579 Nearly a Senior Poster

I use multiple classes all the time. As long as they don't contradict each other, it works great.

Use text-align: center; to center text. The margin works on everything else, but not text.

Remember that any surrounding styles (margin, border, padding) are rendered OUTSIDE any size style (width, height) you define. So you need to leave extra room for the surrounding styles to fit into.

MidiMagic 579 Nearly a Senior Poster

Look for the following:

- Note that the image itself can't contain these features. There must be some html provided by Fireworks to locate them.

- Is there a script to take care of the hotspots? If so, can Dreamweaver find it?

- Are the hotspots there, but in the wrong location? Check by moving the mouse around? The locations created in Fireworks may be indexed to the upper left corner of a web page, not the location where you put the image in Dreamweaver.

- Are you using deprecated tags? If so, one program may not know what to do with them.

MidiMagic 579 Nearly a Senior Poster

For compatibility with different browsers and screen resolutions, define sizes as either % or em.

MidiMagic 579 Nearly a Senior Poster

ActiveX is NOT cross browser compatible.

MidiMagic 579 Nearly a Senior Poster

Don't use px.

You have one pair of li tags not inside ul or ol tags.

MidiMagic 579 Nearly a Senior Poster

The screen resolutions of the two computers are probably different. This is determined by the hardware of the monitor and the display card, and a setting in the display part of the control panel.

Be careful. It is possible to set the screen resolution to a setting the monitor can't display. Then you can't see what you are doing.

MidiMagic 579 Nearly a Senior Poster

Something on the page is rendering 1440 pixels wide.

The odd thing is that it is not that wide on my browser, which is on a monitor that is only 1152 pixels wide. I can see the entire page.

I found several html errors.

I suggest that you first use the W3C validator and fix the errors.

MidiMagic 579 Nearly a Senior Poster

Your home computer probably has a different screen resolution. You have to use percentages and other relative sizing styles, not pixels and other absolute sizes, if you want it to work on all computers.

MidiMagic 579 Nearly a Senior Poster

More:

Firefox and IE behave differently when a table will not fit in the allocated space:

- Firefox makes the table wide enough to hold the content if it can't wrap the cell contents. This will even make the page wider if necessary, adding horizontal scrollbars if it is wider than the browser windows.

- IE will sacrifice the contents of the cells before it will make the table larger. But if table cells contain images, it will do the same thing that Firefox does.

Note that, when an object will not render in the allocated space, there are no standards telling a browser how to render it. So each browser has its own defaults.

MidiMagic 579 Nearly a Senior Poster

URLs will not wrap, and should not be wrapped. Consider the following:

- Use br tags in the url where you want to break it (do this on the text part of the a tag, not the url part)

- Shorter urls? Can you avoid displaying the part that controls a script in the test part?

- Redesign the columns. Can the url take up an entire row below the other information (using rowspan)?

- Change the font size (if the trouble is minor)

- Can you wrap something else so the url fits?

Note that divs do not like to be in the same structure a table is in. There are known bugs when they are intermixed.

MidiMagic 579 Nearly a Senior Poster

You want a lot, don't you. You night have to do this in JavaScript to get both view 3 and view 4.

Divs would give you 2 and 4, while a table will give you 3.

You could try putting a div inside a table cell for just the right column, but just a table cell for the left column. That would give you 3 and 4, but would require some other styles to make it work in all browsers.

MidiMagic 579 Nearly a Senior Poster

Do NOT make images expand when the mouse moves. Nothing makes me hit the BACK button faster than a page that changes when you move your mouse. It's annoying.

The user should click to get as larger image.

MidiMagic 579 Nearly a Senior Poster

The space is there in <br /> to make the self-closing tags compatible with IE 6 and earlier. IE renders it wrong without the space.

MidiMagic 579 Nearly a Senior Poster

Set the height of the cells, rather than the table.

MidiMagic 579 Nearly a Senior Poster

There is no pseudo class named td:white.

MidiMagic 579 Nearly a Senior Poster

I don't like this idea. Better ideas include:

- Don't display the signature link if the reputation is negative.

- Remove only the links that go to sites with the primary purpose of selling.

- Just ignore them. I rarely follow a link in a sig, unless I am really interested in that user's info. So their efforts are wasted anyway.

- Turn the links that go to business sites red.

- Put a big SPAM stamp on the post.

I also don't like the removing of links in posts that point to the user's pages. I used to point to tutorial pages I wrote, until you banned that.

If you ask me, there are too many intolerant NIMBYs on this site. They scream if you forget the code tags, they scream if you have a link to your site, they scream if you resurrect an old topic, etc. This place is supposed to be fun, not Big Rules City.

MidiMagic 579 Nearly a Senior Poster

My ISP places a limit on the size of an upload. Could yours be doing that?

MidiMagic 579 Nearly a Senior Poster

For those who didn't see it, she has an unescaped < in the first script.

MidiMagic 579 Nearly a Senior Poster

That is ancient code. Add a style to the stylesheet instead:

table {background-color: #ff0000;}
MidiMagic 579 Nearly a Senior Poster

Excel can save a spreadsheet as an html file, but the file is quite messy.

MidiMagic 579 Nearly a Senior Poster

The problem is not the file, but the syntax of the command to open it.

MidiMagic 579 Nearly a Senior Poster

yea I need the standalone player. which one is it?

I don't know the filenames.

- I got the stand alone player from The Adobe website.

- I got the Firefox plugin when I came to website that needed it while using Firefox. Firefox installed it for me when I gave the OK.

- I got the IE plugin when I went to the same website that needed it while using IE. IE installed it for me when I gave the OK.

MidiMagic 579 Nearly a Senior Poster

Those sound like uninstalled files that need the proprietary installer to extract the files and install them.