I have a menu that under certain circumstance some items show a little red box (think facebook friend count).
I've recently redone the css targetting the menu but nothing should have changed to cause the problem I'm seeing.
It's a simple div like this:
<div id="request-count" class="noticount"></div>
The CSS looks like:
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 0.6em;
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
I've checked the page sounce and my javascript is correctly setting the value so the div ends up looking like this:
<div id="request-count" class="noticount">1</div>
The only way I can get this to actually show up is by manually hacking the live CSS and setting the Width and Height, then it shows up without a problem.
The really odd bit is that the content "1" never shows in the div either. Very confused over this and really don't know what to try.
Not sure if this is significant or an oddity with FireBug but sometimes this div appears in the code view slightly tranparanent which usually disnifies that an element is display:none which I'm not getting either.
What can I try to solve this?
EDIT
Here is a fiddle displaying the problem:
http://jsfiddle.net/UYa5Z/
Not sure of the exact reason, but it appears that the formatting of your font-size is not working as intended. With the example that you linked, if you simply change the font-size of the noticount class from em based to px based it seems to fix the issue.
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 10px; /* this instead of font-size: 0.6em */
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
JSFiddle
Edit:
Based on my second comment below, I investigated the issue further. As this JSFiddle shows, you can keep .noticount's font-size relative if you remove the font-size: 0; from both ul#moomenu and ul#moomenu li. I'm not sure what the purpose of setting those to 0, but given you use px (instead of em) on ul#moomenu a and ul#moomenu ul a I'd suggest using my first suggested fix as it's consistent with the other font-sizes you set in your css.
Make sure the parent of.noticounthas a relativeposition that will fixe the problem
.noticountParent{
position:relative;
}
.noticount{
position:absolute;
}
Html:
<article class=noticountParent>
<div id="request-count" class="noticount">1</div>
</article>
Your ul#moomenu and ul#moomenu li define font-size:0
Since the .noticount has font-size:0.6em, the resulting font size is... 0
A font size of zero is invisible.
Related
I'm facing an issue where I have an inline <span> containing multiline text, with a transparent background. Despite having a default line-height, the background on the text overlaps, causing darker, horizontal rows where the background is overlaid onto itself.
Here is a good demonstration of the problem (image + jsfiddle)
JsFiddle demonstrating this issue.
Minimal reproduction of issue
HTML:
<h1>
<span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span>
</h1>
CSS:
h1 {
text-transform: uppercase;
font-family: Arial;
line-height: 1;
font-size: 30px;
background: rgba(0,0,0,0.5);
color: #FFF;
display: inline;
}
h1 span {
position: relative;
}
Solution requirements
The background color must conform to the shape of the text; so setting the span to display:inline-block is not a workable solution.
Setting a fixed line-height (or padding) is not an optimal answer as the exact font rendering changes between browsers, and user's settings. Setting the line-height perfectly in Chrome will product an imperfect result in Firefox, for example.
The text must be dynamic and semantic. A solution cannot involve rendering an image representation of the text on the server for the client.
Preferably allows for arbitrary padding to be added or removed to reduce or increase the space between the text and the edge of the background.
Javascript could be fine. I'm using Angular 2 here, so answers which integrate nicely with that are even better.
Line height will accept a 'none' value, so you can set that and it works (if it's display:block), however (at least in chrome, safari and ff on Mac) anything inline had a 1px gap between the lines. So in the solution below I just added a padding top of 1px to the span to adjust for that gap. I'ts a little hacky, but it gets the job done. You'll want to do much more browser testing obviously. It scales fairly well with browser zoom on chrome and ff, but gets a little off at really large zoom rates on safari.
h1 {
text-transform: uppercase;
font-family: Arial;
line-height: none;
font-size: 30px;
color: #FFF;
}
h1 span {
background: rgba(0,0,0,0.5);
line-height: inherit;
display: inline;
padding-top: 1px;
}
<h1>
<span>Although it is set to a line height of 1, the background behind text still overlaps between rows.</span>
</h1>
So I'm trying to get two individual divs which are close in proximity to share one background image but I'm not sure if this is possible. I've uploaded two pictures, the second being designed for a smaller screen (just to further explain what I mean) http://imgur.com/a/2dypd . I can't imagine two separate background images would work as they wouldn't line up when resizing the window.
The only solution I can think of is creating two plain white divs to overlay on one single div but that seems like a dodgy way to go about it. I'm not expecting a hunk of code to be written for me, maybe just explain if it's possible and a reference so I can learn. Cheers.
Based on #cale_b's comment, you can set the same background to both div's and then use the background-position property to do the delusion of background sharing.
Then you can use media queries to make it look good in mobile too.
Here you've got a simple example that looks like the one you posted:
#wrapper {
width: 800px;
font-family: sans-serif;
}
#top {
height: 200px;
margin-bottom: 20px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 0;
line-height: 150px;
color: #FFF;
font-size: 32px;
text-indent: 50px;
}
#bottom {
width: 500px;
height: 100px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 -220px;
}
#bottom ul {
list-style: none;
}
#bottom ul li {
display: inline-block;
list-style: none;
padding: 0 10px;
line-height: 50px;
color: #000;
font-size: 24px;
}
<div id="wrapper">
<div id="top">
I'm a banner
</div>
<div id="bottom">
<ul>
<li>I'm</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
</div>
As I understand, you want to use only one image copy of one image over two div and you dont want to use any overlay.
So you can do the following:
On the bottom div, use background-position-y:-100px or any other desired value. This way you push the image upwards.
This looks promising so far, but you will face an issue with the size of the background size specially if you are making a responsive web page.
I would say that background-size:100% 100%for both div would do the job yet it will make the image stretching (unless you go really responsive).
I still recommend using an overlay or even a ready made image. But if you insist on using two div then the above steps should be enough while you have to make your design suitable for this image.
N.B. keep in mind that you might need to use background-repeat:no-repeat
I am building a little website so here is my problem :
I've got a first header div which contains header stuff. It has position relative and stuff inside is position absolute, but I think that we don't really care about this one.
Just below I've got my main container div with no defined positioning and some <h1> and <p> in it. Each h1, on click, opens some content below with jQuery slide.
This is the code. The sliding part is
$("#container_" + tabName).slideToggle
The point is that on the which i called "buggy" in the example, and also on all other in my dev version, the jQuery slide is jumpy at the beginning and end of the animation.
I've done some search I found that I had to put a defined width but it didn't change anything.. Tried a lot of stuff already but I really don't find how to do that.
See this fiddle: http://jsfiddle.net/8s9VB/
.container_projects .mainSmallText{
padding-top: 25px;
}
.container_projects .mainSmallSubText{
font-weight: bold;
}
#container_professionalXP{
line-height: 3px;
padding-bottom: 20px;
}
#container_professionalXP .mainSmallText{
padding-top: 30px;
}
Well it's basically the problem with the margin inside your paragraph. I've edited one part of it and added padding in the div rather than margin inside the paragraph. Here's one part I've edited:
#container_professionalXP{
line-height: 3px;
margin-bottom: 20px;
padding-top:30px;
}
#container_professionalXP .mainSmallText{
margin: 0px;
padding:0px;
}
So I am using a function to select text in a <div>. It works, but I don't like the way it displays in Google Chrome. You can see my work here. Click the button and the text in the <div> gets selected, but in Chrome, the selection stretches all the way across to the right of the window, which isn't good. It works like I want it in Firefox and IE, though.
The <div>, of course, has a width on it of 200px. I tried also putting a max-width declaration on, but that wasn't any good either. Is there any way to keep the selection from displaying this way?
Try adding the CSS rule display:inline-block to your div:
#result {
width: 200px;
font-family: Arial;
font-size: 10pt;
text-align: center;
padding: 8px;
border: 2px solid black;
display:inline-block;
}
jsFiddle example
You can use selectNodeContents() instead of selectNode(): http://jsfiddle.net/6XUJR/
I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?
CSS:
#customizeButton
{
background-image:url('images/customizeButton.png');
position:absolute;
top:35%;
left:25%;
width:370px;
height:350px;
background-repeat:no-repeat;
-webkit-background-size:100% auto;
z-index: 150;
}
HTML:
<div id ="customizeButton"></div>
It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...
Here's the code for reference:
CSS:
#statSheetExitButton
{
width: 40px;
height: 40px;
position: absolute;
font-weight: bold;
top: 17%;
left: 74%;
font-size: 150%;
font-style: normal;
color: black;
z-index: 50;
}
HTML:
<div id ="statSheetExitButton">X</div>
And again, the question is why the customizeButton is not showing up.
EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.
Is this the correct path to your image?
background-image:url('customizeButton.png');
This would only work if the img was in the same directory as the css.
You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is. That'll get you on the right track.
I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div
My thoughts:
display: block; missing
you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
if you are only positioning this container, you do not need z-index
Make sure your button is inside a positioned element, which isn't itself hidden.