Joomla Modal shows in IE (all versions) with almost empty Template - joomla

I am working on a template for Joomla! 2.5.4. Normally this goes very well, but today I have a weird problem.
The Joomla Modal(Squeezebox) shows in an completely empty template in all versions of IE.
The code of the template is:
<?php
$app = JFactory::getApplication();
$sitename = $app->getCfg('sitename');
?>
<?='<?xml version="1.0" encoding="utf-8?>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-en" lang="en-en" dir="ltr">
<head>
<jdoc:include type="head" />
</head>
<body>
</body>
</html>
When disabling the K2 System plugin the Modal disappears. But i need the plugin so I can't disable it.
The following is installed in Joomla:
Joomla 2.5.4 (newest version)
K2
This template
The website is reachable on http://marjolein.site-project.nl
Does someone recall this problem or know how to solve it?

Already found the awnser. The XML line put the template in IE in Quirks Mode... Removing that solved it

Related

Empty page in Webmatrix

I wrote (copied) a first program in WebMatrix. I selected EmptySite template and in Page.cshtml I typed 2 lines. Finaly, the code in Page.cshtml looks like this:
#{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Welcome to the WebMatrix!</h1>
<p>I began to become a web developer on #DateTime.Now.ToString()</p>
</body>
</html>
I pressed "Run" but I got an empty web-page. Nothing is written on it. I received no error message.
Well, what's wrong ?
Thanx,
Eb_Cj
You seem to be going to the default document rather than your page. You can solve this in two ways: either right click on the Page.cshtml node in the project explorer within WebMatrix and select Launch in browser or manually change the URL in your browser to localhost:25776/Page.

Reference twitter-bootstrap inside a Codeigniter view

I'm trying to reference the css files of bootstrap inside my views. I'm using Codeigniter as my framework. CI has a folder for the views, but I haven't been able to reference the stylesheets. This is what I'm doing right now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<title>
Login
</title>
</head>
<body>
<div class="container">
And so on... But the style is just plain html.
I know there are plenty of questions in stackoverflow regarding this, like this one, but I haven't found a solution in them. Any help would be great.
Solved my problem.
It was a mix of not putting the correct DOCTYPE and also for some reason I had to use <?php base_url();?> for the urls... If someone could explain this to me it would be great to learn more.

My HTML tags gets tampered with

I have an Umbraco 5 MVC3 project where i discovered that there where white spaces here and there. When investigating i discovered that my HTML looked really bad when "viewing generated source" in firefox web developer tool. For example it removes my doctype declaration and moves my meta-tags and stuff out of the head. Simplified code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>#ViewBag.Title</title>
<link rel="stylesheet" href="#Url.Content("~/Content/Styles/style.css")"/>
</head>
<body id="" class="default">
<div id="wrapper">
<header id="banner" class="body">
<a class="ir logo" href="/"><h1>Christian </h1></a>
<ul class="share">
<li id="facebook"><a class="ir" href="http://www.facebook.com/sharer.php?u=#Request.Url.AbsoluteUri">Facebook</a></li>
<li id="twitter"><a class="ir" href="http://twitter.com/share?text=Christian">Twitter</a></li>
</ul>
#Html.Partial("nav")
</header>
<section id="content" class="body">
#RenderBody()
</section>
</div>
<script src="#Url.Content("~/Scripts/plugins.js")"></script>
<script src="#Url.Content("~/Scripts/script.js")"></script>
</body>
</html>
And the output begins like this
<html class="no-js" lang="en"><head></head><body id="" class="default">
If you want to check on the HTML generated by your server, you should use View source (CTRL + U).
Generated source is more like a reconstruction of the HTML based on the DOM and includes for example nodes created on the client side with javascript, once the page is loaded.
Alright, i solved it. Took me a while. After Marapet suggested not to use "generated source" i tried normal "view source" in a bunch of browsers and got different results in all of them. When i tried to validate my source i got some weird complaints:
Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.
Element head is missing a required instance of child element title.
And my personal favourite
Cannot recover after last error. Any further errors will be ignored.
Looked like there was something up with the doctype. Opened up notepad and pasted in there to "wash" the code from metadata, the way i do sometimes when pasting stuff in to tinyMCE. The text got formatted weird even in notepad. The doctype declaration had a smaller font size then the rest of the html.
So i opened it in notepad++ too and there i got a bunch of questionmarks in front of the declaration. I removed them and copied it back in to Visual Studio, saved and now everything works.
I think the reason i got this problem was that i copied snippets directly from the HTML5 Boilerplate on github.
// Sherlock

Firefox Addon HTML Validator showing Canvas not recognized

I'm using the HTML Validator Addon in Firefox 4 (great tool I might add).
However, I'm not sure the validation is working the way it should. I'm getting an error saying 'Canvas is not recognized'.
My doctype and html tags are set as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
I believe this is supposed to be the HTML5 way for setting doctypes.
Is there something I'm missing?!
Try removing xmlns="http://www.w3.org/1999/xhtml" from the <html> element.

hourglass issue on firefox when switching tabs

I have a very strange problem in my web application.
I am using icefaces with jsf and on some of my pages (please do not ask for the code because it's a lot of it:) I see the hourglass effect appearing on firefox.
I can clearly confirm that is because, somehow, the jsf cycle is not entirely finished. (all the components are visible but validation is not working).
Please note that this issue does not appear if I press F5 but only when I switch some tabs, which basically change the content of the main form)...
Are you guys having any suggestion? Google did not help me...nor Firebug...
UPDATE:
- after further investigation with Firebug it seems that when I do an ajax POST, it does not load the scripts and css which are inside the <body> </body> (you will see in the answer why it puts some css and scripts here) tag...but only the ones from <head>...</head>
Issue solved!!! (please see my update before continuing reading this answer)
I had this code in my main template:
<head>
<ui:include
src="/WEB-INF/jsf/common/templates/main/commonResources-include.xhtml" />
</head>
Now please note that commonResources-include.xhtml has this code (please note html tags!)
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
..code..
</html>
It seems that whenever you use these facelets components to be included, templating etc you MUST use <ui:composition> tags and not <html>, because html tags will confuse the rendering engine of the browser! What is strange is that a lot of examples from the internet use html tags for these facelets which do not give issues in helloWorld examples but can be a pain in complex applications!
So, the final code:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
..code..
</ui:composition>

Resources