IE8 css bug? 2

[maharg]

Hi Folks,

I'm battling to find why my code won't render properly in IE8, so wonder if you can spot my error?

Please see

http://www.london-electronics.com/upper_navigation_test.htm

Compare the view in Firefox and IE8, and you will see a white line in IE8, separating the header from the rest of the content.

Any help very much appreciated, as this has been bugging me a few days now!

Thanks in anticipation,

Graham

 

[vacunita]

You are missing a doctype, which sends IE into quirks mode, and makes it render things differently.

http://en.wikipedia.org/wiki/Quirks_mode

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Additionally you have a few errors that may be causing issues:

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Fix those before attempting to wrestle with browser differences.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[BillyRayPreachersSon]

Aside from those items pointed out by Phil (which you should address), and aside from that fact you are using a table for layout (trust me when I say this is not a good idea), if you do the following, the gap should go:

- Give your header anchor a "display:block" style

- Give your header anchor a "height:61px" style

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[maharg]

Many thanks to you both.

The mystery persists, however

I have changed the markup as suggested, but the effect is still present.

Now compliant, no tables, and with the added CSS.

The modified markup is at

http://www.london-electronics.com/upper_navigation_test_a.htm

- I have left the original version unchanged, in its original url.

Regards,

Graham

 

[maharg]

Ah, in fact the white line appears in Firefox also, now!

 

[BillyRayPreachersSon]

I have changed the markup as suggested

You haven't - the anchor has no styling on it whatsoever.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[BillyRayPreachersSon]

Aah - You appear to be making up non-existent style properties.

Remove the following 2 styles from the img:

header:anchor;
height:61px;

And add this attribute to the anchor:

style="display:block; height:61px;"

I'm not sure how you got what you did from what I advised, but never mind!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[vacunita]

Your CSS has a few errors still. However the true culprit of the white line appears to be the actual link there.

<a href="new-panel-meters-large-displays.php"><img style="height: 61px; border-style: none;" alt="panel meter and large display manufacturer" src="showcase_header.jpg"></a>

Its adding a few extra pixels at the bottom causing the background to show through which makes it look a white line.

Add the following to the link's style and the line should disappear

  display: block;
    height: 61px;

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[maharg]

Thank you both for your help, very much appreciated.

Can't understand how I managed to misinterpret your clear instructions in the beginning, but now all OK!

Corrected version now at

http://www.london-electronics.com/upper_navigation_test_b.htm

Thanks again,

Graham