Hello i am finally getting to grips with CSS after about 4 years of picking it up as i go. This problem though has had me stumped for a few hours now so ive gave up and decided to ask for some help and learn from it that way.
All the smilies in my site have the img border that is for comment images.
examples here-
http://onlinebanter.com/node/5334
Ive already removed the border with border:none at other places in my website but i cant seem to change this. Could anyone suggest something for me?
thanks
A quick inspect element using Firebug add-on for Firefox reveals this is because of the following rule in one of your css files.
#comments .b2-postcontent img {
border: 2px solid #CCCCCC;
...
}
Changing this to border: none; should fix this. Not sure if you are using a css file packager since the css file seems to be css_9f04d02d9bb1b7bc07fd70d30ee1b762.css. So maybe just search for #comments .b2-postcontent img in all files and then change the appropriate location.
Thank mt. Im a big fan of firebug mt. This though has got me. Ive a feeling i might have tried your suggestion too. I think it removes the border from my comment image which isnt desired. I suppose then i would just have to target it that itself. Let me go try and thanks.
Thanks Wurst too. I think that just removes all my image borders. Maybe i have got it all set up at he wrong level. I will be right back.
Related
I have googled loads and tried various fixes including "uploader.refresh()" so am here asking your help please.
I am using the Core API for uploading and think maybe Ive tried to be too clever by replacing the <a id="pickfiles" with an image rather than text.
In doing so, the area for clicking is teeny on Firefox and IE which is causing problems for some of my users.
Ive tried to override the css:
a#pickfiles {
width: 150px;
height: 75px;
}
but it doesnt make any difference, the height is still 15px.
Please can someone give me some pointers on how to sort this one.
Hope that all makes sense and thanks in advance for any help.
UPDATE 2: Question no longer relevant since it can't be solved with a MWE offline example. (I also found the offending piece of code which was responsible for the bug.
I have a small thin border when hovering over the header element which looks suspiciously like a text-decoration border and I can't get rid of it.
To my knowledge this problem can't be solved with text-decoration: none;… it just won't work or I applied it at the wrong element… then again, I think I've test them all… which Is why I am posting my question here.
text-decoration: "none" http://oho.xyz/hover1.jpg
The MWE works fine (http://codepen.io/pattulus/pen/bNRxaz), but the real thing isn't.
Since I don't know exactly where the problem is with my code, I have a live example running at . I debugged it with the web inspector for the last hours but can't pin-point what's off here. I placed an text-decoration: none !important almost everywhere without success.
So they real question is: What is this bug and how to find it?
Update: I dropped the faux-border added with an pseudo ::before element to the span to avoid confusion. I'll add it later when this problem is solved. I also made the html more semantic using this:
I have checked out the live version of your site, and if you disable the content: css property of your ::before css, the line disappears.
It's bad markup practice to have your a href wrapped around your two h1 tags. re-write like this:
<h1>Some title<span>sub title text</span></h1>
change your css to reflect the new html changes and you will be able to control the behavior better.
In my example I had a mixing which I called globally to underline all a tags:
#mixin hoverbottom($width: 2px, $style: solid, $color: $orangey-red) {
&:hover {
#include transition($link-transition);
border-bottom: $width $style $color;
}
}
Since the mixin isn't written in a smart way, I couldn't simply say border-bottom: none, but needed to #include hoverbottom (0px, solid, transparent);. I will rewrite it to work more smoothly. But… this was the culprit.
Thanks everybody for taking the time.
The setup
I have a series of overlapping CSS hexagons created using pseudo elements with borders. I have hover styles to change the colour of the shapes.
The issue
This hover style is causing problems when the transparent part of the shape overlaps text in other elements, causing a visible corner cut out in the text.
As the problem is difficult to explain with words alone, here is a screenshot highlighting the glitch.
The behaviour
I believe this to be a webkit only issue as it appears in Chrome but not Firefox. It may be of note that I am testing this on a Linux Mint system.
The issue occurs when you hover over the small github hexagon and remains when you exit the hex. The issue is resolved only when the large logo hexagon is hovered over. Strangely, if you hover from the logo hex to the github hex the issue only occurs when you exit the github hex.
I have put together a simplified fiddle to demonstrate the issue: http://jsfiddle.net/chicgeek/JRAn5/
The code
I am using SASS, compass, and custom mixins. I've included a snippet of the compiled styles for the offending hex. For a fuller excerpt, see the fiddle above.
.social.github {
top:1.96875em;
left:2.0625em;
display:inline-block;
text-align:center;
width:0;
line-height:0;
}
.social.github:before, .social.github:after {
position:absolute;
left:-1em;
width:1em;
border:0 solid transparent;
border-width:0.866em 0.5em;
content:'';
z-index:-1
}
.social.github:before {
border-bottom-color:#c3c3c3;
border-top:0;
bottom:0;
}
.social.github:after {
border-top-color:#c3c3c3;
border-bottom:0;
top:0;
}
.social.github:hover:before {
border-bottom-color:#675e5e;
}
.social.github:hover:after {
border-top-color:#675e5e;
}
Note: For the fiddle I am importing from Google Fonts, though for my project I have a custom icomoon font. The bug occurs with either source.
The solution..?
Have you encountered this issue before? Do you have a few minutes to play with the fiddle code above? Do you have any suggestions for tactics I could try?
I'm happy to provide more code if it's helpful in diagnosing this problem. Thanks in advance!
Updates
A friend suggested it might be an issue with the font engine. The clipping resolves when the .woff is disabled. [source]
The issue is evident on Chrome 33 (Linux, OSX), Safari (OSX) as well as Chrome 31 (Win7). The issue does not occur on Chrome 33 (Win7).
I asked some work colleagues about my issue. One of them suggested applying -webkit-backface-visibility: hidden; on the logo elements. Voodoo, it worked.
Here is the revised fiddle showing the fix:
http://jsfiddle.net/chicgeek/JRAn5/8/
Now the thing is, this shouldn't work as -webkit-backface-visibility is a property specifically for 3D transforms. Though I don't know the specific cause of the issue, I believe my problem to be a webkit-specific bug and it is just chance that this property solves it. If anyone has better understanding of either the reason for the bug or the reason that this solution works, please comment on this answer.
I am exploring some example HTML from codrops. The following CSS is used.
Searching the internet, I can see where others have used span.reference, yet I cannot find an explanation for the purpose of the .reference.
Could anyone enlighten me?
span.reference a {
color: #aaa;
text-transform: uppercase;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
margin-right: 30px;
}
Let me add this link to the actual website for the example at codrops.
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
Looking through all the html and css, I could find no class by the name of reference anywhere.
I removed all three occurrences of reference in the menu.css code to see what the result would be and the menu system example stopped working properly.
Is there an implied class, or am I missing something really basic here?
Whoops, my bad, I lost track of what I was doing. I put the inline style into a seperate menu.css, then I removed the links that went back to codrops, which you folks had correctly pointed out, there was a class called "reference".
In addition, as I was removing/changing the CSS to see how things were affected, I failed to properly comment out a specific piece, which resulted in the menus being all messed up and when I put it all back it worked so I got hung up on the class "reference" and failed to adequately troubleshoot the person manipulating the hands and fingers.
I apologize for not keeping track of what I had been doing.
"muffled sound of me with my foot in my mouth here"
It is the class on the span element.
<span class="reference">
Link
</span>
I just began work on this site for a client, the site is www.kingcharltonmusic.com. It was built by someone else, so maybe I just can't find what I'm looking for.
Essentially, the comment section at the end of some pages (About for example) have a transparent background, and no matter how much I alter the css it doesn't seem to effect it.
I'm not sure if I need more information than this, but if so please let me know.
Thanks in advance!
Depending on what order the rules are in, background: can override background-color.
I made a little demonstration so you can get a feel for how the various rules override each other, you can play with it:
http://jsbin.com/ecohuk/edit#html,live
You need to find out if there is another rule further down in your stylesheet that is overriding it, or at the very least use background: instead of background-color
Just from a quick glance, div#comments doesn't appear to have a background set explicitly. Through firebug/webkit tools I could successfully change the background to white, so I suspect that all you need is the right element to target with your css.
#comments {
background-color: white;
padding: 0.75em;
}
Make sure to clear your cache (server and client side) after you have uploaded your new CSS file.