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.
Related
I want to make an absolutely positioned element (an icon) to float inside an Antd Drawer title but it gets cut beyond the modal.
I have tried to give it infinite z-index in the div and in the Drawer prop but without success.
I am attaching a codesanbox so that I can explain my point and you can play around.
What am I missing?
Codesandbox example
Is this what you want to achieve?
If yes, just give a position: relative to the parent container :)
z-index will not work until and unless the position of that element is set. You are giving the z-index but not giving the position to the drawer. Please give position: relative; to the Drawer
Alright, I found it!
In the end it was simpler than other approaches that I tried...
It is always tricky when you have to play with a new library. Anyway I updated the codesandbox so you can see it working!
Here is the magic:
.ant-drawer-open .ant-drawer-content-wrapper {
overflow: visible;
}
.ant-drawer-open .ant-drawer-content {
overflow: visible;
}
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.
So I have some controls in a fixed position to the bottom of the screen for easy reach on mobile, but for the life of me I can't figure out how to make the option content appear above the select menu.
I tried messing with append-to-body="true" and some other stuff that was totally off the wall. I feel like this should be a simple hook but not finding anything..
Add position='up' to <ui-select-choices>.
Other options include down and auto (top/down depending on available space).
Demo: https://angular-ui.github.io/ui-select/demo-dropdown-position.html
Edit on Plunker available at https://angular-ui.github.io/ui-select/
[Dropdown Position]
I was able to get it with css by adjusting the absolute positioning.. This is actually kind of nice because I could control when it happened this way, for me it was only for mobile screen widths.
.some-container-class .ui-select-choices {
top: auto;
bottom: 100%;
}
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;
}
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.