For some reason when I use a partial for the content in my Rails app, my HTML document tree breaks and the head elements spill over the body element. I've boiled this down to a very simple example:
app/views/layouts/application.html.erb:
<!doctype html>
<html>
<head>
<%= render :partial => 'shared/head' %>
</head>
<body id="test-id">
<h1>Hello World</h1>
</body>
</html>
app/views/shared/head.html.erb:
<title>Test Title</title>
result
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<title>Test Title</title>
<h1>Hello World</h1>
</body>
</html>
Note that the id attribute on was lost and the element is not where it should be.
Has anybody seen anything like this or can provide tips for debugging?
I'm running:
OSX 10.8.3
ruby-1.9.3-p392
rails 3.2.11 / WEBrick
Spree 1.1.4 (although I've stripped out anything that Spree might affect)
Turns out I had Deface running in the background which was causing an error which was mangling my <head>.
If anybody is running Spree and sees weird issues with their templating, first look at the Rails logs for Deface errors and check your libxml version. If it's > 2.8.0 you may need to downgrade. More info here.
Related
I've been looking around for a solution to the problem I'm having, but it seems that none of the solutions on SO address my issue.
I was having the dreaded issue where the a href tag in my HTML does not actually take me to the link. At first, I tried removing the JavaScript includes, wondering if something in the JavaScript portion was messing up the page.
Then I removed the CSS portion as well, and ultimately removed everything until the page consisted of simply the header information for the HTML page and only the a href tag. I also changed the link to a non-existent page (to force a 404 error).
When clicking on the link, it keeps me on the current page and doesn't take me to the referenced page (or even give me a 404 error). Following is the stripped out code (everything but the commented out portion):
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<a href="test.html">Support</a/>
</html>
Thanks for the help.
I made the changes based on the answers given but still see the same behavior. As seen in the screenshot (sorry SO doesn't let me insert images), the URL shows /test.html but the page is still the main page. I changed the text of the link to ensure that the changes were applied.
I'm using rackup to quickly view the changes locally.
Screenshot
Updated code:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<body>
Support2
</body>
</html>
Working and tested:
NOTE: Both files [ current one and test.html ] are in same directory.
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<body>
Support
</body>
</html>
Also test code is working fine using target="_blank" in anchor tag , which open link in new page if working fine, like below:
<a href="test.html" target="_blank" > support </a>
You have an extra slash in your closing a tag.
Should be
</a>.
I would also make sure they are in the same directory.
Apparently the answer was here:
How to setup URLs for static site with Ruby Rack on Heroku
Individual pages were being routed to "/" all the time. Needed to modify "config.ru" to get routing to work properly.
Next step is to look into "sinatra".
Is there a way that this here below ↓↓↓ can be inserted as a snippet?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
</body>
</html>
I tried using Preferences -> Key Bindings - User but quotation marks really matters.
You can create a new snippet via Tools -> New Snippet...
You can read more about creating and using snippets here.
FYI, the HTML5 doctype is probably more appropriate and much easier to remember, simply:
<!DOCTYPE html>
Just to spell it out, so you don't need to follow links:
After selecting Tools -> New Snippet..., modify its content to the following:
<snippet>
<content><![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>$0</title>
</head>
<body>
</body>
</html>
]]></content>
<tabTrigger>newpage</tabTrigger>
<scope>text.html</scope>
</snippet>
The $0 between the <title> tags indicates that your cursor will end up here after triggering the snippet. If you'd like to have multiple insertion points that you can Tab between them, use $1 as the first, $2 as the second, etc., using $0 as the final spot.
Save the snippet in your Packages/User directory (it should be the default when you hit save) as newpage.sublime-snippet. To test it, open a new file, set the syntax to HTML, type newpage, and hit Tab, and you should be all set.
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.
For my webapplication I am using IE8 as a standard browser.Sometimes the browser is setting Document mode as IE-7 Standards.
I have already tried Servlet Headers as IE=8,IE=edge and all other settings,also my DOCTYPE is also proper.
Does anyone knows why IE is forcing such behaviour ?
You can force IE to use compatibility mode with X-UA-Compatible Meta Tag:
IE 7:
<meta http-equiv="X-UA-Compatible" value="IE=7">
IE 8:
<meta http-equiv="X-UA-Compatible" value="IE=8">
IE 9:
<meta http-equiv="X-UA-Compatible" value="IE=9">
IE look also at the page DOCTYPE:
Standards View
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>This page is NOT Rendered in Compatibility View</title>
</head>
<body>
<h1>This page is NOT Compatibility View</h1>
</body>
</html>
Compatibility View
<html>
<head>
<title>This page is NOT Rendered in Compatibility View</title>
</head>
<body>
<h1>This page is NOT Compatibility View</h1>
</body>
</html>
Standards View
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>This page is NOT Rendered in Compatibility View</title>
</head>
<body>
<h1>This page is NOT Compatibility View</h1>
</body>
</html>
Compatibility View
<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>This page is NOT Rendered in Compatibility View</title>
</head>
<body>
<h1>This page is NOT Compatibility View</h1>
</body>
</html>
Note, that last example should load as standards view in XHTML mode. But Internet Explorer interprets that XML declaration as requiring compatibility view.
I resolved similar issue like this:
<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10,chrome=1" />
Take into account IE version should start from the lowest version.
First time poster and hoping to solve a very frustrating issue.
In Google chrome, my PHP site displays random characters such as Â. However, when I switch the encoding to UTF-8 all the random characters clear up.
I've been reading elsewhere that that I need to tell me site to use UTF-8 by default. My host say this is already enabled on their side.
What code do I add and where to solve this issue?
Put:
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
In the <head> of the document, and it should force the page to render utf-8 characters properly.
Further description: In your HTML page, you would have the page layed out as such:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<!--<link> tags for any CSS-->
<!--<script> tags for any JS-->
<!--Anything else in the head-->
</head>
<body>
<!--Page contents-->
</body>
</html>