# Help: web page does not show in IE



## sdegan (Jun 17, 2008)

Hi All,

I have the following page that works well in FF, Chrome and Safari but does not show up in Interent Explorer:

http://www.divaniedettagli.it/azienda_test.html

Can anyone be kind to help me with this issue?

Many thanks

simone


----------



## tomdkat (May 6, 2006)

What does IE do with the page? I tried a test in IE6 and got an error dialog telling me the page couldn't be loaded and then I got the white "Can not find server" page.

Which versions of IE are you testing with?

Also, try adding a valid DOCTYPE to the very top of the page:

http://www.alistapart.com/articles/doctype/

That might help with or fix the IE issue.

Peace...


----------



## lordsmurf (Apr 23, 2009)

IE6, 7, 8, others?


----------



## sdegan (Jun 17, 2008)

I am testing on IE7, now it works although I have not solved the problem. This is the new link: http://www.divaniedettagli.it/azienda.html

The problem appeared because I tried to get rid of the green line that separates the first flash instance from the second flash instance.

I have tried everything to eliminate that green line. Can you help me with this?

Many thanks

simone


----------



## tomdkat (May 6, 2006)

First, try adding a valid DOCTYPE as mentioned above and see if that changes how the page renders for you. To make sure I'm understanding you, you want to close the gap between the Flash navigation menu and the rotating image below it?

Peace...


----------



## sdegan (Jun 17, 2008)

Hi tomdkat,

I have added a valid DOCTYPE (please check if it is fine).

Yes I am talking about that gap that now is relicated at the bottom of the second flash instance although as a small tiny line (comapared to the top one). What can I do for these gaps?

In addition I see that the light green background in the pages do not follow a fixed pattern such as in here: http://www.divaniedettagli.it/azienda.html (the light green 'mat' covers till the bottom page) and in here: http://www.divaniedettagli.it/servizi.html (where it does not reach the bottom page).

Many thanks for helping,

simone


----------



## tomdkat (May 6, 2006)

Thanks for doing that. When working out layout issues, I always use CSS borders to figure out how things are laying out. In this case, I ended up adding borders on these divs:


```
<td width="768" height="415" valign="top" background="http://www.divaniedettagli.it/f-b.gif" style="background-image: url(images/f1-fl.jpg); background-repeat: no-repeat; background-position: top;">[b]<div [color=red]style="border: 1px solid red;" [/color]class="div">[/b]
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','768','height','200','title','header_1','src','components/header1','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','components/header1.swf' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="768" height="200" title="header_1">
    <param name="movie" value="components/header1.swf">
    <param name="quality" value="high">
    <embed src="home_files/header10.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="768" height="200"></embed>
  </object>
</noscript></div>
[b]  <div style="margin-bottom:0px[color=red]; border: 1px solid green;[/color]">[/b]
    <div style="margin-left:px; margin-top:20px;">
      <div align="center">
        <div class="style4" id="flashcontent">
          <p class="style7"></p>
          <p>
            <script type="text/javascript" src="home_files/swfobjec.js">
      </script>
```
That put red and green borders around the navigation div and the div with the rotating images. I could then clearly see where the gap was. So, taking another look at HTML, I saw this:


```
<div style="margin-bottom:0px; border: 1px solid green;">
[b]    <div style="margin-left:px; [color=red]margin-top:20px;[/color]">[/b]
      <div align="center">
        <div class="style4" id="flashcontent">
          <p class="style7"></p>
```
As a test, I removed that entire style definition and the rotating image was practically flush with the navigation menu above. The "margin-leftx" should be removed since that is erroneous. From there, it should be a matter of adjusting heights, margins, and padding to get the two divs perfectly flush as you want.

Give using CSS borders to see how things are laying out a shot and see where it takes you. Additionally, that page has 67 errors on it when I validated it. You should look into that once you have the Flash objects rendering the way you want.

If you need help with the Flash object rendering after giving the border trick a try, post back here and we'll see what kind of progress you've made and see what else is left to do.

Peace...


----------



## tomdkat (May 6, 2006)

sdegan said:


> Yes I am talking about that gap that now is relicated at the bottom of the second flash instance although as a small tiny line (comapared to the top one). What can I do for these gaps?


My post above gets you started on the gaps. 



> In addition I see that the light green background in the pages do not follow a fixed pattern such as in here: http://www.divaniedettagli.it/azienda.html (the light green 'mat' covers till the bottom page) and in here: http://www.divaniedettagli.it/servizi.html (where it does not reach the bottom page).


I saw the gaps you mentioned in Google Chrome, Firefox, and Opera. I haven't looked at the site in IE7 yet but I'll do that as I have time. Do you have IE8 installed or just IE7? I've got IE8 so I'll view the page in native and IE7 compatibility modes. There might be some IE7-centric CSS we'll need to get IE7 to behave as desired. 

Peace...


----------



## sdegan (Jun 17, 2008)

Hi tomdkat,

I have IE8. I have removed the following:


and it is much better even though I have not found a way to get rid of the small gaps. I also have to understand the errors for validation. Big problem for me since I usually spend lots of time without solving the errors.

About the different background of the light green in the pages, now I see a different behavior in FF compared to IE8:


> In addition I see that the light green background in the pages do not follow a fixed pattern such as in here: http://www.divaniedettagli.it/azienda.html (the light green 'mat' covers till the bottom page) and in here: http://www.divaniedettagli.it/servizi.html (where it does not reach the bottom page).


Many thanks for helping,

simone


----------



## tomdkat (May 6, 2006)

sdegan said:


> I have IE8. I have removed the following:


I think you might have mis-matched div tags now. In fact, validating this page:

http://www.divaniedettagli.it/azienda.html

now has 71 errors instead of 67. So, put that div back but just leave the "style" attribute off.



> and it is much better even though I have not found a way to get rid of the small gaps.


I took another look at that and that's due to some height adjustments that need to be made. The divs containing the Flash objects don't have a height specified, so the gaps are present. I'll post more on that later.



> I also have to understand the errors for validation. Big problem for me since I usually spend lots of time without solving the errors.


Walk through the errors one at a time and make the recommended fixes. Most of the time, the error descriptions are pretty straightforward.



> About the different background of the light green in the pages, now I see a different behavior in FF compared to IE8:


Yep, I'm seeing that as well. Once we get the page to validate (or at least remove the bulk of the errors), things should start rendering more consistently and correctly. 

Peace...


----------



## sdegan (Jun 17, 2008)

Hi tomdkat,

Thank you very much. I will follow your suggestions and let you know straightforward.

Again many thanks for your kind help and patience,

simone


----------



## tomdkat (May 6, 2006)

Well, I've been looking at the page and I've made some CSS tweaks to eliminiate the gaps and fixed the problem where the lighter green background doesn't cover the full height of the page.

I cleaned up all but one of the validation errors, which didn't contribute to the problems of the gaps or the background height.

So, I'll make you a deal. Make a pass or two at cleaning up the validation errors and then I'll send you the CSS changes I made to deal with the gaps and background height issue, ok? 

Peace...


----------



## sdegan (Jun 17, 2008)

Yes, tonight I will do the best I can to correct some validation errors.

Many thanks for your help,

simone


----------



## sdegan (Jun 17, 2008)

Hi tomdkat,

The best I have obtained is to get 29 errors with this version:
http://www.divaniedettagli.it/azienda_vs_2_test_valid_errors_t_III.html

I also see the gaps again at the top and bottom of the second flash instance.

For the errors, I do not understand what this means: >>_You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is ...<<_

Then, I do not know what to do for errors such as the following:

<script language=*"*JavaScript" type="text/JavaScript">or as another example:
[TD]Sorry but I am not very good at this.

Many thanks for your help,

simone


----------



## colinsp (Sep 5, 2007)

sdegan said:


> Hi tomdkat,
> 
> For the errors, I do not understand what this means: >>_You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is ...<<_
> 
> simone


What that means is that you are trying to define something that is not permitted in the html. So if you look at your first error


```
<script language="JavaScript" type="text/JavaScript">
```
what you should have is


```
<script type="text/javascript">
```
so what this tells you is that the script element doesn't have a language attribute. Have a look here at this particular error. You can then research your other errors on the same site and get the number down.


----------



## tomdkat (May 6, 2006)

sdegan said:


> Hi tomdkat,
> 
> The best I have obtained is to get 29 errors with this version:
> http://www.divaniedettagli.it/azienda_vs_2_test_valid_errors_t_III.html
> ...


Coolio! You did great! I'll download the latest version and I'll post an update with the CSS mods to kill the gaps, etc. 



> For the errors, I do not understand what this means: >>_You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is ...<<_


It means just what is says.  Remember, above I asked you to read that article at "A List Apart" and choose an appropriate DOCTYPE for your page. The DOCTYPE you chose is XHTML 1.0 Strict, which forces all modern browsers into "Standards mode" when rendering the page (which is a good thing). Doing this will help make sure the page renders the same in all standards compliant browsers. It's not absolute but the mainstream web standards compliant browsers tend to behave the same in standards mode.

Since you have a XHTML 1.0 Strict DOCTYPE specified, that validation error means you're using an attribute on an element that is forbidden (or not supported, rather) by XHTML 1.0. Here is an example:


```
<table [b][color=red]align=left"[/color][/b] border="0" cellpadding="0" cellspacing="0">
```
In HTML 4, the "align" attribute of the table tag has been deprecated (which means not used anymore). Therefore, CSS styling must be used instead:

```
<table [b][color=red]style="text-align: center; margin: 0 auto;"[/color][/b] border="0" cellpadding="0" cellspacing="0">
```
Of course, choosing a different DOCTYPE will yield different validation results BUT the idea isn't to choose a DOCTYPE at random but to choose one that matches the level of (X)HTML contained in the file.



> Then, I do not know what to do for errors such as the following:
> 
> <script language=*"*JavaScript" type="text/JavaScript">or as another example:
> [TD]Sorry but I am not very good at this.


In XHTML, ALL tags and attributes are in lower case. Additionally, the "language" attribute has been deprecated in HTML 4 in favor of the "type" attribute.

So you would need to change the "<script>" tag to this:

```
<script type="[b][color=red]text/javascript[/color][/b]">
```
For the [TD] tag, the "width" and "height" attributes have been deprecated and you should use CSS to control the dimensions of table cells.

If you're going to develop XHTML pages, you need to follow the XHTML spec (along with HTML 4 since the XHTML spec won't define everything) to see what's valid and what isn't.

I'll post an update soon.... 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, here are the CSS mods and some minor HTML adjustments, as promised.

First, the CSS:

```
div.c1 {margin-left: px; [b][color=red]margin-top: 20px;[/color][/b] text-align: center}
```
This controlled the styling of the Flash object div in the center of the page. The margin identified above contributed to the gap at the top of the Flash object. That DIV was also missing a height which contributed to the gaps at the top and bottom.

So, I created this CSS class instead:

```
div.tdk-bottom {
    	margin: 0 ! important; 
    	padding:0 ! important; 
    	height: 250px;
    }
```
and I lobotomized the "div.cl" rule to be this:

```
div.c1 {text-align: center}
```
 Giving these CSS rules:

```
div.c1 {text-align: center}
    div.tdk-bottom {
    	margin: 0 ! important; 
    	padding:0 ! important; 
    	height: 250px;
    }
```
The "! important" is needed since these are classes and their must be margin and padding attributes assigned to a CSS id rule somewhere. The "! important" is an override, of sorts. Of course, the above style rules could be combined into one and probably should be. I'll leave that as a "clean up" task for you. 

Now, the Flash object at the top still had a gap at the bottom, so I created this style rule:

```
div.tdk-top { height: 200px; }
```
Doing this closed the top gap nicely. So, now the Flash objects are flush against each other. The only issue now is the green background that doesn't span the full height of the page. To address this, I added these rules to the existing "body" style rule:

```
body {
	background-color: #333300;
[b][color=red]	margin: 0; padding: 0;[/color][/b]
  }
```
This resulted in the green background spanning the full height of the page.

The ONLY HTML mods I made were to use the two CSS classes I created above:

```
<td width="768" height="415" valign="top" class="c2">
[b]<div class="div [color=red]tdk-top[/color]">[/b]<script type="text/javascript">
//<![CDATA[
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','768','height','200','title','header_1','src','components/header1','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','components/header1' ); //end AC code
//]]>
```
and

```
[b]<div class="style4 c1 [color=red]tdk-bottom[/color]" id="flashcontent">[/b]
<p class="style7"></p>
```
The result is no gaps in between Flash objects and a green background that spans the height of the page. I've viewed this in Chrome, Opera, and Firefox on Linux and all three render the page the same way. I suspect IE8 will render like Chrome, Opera, and Firefox and I hope IE7 would as well. Attached are screenshots of Opera.

You're using a HTML table-based page layout which doesn't appear to be really needed. Given the elements on the page, we could probably simplify things a LOT if we ditched the HTML table layout and used some strategically placed divs on the page. 

Hope that helps!

Peace...


----------



## tomdkat (May 6, 2006)

Also, for comparison here is a screenshot of the "live" page viewed in Opera as well. Notice the gaps and the green background at the top of the page.

Peace...


----------



## sdegan (Jun 17, 2008)

Hi tomdkat,

Thank you, I could never have thought about those tweaks!

I have applied the modifications as suggested by you and it is working well. I do not see the gaps between the two flash instances and the 'green background that spans the height of the page is now working very well'.

Here is the new version:
http://www.divaniedettagli.it/azienda_vs_2_test_valid_errors_t_IV.html

Before applying this template to the other pages I run a validation and I obtained 42 errors. Thus, I tried to work a bit but I cannot go below 28 errors. Can you further help me with these errors? 

You have also suggested the following:




> You're using a HTML table-based page layout which doesn't appear to be really needed. Given the elements on the page, we could probably simplify things a LOT if we ditched the HTML table layout and used some strategically placed divs on the page.


And I think that those validation errors (at least some) may be cleaned up with the above suggestion (no clue on how to do though).

I hope my sister will be happy with the site after all the work done.

Many thanks for your kind help,

simone


----------



## tomdkat (May 6, 2006)

Great! 

A lot of the validation errors go away if you dump the HTML table layout OR if you fix the issues listed by the validator. For example, this one:



> Error Line 130, Column 69: there is no attribute "align"




If you remove the
_align="center"_
attribute from the


tag, that validation error will go away. You'll have to use CSS to center the table on the page.



> Error Line 140, Column 218: document type does not allow element "object" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "address", "fieldset", "ins", "del" start-tag
> 
> …th="768" height="200" title="header_1"><param name="movie" value="components/h…



You'll have to put the "" elements which load the Flash content in a block-level element of some kind (maybe a "div") to be standards compliant. Also, using "embed" to load this kind of content is outdated since most, if not all, modern browsers support loading content like this with the "" tag.



> Error Line 201, Column 18: required attribute "id" not specified



The "" element needs an "id" attribute since
"name" is deprecated in XHTML
.

You won't be able to get ALL of the validation errors fixed but should be able to get most of them. When I played with one of the earlier pages, I got all but one error fixed and that one error was the "target" attribute on an anchor. I dumped the use of the "" tag completely and fixed the table oriented errors as well as fixing some other stuff.

You can decide how far you want to go with the validation effort. I personally think you will save yourself grief later on if you use as clean (X)HTML and CSS code as possible but a lot of people don't care about that as long as the page works.

Good luck!

Peace...


----------



## sdegan (Jun 17, 2008)

Hi tomdkat,

First of all, many thanks for your kind help.

I have worked quite a lot and I have solved (only) one error after your latest suggestions (27 now).


> If you remove the _align="center"_ attribute from the
> 
> tag, that validation error will go away. You'll have to use CSS to center the table on the page.




I would like you have a look at the site since I have worked even more on the latest version to try to get the green background spanning the full height of the following pages.

http://www.divaniedettagli.it/servizi.html
http://www.divaniedettagli.it/en/servizi.html


I have used as template the page we worked together but in these two pages the green background does not reach the bottom of the page. Is this normal? Is this because there is less body of text in the page?

Likewise for the main page:
http://www.divaniedettagli.it/


What do you think?

Many thanks for helping

simone


----------



## tomdkat (May 6, 2006)

Let me take a peek and I'll report back what I find. 

EDIT: What did you do? They appear to be centered and loading the way you want now.

EDIT #2: Ok, I just viewed the pages above in IE8 (both native and IE7 compatibility mode) and the green background spans the height of the page. Be SURE to refresh the page(s) to get the CSS file updates. 

The home page has the gap again and I'll look at that in the morning.

Peace...


----------



## tomdkat (May 6, 2006)

Here are some tips to help reduce the validation errors:

In your CSS file, change this:


```
td.c2 {background-image: url(images/f-l.gif); background-repeat: no-repeat; background-position: left bottom;}
```
to this


```
td.c2 {[b][color=red]width: 768px; height: 750px;[/color][/b] background-image: url(images/f-l.gif); background-repeat: no-repeat; background-position: left bottom;}
```
Then in the HTML file, change line 130 from this:


```
<td class="c12" width="768" height="750" valign="top">
```
to this:

```
<td class="c12" valign="top">
```
Change line 158 in the HTML file from this:

```
<td width="768" height="205" valign="top" class="c7"><table width="768" height="205" border="0" cellpadding="0" cellspacing="0" background="components/f-main-dr_3.png">
```
to this

```
<td width="768" height="205" valign="top" class="c7"><table [b][color=red]style="width: 768px; height: 205px; background: url(components/f-main-dr_3.png);"[/color][/b]  border="0" cellpadding="0" cellspacing="0">
```
See how the page renders and see if the number of validation errors goes down. I haven't tried to validate the above changes myself but I believe I made those changes the last time I looked at one of the files.

Peace...


----------



## tomdkat (May 6, 2006)

Ok, the gap between the Flash objects on the home page can be fixed with these tweaks:

CSS file:

```
div.tdk-top {
    	margin: 0; 
    	padding:0; 
    	height: 205px;
    }
```
Add that style somewhere.

HTML file:

```
<table width="768" height="380" border="0" cellspacing="0" cellpadding="0" bgcolor="#595947">
<tr>
<td width="768" height="80" valign="top" background="http://www.divaniedettagli.it/f-b.gif" style="background-image: url(images/f1-fl.jpg); background-repeat: no-repeat; background-position: top;">
[b][color=red]<div class="tdk-top">[/color][/b]
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="768" height="205">
  <param name="movie" value=
"components/header1.swf" />
<param name="quality" value="high" />
<embed src="index_files/header10.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="768" height="205" /></object>
[b][color=red]</div>[/color][/b]
</td>
</tr>
<tr background="http://www.divaniedettagli.it/f-main-dr.gif">
```
The elements need to be in a block-level element of some kind and giving that block-level element the proper height helps things to align properly. The height of the block-level element (a div, in this case) should be the height of the object being loaded in the tag. In the case of the header Flash object, it's 205px high so the height of the div I created is 205px.

Hope that helps!

Peace...


----------

