I have a contact page which has links with target=_blank and they are all opening in new tabs, but also loading in the source page.
Code below - I am stumped, any advice would be appreciated.
<p style="font-size: 1.2em; color: #000; margin-top: 50px;">Contact</p><p class="">+44 7942 062 664<br>info#trentmcminn.com</p><p class="">Follow Trent on Twitter<br>Follow Trent on Tumblr</p><a target="_blank" href="http://eepurl.com/w3sb9" style="line-height: 2;">Subscribe to the newsletter</a>
</div>
<p style="font-size: 14px; position: absolute; bottom: 50px; padding-left: 40px;">All images © Trent McMinn 2013<br></p>
EDIT Page this is occurring is here http://www.trentmcminn.com/dev/contact/
THanks
Related
I implemented Add to Calendar dropdown button in a web page
<div class="dropdown" style="display: inline;">
<button target="_blank" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border: 1px;border-radius: 2px;padding: 5px 10px;max-height: 30px; background-color: #004FBF;"><i class="material-icons" style="color: #FFFFFF">event</i> <span style="font-size: 12px;font-family: RobotoMedium;color:#FFFFFF;line-height:14px;letter-spacing:0px;border:1px;position: relative;top: -8px;">Add to Calendar</span></button>
<ul class="dropdown-menu" style="margin-top: 12px;">
<li style="padding: 5px;"><a target="_blank" href="http://www.google.com/calendar/event?action=TEMPLATE&text={{encode title}}&dates={{calendarFormat sessionStartTime}}/{{calendarFormat sessionEndTime}}&details={{calendarDetail _id}}&location={{location _id}}&trp=false&output=xml" ><i class="fa fa-google" style="color: #000000;padding: 5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px; line-height: 16px;">Google</span></a></li>
<li class="addToIcalendar" style="padding: 5px;" ><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" download><i class="fa fa-apple" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px; line-height: 16px;">Apple</span></a></li>
<li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" ><img src="/images/outlook.png" height="19" width="19"><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
height: 16px;width: 45px; line-height: 16px;padding: 5px;">Outlook</span></a></li>
<li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}"><i class="fa fa-yahoo" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
height: 16px;width: 45px; line-height: 16px;">Yahoo</span></a></li>
</ul>
</div>
In a similar way, I want to create in Welcome email but it is not working as expected.
The output of the Add to Calendar in the email is
The dropdown items are by default displayed not after clicking the button. The icons are not displayed as expected
The same code in the email body is not working. Please help and thank you!
Dropdowns and really anything with a click event are very tricky to code in an email because you can't use JS, plus it may not work in all clients. My suggestion is to use something like AddEvent in particular their Direct URL method as the regular button will only work on a webpage not an email. Using the direct url method you can make a CTA in your email that will link out to a webpage created by AddEvent with info on the event and add to calendar links.
Dropdowns won't work in most emails, but there are several things you can do to explore.
First, you should attach the .ics file. Gmail for example pulls that out and makes it super easy to add to a person's calendar.
Second, you have a default button that goes to the .ics download. This will be so that people don't miss the attached .ics file, and make it clear what it is for.
Third, you may want to include direct calendar links for Gmail and Yahoo. These are specific URLs that will take a user to the webmail versions of their email. This may not be suitable from mobiles - you'll need to test the experience. But seeing as Gmail makes it really easy and visible when you attach the ics file, there's no real reason to muck around with that.
Litmus have a write up on the specific code for that (it's complicated), and some URL generation tools. https://litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails, Gmail: http://kalinka.tardate.com/, ICS generation: https://apps.marudot.com/ical/.
I am creating a website in html & css through Django. But I am having some difficulties. Here is my code for the buggy element of the code:
detail.html
<div class="contact-info" style="float: right!important; position: sticky!important; margin-right: 25px!important; margin-left: 750px!important; width: 30%!important; height: 50px!important; padding-bottom: 195px!important; margin-top: -2200px!important;">
<div class="elements" style=" margin-bottom: 200px!important; padding-bottom: 20px!important;">
<div class="address">
<span class="icon-map-marker"></span>
<p> <a style="color:grey!important; border:none!important;" href="{{restraunt.address_link}}">{{restraunt.address}}</a></p>
</div>
<div class="address" >
<span class="icon-mobile-phone"></span>
<p style="color: grey!important; border: none!important;"><a style="color:grey!important; border: none!important;" href="tel:{{restraunt.phone}}" style="color: grey!important;">+{{restraunt.phone|phonenumber}}</a> </p>
</div>
<div class="address">
<span class="icon-link"></span>
<p><a style="color:grey!important; border: none!important;" href="{{restraunt.website}}">{{restraunt.website}}</a></p>
</div>
<div class="address">
<span style="" class="icon-time"></span>
<p>Mon - Sun, {{restraunt.opening_hour}} - {{restraunt.closing_hour}} <br>
</div>
</div>
</div>
The code seems to work fine until I enter a new review. Then, the element jumps down and keeps jumping as a new review is added. I don't know how to fix this as I tried postion: relative, postition: absolute and position: sticky but all seem to have failed. I will put some screenshots to explain it better.
Before new Review:
After a new Review:
I have been unable to solve this problem for a long time now. I would really appreciate any help. Thank you
Im trying to use a Raleway font family for my heading in my website. In local testing it works fine but when pushed to git and run on git pages it doesnt work. I have even specified the text font TTF file in directory but still doesnt work. What am I doing wrong?
The website
https://codesniper99.github.io/Portfolio/
my html index file
<!DOCTYPE html>
<!-- copyright akhil vaid if anybody copies this my code is here so good luck 2017UCO1521 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body style="color:black"></body>
<div class="container text-pri" style="font-family:Open-sans; padding: 0%;margin-right: 0%; ">
<!-- Header -->
<div class="parallax">
<span class="topbar" > ABOUT</span>
<span class="topbar" > SKILLS</span>
<span class="topbar" > EXPERIENCE</span>
<span class="topbar" > ACHIEVEMENTS</span>
<span class="topbar" > CONTACT ME</span>
<span class="center rcorners2 " style="font-family:Raleway ;font-size: 4.0em;">
<span style="color: #E04343;">A</span><span >KHIL</span>
<span style="color: #FFE800;">V</span><span>AID</span>
</span>
</div>
<!-- Introduction -->
<div class="intro rcorners1">
<h3 style="text-align: center;">ABOUT ME</h3><br>
<p>
I'm a second year Under-graduate student currently pursuing Computer Science and Engineering at
NSIT, New Delhi, India. I'm new to the industry and keen to expand my skill set.<br> <br> I have a curiosity in
the field of Web Development and Competitive Programming and using it to solve real world
problems and am willing to take up opportunities to delve into it.
<br>
<br>
</p>
</div>
<!-- Skills -->
<h5><b>
Skills and Technologies
</b>
</h5>
<ul>
<li>C++ (GNU 14.2), C
</li>
<br>
<li>
Java
</li>
<br>
<li>
Python 3.1
</li>
<br>
<li>
HTML (HTML -5, Canvas)
</li>
<br>
<li>
CSS3 (Boot-Strap, Materialize CSS Frameworks)
</li>
<br>
<li>
JavaScript (Learning)
</li>
<br>
<li>
ExpressJS (Learning)
</li><br>
<li>
Experience with Django Framework
</li><br>
<li>
Knowledge of Git and VCS
</li><br>
</ul>
<br>
<!-- Experience -->
<h5><b>
Experience
</b>
</h5>
<p>
<ul>
<li> Currently working as Lead Back-end Developer at ICTS (IntuiComp TeraScience) under
guidance of IIT-Delhi and Dr. Arpan Kar. Developing a Learning Management system for
machine learning students and professionals alike to take part in and avail lectures and
conduct hackathons globally. Has been successfully launched in Afghanistan, Hong-Kong,
France. [www.icts-learninganalytics.com] (2018-present)
</li>
<br>
<li>
Working as Lead-developer for a trading firm in creating proprietary software using MQL4
on MT4 and Uniglobe platform(2017-present)
</li>
<br>
<li>
Created RESTful API and website for an Android application focusing on decreasing Smoking
Addiction in individuals by positive reinforcement. It used Django framework and we created
our own local server.
</li>
<br>
<li>
Made a working Hospital-Management DBMS (Database Management system) for 3rd
Semester project. It was created using JDBC in Netbeans IDE.
</li>
<br>
<li>
Made an Android application to maintain attendance for college students. Developed in
native android
</li>
<br>
<li>
Came in top 100 teams in SE- Asia region in ACM-ICPC online qualifier round.
</li>
</ul>
</p>
<!-- Academics -->
<h5><b>
Academic Achievements
</b>
</h5>
<ul>
<li>Qualified for ACM-ICPC Regionals 2018-19 at IIT Kharagpur and Kanpur
</li>
<br>
<li>
Secured AIR- 2412 rank in JEE Mains.
</li>
<br>
<li>
Top 10% of College Department (COE)
</li>
<br>
<li>
Top 10% in CBSE class 12th result
</li>
<br>
<li>
10 CGPA in class 10th
</li>
<br>
<li>
Secured and qualified as a JSTSE scholar from State of New Delhi
</li>
</ul>
</div>
</body>
</html>
my main.css
.intro
{
background-color: #f5d7f8;
margin-left: 64px;
margin-right: 64px;
font-size: 23px;
margin-top: 50px;
padding-left: 64px;
padding-right: 64px;
padding-bottom: 30px;
padding-top:35px;
}
.rcorners1 {
border-radius: 25px;
padding: 20px;
}
.rcorners2 {
border-radius: 12px;
padding: 15px;
}
#font-face { font-family: Raleway; src: url('text/Raleway/Raleway-Light.TTF'); }
#font-face { font-family: Open-sans; src: url('text/open-sans/OpenSans-Regular.TTF'); }
.parallax {
background-image: url("images/laptop.jpg"); opacity: 0.75;
min-height: 650px;
background-attachment: fixed;
background-position: center;
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: cover;
}
.text-pri{
background-color:whitesmoke;
}
body {
margin: 0 !important;
padding: 0 !important;
}
.center {
position: absolute;
left:30%;
top: 40%;
width: 40%;
min-width: 300px;
text-align: center;
background-color: black;
color: white;
opacity: 0.85;
font-size: 48px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.topbar{
color:white;position: relative;
padding-top: 30px;
margin-top:30px;
margin-left:30px;
font-size: 20px;
}
my git repo if needed
https://github.com/codesniper99/Portfolio
use Raleway google font I have import Raleway font into css so you not need to call from anywhere. and use this as font-family: 'Raleway', sans-serif;
Online font using is good for your site.
also use font-wight css for making font bold light as font-weight:200 , font-weight:300 , font-weight:600 same as imported css.
#import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
.intro
{
background-color: #f5d7f8;
margin-left: 64px;
margin-right: 64px;
font-size: 23px;
margin-top: 50px;
padding-left: 64px;
padding-right: 64px;
padding-bottom: 30px;
padding-top:35px;
}
.rcorners1 {
border-radius: 25px;
padding: 20px;
}
.rcorners2 {
border-radius: 12px;
padding: 15px;
}
/* #font-face { font-family: Raleway; src: url('text/Raleway/Raleway-Light.TTF'); }
#font-face { font-family: Open-sans; src: url('text/open-sans/OpenSans-Regular.TTF'); } */
.parallax {
background-image: url("https://codesniper99.github.io/Portfolio/images/laptop.jpg"); opacity: 0.75;
min-height: 650px;
background-attachment: fixed;
background-position: center;
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: cover;
}
.text-pri{
background-color:whitesmoke;
}
body {
margin: 0 !important;
padding: 0 !important;
}
.center {
position: absolute;
left:30%;
top: 40%;
width: 40%;
min-width: 300px;
text-align: center;
background-color: black;
color: white;
opacity: 0.85;
font-size: 48px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.topbar{
color:white;position: relative;
padding-top: 30px;
margin-top:30px;
margin-left:30px;
font-size: 20px;
}
<!DOCTYPE html>
<!-- copyright akhil vaid if anybody copies this my code is here so good luck 2017UCO1521 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body style="color:black"></body>
<div class="container text-pri" style="font-family:Open-sans; padding: 0%;margin-right: 0%; ">
<!-- Header -->
<div class="parallax">
<span class="topbar" > ABOUT</span>
<span class="topbar" > SKILLS</span>
<span class="topbar" > EXPERIENCE</span>
<span class="topbar" > ACHIEVEMENTS</span>
<span class="topbar" > CONTACT ME</span>
<span class="center rcorners2 " style="font-family: 'Raleway', sans-serif;font-size: 4.0em;">
<span style="color: #E04343;">A</span><span >KHIL</span>
<span style="color: #FFE800;">V</span><span>AID</span>
</span>
</div>
<!-- Introduction -->
<div class="intro rcorners1">
<h3 style="text-align: center;">ABOUT ME</h3><br>
<p>
I'm a second year Under-graduate student currently pursuing Computer Science and Engineering at
NSIT, New Delhi, India. I'm new to the industry and keen to expand my skill set.<br> <br> I have a curiosity in
the field of Web Development and Competitive Programming and using it to solve real world
problems and am willing to take up opportunities to delve into it.
<br>
<br>
</p>
</div>
<!-- Skills -->
<h5><b>
Skills and Technologies
</b>
</h5>
<ul>
<li>C++ (GNU 14.2), C
</li>
<br>
<li>
Java
</li>
<br>
<li>
Python 3.1
</li>
<br>
<li>
HTML (HTML -5, Canvas)
</li>
<br>
<li>
CSS3 (Boot-Strap, Materialize CSS Frameworks)
</li>
<br>
<li>
JavaScript (Learning)
</li>
<br>
<li>
ExpressJS (Learning)
</li><br>
<li>
Experience with Django Framework
</li><br>
<li>
Knowledge of Git and VCS
</li><br>
</ul>
<br>
<!-- Experience -->
<h5><b>
Experience
</b>
</h5>
<p>
<ul>
<li> Currently working as Lead Back-end Developer at ICTS (IntuiComp TeraScience) under
guidance of IIT-Delhi and Dr. Arpan Kar. Developing a Learning Management system for
machine learning students and professionals alike to take part in and avail lectures and
conduct hackathons globally. Has been successfully launched in Afghanistan, Hong-Kong,
France. [www.icts-learninganalytics.com] (2018-present)
</li>
<br>
<li>
Working as Lead-developer for a trading firm in creating proprietary software using MQL4
on MT4 and Uniglobe platform(2017-present)
</li>
<br>
<li>
Created RESTful API and website for an Android application focusing on decreasing Smoking
Addiction in individuals by positive reinforcement. It used Django framework and we created
our own local server.
</li>
<br>
<li>
Made a working Hospital-Management DBMS (Database Management system) for 3rd
Semester project. It was created using JDBC in Netbeans IDE.
</li>
<br>
<li>
Made an Android application to maintain attendance for college students. Developed in
native android
</li>
<br>
<li>
Came in top 100 teams in SE- Asia region in ACM-ICPC online qualifier round.
</li>
</ul>
</p>
<!-- Academics -->
<h5><b>
Academic Achievements
</b>
</h5>
<ul>
<li>Qualified for ACM-ICPC Regionals 2018-19 at IIT Kharagpur and Kanpur
</li>
<br>
<li>
Secured AIR- 2412 rank in JEE Mains.
</li>
<br>
<li>
Top 10% of College Department (COE)
</li>
<br>
<li>
Top 10% in CBSE class 12th result
</li>
<br>
<li>
10 CGPA in class 10th
</li>
<br>
<li>
Secured and qualified as a JSTSE scholar from State of New Delhi
</li>
</ul>
</div>
</body>
</html>
Hey root of the your local directory and your github page might be different can you try with relative path starting with ./
src: url('./text/Raleway/Raleway-Light.TTF')
So i formatted the README.md file of a particular GitHub project using HTML as I found markdown to be quite limiting. Maybe I am not quite well versed with markdown or I prefer HTML, I am not sure. So the issue is, I have the README.md file on my local system and when I display it on browser using a Markdown plugin from Sublime Text, it shows up exactly as I want. But when I push the local README.md file to the server and try to view it in website, the formatting is lost completely.
Local formatting -
GitHub website view -
As you can see, the two files are totally different. How can I preserve the formatting once it is uploaded on the GitHub server ?
The following is the spaghetti HTML code. It is very ugly. I was in a hurry and so ended up with such ugly code violating every aspect of DRY. Please excuse that for now.
<div class="header" style="width: 100%; display: flex;">
<div style="font-size: 50px; font-family: arial; width: 50%;"> Blind Reader</div>
<div style="width: 50%; text-align: right; display: table; ">
<span style=" letter-spacing: 5px; padding-left: 150px; font-family: verdana; font-size: 11px; display: table-cell;vertical-align: middle ; width: 20px;"> Developers </span>
<img src="images/dev1.png" style="height: 60px; width: 60px;">
<img src="images/dev2.png" style="height: 60px; width: 60px;">
</div>
</div>
<div class="badges-container">
<div class="badges-body">
[](https://GitHub.com/Naereen/ama) [](https://www.python.org/) [](https://github.com/Naereen/StrapDown.js/blob/master/LICENSE)  
</div>
</div>
<div class="body-content">
<span style="font-size: 25px; font-family: verdana; color: #64686d;"> Welcome to the <span style="color: #18529b;">Blind Reader</span> project !</span>
<br>
<br>
<div style="font-size: 18px; font-family: verdana; text-align: justify;" class="introduction">Blind Reader is a portable, low-cost, reading device made for the blind people. The Braille machines are expensive and as a result are not accessible to many. <strong>Blind Reader </strong>overcomes the limitation of conventional Braille machine by making it affordable for the common masses. The system uses OCR technology to convert images into text and reads out the text by using Text-to-Speech conversion.The system supports audio output via Speakers as well as headphone. The user also has the ability to pause the audio output whenever he desires. It also has the facility to store the images in their respective book folder, thereby creating digital backup simultaneously. With this system, the blind user does not require the complexity of Braille machine to read a book. All it takes is a button to control the entire system !
</div>
<div class="dependency" style="font-family: verdana; font-size: 18px; padding-top: 30px;">
<span style="font-size: 30px; font-family: verdana; font-weight: 500;">Dependency</span>
<div style="background:#757a79;height: 1.2px; width: 100%"></div><br>
<span style="font-size: 18px; font-family: verdana; font-weight: 600;">Hardware Requirements:</span><br>
<ul>
<li>Raspberry Pi 3B.</li>
<li>Pi Camera.</li>
<li>Speakers / Headphones.</li>
<li>Push buttons - 2.</li>
<li>LDR - 1.</li>
<li>LED - 4.</li>
<li>Power supply - 5V,2A.</li>
</ul>
<span style="font-size: 18px; font-family: verdana; font-weight: 600;">Software Requirements:</span><br>
<ul>
<li>Python 3.</li>
<li>Python Dependencies:</li>
<ul>
<li>Rpi.GPIO</li>
<li>Pygame library.</li>
<li>picamera library.</li>
<li>google-cloud.</li>
<li>time.</li>
<li>os.</li>
<li>datetime.</li>
</ul>
<li>Google Cloud API - Vision , Text-to-Speech</li>
</ul>
</div>
<div class="code" style="font-family: verdana; font-size: 18px; padding-top: 30px;">
<span style="font-size: 30px; font-family: verdana; font-weight: 500;">Usage</span>
<div style="background:#757a79;height: 1.2px; width: 100%"></div><br>
</div>
<div class="usage-content" style="font-size: 18px; font-family: verdana; text-align: justify;">
<ul>
<li>
Use the following code to install the Google cloud python dependency.<br><br><code>pip3 install --upgrade google-api-python-client<br>pip3 install --upgrade google-cloud-vision<br>pip3 install --upgrade google-cloud
</code><br><br>
Use : Google CLoud Vision API for further Details.<br><br>
</li>
<li> Activate <strong>Cloud Vision API</strong> and <strong>Google Cloud Text-to-Speech API</strong> by visiting the dashboard and download the Service account credentials (Json file).</li>
<br>
<li>
Connect the hardware as follows:
<ul>
<li>
Pi Camera --> Camera Slot in Raspberry Pi 3.
</li>
<li>
Pair Bluetooth Speaker / Insert headphone into Raspberry Pi 3 audio jack.
</li>
<li>
LDR --> GPIO 37.
</li>
<li>
4 LEDs - GPIO 29 , 31 , 33 , 35 respectively.
</li>
<li>
Push Button 1 ( Camera capture ) --> GPIO 16.
</li>
<li>
Push Button 2 ( Play/Pause audio ) --> GPIO 18.
</li>
</ul>
<br>
<li>
Use the following code to start the system:
<br>
<code>
python3 //path/to/your/final.py/file
</code>
</li>
<br>
<li>
Place the image to be read under the camera and press <code> Button 1 </code> to read out a page.
</li>
</ul>
</div>
<div class="system-images" style="font-family: verdana; font-size: 18px; padding-top: 30px;">
<span style="font-size: 30px; font-family: verdana; font-weight: 500;">Demonstration</span>
<div style="background:#757a79;height: 1.2px; width: 100%"></div>
</div>
<div class="image-cotainer" style="display: flex;">
<div class="image1" style="width: 50%"> <img src="images/system1.jpg" style="width: 80%;"></div>
<div class="image2" style="width: 50%"> <img src="images/system2.jpg" style=" width: 80%; height: 80%; padding-top: 40px;"></div>
</div>
<div class="resources-section" style="font-family: verdana; font-size: 18px;">
<span style="font-size: 30px; font-family: verdana; font-weight: 500;">Resources</span>
<div style="background:#757a79;height: 1.2px; width: 100%"></div>
</div>
<div class="resources-container" style="font-family: verdana; font-size: 18px;">
<ul><br>
<li>
Google Cloud Platform.
</li>
<li>
Pygame python library.
</li>
<li>
Raspberry Pi.
</li>
<li>
Python.
</li>
</ul>
</div>
</div>
I have also takena look at this link. It lists all the tags that are whitelisted by GitHub. And as I can see almost all the tags I have used are present here.
Please help.
GitHub documents there markup filtering in the github/markup repo:
This library converts the raw markup to HTML. See the list of supported markup formats below.
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or
id attributes. See the sanitization
filter
for the full whitelist.
Syntax highlighting is performed on code blocks. See github/linguist
for more information about syntax highlighting.
The HTML is passed through other filters in the html-pipeline that add special
sauce, such as
emoji,
task
lists,
named
anchors,
CDN caching for
images,
and
autolinking.
The resulting HTML is rendered on GitHub.com.
Note that step 1 is were the Markdown processing happens and that most likely returns the results you expect. The problem starts with step 2. Github takes the HTML returned in step 1 and sanitizes it extensively. This sanitation happens regardless of whether the source was Markdown, rst, texttile, asciidoc, or any number of other source formats.In other words, these filters have no direct relation to Markdown. So your Markdown is probably fine.
Given the extensive sanitation filters, any benefits of using Markdown's raw HTML fallback are almost completely lost. Generally, I stick to plain Markdown in any document I expect to be rendered by GitHub as most anything that gets stripped by the filters would not be possible with plain Markdown anyway.
If you really want to find some workarounds, then you will need to study the sanitation filter yourself to see if there is any way to get what you want. I expect most of what you want will not be possible though.
Essentially, I'm making a tier-based pricing grid and it needs to look like this:
However, when my code is placed onto the web page (through Wordpress)
a random set of tags are above the '10+ Sessions" pricing box, which messes up the spacing. The tag has a 20px top padding.
It looks like this:
So, I inspected the element and found that there's a set of tags above the box with a top padding of 20px.
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
"><p></p>
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
"><p></p>
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p>
</div>
The tags after the opening of the div is the problem.
However, the tags aren't there in the original source code, which is this:
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
">
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
">
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p></div>
I just can't figure out why the tags are there.
Could anyone help with this?
Thanks
For anyone with a similar problem, install a plugin called Raw HTML for Wordpress. This prevents Wordpress from attempting to format your Raw HTML and adding random paragraph tags.