(clickable)
Mainad has a valid height and width, however it isn't shown like subad1/subad2. Which are in essence exactly the same! (just a different background image).
Firebug shows my div as greyed out for some weird reason. Replacing the contents of mainad with just some text doesn't solve the problem (problem isn't related to inner elements)..
What's going on?! :(
Do you have AdBlock installed? That might be hiding that div.
An extra little note: FireBug will actually show something like this in the Style pane when AdBlock Plus is blocking it (wrapped for clarity):
.mainad, #mainad { undefined (line 233)
-moz-binding:url(chrome://global/content/bindings/
general.xml?abphit:707307897865#basecontrol) !important;
}
Firebug displays selectors without HTML content, or block element styles as gray. If you edit the HTML, and add some copy you will see the selector regain its colors.
Related
[Highcharts]
Hello, is there a way to display the tooltip outside the tags? Like to make it "float" outside the container so that it doesn't get cutoff like below.
Thanks in advance.
Here's an example jsFiddle you can use to reproduce the issue. (Try hovering over the boxplot)
http://jsfiddle.net/af3g18mo/ Code
In your fiddle i can figure out the Problem:
If you go up one cascade in your stylesheet you can see that your paths and stuff is within a tag.
The tag has the fix height of 65px and no overflow attributes - but one path before there is the overflow:hidden. This is why the highchart tooltips and everything is just cut off.
You can change your height dynamically to for example 40% what doesn't really fix the problem if you have longer contents in your tooltip. but you can give a "overflow:visible;" to your <svg> and overwrite the "overflow:hidden" in your ".highcharts-container" with visible - so all the contents like your tooltips that have more than 65 px height are displayed.
You can see the solution here:
be careful changing these things, but in your example i couldn't see any bad reactions to this change. In case you have to give your css the whole path to not change it globally.
http://jsfiddle.net/af3g18mo/2/
So the concrete fixing for your css could be:
svg{
overflow:visible;
}
.highcharts-container{
overflow:visible !important;
}
Check this out:
http://codepen.io/maxwbailey/pen/vGKBr
Now, they look fine when you aren't hovering over them, but when you hover over the <button> and <input> elements, you'll see that the text below them is bumped around a bit, while hovering over the <a> element does not cause the same effect. That's because the <button> and <input> elements are displaying as inline-blocks still (which handle borders, padding, and margins differently than regular inlines), despite the display: inline !important; line that is applied to them.
Is there anyway to override this? I know it's doable via hacks like borders with the same colour as the background, etc. but I'd really like to know if there's a way to make them display: inline properly.
Note: The problem here isn't about the text being bumped around (though that is an effect of it), it's that, despite everything saying otherwise, the browser is still forcing the button to display as an inline-block. Thanks to everyone who's provided methods to prevent the text bumping from happening, but that's not the real problem here.
Thanks!
Not sure the context of why your markup exists like this, but the issue looks like it's being triggered by setting the font-family. If you take a look at this pen - http://codepen.io/pnts/pen/Egwuo - the hover works fine without a font-family specified, but if you uncomment the line specifying one, the jumping begins.
It seems your question is a little misleading. Your button tag IS in fact set to display:inline on both normal and hover states. It sounds like the question you have is how to prevent the text below from getting bumped down on rollover. Instead of using a bottom border as you are currently, why not use the following in the hover state to achieve the underline?
text-decoration:underline;
agree with the previous answer, however if you want the flexibility of a border, being able to use padding to adjust where it lays etc, you could use
border:1px solid transparent;
not as hacky as using the same color as you bg because it doesn't matter the color of the background that way.
http://www.mapleboutique.com/
it displays fine, but once you start hovering over things start to get really ugly. I've only tested it so far in IE9 and working my way down to IE6 (ahhhhh).
anway here is my CSS as well. (I tried pasting it here and formatting it with the code tags, I don't know why I can't even figure that out).
http://www.mapleboutique.com/stylesheets/main.css
There are two main problems that I can see:
Your <ul> is invalid. You cannot wrap an <li> in a <div>. The only valid child of a <ul> is an <li>.
It is invalid to reuse the id #hoverNavi. Id's may only be used once on a page. Try using a class instead.
Main.css, line 417: filter:alpha(opacity=93); /* for IE */
It looks like that once an element is set with an opacity < 100, the opacity is not restaured on mouseout, causing float:left on menu elements properties to fail...
Comment this line, so your menu will work (but without transparency). On IE7,8,9.
If you want transparency on IE, try to implement it with jQuery, and don't forget to restaure it onmouseout
I'm having this really strange problem with the CSS of my custom validator.
I have a custom validator with the display property set to dynamic and the CSSclass property set to a CSS class I wrote.
In this CSS class I have a padding property. My problem is that the left and right values of the padding just reverse for no reason when I view my website in IE7 or IE8 with compatibility view set to on.
The values just flip, the amount of pixels set to the left padding appear on the right and the other way around.
Sorry for not posting the code, I'm writing this from my phone because we don't have Internet access in this network.
Any ideas?
Had the same problem with span containing arabic text within an anchor tag - padding was inverted. Changing text to latin was one way to fix it :) Another one was to add zoom:1 to that span.
Without seeing any code...I can only assume that the default margin and padding values are being interpreted differently by each of the browsers. I'd recommend adding a css reset stylesheet just above your other stylesheet to see if that changes anything?
CSS RESET STYLESHEET: http://meyerweb.com/eric/tools/css/reset/
Hope that helps a little. :)
I give my links a background color to make it stand out, the problem is that it will also apply to links which have images as child instead of text. The result is that the image has a small background at the bottom. (see: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )
How do i removed the background of links when it has an img as a child? I though that someting like this would work:
.featured_tutorial img < a
CSS does not support a parent selector.
You have to use classes like a.this_link_contanis_img{ /*override background*/ }
Or maybe you could set a new property to the img. This could hide the link's background.
.featured_tutorial img{ /*override background*/ }
Edit: Ok, that wont work in your case..
Cascading Style Sheets don't allow accessing elements "backwards". You can only access children of an element, not its parents.
It has background leaking at the bottom because images are inline level elements by default and are positioned at the baseline of the text line they are placed on thus there is gap between baseline and descent line that gets the color leak. You can get rid of it in two ways. Set css for:
a img { display: block; }
or if you want the to stay displayed as inline
a img { vertical-align: bottom }
this should fix your problem as it will align the image to the descent line of the text line the image is placed on when in inline mode.
Hope it helps,
T.
As mentioned there is no CSS fix but as you're already using jQuery this is the only way i can think of doing it
http://jsfiddle.net/vrqCV/
jQuery(document).ready(function() {
jQuery("a:not(:has(img))").addClass("bg");
});
As has already been pointed out, CSS doesn't have a way of looking "up" the DOM tree. It basically comes down to performance considerations. (Here's one explanation.)
But if you're not averse to the sometimes necessary evil of tacking this sort of thing on with Javascript, jQuery has a :parent selector.