I have a critical HTML issue: a weird white line appears on buttons in Internet Explorer.
Example of Original Mockup -
Button HTML -
<input type="button" Class="buttonAll" value="Regenerate" onClick="Captcha();"/>
<input type="submit" value="Save" onclick="" class="buttonAll">
My UI HTML does not include any Doctype and I have a criteria to do only Cosmetic changes.
I tried to Apply CSS in 2 ways:
Using BG Image -
CSS for the above:
background:#92110d url(../images/bg-all-buttons.gif) repeat-x 0 0;
Using CSS Gradient -
CSS:
input[type="button"], input[type="submit"], .buttonAll {
overflow:visible; display:inline-block; cursor:pointer;
outline:0px none; width: auto; vertical-align:middle;
margin:3px 6px 3px 0px; padding:2px 6px; border:1px solid #804240;
/*background:#92110d url(../images/bg-all-buttons.gif) repeat-x 0 0;*/
background: #92110d; background-repeat:repeat;
background: -webkit-gradient(linear, left top, left bottom, from(#f04b47), to(#92110d));
background: -moz-linear-gradient(center top, #f04b47, #92110d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f04b47', endColorstr='#92110d');
text-align:center; text-transform:capitalize; color:#fdfad9; font-size:11px!important; }
Both of the above code works well in FF and Chrome.
Is there is any possibility that it happens due to Events Focus / Active / Blur
I want to know how can I remove this white Line?
you need to remove border from input field for example input[type="button"], input[type="submit"], .buttonAll { border:none;}
Vipul above code is right. reason is your doctype declaration. because there is two type of document modes 1. strict mode, 2. quirks mode. Quirk mode doesn't support W3C modern standards.
Related
I'm trying to remove this border around my PayPal input as well as center align the text.
It works fine in Firefox but bugs in Chrome.
Here's a link to what I'm working on.
http://jsfiddle.net/R28f7/1/
I've tried this focus fix, but no luck.
textarea:focus, input:focus{
outline: 0;}
I have been trying to fix this for a while now and any help would be appreciated. Thank you!
Are you able to change the HTML markup of the input type to button ? Doesn't seem like you are using it as an image anyways.
<button type="submit" class="button_fix">Order Now</button>
Since you are trying to align your text to the center, remove the padding from the right and left and apply text-align:center; Here is an updated fiddle:
http://jsfiddle.net/DL6QU/7/
Try to use like this: DEMO
HTML:
<input type="submit" class="button_fix" name="submit" value="Order Now">
CSS:
.button_fix {
display:block;
background-color:#c0392b;
text-align:center;
width:200px;
padding:10px 35px;
color:#fff;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 8px;
/* Firefox 1-3.6 */
-moz-border-radius: 8px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 8px;
font-size:2em;
font-weight:200;
font-family: Helvetica, sans-serif;
margin:10px auto 0px auto;
outline:none;
border:0;
}
Hope this helps
I have styled submit button with custom background image. But it shows differently on different browsers.
Almost all browsers shows it correct:
But on 2 it have extra height:
Can anyone point what wrong is with my markup?
CSS:
input[type="submit"]{
background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px no-repeat;
width:30px;
height:30px;
border:none;
float:left;
margin:30px 0 0;
cursor:pointer;
}
HTML:
<form>
<input type="text" class="placeholder" value="Search" />
<input type="submit" value="" />
</form>
Tested:
IE 8.0 good
IE 7.0 good
iPhone good
Chrome 24.0 good
Firefox 18.0.2 good
Safari 5.1 (Mac OS X 10.7.1) good
Opera 12.14 (Windows 7 32-bit) good
Safari 5.1.7 (Windows 7 32-bit) extra height
Opera 11.51 (Mac OS X 10.7.1) extra height
Live demo on jsfiddle.
It looks to me the height of the textbox is different not the submit button. Try setting the height of the textbox.
I see in the second search bar, the text is italic and looks slightly smaller. I think the search bar is adjusting to the text and making itself smaller, which makes the search icon appear larger.
What you probably need to do is add this to your stylesheet where the placeholder is controlled:
{font-style:normal}
Try this.
It will give a fix height to the element.
input[type="text"]{
margin:30px 0 0;
width:226px;
color:#999999;
font-size:12px;
font-style:italic;
border:1px solid #cccccc;
border-right:none;
background-color:#ededed;
float:left;
height:28px;
padding-right: 7px;
padding-left: 7px;
line-height: 28px;
}
Submit buttons & input textfields have different default values for borders, margins, padding, etc. First of all you have to put this to both submit buttons and textfields
margin:0;
padding: 0;
border: none;
outline: none;
I'm currently doing the redesign for this site: http://www.palosverdes.com/rpv2012/ and have run into a problem with repeating a gradient inside a div (cnews). The issue is that when the gradient is repeated on IE7, there is a color problem. It almost seems as if the blue on the image is lightened somehow. When I set the attribute to no-repeat, I don't get the rounded edges effect I'd like the achieve.
Here's the code in question:
<div class="box-noshadow" id="cnews">
<div id="spotlight">
</div><!--spotlight-->
<div onmouseout="document.getElementById('stop').start();" onmouseover="document.getElementById('stop').stop();" id="stopmarquee">
<div align="center" id="toptitle">
CITY NEWS & EVENTS
</div><!--toptitle-->
<div id="cnewscontainer">
<iframe align="middle" width="400px" scrolling="no" height="100px" frameborder="0" src="scroll_file_b/break2.cfm"></iframe>
</div><!--cnewscontainer-->
</div><!--stopmarquee-->
</div><!--cnews-->
and the relevant CSS:
#cnews {
width: 100%;
background-image:url(images/cnews-back.jpg);
float: left;
padding: 5px;
font-family:Arial, Helvetica, sans-serif;
overflow:hidden;}
#spotlight {
width: 50%;
height: 200px;
background-color: yellow;
float: right;
padding: 5px;}
.box {-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(PIE.htc); /* This lets IE know to call the script on all elements which get the 'box' class */}
What solution can I pursue that will allow this to still render correctly in modern browsers as well? Should I use IE7-specific CSS?
Also, where can I look to see what HTML/CSS ie7 has problems interpreting compared to modern browsers?
Your width:50% on your stopmarquee is causing that item to drop down lower in IE7, instead of rising up next to the right floated spotlight div. This is causing your cnews container to expand down further, which is then causing your background image to repeat in the 'y' direction (like 3rror404 stated in his comment).
Your background image itself has a color shift within it, so that the top of the image is lighter than the lower part of the image, thus you are getting a lighter look when the image repeats in the 'y' direction.
You can correct the stopmarquee position by changing to width: 49% (which I don't think will hurt your layout), and that will probably resolve your issue. Otherwise, make the background image a solid color so that a repeat does not cause the issue.
I haven't tested it on IE quite yet.
I want to style the background image and text box shape as well as borders for my search bar on my site, [dead site].
If you visit it on Firefox or Opera and see the search bar on the left column, that's what I am going for. Now if you visit it on Safari or Chrome, you should see that it is replaced by their default input text field, which makes the text illegible.
How do I style my text-box even on these browsers?
To be clear, on your site you are actually styling a search field and not a text field.
<input type="search"> <!-- This is what you have -->
vs
<input type="text">
To remove the default styling and allow your css properties to work you need to change the -webkit-appearance property. This should do the trick:
#s {
min-width:98%;
background-color:#2a2a2a;
color:#d3d3d3;
border:2px solid #000000;
font-size:.85 em;
height:1.9em;
display:inline !important;
border-radius:5px 5px 5px 5px;
outline:none;
-webkit-appearance: none; /* add this */
}
style.css
body {
background: #999 url(your_image_here.jpg);
}
.search {
width: 295px; /* 300px less the 5px of left padding*/
height: 30px;
line-height: 30px; /* same as height, then you can vertically align the text in the middle*/
vertical-align: middle;
font-size: 24px; /* this gives 3px at the top and bottom */
background-color:#ccc; /* a light grey background in the text box */
color:#333; /* dark grey font colour */
padding-left: 5px; /* spacing (padding) within the left hand side of the text box */
border: 1px solid #000; /* 1px wide black border around the text box */
display:inline !important;
border-radius:5px 5px 5px 5px; /* slightly rounded corners, the order of the values is TOP RIGHT BOTTOM LEFT */
outline:none;
-webkit-appearance: none; /* this removed the default styling */
}
index.html
<input type="text" class="search" value="search"> <!-- I've given the text box a value (search) so that you can test your css edits quickly without having to type in a value every time you refresh the page -->
I think that this answers your question. Get back to me in the comments if I can be of any further assistance.
Here is a link to jsfiddle where you can do a little rapid prototyping of my example.
http://jsfiddle.net/mstnorris/nVDbA/
This is a button that has been originally implemented and styled in Silverlight.
How to implement this button in HTML/CSS? Note the different gradients in the border and the button background and also the rounder corners in the border. The border width should be adjustable but uniform size around the button.
The red colour in the example picture is page background, not part of the button.
Button screenshot http://i52.tinypic.com/2vsetlw.png
UPDATE: Forgot to mention, I would prefer a solution without images, ie. pure-css. Css3 is fine, I don't need to support IE6-8 for example.
I know it's not the most helpful thing to spoon-feed sometimes, but I had needed a break from work.
Demo: http://jsfiddle.net/wesley_murch/SzHQZ/
Looks nice in FF4 and Chrome, IE falls back to decent looking (though you could fix it with PIE).
Here's the CSS I used, I got the gradient code from some random online generator so it might not be optimal. There's too much contrast as well compared to your image, so just fine tune it.
<button>
<span>
Sign in
</span>
</button>
button {
border:0;
padding:3px;
background:#735544;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.18, #271D1B),
color-stop(0.59, #735544)
);
background-image: -moz-linear-gradient(
center bottom,
#271D1B 18%,
#735544 59%
);
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
--- Needed this break to get markdown to behave...
button span {
display:block;
color:#fff;
font:900 18px arial;
text-transform:uppercase;
padding:.35em 1.3em;
background:#382B25;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.18, #382B25),
color-stop(0.59, #C2A489)
);
background-image: -moz-linear-gradient(
center bottom,
#382B25 18%,
#C2A489 59%
);
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
Looks like the boring version of http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba :)
you can take the example from there and just change the colors, probably want to replace
border-bottom: 1px solid #222;
with something like
border: 3px solid brown;
The example above uses an alpha-blended png for the gradient, but you can also go for css3 gradients, see http://css-tricks.com/examples/CSS3Gradient/ for a good cross-browser example.
Just save the image as a background
<input type="submit" class="btnSqueareInput" name="commit" value="SIGN IN"/>
btnSqueareInput {
background:transparent url(../images/sqaure.png) no-repeat;
border:medium none;
color:#FFFFFF;
cursor:pointer;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
height:32px;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
vertical-align:top;
width:79px;
}
where square.png is rge image of the button w/o 'SIGN IN'