Solved

Why does my text disappear?

Posted on 2016-07-22
5
67 Views
Last Modified: 2016-08-08
Here's my CSS:

.box
{
    width: 600px;
    height: auto;
	max-height:700px;
    background: #FFF;
    margin:auto;
    left: 50%;
    top: 50%;
    z-index: 150;
    display: none;
	position:fixed;
	margin-top: -300px; 
	margin-left: -300px;
	text-align:left;
	padding-bottom:35px;
	font-size:10pt;
	overflow:auto;
	border-radius:10px;
}

.box .tooltip 
{
    font-weight:bold;
}

Open in new window


Here's my html:

<div class="box">
<table>
<tr>
<td><div class="tooltip">hello</div></td>
</tr>
</table>

What you see renders like this:

not working
You'll notice under "Hinge Direction" there's a blank space just above the pulldown menu.

Now, look at what happens when I change the div from "div class="tooltip"> to <div style="font-weight:bold;">

does work
Now you see the text.

I think I'm making a mistake somehow in my CSS hierarchy, perhaps? I don't know. What am I missing?

Thanks!
0
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 125 total points
ID: 41725508
It's hard to say without seeing your full code, but your example will not show anything because your box class has  display: none;. That means anything in the box class will not show up.
0
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 125 total points
ID: 41725572
You've only given us half the picture. Somewhere you have a div with a class name of tootip. You have CSS that assigns the font-weight for the contents of any element with a class name of tootip that is a descendant of any element with a class name of box. And the ancestor element with the class name of box has several style properties which includes display: none;.

So based on the CSS definitions, a div with a class name of tootip which is a descendant of any element with a class name of box would be the descendant of a hidden element and therefore hidden as well. But its hidden content would be bold.

Is the div in question the descendant of an element with the class name of box and which content in the screen capture represents the content of this div? Is it the word "hello"?
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 250 total points
ID: 41725610
Please debug this by right-clicking (depending on your platform) and pressing "inspect element". Then see which CSS rules are in effect that might hide your element.

As mentioned by other experts, most likely there is code in play that is not part of the example code you have shown.

Then a personal side note. What is going on with the capitalization in your labels? Using capitals for every word is intentional?

Best,

-r-
0
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41725611
I agree with Scott and KIm... give us link to the page instead of screenshots so we can help...
0
 

Author Comment

by:brucegust
ID: 41747574
I was able to figure it out, gentlemen. Thanks for your help!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question