see http://demo.tutorialzine.com/2009/09/fancy-contact-form/demo.php
it is same contact form that i integrated in my website. it works perfect except input text boxes WIDTH. how could make it same as looks in Mozilla Firefox. Any idea, suggestion for it.
Thanks
In your example, the styles are set differently in both browsers (different inline style and class attribute values)
Related
I'm building a form using Hubspots native form builder and want the placeholder text within each field to be center aligned. This works fine for all the text input fields, but doesn't work on the Select drop down when viewing on IOS mobile devices (tested on Safari, Chrome and Edge for IOS). It appears to work fine on Android.
I've tried various CSS methods including
text-align:center
input, option, select[id="idstring]::placeholder, ::placeholder, ::-webkit-input-placeholder, :-ms-input-placeholder, input::-moz-placeholder and a few more.
Completely at a loss on how to get it center aligned"
Can you try your use case via Safari Technology Preview and if it is not fixed, can you raise it on bugs.webkit.org?
Attaching standalone testcase to reproduce this on WebKit bugzilla would be great help.
I've got this project that I'm working on, and it's displaying differently in different browsers (imagine that). The CSS works fine in every browser I've tried (chrome, safari, firefox) except for IE11 (again, imagine that). Here's a picture of the IE version:
Here's what it's supposed to look like:
Now, I've looked through the dev tools on both Chrome and IE, and here's the results.
IE:
Chrome:
So, as you can see in the picture, in IE, the bwizard-steps button::before and bwizard-steps button::after are marked out, yet they are working as intended in Chrome.
Any ideas why this would be? I've looked it up, and IE11 is supposed to support the ::before and ::after tags. Yet it is clearly ignoring them. I've even tried going into compatibility mode for IE, and that just looks even worse.
I have had similar problem.
Solution that worked for me was giving the button overflow: visible;
Working example (IE9+): http://jsfiddle.net/aBfF8/1/
The problem is likely that you have button tags as direct descendants of ul tags. In valid HTML markup, the only direct children of a ul should be li.
You should wrap you buttons in li tags - but then you're going to have to make some CSS changes so that your list items aren't vertical. float: left; on them among other changes to make them appear the way you want.
Edit: I can provide a better-detailed solution of exact improvements you can make if you provide me with the appropriate HTML and CSS (ideally in a jsfiddle)
I have a HTML page where i have div to show help as shown in image above at bottom.
I also have combo box (select input) which is comming on top of this help div in IE 6.
For other browser and and IE6+ versions, it is working fine.
Is there any CSS hack for this issue for IE 6?
This is a very famous and old bug with IE6. What you need to do is to have an iframe before the div. This bug is quite well documented. It happens because in IE6 select boxes were ActiveX controls and were meant to be above all the elements of the page. iframe is also an ActiveX control and can be set above the select box. You can read up about the hack on this website http://www.javascriptjunkie.com/?p=5.
I am pretty sure a similar question has been asked around on SO as well but I couldn't find it.
There are well-documented CSS hacks for all the versions of IE.
For IE6, use the underscore hack -- put an underscore character at the front of the selector to target just IE6.
This page has full details: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
As i know, by default IE6 will put above the other elements.
You could hide them (display: none) when this div.help is shown
I have a form with text area and defined resize:both in css.
However, the resize handle / icon is missing on IE and Firefox but visible in Chrome. How can I fix this, or does these browser doen't support it.
Note that I'm using Twitter Bootstrap CSS as my CSS framework.
In Firefox 14.0.1, the handle disappears when you change the CSS border property on a textarea in any way - color, width, style, whatever. If you leave it as default, then the handle is visible. Could be a bug.
Check out the support table. No support in IE yet. Support exists in Firefox, and my test just confirmed this—but the handle is a little less noticeable than in Chrome:
Perhaps there is something else in your CSS code that overrides the setting, in a manner that affects Chrome but not Firefox.
I want to style my drop down box so that instead of using the OS's default styles, I can replace both and with custom background images. Is there a solution that works in all major browsers (IE, Firefox, Chrome, Safari) and also for all OS's (Windows, OSX, Lunix). I'm aware that OSX has their own type of drop down boxes that are particularly hard to style with css.
As suggested here, I think jqtransform is what you're looking for.
Scroll down the page to see a demo. In addition to other elements, drop down boxes are there.
All the way at the bottom it says...
Just edit the css file to customize your form, that's it.