I have a document that includes a header (menu) and a footer in PHP:
<?php include('header.php'); ?>
<?php include('footer.php'); ?>
For some reason when opened on the browser it renders a gap between both without having any margins or CSS styles doing it:
This is part of the code generated, the gap appears between </header><footer>:
<div class="ClearFloat"></div>
</nav>
</header><footer>
<div class="MainWrapper">
<ul>
<li>© Copyright 2013</li>
If I inspect using firebug I do see a gap in the code:
</nav>
</header>
<footer>
<div class="MainWrapper">
<ul>
Furthermore if I try to edit the code in firebug I get a weird entity number where the gap appears: :
</nav>
</header><footer>
<div class="MainWrapper">
<ul>
This has to do something with php because if I write the HTML of the header and the footer straight in the page the gap disappears:
Any ideas? Thanks.
As Per Why is appearing in my HTML?
it may have a Simple Fix!
The character in question  is the Unicode Character 'ZERO WIDTH
NO-BREAK SPACE' (U+FEFF) attached to your code on a copy/paste or during a faulty Save
its so simple to fix that,
just open that file by notepad++ and step follow -->
Encoding->Encode in UTF-8 without BOM. then save that. It work for me as well!
The character in question  is the Unicode Character 'ZERO WIDTH NO-BREAK SPACE' (U+FEFF). It may be that you copied it into your code via a copy/paste without realizing it.
Related
I am currently tweaking a BigCommerce theme for my employer. They have asked me to remove and change a few CSS / HTML elements to fit the style and functionality that they are after.
Rather than just DELETING the functionality within the theme, I was hoping to just comment it out in case it is needed later. But I am having an issue with the formatting.
The following is the code as displayed in the ProductDetails.html Panel file:
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
%%Panel.ProductReviews%%
%%Panel.ProductByCategory%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
I am trying to comment out the last 3 lines only.
However, when I do, the end of the comment ( --> ) shows up in the browser. I have closed the comments correctly but there must be some simple concept that I am missing. Hoping the good people at SO can help.
Below is the code as I have saved it and a screenshot of the display in my browser. The first screen shot is how it looks before I add any comments and the second is after I add them. You can clearly see the closing comment in the second image, can anyone tell me why??
Thanks in advance for any help.
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
<!--%%Panel.ProductReviews%%-->
<!--%%Panel.ProductByCategory%%-->
<!--%%Panel.SimilarProductsByCustomerViews%%-->
</div>
Nicole, I've dealt with this and can definitely explain why it's happening and how to avoid it.
Why It's Happening
It's happening because this is how BigCommerce's server side PHP processor parses the code you're looking at. The code is basic HTML, while the %%Panel.something%% are simply ways for BigCommerce's processor to recognize as a command for BigCommerce.
Anytime the BC site sees %%Panel.Name%%, it knows that this is not HTML, but rather a place where BC server-side processor should insert the Panel file before serving this HTML to the user.
How to Avoid it and Comment-out Correctly
Simply, remove the % symbols and use regular commenting. This will work:
<!-- Panel.ProductReviews-->
So will this:
<!--%%Panel.ProductReviews-->
And this:
<!-- Panel.ProductReviews%%-->
Or even this:
<!-- %Panel.ProductReviews% -->
Mainly, you have to make sure that each side of a Panel.Name reference, doesn't have 2 % symbols on each side.
To Restore the Correctly Commented Out Code/Panel
Simply restore the 2 % symbols on each side like so (the spaces between - and % don't matter, you can have none or 10):
<!-- %%Panel.ProductReviews%% -->
Why You're Seeing --> On Live Site
As broached/explained in the comments of your question, you're seeing --> when commenting out a Panel like so <!--%%Panel.Name%%--> because by commenting out the Panel that way without removing at least one of the % symbols, you're still telling BigCommerce to load the Panel HTML file, but to place it within the
<!-- [HTML code from panel goes here] -->
The problem with that is simply that some of these Panel files contain comments themselves.
For example, let's say you comment out %%Panel.Header%% like so !<--%%Panel.Header%%-->. The Header.html Panel may be code like this:
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
By commenting out the code without removing the % symbols, BigCommerce will load this:
<!--
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
when a user open a page that uses the Header.html panel, they will see this code as commented <!--<!-- this is the header code panel-->, because the browser will start the comment at the first <!-- and end the comment at the first appearance of -->.
In the browser, the user will see the uncommented remains:
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
And hence you'll see some extra, probably broken HTML, plus the stray --> somewhere at the end of the improperly commented code.
Again, to avoid all this, just remove one of the % symbols, then use regular commenting to comment out a Panel file reference.
Let me know if this helps and if you have any other questions.
I am working with HTML, Javascript and jquery mobile. At the top of a lateral panel there is a space caused by some characters. Is there a way to remove them directly from the HTML code without using Javascript? I am using the UTF-8 charset but I will change it if it can solve the problem.
EDIT:
Here is the html I saved on the server:
<div data-role="panel" data-position="left" data-position-fixed="true" data-display="overlay" id="left-panel" data-theme="b">
.... html code ....
</div>
Here is the html generated by jquery mobile:
<div data-role="panel" data-position="left" data-position-fixed="true" data-display="overlay" id="left-panel" data-theme="b" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-body-b ui-panel-fixed ui-panel-animate ui-panel-open">
<div class="ui-panel-inner">
.... html code ....
</div>
</div>
Just delete the   from your code. That's it.
I had the same thing happen to me. I'm guessing that you copied code from their "View Source" examples. Apparently when you copy from that it has a bunch of spaces rather than tabs for formatting. If you remove all the excess spaces it should work fine. This happened to me using Sublime Text 2.
I am new to HTML, and that's about to be very obvious, but I need some help on putting a simple link onto my website. The problem I'm experiencing is that my link when clicked on in Safari tries to pull from "file:///Users/kingwoody1/Desktop/Sample%20Website/“http://www.google.com/â€%C2%9D".
What am I missing? Why isn't it just going loading up google.com?
My code looks like this:
<html>
<body>
<div class=“headings”>
<h1>Scott Woodson for President</h1>
<p>A Man Of The People</p>
</div>
<div class=“options”>
<ul>
<li>
Search for stuff
</li>
</ul>
</div>
</body>
You have funky quotes which are probably breaking safari. Change all of the “ and ” to ":
<div class=“headings”> to <div class="headings">
and
<div class=“options”> to <div class="options">
This all looks good to me!
The only problem I can see in this code are the speach marks. Make sure to use the (") version for coding.
Not sure if this will help your problem or not.
Close your </html> tag it may cause some problems.
By the way it works fine on Safari!
your code works fine, but remember to close with
<./html>
, and use " as the funky quotes can cause problems in PHP (not sure about html). Try using http://jsfiddle.net/ to test websites, and it allows you to make small changes without having to reopen the page.
I'm trying to edit Tumblr Custom HTML to add another header link to my Tumblr theme.
I have searched stackoverflow for "Tumblr" "Custom HTML" "block:Pages" and "link" but have not found the bug in my code that's leading to the following problem:
I copy and pasted
<li>{lang:Archive}</li>
I then changed
"/archive/"
to
"/submit/"
and
{lang:Archive}
to
{lang:Submit a Post}
I end up with a webpage with a header link that, when clicked on, takes you to the correct page, but there is no text for that link. Please see a screenshot of the problem and the website I'm trying to fix.
I've included a code snippet so that you can help me troubleshoot. Thank you!
<div class="container">
<div id="headerwrap">
<div class="span-18" id="header">
<div class="span-18 last"><ul>
<li>{Title}</li>
{block:HasPages}
{block:Pages}<li>{Label}</li>{/block:Pages}
{block:HasPages}
<li>{lang:Random post}</li>
<li>{lang:Submit a Post}</li>
<li>{lang:Archive}</li>
</ul></div>
</div></div>
{block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}
<div class="span-24"><div class="span-5 blue_striped"> </div><div class="span-18 last"><p>{Description}</p></div></div>
<hr/>
The {lang:} tag lets you specify an English string that should be displayed in the user's language, but it only works with a predefined set of strings that can be found here:
http://www.tumblr.com/docs/en/localizing_themes
You can "request a string be added", but I have no idea how long that would take. Best would probably be to drop the {lang:} wrapper and just include the text directly:
<li>Submit a Post</li>
The string won't be localized for non-English users, but oh well!
Often while coding view templates in html, my habit of adding some helpful comments causes lots of time-consuming effort while testing.
Consider this code...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
Now, if I have to hide out some portion of the view template, in case of php I would just select the desired code and put single-line comments (using a shortcut key most of the times).
However, in html code, where only the block comments work, I end-up removing all the closing comment tags (-->) till the position I want the commenting to occur - something like this...
<!-- Here starts the sidebar
<div id="sidebar">
....
</div>
<!-- Here starts the main contents pane
<div id="main-contents">
...
</div>
<!-- Here starts the footer
<div id="footer">
...
</div>-->
Then when I'm done testing I have to go through the agony of putting back those closing tags.
Is there a better and time saving way of block commenting in HTML?
Yes, to comment structural metadata out,
Using <script>/* ... */</script> in .html
Comment out large sections of HTML (Comment Out Block)
my personal way in a .html file is opening: <script>/* and close it with */</script>
<script>/* hiding code go here */</script>
Is a workaround to the problem since is not HTML.
Considering your code in .html...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<script>/*
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
*/</script>
And in a case is HTML inside PHP file using comment tag <?/* or <?php /* and close it with */?> . Remember that the file must be .php extension and don't work in .html.
<?/* hiding code go here */?>
Considering your code in .php...
<!-- Here starts the sidebar -->
<div id="sidebar">
....
</div>
<?/*
<!-- Here starts the main contents pane -->
<div id="main-contents">
...
</div>
<!-- Here starts the footer -->
<div id="footer">
...
</div>
*/?>
Is worth nothing that is not HTML but a common developer practice is to comment out parts of metadata so that it will not be rendered and/or executed in the browser. In HTML, commenting out multiple lines can be time-consuming. It is useful to exclude pieces of template structural metadata containing comments, CSS or code and systematically commenting out to find the source of an error.
It is considered a bad practice to comment blocks out and it is recommended to use a version control system.
The attribute "type" is required in HTML4 and optional in HTML5.
Depends on the extension. If it's .html, you can use <? to start and ?> to end a comment. That's really the only alternative that I can think of. http://jsfiddle.net/SuEAW/
you can try to replace --> with a different string say, #END# and do search and replace with your editor when you wish to return the closing tags.
I find this to be the bane of XML style document commenting too. There are XML editors like eclipse that can perform block commenting. Basically automatically add extra per line and remove them. May be they made it purposefully hard to comment that style of document it was supposed to be self explanatory with the tags after all.
Put a space between the "-->" of your header comments. e.g. "- ->"
My view templates are generally .php files. This is what I would be using for now.
<?php // Some comment here ?>
The solution is quite similar to what #Robert suggested, works for me. Is not very clean I guess.
Eclipse Juno has a good way for it. You just do the cmd+/
The following works well in a .php file.
<php? /*your block you want commented out*/ ?>
No. Unless you find a tool that does what you described for you.
Depending on your editor, this should be a fairly easy macro to write.
Go to beginning of line or highlighted area
Insert <!--
Go to end of line or highlighted area
Insert -->
Another macro to reverse these steps, and you are done.
Edit: this simplistic approach does not handle nested comment tags, but should make the commenting/uncommenting easier in the general case.
/* (opener)
*/ (closer)
for example,
<html>
/*<p>Commented P Tag </p>*/
<html>