# Problems with template in Firefox & Opera



## sdegan (Jun 17, 2008)

Hi All,

I am designing a new website and I see no problems when the site loads in IE, but when it loads in Firefox or Opera the same page is showing tables problems. For instance the margins are not aligned as they are in IE and a the list of words get partially to a neighbor area. I do not validate the HTML and I saw 12 errors. 

I do not know how to get things showing properly in all browsers. Any help is appreciated.

Many thanks


----------



## tomdkat (May 6, 2006)

Start by posting a link to the site here so we can see what's going on. If you're getting validation errors, correct those first and see how the page renders in Firefox and Opera.

Peace...


----------



## sdegan (Jun 17, 2008)

Thanks,

You are right this is the link you can check with IE and Firefox:
http://simonedegan.net/news_test.html

as you can see there are problems that I do not see in IE. I also tried to use the code generated with the clean-up code generated by the "Clean up Markup with HTML Tidy" in the Markup validation service, but there is no difference.

The major problem is that I do not very well understand the errors reported with the validator (12 errors) and how to get rid of them. I am now a bit concerned about this issues since I spent lots of time on this template.

Any suggestion on how to get it done will be immensely apreciated

Thanks


----------



## tomdkat (May 6, 2006)

Ok, let's walk through these errors one by one:

*Line 42, Column 163: required attribute "alt" not specified .*
Per the W3 spec, <img> elements need to have an "alt" attribute for user agents (browsers or other software that displays web pages) that don't display the image itself.

Try this:


```
<div id="feature"><span style="margin-bottom: 10px;"><img src="components/preloader_white_III.png" width="760" height="79" longdesc="http://siomonedegan.net" [b][color=red]alt="[image description goes here]"[/color][/b]/></span></div>
```
*Line 45, Column 11: document type does not allow element "ul" here; assuming missing "li" start-tag *
It looks like you're trying to nest unordered lists but aren't doing it correctly.

Here is your code:

```
<div id="nav" style="margin-bottom: 10px;">
[color=red] <ul>
 <ul>[/color]
 <li><a href="#"></a></li>
 </ul>
 <li><a href="http://simonedegan.net">Home</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="biography.html">About me</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="http://simonedegan.com">simonedegan.com</a></li>
 <li><a href="mailto:[email protected]">Contact</a></li>
 </ul>
 <ul>
 <li><a href="#"> News</a></li>
 </ul>
 </div>
```
You can't just "stack" 
 elements like that. You will have to put one inside a
 element, like this:


```
<div id="nav" style="margin-bottom: 10px;">
[color=red] <ul>
 <li>
 <ul>
 <li><a href="#"></a></li>
 </ul>
  </li>
[/color]
 <li><a href="http://simonedegan.net">Home</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="biography.html">About me</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="http://simonedegan.com">simonedegan.com</a></li>
 <li><a href="mailto:[email protected]">Contact</a></li>
 </ul>
 <ul>
 <li><a href="#"> News</a></li>
 </ul>
 </div>
```
Notice how the nested unordered list is inside the first
 element of the first unordered list. See what doing that does for the page and for validation.

*Line 48, Column 11: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag .
Line 49, Column 11: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag .
Line 50, Column 11: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag .
Line 51, Column 11: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag .
Line 52, Column 11: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag .
Line 53, Column 11: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag .
Line 54, Column 10: end tag for "li" omitted, but OMITTAG NO was specified .
Line 102, Column 12: end tag for "ul" which is not finished .
*
These are related to the previous unordered list nesting problem. Get that fixed and these should go away.

*Line 106, Column 94: required attribute "alt" not specified .*
Again, you need to add an "alt" attribute to the <img> element tag:


```
<img src="http://www.justdreamweaver.com/templates/link/spacer.gif" width="1" height="1" [b][color=red]alt="spacer image"[/color][/b]/>
```
Get those things taken care of and then we can get to the rendering issue. 

Peace...


----------



## sdegan (Jun 17, 2008)

Many many thanks,

I am looking forward to go home and try to do what you have suggested. 

Many thanks again and I will keep you informed.

P.S.: sorry I am now learning this kind of things


----------



## tomdkat (May 6, 2006)

It's all good. 

Peace...


----------



## sdegan (Jun 17, 2008)

Hi Tomdkat,

I am lost with this two errors (they seems the only two left) I see after validation (I still see the weird alignment of the text though):

_Line 58, Column 10: end tag for element "li" which is not open._


_Line 103, Column 12: end tag for "ul" which is not finished._
_[/LIST]_

The link is still: http://simonedegan.net/news_test.html

Can you help me with the codes?

The problem is that I have to validate the main web page and at least other two parent pages. But this will be the next step.

Many thanks

simone

P.S.: I am editing because I have revalidated again and now I see 5 errors...


----------



## tomdkat (May 6, 2006)

Line 58 can be removed. By the time line 58 is reached, ALL of the unordered lists have been closed. So, delete line 58.

Line 103: Try putting a [*] element inside the unordered list. Lines 102 and 103 are currently:


```
<ul>
</ul>
```
Try changing it to:


```
<ul>
<li>
</ul>
```
Line 109: Remove the extra "".

Original code:

```
</div><div id="credit"></div>
```
New code:

```
<div id="credit"></div>
```
See what that does.

Peace...


----------



## sdegan (Jun 17, 2008)

Tomdkat,

I think I got rid of them the only error showing now is in the main page in the flash instance. See here: 
http://simonedegan.net

_Line 92, Column 24_: ID "flashcontent" already defined.
This SlideShowPro photo gallery requires tand then there is this:
_Line 88, Column 24_: ID "flashcontent" first defined here.
I have tried everything for the above error but without success. Please help me again.

Many thanks without your help it would have been impossible.

simone


----------



## tomdkat (May 6, 2006)

You can have only ONE element with a given "id". Change the two occurrences of:

id="flashcontent"

to

class="flashcontent"

and change the CSS definition from 

#flashcontent

to 

.flashcontent

Peace...


----------



## sdegan (Jun 17, 2008)

Tomdkat,

I have changed as you directed see here:
http://www.simonedegan.net/index_test.html
but the flash instance is not working.

I have also tried to modify the .css but I nothing changed. I am not sure if I did it porperly. It this the line supposed to be modified?

_#outerWrapper #gradient #contentWrapper #content #flashcontent {_

with this: 
_#outerWrapper #gradient #contentWrapper #content .flashcontent {_

Any way the .css file online is still in the original unmodified.

I validated again the http://simonedegan.net and this is the error I still have:
_Line 92, Column 24_: ID "flashcontent" already defined.
This SlideShowPro photo gallery requires tI also tried to validate the http://www.simonedegan.net/index_test.html

and I have this errors:
_Line 88, Column 26_: duplicate specification of attribute "class".

_Line 92, Column 26_: duplicate specification of attribute "class".
This SlideShowPro photo gallery require

Do you think it is a class problem in the .css. In the main page I tried to modify the area where the flah instance is. This is because I previously fixed the issue of the overlapping text in the parent pages (i.e. http://simonedegan.net/news.html that now is OK). But this caused the problem in the main page. Thus I copied and modify the origninal class and I modified the padding to get the flash in the center of the page. 

I do not really know how to solve this issue.

Many thanks for helping and for you patience


----------



## tomdkat (May 6, 2006)

Sorry for not being more clear. I'm currently fighting a cold so my head isn't as clear as it usually is (the fact of my head being "clear" at all is debatable by some...  ).

Here is the original (current) code:

```
<div id="contentWrapper">
<div [b][color=red]class="style3" id="flashcontent"[/color][/b]>
<div class="c3"></div>
<p><script type="text/javascript" src="http://simonedegan.net/js/swfobject.js">
</script></p>
<div [b][color=red]class="style4" id="flashcontent"[/color][/b]>This SlideShowPro photo gallery requires the Flash Player plugin and a web browser with JavaScript enabled.</div>
<script type="text/javascript">
```
Change it to this:

```
<div id="contentWrapper">
<div [b][color=red]class="style3 flashcontent"[/color][/b]>
<div class="c3"></div>
<p><script type="text/javascript" src="http://simonedegan.net/js/swfobject.js">
</script></p>
<div [b][color=red]class="style4 flashcontent"[/color][/b]>This SlideShowPro photo gallery requires the Flash Player plugin and a web browser with JavaScript enabled.</div>
<script type="text/javascript">
```
 There should be ONE space in between "style[n]" and "flashcontent".

See what that does. I'll resume this later this morning as I gotta hop in the shower now. 

Peace...


----------



## sdegan (Jun 17, 2008)

Hi Tomdkat,

I am so sorry for your cold. I hope you wil be back full of energies soon.

I have tried to change the code but I still do not see the flash instance in the main page:
http://simonedegan.net/index_II.html

I have put here an example of the problem I originally had that regarded the off center position of the flash instance: http://simonedegan.net/index_III.html
However, if I modify the padding of that area (i.e.putting back to its original settings: 10px) I would have it corrected. I made the padding adjustment to 200px to ovoid the overlapping of the words in the parent pages (i.e. http://simonedegan.net/news.html that now is working fine with no errors).

In summary I think that the problem is whithing the maipulaiton of the .css I did. If so, the following question is how to create a different rule for the same area to tell the main page not to have the padding set to 200px on the left?

Many thanks


----------



## tomdkat (May 6, 2006)

sdegan said:


> Hi Tomdkat,
> 
> I am so sorry for your cold. I hope you wil be back full of energies soon.


Thanks. 



> I have tried to change the code but I still do not see the flash instance in the main page:
> http://simonedegan.net/index_II.html


Cool.  Now, do you want the SAME Flash content to appear in the DIV assigned class "style3" AND the one assigned class "style4" or just one of them? If just one of them, change the id back to the way it was for the one that should have the Flash applet. Again, you can have only ONE element with the same id. From what I can tell, the one assigned class "style4" is the one where you want the Flash applet to appear, so make this change:


```
<div id="contentWrapper">
<div [b][color=red]class="style3"[/color][/b]>
<div class="c3"></div>
<p><script type="text/javascript" src="http://simonedegan.net/js/swfobject.js">
</script></p>
<div [b][color=red]class="style4" id="flashcontent"[/color][/b]>This SlideShowPro photo gallery requires the Flash Player plugin and a web browser with JavaScript enabled.</div>
<script type="text/javascript">
```
Then, change the ".flashcontent" CSS definition back to "#flashcontent". Then, the Flash applet should start loading. Let me know what happens.



> I have put here an example of the problem I originally had that regarded the off center position of the flash instance: http://simonedegan.net/index_III.html
> However, if I modify the padding of that area (i.e.putting back to its original settings: 10px) I would have it corrected.


Sounds good.



> I made the padding adjustment to 200px to ovoid the overlapping of the words in the parent pages (i.e. http://simonedegan.net/news.html that now is working fine with no errors).


Great! Glad to hear it's now validating! Now, we can look into the rendering issue that remains. 



> In summary I think that the problem is whithing the maipulaiton of the .css I did. If so, the following question is how to create a different rule for the same area to tell the main page not to have the padding set to 200px on the left?


Let's take care of the news page first, then we can look at this issue.

I'll be back in a few....

Peace...


----------



## tomdkat (May 6, 2006)

Ok, take a look at the attached screenshots. I was able to create that page by adding this CSS styling to your external stylesheet:


```
#content {
	width: 526px;
	float: right;
}
```
The problem you're seeing in Firefox and Opera is the "leftColumn1" DIV is overlaying the "content" DIV, for some reason (not sure why).

I floated the "content" DIV to the right and gave it a fixed width and now things are aligning better.

Peace...


----------



## sdegan (Jun 17, 2008)

Hi Tomdkat,

Amazing! You are amazing!

I would never been able to find the problem without your help.

With the CSS you sent me the site has also passed the validation even without applying the corrections you sent me in message #14.

Can you check it out if everything is fine from your side (even in Opera that I do not have installed and -possibly- Safari)?

I will have to add a few more pages than I will link later the Portfolio to a different system. The only pages now active in http://simonedegan.net are News and About me.

When I will add another parent page can I just start from one of the parents e.g. News to use as a template?

With much appreciation


----------



## tomdkat (May 6, 2006)

sdegan said:


> Hi Tomdkat,
> 
> Amazing! You are amazing!
> 
> ...


Great! Glad things are working! It looks like you did make the change I suggested in post #14. You removed one of the DIVs that had an id of "flashcontent".



> When I will add another parent page can I just start from one of the parents e.g. News to use as a template?


Yep, sure can. The site looks GREAT in Firefox 3.0.4 and Opera 9.62 on Linux (what I run at home). 

Great job!

Peace...


----------



## sdegan (Jun 17, 2008)

Hi Tomdkat,

I am just curious: why in IE version 6 the frame appears weird as you see in the attached image? It seems that there is a misalignment in the central frame. And this applies only to the parent pages.

Thanks again!


----------



## tomdkat (May 6, 2006)

sdegan said:


> Hi Tomdkat,
> 
> I am just curious: why in IE version 6 the frame appears weird as you see in the attached image? It seems that there is a misalignment in the central frame. And this applies only to the parent pages.
> 
> Thanks again!


Because IE6 isn't the "best" browser on the planet and often times needs special "help" when it comes to using CSS for page layout. 

There will probably be some special tweaking needed for IE6 to get it to behave. IE7 is much better, in this regard. Unfortunately, IE6 hasn't dropped off the face of the planet yet.

I don't have convenient access to IE6 these days but I'll see if I can find out what's up next week as time permits.

Peace...


----------



## sdegan (Jun 17, 2008)

Many, many thanks for your kindness

simone


----------



## tomdkat (May 6, 2006)

Ok, try adding this to your news.html file and open it in IE6 and post a screenshot. Don't worry about the borders for now. 


```
<style type="text/css">
/*<![CDATA[*/
 h2.c5 {
	text-align: left;
	text-indent: 0px;
}
 h1.c4 {
	text-align: left;
	text-indent: 0px;
}
 div.c3 {text-align: left}
 div.c2 {margin-bottom: 10px;}
 span.c1 {margin-bottom: 10px;}
/*]]>*/
</style>
[b][color=red]
<!--[if IE 6]>
<style type="text/css">
#leftColumn1 {
	border: 1px solid white !important;
}

#content {
	width: 475px;
	float: right;
	border: 1px solid red !important;
}

#contentWrapper {
border: 1px solid yellow ! important;
width: 713px ! important;
}
</style>
<![endif]-->
[/color][/b]
</head>
<body>
<div id="header">
```
Peace...


----------



## sdegan (Jun 17, 2008)

Hi Tomdkat,

The margins have been corrected. I do not know why there are red, gray and yellow lines around the frames. But apart from the lines it looks fine.

Your are great.

Many thanks


----------



## tomdkat (May 6, 2006)

Great! Change the above code to this and you should be set:

```
<style type="text/css">
/*<![CDATA[*/
 h2.c5 {
	text-align: left;
	text-indent: 0px;
}
 h1.c4 {
	text-align: left;
	text-indent: 0px;
}
 div.c3 {text-align: left}
 div.c2 {margin-bottom: 10px;}
 span.c1 {margin-bottom: 10px;}
/*]]>*/
</style>
[b][color=red]
<!--[if IE 6]>
<style type="text/css">
#content {
	width: 475px;
	float: right;
}

#contentWrapper {
width: 713px ! important;
}
</style>
<![endif]-->
[/color][/b]
</head>
<body>
<div id="header">
```
I added borders around various DIVs to see how things are laying out in IE6. The above code removes the borders so IE6 should now render like the other browsers.

This makes the news.html file a GREAT candidate for being a template for future pages.

Ideally, the above code change really means the existing CSS styling should be re-worked so that the above changes aren't needed but I don't have the strength for that right now and that's a project you can embark on later. 

The site looks great, by the way. 

Peace...


----------



## sdegan (Jun 17, 2008)

Hi Tomdkat,

Brilliant! I will try tonight since I can not access IE6 now to test it out.

Can I add the above script in the main page as well i.e. http://simonedegan.net ?

If so, is the following the right position?

between

</style>

_script to be added here ?_



Many, many thanks for helping

simone


----------



## tomdkat (May 6, 2006)

You will have to experiment with it and see. It looks like you've got the right location for it. 

Peace...


----------



## sdegan (Jun 17, 2008)

Hi Tomdkat,

I have tried to put your code in the main page and it is working fine in IE6:
http://simonedegan.net/index_IE6.html

I have noticed that when using Firefox there is the following warning on the top left of the browser that, once the mouse in on it says:

_CSS Error: Expected':' but found 'undefined'. Declaration dropped_

I do not see such error in the News page though 
http://simonedegan.net/news_IE6.html

Do you have a idea why FF is giving such warning? Do you know if it is possible to fix it?

Many thanks for your patient and kindness

simone

P.S.: I had some search: can it be related to the SWFObject (that I am trying to understand what is)?


----------



## tomdkat (May 6, 2006)

Hmmmm, Opera also gives an error but it's not clear on what the error is.

Now that you mention tehe SWFObject code, I noticed this:


```
<div id="contentWrapper">
[b]<div class="style4" id="flashcontent">
[color=red]<div class="c3"></div>[/color]
<p><script type="text/javascript" src="http://simonedegan.net/js/swfobject.js">
</script>This SlideShowPro photo gallery requires the Flash Player plugin and a web browser with JavaScript enabled.</p>
<script type="text/javascript">
//<![CDATA[
        var so = new SWFObject("http://www.simonedegan.net/flash/slideshow/loader.swf", "loader", "700", "600", "8", "#333333");
                so.addParam("allowFullScreen","true");
                so.addParam("quality", "best");        
                so.addVariable("paramXMLPath","param.xml");
                so.addParam("base",".");
                so.write("flashcontent");                     
//]]>
</script></div>[/b]
```
It looks like the SWFObject will write to the SAME DIV that contains the code! I'm not sure if this is correct or not. If you can, verify that you have the target DIV for the Flash applet correctly defined.

Maybe you need something like this:


```
<div id="contentWrapper">
[b][color=red]<div class="style4">
<div class="c3" id="flashcontent"></div>[/color][/b]
<p><script type="text/javascript" src="http://simonedegan.net/js/swfobject.js">
```
See what does.  It might break everything so proceed *with caution*! 

Peace...


----------



## sdegan (Jun 17, 2008)

Hi Tomdkat,

I have tried the above code but there is still the same warning message. The only difference is that "_This SlideShowPro photo gallery requires the Flash Player plugin and a web browser with JavaScript enabled._" appears in the main page under the flash event.

I read about updating the 'swfobject.js' but it is still unclear to me.

What does a error like this means? The page passed the CSS validation so I do not understand.

Again many thanks for your help

simone


----------



## sdegan (Jun 17, 2008)

Hi Tomdkat,

First of all: Happy New Year!

I have tried and searched on how to solve the following error I see in FireFox:

_CSS Error: Expected':' but found 'undefined'. Declaration dropped

_Do I think I have to live with it or is there a solution?

The site is: http://simonedegan.net/

Thank you very much for helping


----------



## tomdkat (May 6, 2006)

See if this helps. 

Peace...


----------

