Hi I have built a site using a font-icon from icomoon as image alternatives. Everything is fine however in ie7 they display with a text-decoration underline.
I have used a class to stop this when used in links which works in all browsers except ie7.
I put the icon in as a data icon in the 'a' and the text for links in a span. And class like so..
a.{
text-decoration:none;
}
span{
text-decoration:underline;
}
This is fine in every browser except ie7???
Even in <i> elements it adds a random underline, so again I added a style
i{
text-decoration:none;
}
Still no joy.
Any help would be greatly appreciated.
I don't know exactly what you think the a. selector would do.
I suggest you use a descendant selector:
a i {
text-decoration: none;
}
Related
So, previously i was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, i dont want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and id
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown #navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown #navigationDropdown {
margin-left: 0 !important;
}
}
However, this does not work, despite using the !important tag, which i previously thought was a universal trump card that would override everything else, regardless of the high amount of specificity that i already have, but alas, it does nothing.
So i thought, hmm, maybe i have to go all the way up to my custom.scss, which is theming my bootstrap, and already overriding some stuff.
Well, unfortunately, there isn't a $dropdown-margin-left variable that i can easily just change myself, so i attempted to implement it like this
.dropdown {
#navigationDropdown {
margin-left: auto !important;
}
}
#media (max-width: 768px) {
.dropdown {
#navigationDropdown {
margin-left: 0 !important;
}
I have been enjoying the bootstrap components, but man if they don't make it as hard as possible for you to simply override their css, it's like they want to force you into doing things a certain way.
Edit:
So, ive found out, through the inspector, that for some reason, the id is being applied to the a tag generated by React Bootstrap, not the encompassing div, which is given the proper class. Any ideas what might be going on?
Since your element has both the class and the id, your selector needs to be:
.naviDropdown#navigationDropdown
with no spaces.
So, previously I was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, I don't want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and ID:
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown#navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown#navigationDropdown {
margin-left: 0 !important;
}
}
So, this seems like it would work perfectly well, but unfortunately, it does not. Doing this makes the website completely disregard any of the CSS, and makes my navbar look all wacky and evenly spaced, as opposed to justifying my links left, and navbar right.
I've found out, through the inspector, that for some reason, the id is being applied to the a element generated by React Bootstrap, not the encompassing div, which is given the proper class.
Any ideas what might be going on?
Any help would be much appreciated, and let me know if I need to provide more info!
Edit:
I tried reformatting my code in the ways specified within this Github discussion, and unfortunately, my issue still remains the same--the ID is assigned to the 'a' element, rather than the dropdown div.
Looks like all i needed to do was surround the dropdown element with a 'div' element and then apply the id to that. There might be some deeper issue at play here, but this fixed my issue.
I'm new at angularjs/bootstrap and I'm trying to create a SPA that uses bootstrap accordion lists. I'm trying to change the color of the whole entire accordion tab, however, it's only changes part of the accordion space. I looked online and this question (Add class to accordion heading using angualr ui bootstrap?) and it's Jsfiddle (http://jsfiddle.net/Zmhx5/3/) represent my problem perfectly, but does not explain the solution.
I tried using firebug to find out what's going on behind the scenes, and it says the whole entire accordion tab is "". I have a css class that overwrites that style, but for some reason, something is overriding it.
.panel-heading {
background-color: red;
}
This website has a tutorial on accordions and its css simply overwrote it (http://patternry.com/p=accordion/). I tried doing the same but it did not work, please help :/
The reason why your override doesn't work is because of CSS Specificity. Since the Bootstrap style is more specific than yours, it is the one that's being applied. You'll need to override as follows
.panel-default >.panel-heading {
background-color: red;
}
Here is the JSFiddle for reference.
You should use scss in this case.
<div class="custom">
<accordion>
...
</accordion>
</div>
In css you will need to define.
.custom {
.panel-heading: {
background-color: red !important;
}
}
Since I couldn't add a comment to #AdityaSethi in #BartJedrocha's answer I will put an answer here since I think that it is useful.
.panel-default >.panel-heading {
background-color: red;
}
worked for me where
.custom {
.panel-heading: {
background-color: red !important;
}
}
Did not. Perhaps it is the use of SCSS? I read somewhere that SCSS uses the extension .scss. I didn't have the patience to change my stylesheet extension or create a new one. Sooo I tried the 2nd answer.
My comment however is more toward the #AdityaSethi comment that noted the issue of that solution affecting the entire app since panel classes are widely used. Understandable. I figure though the easy solution to that is:
div.custom .panel-default>.panel-heading {
background-color: red;
}
And that did the trick for me..as far as still changing the styles. The rest of my bootstrap page must not have had other panels in use because nothing else was change before I added div.custom to the CSS. But I imagine that with what little logic occurs in CSS, no other panels outside of div.custom should be affected. :)
I have some button controls with CSS line-height: 18px. Some are input controls type="button", and others are anchors stylized to appear as buttons like the input controls. In FF3.6.12/IE8 they are displaying the same height, but in IE7, the anchors are shorter in height. How do I get them to display correctly in IE7?
I took your demo: http://jsfiddle.net/DnGvF/
and added just this CSS at the end: http://jsfiddle.net/gRF9g/
/* ie7 fixes */
.Footer input[type=button],
.Footer input[type=submit]
{
overflow: visible;
*height: 24px;
*line-height: 15px
}
Some explanation of what's going on there:
There's a known bug in IE7 that overflow: visible fixes, related to the width of the button. Try looking at my demo in IE7 with and without it.
I'm using the Star property hack to provide change the height and line-height for only IE7 and lower. You can tweak the numbers I picked if you need to.
That hack is invalid CSS, but there's no problem using it. It's never going to come back and bite you - it's a "safe hack". Nevertheless, if you require 100% valid CSS, there are alternatives.
It now looks consistent between IE7 and the later versions.
Yes, this is a little kludgy, but at least it's all together in the CSS in one place, with a clear comment.
Honestly, if IE7 is the only problem, I'd just go with a hack and bump up the line-height:
*+html .button { line-height:24px }
If you use something like Modernizr, you could do away with the hack and use:
.ie7 .button { line-height:24px }
Of course, the other alternative is to actually track down why IE7 is behaving the way it is, and rewrite your CSS accordingly, but without any posted code, I can't help you with that.
EDIT: Forgot about this method of targeting just IE7:
<!--[if IE7]><style type="text/css">.button{line-height:24px}</style><![endif]-->
Buttons in IEs have additional padding/borders/whatever - they do not style well as in other browsers.
Hi I've finally got Suckerfish working and styled but in IE7 it is hidden behind the divs below it. See the dropdown on the 'Your Video/Pics' button here.
I know usually a z-index would solve the issue but in this case it seems not. Can anyone help?
Don't worry this site is not supposed to work in IE6 ;)
Try adding:
#header {
position: relative;
z-index: 1;
}
For IE, the entire block has to have a higher z-index than the block below it.