I am developing for an existing web application on an internal server, I can't really post all the code here as it's very very messy but I can show you guys a screenshot of the problem and the relevant css code:
The languages menu should be on top of the blue bordered box, but instead it's beneath.
It works great in FF, this is a IE7 screenshot
blue bordered box css:
.categoryBox {
width:100px;
background-color:#000;
border-style:solid;
border-width:1px;
border-color:#007CF7;
padding:5px;
float:left;
height:260px;
margin-right:25px;
margin-bottom:20px;
text-align:center;
width:200px;
position:relative;
}
language menu css:
#ChooseLanguageDlg
{
display: none;
position: absolute;
width: 87px;
height: 180px;
padding-left: 10px;
padding-right: 10px;
padding-top:0;
margin-top: -9px;
border: none 1px White;
left: 751px;
top: 10px;
font-size:11px;
overflow:hidden;
text-align:center;
}
Note: the languages menu is using a javascript toggle to show/hide.
EDIT:
Adding z-index to the language box does not change the visibility in IE
IE7 has known problems with z-index. Without seeing your page, the best I can do is point you to some useful links which explain the problem:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
IE7 Z-Index Layering Issues
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
The general idea is to poke position: relative (usually remove it) and z-index on parent elements of your drop down until it's fixed.
Good luck!
Setting the z-index of the language box manually may help. Of course, if you don't want to do this, putting the language box after the blue box in the markup will do the trick too.
You could try adding a z-index. This'll define which element is on top of which element:
z-index
add a z-index to the style for the language box?
IE has some problem with z-index (see Google). As I had to fix a similar problem I was forced to use javascript to hide the background elements, which isn't really suitable for you.
You could try to change the order of creation in the html code, if possible.
Related
I found a very weird bug today while developing a new site, I really don't know why in the hell it's happening, but I think someone might know.
I made a navigation menu fixed to the top-right part of the page, within it, a big div made round from a lot of border-radius.
It was working very fine and normal untill I added to the right bar a facebook page plugin.
When the bottom of that div goes over the title of the page in the plugin, the border-radius disappears. It stays a square div while it's there, goes back to round if I scroll the page and stays round until it's "touching" that very specific part of that page plugin.
I really don't have a clue about why, here's some code for better understanding:
.nav {
position:fixed;
width:100%;
text-align:right;
z-index:9999;
}
.face {
position:absolute;
width: 20%;
background:#F93;
top:5px;
right:10px;
border-radius:9999px;
overflow:hidden;
}
.face:before {
content: "";
display: block;
padding-top: 95%;
}
.face a img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
.menu{
display:inline-block;
background:#FFF;
padding:1em;
width:50%;
text-align:left;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
margin-top:3%;
}
.menu a {
padding:0 0.5em;
border-radius:4em;
}
And also:
<div class="nav">
<div class="menu">
menumenumenumenu
</div><br/>
<div class="name">
<h2>name</h2>
</div>
<div class="face">
<img src="i/image.png"/>
</div>
</div>
By the way, it seems to happen only on webkit browsers, on firefox it looks very normal, didn't even test in internet explorer.
EDIT: Just tested on Internet Explorer and SURPRISINGLY it did work very well, this is now very very weird
EDIT2: Some Screenshots for even more clarification:
Before touching the title:
After it gets on that very specific spot:
Further down:
Anytime it's over the title it's not round, elsewhere it's fine.
EDIT3: I found out that there was another place the bug was happening; I have a jquery slider on the page; I had an Opacity effect on hover on some controls, when these opacity was being animated, it reproduced the disappearing border-radius problem, and then went back to normal by itself; Removing opacity CSS rule from the neutral state made the bug stop happening while hovering the slider, but it keeps hapenning while that div is over the facebook plugin
There may be more going on here because of the Facebook plugin, but it sounds like this is a problem of not taking into account Webkit CSS rules. If that's the problem, I'm surprised that Firefox isn't giving you trouble. The standard way to style rounded corners with cross-browser support is to give border-radius, then -moz-border-radius and -webkit-border-radius:
.menu {
...
border-radius: 100px 0px 0px 100px;
-moz-border-radius: 100px 0px 0px 100px;
-webkit-border-radius: 100px 0px 0px 100px;
...
}
.menu a {
...
border-radius: 4em;
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
}
Ok, I found a fix for the problem, that I can only think I didn't thought before because I was too tired. ^^'
First of all, I found out that this bug was even weirder than I thought, thinking back how the opacity on another element seemed to affect it, I tried changing the image opacity, then, I found out that the div that contained it was in fact, still round.
Even though the image was being cut by the overflow:hidden; it wasn't being cut by the border-radius of the parent div.
I fixed it by putting border-radius on the image too, so now it is round even when over that plugin, the problem is gone now.
I hope someday this gets found by some webkit developers and the identify and fix that bug, it was really weird.
Thanks Henry for the help too!
TL;DR
Fixed by using border-radius on both parent div and image.
I have a page top containing two menus. The problem is that when one of the submenus is unwrapped, it doesn't show (the other menu covers it). I've tried with z-index but it doesn't work. Thanks in advance.
The page and the code are avaliable in http://infoglobal.eu1.frbit.net/En/cap.php.
Your html and CSS is messed up a bit
#top{
z-index:13 //This is not needed
}
.menu{
z-index: 10 //This is also not needed
}
#canvi_idioma{
z-index:1 //Simply add this
}
You can use z-index with position.
css example
.Class{
position:relative; //You have to choose atleast one position type.
z-index:100; // value can be change according to you .
}
Apply z-index to #canvi_idioma
CSS
#canvi_idioma{
z-index:9999
}
In your css you use z-index on '.menu' but that affects both menus. You have to apply it to #menu and #canvi_idioma.
Also note that z-index only works when both elements are within the same parent node.
Also your code is kinda dirty. You may want to clean up things like this with position beeing in there two times:
#canvi_idioma {
background: transparent;
position: absolute;
right: -95%;
top: 40px;
position: relative;
}
You only need this.
.menu {z-index:100}
I'm using a HTML map, and I'd need to use pseudo-elements on its area to display badges, and to position them relatively.
Edit : I can't hard-code its coordinates because I'm going to deal with lots of area in a HTML I can't predict, as my code is injected of top of an existing HTML.
Here's a screen of my attempt, and what I'd like to do :
Here's a fiddle (area on the first kitten's face)
tl;dr : Can I achieve this (by preference, in CSS only)?
What I tried
Problem, I've seen that area element is & needs to be set at display:none to work, preventing my pseudo-element to show.
So, I made it a block, it still have its position on the map (good) and my pseudo element appears, but not relative to the actual coordinates of the area...
Using this CSS :
area{
display:block;
position:relative;
}
area::after{
display:block;
content:"10";
position:absolute;
left:0px;
top:0px;
text-align:center;
color:white;
width:20px;
height:20px;
background-color:red;
border-radius:20px;
border:1px solid red;
}
I tried fiddling with margins, different positioning, different display, I didn't find the good combinaison yet.
I thought of retrieving coords of the area to position the pseudo-elements using CSS3's attr(), but I can't split the values of it afterward.
I've read this question about styling area using external (and old) jQuery plugins, but it doesn't feed my needs, and I can't find any clue on the web.
Does someone have an hint? I feel I'm close to it, but I'm running out of ideas.
I thought 2 idea.
One: http://jsfiddle.net/F6jtg/2/
area{
display:block;
position: absolute;
top: 40px;
left: 20px;
width: 100px;
height: 60px;
}
Two: http://jsfiddle.net/F6jtg/3/
HTML
<area
Shape="rect"
coords="20,40,120,100"
style="top: 40px; left: 20px; width: 100px; height: 60px;"
alt="Kitten 1"
href="#"></area>
CSS
area{
display:block;
position: absolute;
}
I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.
Chrome:
Firefox:
Here's a fiddle that has the problem on it:
http://jsfiddle.net/5fuGB/1/
.control{
position: absolute;
width: 100px;
height: 20px;
top: 30px;
left: 300px;
z-index: 1;
}
.highlighter{
background-color: orange;
position: absolute;
width: 100%;
height:100%;
left: -2px;
top: -2px;
padding-right: 8px;
padding-bottom: 10px;
z-index: -1;
}
input{
width: 100%;
height: 100%;
}
My Chrome Version:
Version 31.0.1650.63 m on Windows 7
My Firefox Version:
25.0 on Windows 7
Thanks for any help you guys can offer.
I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.
Update
I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.
Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.
Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.
I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.
Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/
Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.
You're doing a little more than what's necessary. To get a highlight around that input you can use :focus
So it would be something like this:
CSS
input {
border: 1px solid white;
}
input:focus {
border: 1px solid orange;
}
That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.
EDIT
Just saw your comment. I dont have the rep to comment so I'll just add on to this.
If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.
I'd also recommend experimenting with those divs within one another and making the most outside div relative.
Outside Div <------ position:relative;
Middle Div <------- position: absolute;
Inner div <-------- position: absolute;
Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.
I am working on a website and on the top navigation bar there is a search box, I applied the following css on the search submit button
#submit {
background: url("img/new-search-icon.png") no-repeat scroll -1px 0 #FFFFFF;
border:0 none;
cursor:pointer;
display:block;
height:21px;
padding:0;
position:absolute;
right:0;
text-indent:-9999px;
top:0;
width:20px;
z-index:2;
}
My Problem is in IE7 the text indent is not working please help me
if you want to see the demo you can view it by clicking here Click here. Please help me.
Add this CSS to make IE7 behave:
text-transform: capitalize;
Crazy but true.
while implementing the image replacement technique like above, there are some rules to go with css to get it work on IE browsers.
css declaration:
text-indent:-9999px;
text-transform:capitalize;
font-size:0;
display:block;
line-height:0;
font-size:0 is used to reduce the font size and works well in IE7. But even after adding this line, you would notice a black line(which is basically the text) on the center of the button in IE6.
display:block Negative text-indent works in IE only if this is added.
line-height:0 Another fix for IE6.
text-transform:capitalize I don't know the exact reason of including the property, somehow it fixes the issue.
Hope this helps.
.submit {
line-height: 0px;
font-size: 0px;
/* restante do teu código */
}
este é um exemplo simse
If nothing else works exactly right, this does:
color: transparent;
text-indent: 0 !important; /* reset the old negative value */
So normal browsers use the negative text-indent, ie7 gets special treatment using conditional comments
Has a similar problem in IE8.
After eliminating all other possibilities, a line-height declaration elsewhere in the CSS was breaking the text-indent. solution: set the line-height explicitly to 0.
Only following will do the job for you :)
text-indent:-9999px !important;
line-height:0;
text-transform: capitalize; actually had no effect for me (it was happening on a tags), but this worked
text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden
I don´t know if it´s the cause of your problem, but I think your background shorthand notation is wrong; the colour code should be at the start, not the end.
Sorry a little late to the post, but was looking for a solution to the IE7 issue with negative text-indent. I started trying my own random ways and stumbled upon this. jUst wanted to post it out on Stack in case it may help others.
Trying to add an icon to a link and not show the text.
My CSS for all browsers
a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{ background: url(../images/icons/icon_sprites.png) no-repeat; padding: 0 2px 0 0; width:18px; height:18px;
vertical-align:middle; text-indent:-9009px; display:inline-block; overflow: hidden; zoom: 1; *display:inline;}
a.lnk_locked { background-position: -1px -217px; }
My CSS just for IE7
a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{ text-indent:20px; padding-left:-20px; width:18px;}
I just wanted to add for "others" (even though it not strictly related to the topic and not the ops problem).
Please ensure you use a "px" for your value. i.e. -9999px not -9999.
I've just spent 10 mins trying to debug why this didn't work. Staring at the value right in front of me.
I've been doing alot of Silverlight lately and so my mind didn't flip over to CSS markup requirements fast enough. Grrr.
You must include a unit of measurement.... or else it will just silently fail.
The solution that I found to my text-indent woes in IE7, and something that I feel should be added to this thread is the following:
Doesn't work:
text-indent: -900009px;
Does work:
text-indent: -9999px;
I didn't know there was a limit? I guess there is.
Don't use text-indent. Try this one instead:
display: block;
height: 0;
padding-top: 20px; //The height of your button
overflow: hidden;
background: url(image.png) no-repeat; // Image replacement
Works in all browsers including IE6.
I tried all of the above with no success. I had to add a float:left before it picked up the text indent. IE7 is crazy, and by crazy I mean awful.
Here is some CSS I'm using that works for me in IE and doesn't rely on text-indent
.sprite {
width:100%;
height:0px;
padding-top:38px;
overflow:hidden;
background-repeat:no-repeat;
position:relative;
float:left;
display:block;
font-size:0px;
line-height:0px;
}
.sprite.twitter {
background-image:url(/images/social/twitter-sprite.png);
margin-top:8px;
background-position: 4px 0px;
}
#social-links a:hover .sprite.twitter {
background-position: 4px -38px;
}