Can ayone explain why my form is broken in Firefox? I have tried various ways to correct it, but keep getting the same result. I would be grateful if someone could tell me where I am going wrong with it. I have included grabs so you can see the problem. I have also posted the code at fiddle. I also note that at fiddle i am using IE8 and the layout is broken there also but not in my broswer. Many thanks.
Grabs:
http://img20.imageshack.us/i/ffformincorrect.png/
http://img195.imageshack.us/i/ie8formcorrect.png/
Fiddle: http://jsfiddle.net/tdfLQ/
I tested your jsfiddle link in Firefox,Safari,Chrome and IE 8 and they all render it the same way, and Aziz' solution just require some tweaks, try looking at: http://jsfiddle.net/tdfLQ/1/
In addition to removing the width like Aziz suggested, I have just added margins to the fields and send button.
A quick google came up with this page, which looks helpful (maybe a little old): http://www.websiteoptimization.com/speed/tweak/forms/
Remove width: 350px; from .fb-input-right-con
Here is a working example of what you wanted: http://jsfiddle.net/tdfLQ/8/
Related
I've been trying to achieve cross-browser functionality for a drag/drop input file, i've come pretty close but this last thing i can't quite figure out. As the title says, it's working just fine in Chrome / IE but in firefox it's not behaving the same. I've left out the drag/drop functionality in my fiddle for simplicity as it's not relevant to the problem.
<div class='browseWrapper'>
Drag & Drop Images Here</br><em>Or click to browse.</em>
<input class='browseImage' type='file' />
</div>
Here's what i've got so far: http://jsfiddle.net/sPJ9u/
Thanks in advance.
EDIT: Sorry i should have been clearer in explaining the problem. If you inspect the input element in firefox you'll see that the overflow:hidden isn't hiding the overflow as it does in Chrome / IE, causing the offset to be out.
Firefox Version: 26
Check out this related question: Why does overflow:hidden not work in a <td>?
It's because you have display set to table-cell, which makes it behave as if the div is actually a td.
You can use this structure in your css:
-moz-overflow:hidden;
First of all, I've been searching for an answer in Google and forums, but didn't find, sorry if it has been asked before and if you can link me to an answer it would be great.
Here's my problem: I have a web calculator made of a table with buttons inside. Here's a link. If you open it with IE it will be all messed up, so don't. I'll work on it later. On FF the rowspaned buttons do not stretch up and down to cover the hole cell, on Chrome it looks as intended. How do I make it look good on FF too? thx in advance to responders.
Using a <table> for layout is a bad idea for numerous reasons that don't need to be re-hashed here. What matters for you is that FireFox displays tables differently than other browsers and you are going to have a hard time laying out your buttons as you want them with that approach.
Instead, just ditch the table and absolutely position the buttons, or float them.
Edit: A floated layout works nicely:
http://jsfiddle.net/gilly3/7rL97/5/
JSFiddle's frame messes up the display if you view it in chrome, but if you view it in chrome outside of the frame, you can see it works fine in chrome as well: http://fiddle.jshell.net/gilly3/7rL97/5/show/
#yekhezkel gilly3 is probably right. but i found solution to your problem. It works in firefox and chrome. I have not tested in IE.
step1: add a class of fix to all the td's containing rowspan=2. It should look something like this.
<td rowspan="2" class="fix">
<button onclick="modifyInout('+')">+</button>
</td>
Step2: add the following css for fix class
.fix {
height: 70px; /* double the value of td height you specified earlier */
}
Let me know if it helps.
Here is the jsFiddle: (open in firefox or other browser to test it.)
Regards :)
Read this and try to add padding
padding: 18px 6px;
Padding will stretch your button
I just noticed that on my website I have lots of unexpected space, and I don't know where it is coming from.
Here is my web: http://freshbeer.lv/new/latvian/index.php
As I am unsure where problem comes from I can't post code (if I post all code it would be to damn long)
So if someone can suggest are that's causing a problem, I'll post code here for you.
Remove the height:1511px from style.css line 287
See below image
This is creating pretty much space from your CSS file (style.css):
#slideshow-right {
height: 1511px
}
It's working fine if you simply remove the height attribute from that CSS rule.
here is the issue, it was a TYPO only 1 ruined this
#slideshow-right {
height: 1511px
}
it was supposed to be 151px only ; :)
one suggestion use Firebug to such issue they detect problems easily.
hope this will help you in future also.
in-case you don't know : what is firebug and how to use this
I have this page at
http://kornar.co.uk/example.html
But it doesnt render HTML. I know its there because when I check view source the HTML code is there, on my localhost it works perfectly, thanks for your help!!
Well to start, js/jquery.js is missing so none of your js is going to run... all the tabs are hidden so without the js the code in the tabs won't be come visible...
Its works correctly for me.
There is possibily two explanation why it do not works for you :
- Your Browser cache need to be cleared
- Your DNS cache need to be cleared.
Try both and let us now if it works
Line 90 in your layout.css file says:
.tab {
padding: 16px;
display: none;
}
If you remove the "display:none" bit, you'll see more.
Try to use Firebug when debugging stuff like this, it's awesome!
You have .colorpicker set to display:none in the css file.
Is it possible to turn off skype number recognition with some html or javascript? I'm NOT interested in turning it off only for my machine but for anyone visiting my page. I have seen the
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
business but it does not work for me with Firefox. I've also seen comments that this meta is not recognized in skype 4.2.
This is quite a problem since skype is recognizing data in table as phone numbers. For example, the line with two angles
00 23 58 17 45 00
is recognized as a phone number in Chad!
I know I could add some invisible rubbish to these numbers but there are a bunch of them and that's pretty ugly.
You could always add the following CSS:
#skype_pnh_container, #skype_plugin_object, #skype_highlighting_settings {
display: none !important;
}
yes its possible.
you have to split the number in your html code, so that it is not recognised as a whole.
seperate it by an zero width span or an transparent image or something.
it could even be enough if you wrap the routing code and the number in seperat span tags. or better floating left div tags...
i have no skype installed so you have to try it out, but thats the way to go.
update:
you could as well see what html code is generaged and remove it with a javascript code but thats deadly inefficient and unnecessary
SOLUTION: it seems to be enough to use the soft hyphen character
heres an article on that: http://www.ambrosite.com/blog/hide-phone-numbers-from-skype-using-the-html-soft-hyphen
I saw over the interweb a lot of possible solutions javascript solutions, meta tags, css and maybe I found an hack actually working for my websites, I tested on some computers and it work and I think it will work until skype don't change something in their code.
I was looking what is the skype exactly doing on our pages, and it creates some span around the phone numbers, as you already said, but it even add an <object> tag at the end of the document, just after the body closed tag.
And here I saw the trick! Just before that object there is a configuration tag:
<span id="skype_highlighting_settings" display="none" autoextractnumbers="1"></span>
This is added dynamically by the plugin! but here the solution become obvious, to finally stop skype messing with your design and avoid changing phone number the solution is to insert very early in the document the following tag:
<span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span>
notice the autoextractnumbers="0", here is the trick. The document will not validate anyway with that tag because there is no attribute "autoextractnumbers" but i noticed that it works even if commented:
<!-- <span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span> -->
And that's it! Enjoy your webpages free from messy plugins! And your web page will still validate correctly. Hope it works for you too! I have tested on a couple of computer 3 different browsers and 2 different skype versions, for now it works for me, let me know if it works for you too and if it works share it :)
I would try adding the CSS:
span.skype_pnh_container {
display: none !important;
}
Unfortunately I can't test it because I can't get the toolbar to work in Firefox, and IE's developer tools aren't cutting it. If it doesn't work, I'd try adding it through javascript after the page loads.
Try this JavaScript:
http://www.codeblog.co.uk/2010/04/07/web-development/how-to-stop-skype-toolbar-from-changing-numbers-to-skype-buttons-ruining-your-website-design-update/
All of the solutions provided to this question are no longer working, or aren't very efficient. The following CSS will remove the Skype Click-to-Call buttons very efficiently.
body span[class ^= "skype_pnh_print_container"] {
display: inline !important;
}
body span.skype_pnh_container {
display: none !important;
}