I see no reason why this shouldn't work in all browsers, here is my css for anchor tag :
.myButton{
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #D8DFEA !important;
color:#3B5998;
cursor:pointer;
font-size:20px;
padding:10px;
}
Here is how it looks in IE7 :
And here is how it looks in other browsers :
HTML is nothing unusual as well :
Beta
All of this is inside table, this anchor html is wrapped around with :
<tr>
<td><a>...</a></td>
<tr>
I don't think this has to do it with anything but I mentioned it just in case, so the button is missing border top, any indications what might cause this?
If the usual zoom:1; isn't working try float:left; or display: inline-block;vertical-align: top; but the first thing id do is serving IE7 margin-top:1px or position:relative;.
You probably just need to trigger the magic HASLAYOUT.
As an alternative you could style the TD instead.
Related
It seems logical that if you want a 1px wide black border around an iframe, you apply same rule as if you want the border around anything else. But this code doesn't work:
#myiframe{
border:1px solid black;
}
The border goes on the left and top of the iframe, sometimes (unpredictably) the bottom of it, but never the right of it. Why would it not just apply it consistently around the iframe??
I only have this problem in Google Chrome.
Try to add this..
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
outline:none;
outline:none and appearance:none will delete default browser appearance.
As pointed out in the comments on the question, I was on an out-of-date Chrome version. On the latest stable version, there is no bug.
try to wrap a DIV
html
<div class="wrapper">
<myiframe>
</div>
css
.wrapper {
float:left;
border:1px solid #000;
}
We can get unique border around our iFrame, by using attribute frameBorder.
So try <iframe src="" frameBorder="1"/>
css:
* {
margin:0;
padding:0;
}
.blue-button
{
width:auto;
display:inline-block;
}
.blue-button:before
{
/*background-image:url('blue-button.gif');*/
background:red;
width:5px;
height:21px;
display:block;
content:"\00a0";";
float:left;
}
.blue-button span
{
background:#00AEEF;
display:block;
height:100%;
text-align:center;
margin-left:5px;
padding:3px;
padding-left:8px;
padding-right:8px;
color:white;
}
body:
<div class="blue-button"><span>abcdef</span></div>
So basicly this is just a div with prepended div using before. I want span inside .blue-button to resize to the text. It works fine on Chrome but fails on IE/FF - in those browsers blue div is in the next row (it should be in the same row as red div). How I can fix it?
This is a problem due to IE being unable to recognize the attribute
display: inline-block;
IE explorer will display it inline, and to achieve the desired effect you need to give the content 'Layout' using
zoom: 1;
or similar.
This article was helpful to me, check it out to fully understand what I'm trying to say!
http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
I just set up a jsfiddle with your code, and FF puts the red and blue parts on differnt rows too. There's an error in your CSS which, when I fixed it, fixed FF and also ran fine in IE8. Which version of IE are you having trouble with?
content:"\00a0";";
should be
content:"\00a0";
Can you confirm that this is just a typo, or does it fix it for you too?
I am trying to get a label to fill a table cell whilst having some sort of padding applied to the label.
I have tried a method I found through my searches but this does not seem to work... here is my CSS:
tr {
height: 1px;
}
td {
height:100%;
}
label {
background-color: #DCDCDC;
display: block;
font-weight:bold;
vertical-align:top;
text-align:right;
padding: 8px 5px 8px 8px;
margin: 1px 3px 1px 0px;
min-width: 120px;
min-height:100%;
height:auto !important;
height:100%;
}
Any help with this would be gratefully appreciated
From the given CSS it looks like there may be browser default padding on the table cells.
td {padding: 0;}
label {display: block; padding: 1em;}
seems to do the trick for me : http://jsfiddle.net/Fb7bS/
But a more complex table and/or inherited styles from elsewhere may add complications.
Hy,
I came over this problem long time ago. It seems that some sort of webbrowsers add a standard padding and margin to tables. How much they add, always depends on the webbrowser. But to overcome this problem you should consider the method of css reseting. What's that ? You simply add a .css file you include in your HTML Page which setts all margins/paddings and other formations done by default to zero. With this you avoid such problems.
There goes the link for CSS Reset: http://meyerweb.com/eric/tools/css/reset/
Well, in older browsers, a label cannot be set as a block level element. You could try placing a div within the label and transferring the label's styles to the div, and see if that fixes your issue.
Though also for height: 100% to work, the element must be absolutely positioned, and the parent element relatively positioned, but in some browsers table elements like td can't be relatively positioned, either. Also unless the td is meant to fill the entire length of the screen vertically, the height: 100% on both elements is unnecessary anyway.
I removed some of the "unnecessary" code and changed your format a bit here, though I'm not sure exactly what you wanted, so it might turn out to not be so unnecessary and that something else was just missing: http://jsfiddle.net/mGykJ/1/
Could you see if that's more like what you had in mind? Though if you could post your HTML, that would be helpful.
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.
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;
}