tmm tmm - 11 months ago 47
CSS Question

Disappearing Text in HTML page

I just started using jsFiddle to make this (

<body><a href="#main">Skip Links</a><div class="header"><ul>
<li><a>Web Tech</a></li>
<li><a>Data Fun</a></li>
</ul></div><div class="leftAd"> sss </div></body>
body .main .leftAd {border: 4px red dashed;width: 160px;}

Can someone explain why the 'sss' disappears + the border not showing?

Answer Source


<a href="#main">Skip Links</a>
<div class="left-ad"><p>sss</p></div>


<aside class="left-ad">sss</aside>

I would suggest you go back through your code because there are a lot of semantic issues that need to be addressed if you're trying to understand it better. What Vincent said may work, but it is not the best solution. Also the new semantic elements that are added to HTML5 cut down some of the code and make your code more understandable. It beats having to make divs and text elements over and over. Instead of using div elements you should use the header and aside semantic elements which can be used for headers and advertisements respectively. You can float each with simple CSS like you have done. Lastly, you shouldn't name the class attributes left and right by themselves. That is very general and it makes your code harder for others to discern. I used .left-ad and .right-ad and it worked just fine. If you have any additional questions I'm here to help. It's essential that you understand these concepts to make your code easier to read, debug if need be later on, and makes you really understand the semantics behind what your writing.