Problems with IE7

[mark]

Hello,

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">
<tr>
<td>
<a href="#" onmouseover="window.status='home'; changeImages('myImg1',
'images/1-over.jpg'); return true;"
onmouseout="window.status='';
changeImages('myImg1', 'images/1.jpg'); return true;">
<img name="Basic" src="images/1.jpg" width="100" height="53"
alt="button"></a>
</td>

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

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

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

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

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

 

[C A Upsdell]

Hello,

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">
<tr>
<td>
<a href="#" onmouseover="window.status='home'; changeImages('myImg1',
'images/1-over.jpg'); return true;"
onmouseout="window.status='';
changeImages('myImg1', 'images/1.jpg'); return true;">
<img name="Basic" src="images/1.jpg" width="100" height="53"
alt="button"></a>
</td>

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

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

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

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

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!

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.

 

[Toby A Inkster]

alt="button"></a>
</td>

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

alt="button"></a></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 2.6.17.14-mm-desktop-9mdvsmp, up 22 days, 22:16.]
[Now Playing: Billy Joel - I Guess Thats Why They Call It the Blues with
Elton John]

Bottled Water
http://tobyinkster.co.uk/blog/2008/02/18/bottled-water/

 

[mark]

Hello,

Remove the line break between </a> and </td>...
alt="button"></a></td>

Thanks Toby! Now it works perfect.

Regards, Mark

 

[GTalbot]

Hello,

I have created a page which correctly validates as html transitional.

Mark,

Why transitional? Why not strict? Why not a clear separation of
content and presentation?
Using Web Standards in your Web Pages
http://developer.mozilla.org/en/doc...Making_your_page_using_web_standards_-_how_to

Still, I have problems while opening it in IE7.
My html code looks like

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

row - one column):

<table width="683" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#" onmouseover="window.status='home'; changeImages('myImg1',
'images/1-over.jpg'); return true;"
onmouseout="window.status='';
changeImages('myImg1', 'images/1.jpg'); return true;">

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.

<img name="Basic" src="images/1.jpg" width="100" height="53"
alt="button"></a>
</td>

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

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

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

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

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

And my CSS file:

body { background-color: black; text-align: center;}

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.

table { margin: auto; border: 0px;}
img { border: 0px}

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.

http://www.htmlhelp.com/faq/html/images.html#no-border

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;}

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
http://www.useit.com/alertbox/designmistakes.html

"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
http://pages.prodigy.net/chris_beall/TC/Font size.html

" * 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
size
* 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
http://www.w3.org/QA/Tips/font-size

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.

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?
http://www.mozilla.org/docs/web-developer/faq.html#gaps

Images, Tables, and Mysterious Gaps
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

Regards, Gérard