I'm having some issues with a button in IE7. In everything else the button appears like this:
However, in IE7 the button appears like this.
I've tried to put together a jsfiddle with the code that is affecting the overall form and the fiddle seems okay (even though it is missing the image references) so I don't understand why IE7 is throwing a fit with this button and making it appear on the right of my content.
JsFiddle Code
JsFiddle
If i open this one in IE it works fine for me. any way give
<div class="logindetails password" style="clear:both;">
to the above div.
This should fix the issue in IE 7
div.links {
clear: both !important;
margin: 0 !important;
padding-top: 15px;
}
In the stylesheet, icams_specific.css find this section and replace all of it with this:
div.widget-container > div.search > form.search > div#search_links > input.button {
background-color: #E7E7E8;
background-image: url("/incl/images/search.png");
background-position: 50% 50%;
background-repeat: no-repeat;
border: medium none;
cursor: pointer;
height: 35px;
margin-left: 257px;
margin-top: -35px;
padding: 0;
transition: all 0.25s linear 0s;
vertical-align: top;
width: 38px;
}
To move the search button left right, change margin-left: 257px; to the required value.
You will also need to keep the change made to div.links above
Related
I get some HTML and CSS code.
https://codepen.io/lbebber/pen/pvwZJp
.menu-item,
.menu-open-button {
background: #00bcd4;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
color: white;
text-align: center;
line-height: 80px;
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
}
I tried to use this code, but I did not succeed pushing the hamburger menu to be at the bottom-left corner.
I think something outside the part I copied here is blocking the menu to get it to the bottom.
The second thing, I wanted to use little pictures instead of icons.
Do you have an idea how?
When I add a picture, I am getting weird behavior.
Thank you for your help in advance.
Code is Fixed!
So in your .menu attribute, I added the following. These attributes move your menu (.menu) in a fixed position in the bottom left of the screen.
position: fixed;
bottom: 0;
left: 0;
z-index: 998;
I removed the margin-left:-80px; as this caused your menu to warp halfway off the left of the screen when I added the other attributes above. So your .menu attribute should look like this when the proper attributes are edited:
.menu{
#extend %goo;
$width:650px;
$height:150px;
position: fixed;
bottom: 0;
left: 0;
z-index: 998;
padding-top:20px;
padding-left:80px;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:left;
}
This resulted (on codepen) with your site looking like this. Of course, the gooey menu opens as shown below. I cannot insert the code into stack overflow as there were issues with layout and content. But if you make the changes to your CSS code above, you can see your menu working
[
I am working on this page: link to page.
Inside h2 I have before and after elements. In IE they are too big, original width and height these images are not working. When I am trying to resolve this problem, in FF and Chrome everything is getting even worse.
In Edge things are a little bit different - I have figured out a way to make images smaller, but before element is inside h2 text.
Here are the examples:
Normal (from FF and Chrome)
A little strange (from Edge)
So crazy (from IE)
CSS code:
h2{/*How I am displaying h2 elem */
text-align: center;
width: 80%;
margin: 45px auto 115px !important;
text-transform: uppercase;
color: #fff;
}
h2::before {
content: url(img/pepper.svg);
margin-right: 10px;
position: relative;
height: 50px;
}
h2::after{
content: url(img/apple.svg);
margin-left: 10px;
position: relative;
height: 50px;
}
#supports (-ms-accelerator:true) { /*Trying to resolve problem in Edge */
h2::before {
position: absolute;
}
h2::after{
position: absolute;
}
}
Try making the positon of before and after leftmost and rightmost.
If it doesnt work,try making pixels to %.
As #ankit says, removing width: 80% is doing right on IE. Also removing part with supports resolved problem with Edge.
Another approach (assuming you have control of the HTML): add an empty right after the input, and target that in CSS using input+ span:after
.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input+span:after {
content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" /><span></span>
</div>
I'm using this approach in AngularJS because it will add .ng-invalid classes automatically to form elements, and to the form, but not to the .
I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding​ style.
So on my website I have css role over buttons, and everything displays as it should in Chrom but in IE and Firefox the height is larger so you can see too much of the image.
Here's the website its happening on http://www.dillonbrannick.com/ I'm just focusing on one of the buttons, but it is happening with all 4 of them.
Here's the code that effects the home button.
Inside the body and nav tags
<nav class="body">
<div class="links nav" id="home-nav">
<a href="#"
onclick=" toggle_visibility_1('illustrations'); toggle_visibility_1('illustration-sub'); toggle_visibility_1('painting-sub'); toggle_visibility_1('paintings'); toggle_visibility_1('animation'); toggle_visibility_1('contact'); toggle_visibility_1('box'); toggle_visibility_2('homeimage'); toggle_visibility_2('homebio'); toggle_visibility_2('facebook'); toggle_visibility_2('google');">
</a>
</div>
</nav>
I'd imagine the Javascript doesn't effect it as all it does is diplay on/off elements so it has nothing to do with dimensions.
here's the css:
.body{
position:absolute;
left:50%;
top:50%;
}
nav{
margin: -125px 0 0 -44.5px;
}
.nav{
position:absolute;
width: 89px;
}
.nav a{
height: 107.5px;
}
.links a{
display: block;
margin: auto auto auto auto;
cursor: pointer;
outline: transparent solid 0px;
}
#home-nav {
margin: -60px 0px 0px -140px;
}
#home-nav a{
background: url('http://dl.dropbox.com/u/70582811/home.link.png') no-repeat left top;
}
#home-nav a:hover{
background-position: left -107.5px;
}
I know the body class probably doesn't make any difference to the problem, but I just wanted to show everything that effects the button.
As you can see in these two images(left:Chrome, right: IE and Firefox). There is blue appearing just underneath the grey bar that shouldn't be there, that is part of the other half of the image that is then shifted up onrollover. As you can see on my website.
Thanks in advance,
Dillon Brannick.
I think your problem is the use of .5
.nav a{
height: 107.5px;
}
Browsers probably handle that differently. I don't think there exists something like half a pixel.
Edit : just try 107px, and then 108px. I think one of them should give u the desired result. 107px probably. Firefox takes 107.5px as 108px.
I'm just trying to use this little trick I saw in one of my web design magazines to make a little image rollover but I'm having just a small bit of trouble. My attempt was a terrible fail lol. I just want to see the top half (42px tall) and then the bottom half on rollover (-42px obviously)
width is also 42px. Could someone write something up to make that happen?
image:
http://img826.imageshack.us/img826/6568/homebi.png
It's all about the initial (non-:hover) and final (:hover) values of background-position.
#test {
height: 42px;
width: 42px;
background-image: url(http://img826.imageshack.us/img826/6568/homebi.png);
background-repeat: no-repeat;
background-color: transparent;
background-position: top; /* <-- key step #1 */
}
#test:hover {
background-position: bottom; /* <-- key step #2 */
}
Demo
As per your comment re: wrapping the <div> with an anchor (<a>), here's what to do:
Swap the <div> out for a <span>. This is because valid children of anchors must be inline elements
But inline-displayed elements won't behave accept dimensions! So, fix this new problem with one additional CSS property: display: inline-block on the span.
Demo 2
Try this:
<style type="text/css">
.menu {
}
.menu a {
float: left;
display: inline;
width: 42px;
height: 42px;
text-decoration: none;
}
.menu a span {
display: block;
overflow: hidden;
height: 0;
}
.menu .home {
background: transparent url(http://img826.imageshack.us/img826/6568/homebi.png) 0 0 no-repeat;
}
.menu .link:hover {
background-position: 0 -42px;
}
</style>
<div class="menu">
<span>Home</span>
</div>
Heres the bare bones for an image rollover.
the css
.rollover{display:block; height:42px; width:42px; background:url(http://img826.imageshack.us/img826/6568/homebi.png) top;}
.rollover:hover{background-position:bottom;}
.rollover span{display:none}
The html
<span>Home</span>
The important part is the background position, which on the buttons normal state is set to 'top', when you rollover the background postion is 'bottom'.
Assuming your image which contains both button states is 84px high this will work fine.