View Full Version : vertical menu produces white blocks in IE7

09-25-2006, 04:28 AM
1) Script Title: Anylink vertical menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem: Looks fantastic in most other browsers, but in IE7 (new) each main menu creates a white box under it the same size as the menu boxes themselves. With this the menu becomes twice as big and goes underneath other things on the page.

See the site in your browser, then see it in IE7.


Thing is i remember having ths same problem with another browser and fixed it, now cant remember what I did!!!


09-26-2006, 01:07 AM
I don't have IE7, so I cannot comment on that particular aspect, but there are other issues.

If you don't have Chris Pederick's Web Developer extension for Firefox, I suggest you get it, and then disable images whilst look at your site. Notice how large chunks of content disappear? You're relying on images, in several places, to make foreground content readable, neglecting to specify a background colour. Foreground and background colours should be paired for this very reason.

It's clear that you've misunderstood the point of alternative image text, not least because its inclusion is sporadic (the alt attribute is required). When an image is considered content, the alt attribute value should act as a replacement for that image. For example, the content of the logo in the top-left is the text of that logo: "UK Driver Training Ltd.: Stay awake, stay alive." Similarly, the various links to more information use an image, but without any alternative text (such as simply, "More information"). Conversely, decorative images should have empty, or whitespace values. What use is including "fatigue.jpg" for 1px high line, particularly as the image should be replaced by a hr element or a border. Why "driver fatigue.img" for a spacer GIF? Moreover, why are there spacer GIFs at all? Use margins or padding.

The last rendering issue is a result of pixel dimensions. You've used font sizes (specified in pixels; a bad thing) that are far too small, and when exposed to a minimum font size control (such as provided by Firefox and Opera), the content overflows its container. You shouldn't need to specify an explicit height for the various text containers, instead allowing them to grow as required, but if you must, use em lengths which are proportional to font size. Also, use percentages when specifying font sizes: the smallest text should not be smaller than 85% of the browser default.

<h2>Driver Fatigue is a major problem all over the
world. Thousands of people are killed, or
seriously injured due to drivers falling
asleep at the wheel.</h2>

These elements are badly ordered. Heading levels reflect the structure of a document. In fact, the text, "Welcome", should be a level-one heading ("Driver fatigue consultants" isn't a heading at all), and the content of that h2 element should be a paragraph. Titles such as "Our Services" and "Latest News" are logical level-two headings, and "Fatigue Consultants" and "Fleet Training" are level-three.

Finally, if you must use XHTML (and that's doubtful), at least make sure it's valid, and you are using the Strict document type.


09-26-2006, 04:50 AM
Hi Mike,

thanks for the info, although I do feel its been given in quite a HARSH manner, and the understanding that this is my very first try at doing my own site is understated.

There are issues I need to rectify you are right, 'rome wasnt build in a day'!!

it's very difficult knowing what is the best approach to coding, or other things, especaily when there are so many conflicting views about how things should be done.

There was a reason why alt images where used with weird name, and images where called fatigue.jpg or so on, and that was for SEO purposses, and the site does have a good ranking and page 1 number 2 in google, way above proffesionally designed sites from multi million pound companies.

Although there are problems, and will be sorted, maybe a bit a recognition for trying wouldnt go a miss.