I'm doing the front-end on my website. I included a couple divs in my mark-up. which show on the live previewer server on vscode but when I open the very same in page in a browser these divs don't show and I don't know why cause I have not hidden them. I've set CSS but still not nothing. what's confusing is that it shows in the code editor but not on the browser.
.ad-2 {
position: relative;
top: 0px;
left: 0px;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-3 {
position: absolute;
top: 0px;
left: 0px;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-4 {
position: absolute;
top: 201px;
left: 0px;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-5 {
position: absolute;
top: 0px;
right: 0px;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.ad-6 {
position: absolute;
top: 201px;
right: 0px;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}<div >
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum. Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus? Lorem
ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div ></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit! Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim. Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus
voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis
pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div ></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>as you can see all the ad divs have css set on them but they visible on the browser. what could be causing this.
CodePudding user response：
After playing with this for a while, it seems like Chrome actually interprets the class names (ex, ad-1) as something weird. Change the names of each class.
.number2
{
position: relative;
top: 0;
left: 0;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number3
{
position: absolute;
top: 0;
left: 0;
background-color: #010f1c;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number4 {
position: absolute;
top: 201px;
left: 0;
background-color: blue;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number5
{
position: absolute;
top: 0;
right: 0;
background-color: chartreuse;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}
.number6
{
position: absolute;
top: 201px;
right: 0;
background-color: chocolate;
border: 2px;
border-style: solid;
color: black;
width: 200px;
height: 200px;
}<div >
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt distinctio quibusdam eum, pariatur blanditiis animi totam natus reprehenderit suscipit ut accusantium enim placeat. Hic libero esse inventore voluptatibus. Voluptas, ipsum.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, accusantium. Laboriosam saepe, doloremque cupiditate voluptatum cumque adipisci perspiciatis quas tenetur, assumenda autem ad facilis ipsum aspernatur! Laboriosam accusamus minima ducimus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate excepturi, aspernatur quasi distinctio temporibus obcaecati fugit porro? Aliquam, architecto illo sequi harum accusamus voluptatibus quasi laboriosam tempore deserunt consequuntur dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, dicta animi! Sed doloremque voluptatibus libero optio. Itaque, debitis autem? Nam repellendus commodi laborum? Fugit praesentium minus necessitatibus, modi exercitationem quae.
</p>
<br>
<div ></div>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, amet sapiente, quos labore commodi cum quas doloribus nisi minus voluptas repellat blanditiis tenetur, voluptate recusandae facere modi animi et nobis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quibusdam voluptas omnis dolor voluptatibus illum, debitis quas facere rem aliquam accusamus optio voluptatum, explicabo quisquam quod laudantium unde veritatis reprehenderit!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis similique beatae incidunt distinctio qui libero modi expedita molestias, illum delectus vero animi consectetur officiis unde ullam cum aspernatur id enim.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A, aliquam doloribus voluptate dignissimos cumque nisi deleniti! Facilis rerum quo, laudantium vel tenetur, numquam architecto cupiditate fuga, explicabo voluptatem at consequuntur.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit laboriosam ullam quos veritatis pariatur amet expedita deserunt nobis voluptatibus, eos, molestias deleniti quas. Necessitatibus odit alias nihil ratione, modi exercitationem?
</p>
<br>
<div ></div>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus architecto laboriosam sapiente, est eligendi amet soluta! Eius eaque distinctio aperiam voluptatem illo officiis laudantium suscipit praesentium? Aliquam excepturi laboriosam officiis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic incidunt quo fugiat numquam enim nisi voluptas voluptates, esse mollitia, atque animi debitis illo nulla tempore provident quaerat fugit libero nemo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores nobis officiis tempore provident vero ex ipsum dignissimos reiciendis, consequuntur ipsam perspiciatis reprehenderit adipisci praesentium. Assumenda autem ex quas cupiditate suscipit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat laudantium nisi accusantium exercitationem in culpa dolor laborum molestiae impedit commodi. Error debitis mollitia esse consequatur ex sunt, corrupti praesentium libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure hic dolore tenetur iusto dolorum debitis atque facilis ipsum delectus provident, itaque molestias voluptate commodi ex! Quia tempore possimus fuga veniam!
</p>
<br>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>CodePudding user response：
The ad- class name triggers adblocking extensions. Do you use an adblocker? If so, it's blocking the elements from rendering. You have two fixes:
- Disable your adblocker
Obviously this is not a great solution, because anyone else with an adblocker will be unable to view those divs.
- Rename them
As Matthew mentioned, changing the class name to something that doesn't get blocked by adblockers will work. The Chromium rendering engine (and by extension, Chrome) isn't the one disabling the divs, it's your adblocker.