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

The [icode]<p> </p>[/icode] tag pairs enclose a paragraph.

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

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

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

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

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

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

It depends on the content. Use these styles

Use [CODE]text-align: center;[/CODE] for text. That is the only thing the W3C allows centering of.

To center a photo, use [CODE]clear: both; text-align: center:[/CODE]. The last style is to make it work with IE.

To center something else, use [CODE]margin-left: auto; margin-right: auto; text-align: center;[/CODE]. Again, the last makes it work with IE, which for some reason wants both.

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.

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).

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?

[QUOTE=shaya4207;1223854]So what do you suggest I do?[/QUOTE]

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.

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.

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.

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.

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.

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.

The purpose is to make sure that your pages [B]keep working[/B] 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.

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.

[QUOTE=dami06;994468]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[/quote]

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.

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.

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.

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.

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 laws preventing the latest ...

That's experience.

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.

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.

  3. 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.
  4. 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: [icode]display: table-cell;[/icode]
  • Note that some displays do not differentiate colors that are close to each other. ...
ggeoff commented: Excellent contribution! +2

[QUOTE=ingeva;916171]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.[/QUOTE]

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 working.

You do not have ...

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

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.

Use the blocks to build something.

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

Use [icode] text-align: center; [/icode] 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.

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.

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