Posts by MidiMagic

I use notepad and write my own code.

The problems between the nonstandard IE and the standards-obeying browsers like Firefox are not easily fixed by using conditional styles.

They are easily fixed by not using size styles (width, height) in the same tags or styles with nonzero surrounding styles (margin, border, padding). IE nests styles these in the wrong order when applying them to the same tag.

The trick is nesting two tags, one with the size styles, and one with the surrounding styles, in the order you want them.

Here is a page with some tips for making compatible web pages.:

http://geocities.com/midimagic@sbcglobal.net/webtips.htm

Just design it to be browser-independent. Never use anything that is browser-dependent.

This is basically not putting size styles (width, height) on the same tags that contain nonzero surrounding styles (margin, border, padding). If you need both, nest two sets of tags.

You have evidently not read what I wrote .... :)

I read it.

The proper unit of measure for resolution-independent text is the point. It is defined as 1/72 inch on the monitor. The em depends on the font chosen, so it is not a constant.

Div is a block tag. A is an inline tag. You can't put block tags inside inline tags.

Divs next to each other never have the same height. They each expand downward just enough to hold their contents.

One way to force the height issue is to use the display style on div:

div {display: table-cell;}

If this is true, what can DaniWeb do about it?

Find out which one.

Embed is a nonstandard IE extension. It is deprecated.

What the bots look for:

Plain text in the HTML file.

It's not going to look for the following:

- Stuff in scripts
- Dynamic content
- Images
- Other objects
- Auxiliary files
- Any html created during rendering

I see several errors.

1. Stop using pixels for measurement. This locks the design to one screen resolution. It fails on other screen sizes.

2. Don't put dimensions on 0 values (e.g. 0px). If Firefox finds one of these, it throws away the entire style.

3. Don't put nonzero surrounding styles (margin, border, padding) in the same tag or style that contains size styles (width, height). This makes IE render it differently than other browsers.

First of all, stop using pixels. Pixels freeze your page to work for only one screen resolution.

Use percent, and use points for font sizes.

Put 0 margins, borders, and padding on the divs that are using percents.

Text can not be placed directly inside a div. It must be inside another container, such as p.

Don't put stuff on top of other stuff. It causes all kinds of trouble.

This is what happens when you design for a specific screen resolution.

There is more room on the screen when the scrollbar isn't there.

Using px replaces one trouble with another. The page now becomes monitor-resolution-sensitive.

Use pt instead.

Several points:

Height can't see the browser window size in most browsers.

Most browsers correctly put the surrounding styles (margin, border, padding) OUTSIDE the size styles (width, height). Internet Explorer crams them INSIDE instead. The cure for this is to not use nonzero surrounding styles with size styles in the same style or tag.

Center text reliably using the following code:
In the stylesheet, place:

.cenx {text-align: center;}

Then, where you want to place the centered text, put this code:

<p class="bxfix cenx">Your Text to be Centered</p>

The p tag may be replaced by one of the h tags.

Center images reliably using the following code:
In the stylesheet, place:

.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0; border: none; padding: 0;}

Then, where you want to place the centered image, put this code:

<div class="bxfix cenx">
  <img src="yourimag.jpg" alt="description" class="ceni" />
</div>

There must be room for the image, or it won't work.

Center other objects reliably using the following code:
In the stylesheet, place:

.cenx {text-align: center;}
.ceni {clear: both;}
.bxcen {margin-left: auto; margin-right: auto; border: none; padding: 0;}

Then, where you want to place the centered object, put this code:

<div class="bxcen cenx">
  <tag>Your object</tag>
</div>

Put the name of the tag for the object you have instead of the word "tag".

Don't use pixels to declare anything. Using pixels makes the display dependent on the screen resolution of the monitor.

Use points and percentages.

target= is deprecated.

The normal way to control where things are on the page is to control the order the items are listed in the html file. Objects are placed from top to bottom, and within a line, from left to right.

Do NOT think of a web page as a sheet of paper that you place things on in various places. Think of it as a scroll that grows longer downward as you add more content.

Okaaaaay... so if an adblocker is too complicated for you, how about editing the Windows host file? This might come in handy. Adding DaniWeb's ad server, aj.daniweb.com, might also help.

When you don't have administrator privilege, none of these is possible. One of the computers doing this is at work. I have no permission to install software on it.

The other computer is used primarily for music production. The instructions for the music software say to install as little other software as possible on the computer.

The Firefox help site says it is probably an add-on some website installed without my permission.

The li tag is not allowed to be alone. It must be directly inside a ul or ol pair.

I need to see more than a photo and one style. I need to see the other styles and html surrounding it. The trouble might be in a different element.

Note that the Firefox error console might be useful here. It tells you if an error occurs, and the line it is in.

If any error occurs, the browser goes into quirks mode.

The best way is to let the browser do both.

You want a site visitor counter.

I was thinking that you wanted a thumbnail view of someone's website, or something similar.

Get one of the counters in that search. Add a link to it in your website code.

It's back, and is worse. Now the screen scrolls itself back to the ad, as well as taking the click twice.

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.

You have to write your web page code to use the styles that are there.

Try holding a compact fluorescent light bulb over your head. :icon_idea:

Ideas actually require the use of the brain.

Add what?

I'm not sure what you wnat.

0px is not a valid style.

You must not put units of measures on zero values. Just put 0 for a zero value.

Some browsers throw the entire style away if it contains a 0 with a unit of measure.

Note that the ad code may be using nonstandard IE code to add the shadow.

Use relative measures, not absolute ones.

- Use percent to arrange objects across the width of the page, and to set the sizes of box objects.

- Use points for items related to text size.

The image will not render if it won't fit in the available space. Instead of specifying the pixels, let the image itself determine the size of its container.

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.

But there is nothing wrong with using tables for actual table content (anything that looks like a spreadsheet). It is not deprecated.

It's working today. I think it depends on the ads. Earlier today, I was getting an ad that took me away from the posting window while I was typing, scrolling to make the ad visible.

The problem is probably in the stylesheet, which we can't see.

Check for the following incompatibility errors:

1. Putting size styles (width, height) in the same tag or style that contains nonzero surrounding styles (margin, border, padding).

IE nests them in the wrong order, placing the surrounding styles inside the size styles. Other browsers obey the standard, placing the surrounding styles outside the size styles.

The cure is to nest two tags, one with the size styles, and the other with the surrounding styles, in the order you really want them.

2. Putting measurement dimensions on zero values in styles, or omitting dimensions on other values.

If you put 0px, 0pt, 0% in a style, Firefox throws away the entire style. Just put a 0 by itself. On the other hand, if you omit a dimension for a nonzero style value, the browser might pick something other than what you intended.

Put measurement dimensions on all nonzero values that need them. Don't put dimensions on zero values.

3. Using absolute positioning.

Browsers do not agree on how to render this. Don't use it.

4. Using nonstandard extensions.

Don't use anything that is not a universally recognized element. And watch using deprecated elements - browser support is sketchy. Both drop various browsers into quirks mode, where they attempt to render nonstandard code as well as they can.

5. Declare a doctype and a character set.

Failure to do …

It's probably sorting them in the order the files actually appear in the folder listing (not the sort order they display in). This is the order they were put into the folder. Adding new objects places them at the end of the list.

Try removing all of the files from the folder, and then moving them back one by one in the order you want them displayed in.

Another possibility is that they are sorted in creation date order.

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.

I am going to add some more rules, based on some experiences I had with students this week:

11. Don't open a browser window with the browser controls removed, and don't disable the back button.

Disabled users (and other users) depend on the BACK button to get back to where they were before

12. Make sure your code is browser-independent.

If you design for only one browser, someone using another browser gets a mess. This is especially true if the code uses nonstandard extensions.

13. Don't change the size of the browser window.

Often disabled people use helper aids in certain parts of the screen. Changing the window size often hides these tools.

Typography layouts (the well-done ones) might be the best examples of what midimagic wants us to see. They call attention to headings and important parts of the page through contrast (relative size, darker or lighter colors) and not images or flash effects.

There are two reasons for that, not necessarily connected to the accessibility issue:

1. The pages load fast.

2. My ISP has limits for the free web page service. You have to pay for more services, and that requires a change in the url that I don't want. There is a storage limit of 15 MB, and a 4.2 MB/hr download limit.

I still think that there are some rules that can be bent if you're designing for a specific audience. (Like a site showcasing the latest model of a car --- usually for men and their "eye-candy")

Just realize what will happen if a disabled person reaches your site by accident (e.g. Googling for something else), and some of the items I listed are present. The disabled person reaches your site, thinks something is wrong with his computer because it is changing pages by itself, and calls tech support for a pay service call. Your bells and whistles might cost him money.

Watermarks can be useful for copyright-ing things (like in stock photo galleries), etc.

I didn't say to avoid watermarks. I said to avoid placing text on top of complex items (including other text) if the text is to be read.

Actually, the watermark on the quick reply window has an erratic behavior. Sometimes it disappears as soon as I click on the textarea, sometimes it changes after I've typed quite a lot of text.

I noticed it too. I think it depends on when the page must be redisplayed. Sometimes it disappears if I scroll the main page after I type.

As for the hosting, I think you need a server/host with PHP because you have a lot of content and I couldn't imagine how you manage to update all of them. =(

I just feel you can do better. My sub-site is hosted for free by someone. (Not a corporate free host) It has all the perks of a 'paid' hosting except it isn't paid.

I update pages one at a time. Most of them do not change. Some of them need updating, because a change in IE made some of my older techniques fail.

I still couldn't service it through my ISP, because I would have to pay extra for the ftp capability to reach other sites.

And I still don't want to make my regulars move bookmarks again. I can't email all of them, because I don't know all the addresses.

Get me a job that pays more, and then I could afford two sites.

That code might not work in Internet Explorer. IE puts the margins inside the widths.

Sorry here's the page: http://www.w3.org/2007/uwa/

They seem to have used a different doctype to be able to do that.

It looks like they are working on a DTD with a footer, but haven't released it for general use yet.

div#trans7 { background: #400000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 51px;
}

....

div#trans7 { background: #400000;
width: 10px; 
height: 842px;
position: absolute;
top: 0px;
left: 51px;
}

....

div#hder { background: white;
width: 660px;
height: 98px;
position: absolute;
top: 0px;
left: 202px; 
font-family: Comic Sans MS;
font-size: .9em;
}

Hello. I have a webpage im working on as a school project, and everything was going fine. Until I opened it up in IE.

Here are the issues im having.

The main "header" image, is not showing.

- The closing div tag for hder is missing the greater than character.

- You didn't leave enough room for the image to fit. You have two different width and height values. Also, IE puts margins, borders, and padding INSIDE the width and height settings. The standard (and other browsers) put them outside the width and height settings.

- IE does absolute positioning differently than other browsers do it. Avoid absolute positioning.

The font is not Comic Sans MS, as I wanted, but it is times New Roman. :(

- If there are spaces in a font name, it must be surrounded by quotes. Otherwise, the browser tries to interpret each word as a separate font.

- If the target computer does not have the font you want, the default font will be used instead.

The <hr> lines are stretching out of my content div.

- The closing div tag for hder is missing …

What if you are not allowed to install anything? What if you need to have a minimal system build for purposes not connected to web browsing?

The pages should work without having to install other software. This seems to be another annoying trick by the ad makers.

When will ad makers realize that their stupid tricks intended to ruin attempts to navigate make people mad at the sponsors?

This happens when a browser does the downloading to a folder.

The only browser what doesn't work on? Text on top of graphics, or a footer at the bottom of the browser window?

If it's making a footer, the W3C says that they made no way to size a page to the browser window on purpose. THEY are the ones who determine what the Internet is designed for.

Making a page that exactly fills a screen has the following factors working against it:

- Browsers don't agree on providing information about the window.
- The window belongs to the user, not the web programmer.
- There are too many different screen resolutions.
- A user can restore down the browser window, making it smaller.
- Resizing the user's preset browser window with a script makes users mad.
- Many users do not allow scripts.
- Programming necessary to make it work is a kludge, relies on browser quirks, or violates W3C standards.

I don't mind watermarks on images, because I don't need to read them. I mind watermarks under text (both become an unintelligible jumble), and text on top of graphics (can see the graphics, but can't read the text).

The watermark stays on the quick reply window until the scrollbar appears.

I use Geocities because:

1. I can't afford to pay for a separate site. I get a Geocities website free with my ISP contract.

2. My ISP charges extra for FTP capabilities. I have to use their file upload utility to avoid paying extra. So I can't upload pages to other sites.

3. I have in the past four years had to regather my usual users TWICE, after suddenly losing each of two site urls my site used to be on. In each case, I lost the url with very little advance warning.

- The first time, the company I used to work for had a free url as a perk of employment. They had to change the free site urls, because the old one contained "php" (for "personal home page"). PHP sued them over the use of their trademark, even though the company I worked for had the urls before PHP was PHP. But instead of paying a lawyer, they changed the urls.

- The second time, the company division I worked in closed. They downsized me. Since I don't work there anymore, I lost my url again. That's when I moved to Geocities, because I already subscribed to my ISP at home.

I do not want to make my regulars have to change where to look for me again.

This is still happening. Nobody knows why?

It;s not so much building a website "wrong" as it is building a website that a portion of the population can't use.

You can certainly tell you client that what he wants to do can't be done, if it is beyond the capabilities of the system. Making a footer at the bottom of any browser's window is one of those things that is impossible.

You can tell the client how what he wants to do is illegible to many people. That's what text on top of graphics becomes for many people. Given the facts, I don't think he would want to do that.

Wikipedia is a nice site.