Problems with IE7

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have created a page which correctly validates as html transitional.
Still, I have problems while opening it in IE7.
My html code looks like that (two rows, first row four columns, second
row - one column):

<table width="683" border="0" cellpadding="0" cellspacing="0">
<a href="#"  onmouseover="window.status='home'; changeImages('myImg1',
'images/1-over.jpg'); return true;"
changeImages('myImg1', 'images/1.jpg'); return true;">
<img name="Basic" src="images/1.jpg" width="100" height="53"

<img name="x" src="images/2.jpg" width="86" height="53" alt="button2">

<img name="Kontakt" src="images/3.jpg" width="93" height="53"

<img src="images/bannerHead.jpg" width="404" height="53" alt="banner">

<td colspan="4">
        <img src="images/bannerMain.jpg" width="683" height="212"

And my CSS file:

body {  background-color: black; text-align: center;}
table { margin: auto; border: 0px;}
img { border: 0px}
a:link { color: #FFFFFF; font-family: tahoma; font-size: 10px; font-
weight: normal; text-decoration: none;}
a:visited {color: #FFFFFF; font-family: tahoma; font-size: 10px; font-
weight: normal; font-style: normal; text-decoration: none;}
a:hover {color: #FFFFFF;font-family: tahoma;font-size: 10px;font-
weight: normal;font-style: normal;line-height: normal;font-
variant:normal;text-transform: none;text-decoration: underline;}

The problem is following: in IE7 between first and second row there is
an emply space (looks like 1px), whereas in Mozilla Firefox everything
looks great. I think that the problem is connected with styles of
links, cause when I remove from the code <a href...> then everything
looks correctly. Any ideas how to make the current version working in
IE7? Thank you very much for your answers!

Regards, Mark

Re: Problems with IE7

mark wrote:
Quoted text here. Click to load it

You really should post a URL.

Just looking at your code a bit, without doing YOUR job of making a page
that I can examine, I suggest this:  try it with a Strict DOCTYPE.  IF
the same problem suddenly appears with Firefox, then apply the CSS
display:block to the image(s) in the table.

Re: Problems with IE7

mark wrote:

Quoted text here. Click to load it

Remove the line break between </a> and </td>...


Also, alt="button" is almost certainly inappropriate alt text.

Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux, up 22 days, 22:16.]
[Now Playing: Billy Joel - I Guess Thats Why They Call It the Blues with
Elton John]

                               Bottled Water

Re: Problems with IE7


Quoted text here. Click to load it

Thanks Toby! Now it works perfect.

Regards, Mark

Re: Problems with IE7

Quoted text here. Click to load it


Why transitional? Why not strict? Why not a clear separation of
content and presentation?
Using Web Standards in your Web Pages

Quoted text here. Click to load it

It is always better to post an URL and to validate both the markup
code and the CSS code.

that (two rows, first row four columns, second
Quoted text here. Click to load it

Why try to modify the statusbar text? Chances are this will not work
in IE 7, Firefox 1.x, Firefox 2.x, Seamonkey 1.x, Opera 9.x, etc.. if
the user has set his prefs to refuse modification of messages/info in
the status bar.

Quoted text here. Click to load it

Giving digits names to an image filename is not going to help site or
webpage maintainability or code reviewing.

Quoted text here. Click to load it

It is widely known that centered text makes reading harder, more
difficult. For all those who read from left-to-right, left aligned
text is best, easier... and that's the default value for text.

Quoted text here. Click to load it

Removing borders around clickable/reactive images will make visual
scanning of webpage harder. Users shouldn't have to spend time
figuring out which images is clickable and which is not.

Quoted text here. Click to load it

Trying to force font-size: 10px on all users is a bad idea. Lots of
40+ years old people and people with lower vision will require bigger
font. Now, several browsers (Firefox 2, Firefox 3, Opera 9.x, Safari
3) can force webpages with small font-size to be meeting a minimum
font-size. So, chances are your webpage fixed, rigid, constrained
layout will break for those people. Best is to *_never_* set a font-
size with pixel units... furthermore with small font-size.

"1. Legibility Problems
Bad fonts won the vote by a landslide, getting almost twice as many
votes as the #2 mistake. About two-thirds of the voters complained
about small font sizes or frozen font sizes;"
Top Ten Web Design Mistakes of 2005

"If you specify a font size using units of px, some browsers will not
resize the text, even if the user changes the default size."
Truth or Consequences about Font size

"    *  As a base font size for a document, 1em (or 100%) is
equivalent to setting the font size to the user's preference. Use this
as a basis for your font sizes, and avoid setting a smaller base font
    * Avoid sizes in em smaller than 1em for text body, except maybe
for copyright statements or other kinds of 'fine print.'

Units: avoid absolute length units for screen display

    * Do not specify the font-size in pt, or other absolute length
units for screen stylesheets. They render inconsistently across
platforms and can't be resized by the User Agent (e.g browser). Keep
the usage of such units for styling on media with fixed and known
physical properties (e.g print).
    * Use relative length units such as percent (...)"

W3C Quality Assurance, tips for webmasters
Care With Font Size

Quoted text here. Click to load it

Choose a strict DTD with your doctype declaration and then read:

Why are there gaps between image rows in tables when the layout engine
is in the Standards mode?

Images, Tables, and Mysterious Gaps

Regards, G=E9rard

Site Timeline