I am building a website and I came across an issue. The footer of this page doesn't stretch to the edge of the website, like it does on this page.
Here is the HTML of the first page where the footer is displaying incorrectly.
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<title>ItsBabylicious.com - cute soft embroidered baby blankets & other embroidery</title>
</head>
<body>
<div class="wrap">
<h1 id="logo">Itsbabylicios.com<br /></h1>
<ul id="menu">
<li>Home</li>
<li>Gallery</li>
<li>Products</li>
<li>Store</li>
<li>Contact</li>
</ul>
<div class="row">
<div id="text" class ="column" style ="width:%100">
<h2>Baby gifts and embroidery </h2>
<p>Here at Babylicous.com we sell baby blankets. The Yummy type that babys just want to rub on their face.</p>
<p>Babylicious blankets are special. Each balnket is embroidered to your custom order. in over 40 colors if you want a blanket truly special contact us as we are a fully custom embroidery shop that aims to please</p>
</div>
<div class="column" style="width:%100">
<img src="custom name on baby blanket.jpg" alt="Cutest Baby blanket pic ever!" style="max-width: 100%;border-radius: 8px">
</div>
<div id="green_bubble">
<p>check out our new etsy shop
</div>
</div>
<!-- Generated by https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections -->
<div style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.98 C149.99,150.00 349.20,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #FF99CB;"></path></svg></div>
<div id="footer">
<div class="wrap">
<div id="bubble"><p>We are located in Lakewood NJ 08701 just give us a call 732 305 0260</p></div>
<div id="copyright">
<p>Copyright © 2008 − Happy Template − Design: Luka Cvrk, <a title="Awsome Web Templates" href="http://www.solucija.com/">Solucija</a></p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
In the links you provided, on the second page's source, if you check your div with id="footer" is wrapped in a div with class="wrap" while on the gallery page its not.
and since the wrap class has a fixed width of 900px, so the footer is also of the same width, just move the footer outside the wrap and it will become full width.
Hope it helps.
Related
The first h1 tag I use in my code works for me with the styling I'm going for but the second and third ones don't. The second one does not become a heading at all (just plain small text) and the third is too big.
h1 {
color: #2B2B2B;
white-space: normal;
word-break: break-all;
font-family: Georgia;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="Logo.png" alt:"">
<div class="container">
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Continuing Education Courses</li>
<li>Support Groups & Workshops</li>
<li>First Appointment & Fees Insurance</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<hr>
<div class="profile-box">
<img src="Group 1.png" alt="" align="center" width="300px" height="100px">
<main>
<section>
<h1>Grounding and Resourcing Technique Giveaway</h1>
<h2>
Being a mental health clinician can be such an empowering and rewarding role. You can change,
help, and nourish so many of those struggling with everyday life. Through the responsibilities
you take on while helping others, it’s so important to practice grounding and resourcing
techniques with your clients.
</h2>
</section>
<div class="child-one child" <h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for
grounding and resourcing methods.</h1>
<img src="Rectangle 817.png" alt="" align="left">
<h2>
Learn ways to keep your client grounded by establishing comfortability, learning breathing and
body awareness techniques, object-based resourcing, and so much more. This handout will help you
overcome some of those challenges you face daily as a mental health clinician while working with
clients.
</h2>
<hr>
<h1>Simply fill out the form below to download.</h1>
<h2>You will be sent a copy to your email.</h2>
</div>
</main>
</div>
</div>
</body>
There's a syntax error in your HTML. The following line is incomplete:
<div class="child-one child"
Anything that comes after that line may produce unexpected results. You need to complete the opening div tag (and also close it somewhere, if that is your complete code).
<div class="child-one child">
Use <style> tag to enclose the css.
<style>
h1 {
color: #999999;
white-space:normal;
word-break: break-all;
font-family: Georgia;
text-align:center;
}
</style>
You also forgot the closing tag for div, though not entirely sure where you want the placement for closing tag would be.
<div class="child-one child"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="Logo.png" alt:"">
<div class= "container">
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Continuing Education Courses</li>
<li>Support Groups & Workshops</li>
<li>First Appointment & Fees Insurance</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<hr>
<div class="profile-box">
<img src="Group 1.png" alt="" align="center" width="300px" height="100px">
<main>
<h1>Grounding and Resourcing Technique Giveaway</h1>
<section>
<h2>
Being a mental health clinician can be such an empowering and rewarding role. You can change,
help, and nourish so many of those struggling with everyday life. Through the responsibilities you take on while helping others, it’s so important to practice grounding and resourcing techniques with your clients.
</h2>
</section>
<div class="child-one child">
<h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
<img src="Rectangle 817.png" alt="" align="left">
<h2>
Learn ways to keep your client grounded by establishing comfortability, learning breathing and body awareness techniques, object-based resourcing, and so much more. This handout will help you overcome some of those challenges you face daily as a mental health clinician while working with clients.
</h2>
<hr>
<h1>Simply fill out the form below to download.</h1>
<h2>You will be sent a copy to your email.</h2>
</div>
<style>
h1 {
color: #2B2B2B;
white-space:normal;
word-break: break-all;
font-family: Georgia;
text-align:center;
}
</style>
</body>
You had a lot of errors such as no closing body or div tags, and now all of them are the same size.
You leave a closing tag on div class
<div class="child-one child"
<h1>Bill Maceus, Co-Founder of XYZ is giving away a FREE handout for grounding and resourcing methods.</h1>
Please complete the code to be:
<div class="child-one child">
If you are using VS Code editor, install Auto Close Tag extension if you haven't yet to avoid this kind of problem and Prettier extension as well is a big help for you to looks your code organize and easy to see what is wrong.
Links:
Auto Close Tag extension - https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Prettier extension - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
My pictures are being resized, the set images are supposed to be 80x80, but they are displaying 40x80. The only way I have found to remove this problem is by getting rid of the box-sizing: border-box; However, I have to include the border-box to follow along with my assignment instructions. So, I can't remove it. I have also used inline styling to work around the problem, making the picture 133x80.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee Bar Music</title>
<meta charset="utf-8">
<link href="javajam.css"rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>
JavaJam Coffee Bar
</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</nav>
<main>
<div id="heroguitar"></div>
<h2> Music at JavaJam</h2>
<p>The first Friday night each month at JavaJam is a special night. Join us from 8 pm to 11 pm for some music
you won't want to miss!</p>
<h4>January</h4>
<div class="details">
<img src="melaniethumb.jpg" alt="Thumbnail Picture of Melanie" class="floatleft" height="80" width="80">
<p>Melanie Morris entertains with her melodic folk style</p>
</div>
<h4>February</h4>
<div class="details">
<img src="gregthumb.jpg" alt="Thumbnail Picture of Greg" class="floatleft" height="80" width="80">
<p>Tahoe Greg is back from his tour. New songs. New stories.</p>
</div>
</main>
<footer>
Copyright © 2020 JavaJam Coffee Bar <br>
</footer>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.floatleft {
float: left;
padding-right: 2em;
}
Use margin-right instead of padding-right.
* {
box-sizing: border-box;
}
.floatleft {
float: left;
margin-right: 2em;
}
I am working on setting up my website - it still has a long way to go, and I'm new at this. I have a page with a series of clickable boxes representing my portfolio. However, the images I want to be displayed in these boxes are orienting themselves to the left rather than the center of the box. Any advice?
Website where problem is: http://corey-dickinson.com/portfolio.html
Code:
<!doctype html>
<html lang="en">
<head>
<title>CoreyDickinson.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800|Playfair+Display:,300, 400, 700" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement#4.2.7/build/mediaelementplayer.min.css">
<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
<!-- Theme Style -->
<link rel="stylesheet" href="css/style.css">
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAq6urACkpKQD19fUA4ODgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACEwAAADEgAAIhMAADEiAAASITADEiEAAEIiEzEiJAAAMiIhEiIjAAABIiIiIhAAAAQiIiIiQAAAAyIiIiIwAAAAEiIiIQAAAABCIiIkAAAAADIiIiMAAAAAASIiEAAAAAAEIiJAAAAAAAMiIjAAAAAAABIhAAAAAAAAQiQAAADH4wAAw8MAAMGDAADAAwAAwAMAAOAHAADgBwAA4AcAAPAPAADwDwAA8A8AAPgfAAD4HwAA+B8AAPw/AAD8PwAA" rel="icon" type="image/x-icon" />
</head>
<body>
<div class="site-wrap">
Menu
<div class="offcanvas_menu" id="offcanvas_menu">
<ul class="mb-5">
<li>Bio</li>
<li class="active">Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<ul class="social">
<li></li>
<li></li>
<li></li>
</ul>
</br><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib and coded in Brackets by CD
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
<px-2 class="fa fa-home">
<div class="mx-auto" style="width: 200px;">
<h1>Portfolio</h1>
</div>
<hr><hr>
<div class = "container">
<ul class="portfolio-list">
<li>
<a href="https://redcross.carto.com/viz/3ea45828-7769-4f92-9170-bec6c63dfc9a/public_map">
<img src="img/arcban2.jpg" alt="" style="image-orientation: center">
<div class="text">
<h3>Diaspora Mapping RC</h3>
<span>A project for the Red Cross that designed maps of the distribution of selected diaspora populations across the United States. The map was used by large numbers of volunteers to coordinate outreach programs.</span>
</div>
</a>
</li>
<li>
<a href="index_search.html">
<img src="img/qcwide.png" alt="">
<div class="text">
<h3>Quiet Contractors Directory</h3>
<span>Project for small non-profit focused on noise polution to create a directory/webmap of environmentally friendly contractors across the US.</span>
</div>
</a>
</li>
<li>
<a href="MukigavMutooroMap-July2017.pdf">
<img src="img/kasiisibanner2.png" alt="">
<div class="text">
<h3>Tribal Map Western Uganda</h3>
<span>A map produced for the Kasiisi project, a small NGO in Uganda. This map outlines the spatial patterns in different tribes in the region. This data was derived from a survey I oversaw that was distributed using XML forms in ODK. </span>
</div>
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=u7Cuy5AO88Y">
<img src="img/TED_banner-resized.png" alt="">
<div class="text">
<h3>TED Talk Nauru</h3>
<span>A TED talk outlining the results and reflections from a project I created. The project was focused on mapping the environmental degredation on Nauru, a small island nation in the South Pacific.</span>
</div>
</a>
</li>
<li>
<a href="A)%20Report_Living_Situation_Refugee_Camps_2017.pdf">
<img src="img/UNHCR_banner2.png" alt="">
<div class="text">
<h3>Refugee Camp Report</h3>
<span>An analysis of quality of life patterns in Syrian refugee camps, developed for a class at Clark University. The results of this project were submitted to UNHCR.</span>
</div>
</a>
</li>
<li>
<a href="Cape_Cod_Sand.mp4">
<img src="img/nps-banner-2.png" alt="">
<div class="text">
<h3>Analysis of changing seashore patterns</h3>
<span> Analyzed the effects of sea level rise on Nauset Spit for the North Atlantic Coastal Lab for Cape Cod National Seashore. The project involved exstensive research of historical maps and arial imagary.</span>
</div>
</a>
</li>
</ul>
<div class = "container">
<h1 class="mb-5">Download Zip</h1>
</div>
<!-- loader -->
<div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214"/></svg></div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Add a class for the tag like so
<img class="center_img" ..... />
and then in your css have:
img.center_img{
margin: y_margin_values auto;
}
Setting two values for margin sets first value as top and bottom, second as left and right. Setting the left and right values to auto will center the <img> within its container. If that still doesn't work, set it's parent <a> or parent <li>' to havewidth: 100% ' or whatever width you desire.
There are few possible way to get the desired result. lets discuss few of them
Pulling the Image in center
Here we will just pull the image to center, although image size will be the same as it is now. so your li width is full width, but image will be in center may be if size(width) of image if less.
apply the below css to the image inside your li
.portfolio-list li a img
{
display: block;
margin: 0px auto;
}
setting image as background to your li > a
And another when you want the size of the image same as your li its better to set the image as background rather than showing it as html element inside your li.
So you can apply the below css, make it sure we need to set the background-image separately for each of your li. and can remove the img element side your li a.
.portfolio-list li a
{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 230px;
}
.portfolio-list li a.first
{
background-image: url('http://corey-dickinson.com/img/arcban2.jpg');
}
.portfolio-list li a.second
{
background-image: url('http://corey-dickinson.com/img/qcwide.png');
}
...
...
//And so on for other li.
Add this to your CSS
.portfolio-list li a {
text-align: center;
}
Title says all basically. I want the text right next to the slideshow.
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<h2 id="wexford">17 My Street - Some Town, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
H tags have a specific purpose, to act as a header under which other content will fall. To use h tags side by side goes against their intended use (and is invalid html). The span tag does what an H tag does, but is an inline element (display:inline), where a H tag is a block level element (and acts like a div)(display:block). You can change the 'display' property of an H tag's css to do what a span does.
With that in mind, I would actually use 'display:inline-block' in your situation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
display: inline-block;
}
h2.asCouple {
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<h1>Topic - <h2 class="asCouple">Subtopic</h2></h1>
</div>
</body>
</html>
Hope this helps.
You can do it inline when declaring the HTML element, I did something like this:
<h6 style="display: inline">Posted by <h4 style="display: inline">{{.}}</h4></h6>
By doing this, you don't change the style of all <hSOMETHING> elements
<div class="displayBorder">
<div class="displayContainer">
<div class="displayTable">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">Location</h2> <br />
<h3>$1,249,999</h3>
<p>Custom Built Home With Every Bell And Whistle !/ Ch Colonial With 6 Generous Bdrms, 2 Master Suites Or Use Lge Area For Office, 5 Full Baths, Wood Floors Thru-Out, Granite Eik W/ Center Isle, Top Appliances, Andersen Windows, Lots Of Details, Full Finished Basement W/ Ose, Full Wet Bar, Theater Tv Area, Playrm, Lots Of Storage, Custom Freeform Salt Pool, Custom Pool House</p>
</div>
</div>
<button class="learn-btn">LEARN MORE</button>
</div>
#Jared Scarito is this what you need??
CSS
.displayContainer{
display:table;
}
.photoContainer,.txt-con{
display:table-cell;
vertical-align:middle;
}
HTML
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')">
<</div> <img src="https://i.stack.imgur.com/rhy46.png" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">1234 My Street - Sometown, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
</div>
changed the image to demonstrate
Pretty much the same HTML, added extra div around h3 and h2..
The top third of my page, including a graphic and headline, shows up just fine in Firefox and Explorer, but does not appear in Chrome when accessed from my server. It does appear in Chrome when viewing the page as a file.
The graphic is defined in the CSS file as:
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
And the HTML file is:
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>donfiler.net - web design </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Gallery
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix"><p></p><p></p>
<div class="info">
<h1>Web Design & Social Media Marketing</h1>
<p>
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality.
</p>
</div>
</div>
<div class="highlight">
<h2>707-217-8457 if you want a mobile friendly web site.</h2>
</div>
</div>
<div class="body clearfix">
<div class="click-here">
<h1>Impact Marketing</h1>
Click Here!
</div>
<p style="font-size:12px;">
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality. We design web sites with dynamic database interaction; deliver computer based training; create comprehensive marketing campaigns; specialize in hand coding HTML, CSS, PHP, Mysql and JavaScript to customize web design and user interface.
</p>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li>
<img src="images/THUMBNAIL_IMAGE4.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Memories of growing up in Europe during the Cold War. The first book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE3.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
A catchy tune by the Beach Boys in the mid-sixties, the lyrics of "Be True to Your School" hit many highlights of high school in that era.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE2.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
College Years and Rock Band Entrepreneur. The third book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE1.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Contributing to others is the highest form of success you can achieve and I wanted to impart what I have learned over the years working for a living.
</p>
</li>
</ul>
<div class="body">
<div class="wrapper clearfix">
<div id="links">
<div>
<h4>Social</h4>
<ul>
<li>
Google +
</li>
<li>
Facebook
</li>
<li>
Youtube
</li>
</ul>
</div>
<div>
<h4>Blogs</h4>
<ul>
<li>
Blogspot
</li>
<li>
Marketing Blog
</li>
<li>
Web Design Blog
</li>
</ul>
</div>
</div>
<div id="newsletter">
<h4>Newsletter</h4>
<p>
Sign up for Our Newsletter
</p>
<form action="https://donfiler.us/newsletter" method="post">
<!--<input type="text" value="">-->
<input type="submit" value="Sign Up!">
</form>
</div>
<p class="footnote">
© Copyright © 2016 Don Filer all rights reserved.
</p>
</div>
</div>
</div>
</body>
</html>
The Google Chrome extension AdBlock is blocking that element for me, because its ID is adbox. Check if you have that extension enabled, as well.
In general, try avoiding the word "ad" when naming HTML elements.
From the start, I can see a major flaw in the code- you named an element adbox. Most ad-blocking extensions work this way- they scan for ads, and that element will be perceived as an ad, simply because of it's name.
To quote CapitalQ,
In general, try avoiding the word "ad" when naming HTML elements.
Check if you have an ad-blocking extension turned on, and if so, try the site without that extension. Also, rename that element ASAP!