My Login-Form doesn't work on FIREFOX.
You just can't write inside the fields (or at least it appears like that).
In Chrome everything works fine and also in IE, as far as IE allows it.
Here is my fiddle:
http://jsfiddle.net/W39EA/6/
I already debugged it and found that the lines, which are causing the error in Firefox are these:
.access .form-control {
padding: 21px 15px;
margin: 10px 0px;
}
They are at the very bottom of the Fiddle.
If I remove them, Firefox works again. But I actually need them to add the necessary padding to my Input-Fields.
Has anyone a suggestion for solving this problem?
It's because you have so much padding on the input fields. You could just set the height of the input field, and then only add a bit of top and bottom padding. -
If you change the input CSS to:
.access .form-control {
padding: 5px 15px;
margin: 10px 0px;
height:40px;
}
That should fix the problem - jsfiddle.net/W39EA/7
I think this problem came beacuse Firefox uses box-sizing property for input is different from the Chrome and IE.
So that I have added "box-sizing:content-box" in your css. After that I got the same kind of results in both the browsers. You can reduce the padding size based on your requirement now.
.access .form-control {
padding: 10px 7px;
margin: 10px 0px;
-moz-box-sizing:content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
Related
I want to set in % the height of a div included in a fieldset,
but browsers don't calculate the same way the inside height of the fieldset when you use legend !
Firefox: height: 100% consider the height of the legend: it's ok.
Chrome: height: 100% does NOT consider the height of the legend: it overflows.
Internet Explorer: height: 100% does NOT consider the height of the legend: it overflows.
1. Do you know a clean solution to have the same result in the 3 browsers?
2. Which is right compared to W3C recommendations?
Here is the code used to make the test:
<html>
<body>
<fieldset style="height:60px;width:150px;">
<legend>Legend</legend>
<div style="height:100%;width:100%;margin:0;padding:0;background-color:#FF0000;">
DIV : height 100%
</div>
</fieldset>
</body>
</html>
This is an interesting case.
To your 2nd question: It might arise out of W3C HTML5 standard spec being very vague of the visual representation of <legend> element. There has been a long history of browser inconsistencies around <legend>.
To answer your question 1. and come up with a cross-browser consistent position of legend:
In order to get the miscalculation resolved, you have to remove legend from the content flow, for example by adding float to it. Then you need to reposition it relatively and 456bereastreet.com came up with a sibling selector clearing the float immediately after.
Demo:
https://codepen.io/Volker_E/full/zqPjrK/
CSS code on top of your inline styles:
fieldset {
position: relative;
margin: 0;
border: 1px solid #000;
padding: 0;
}
legend {
float: left;
margin-top: -1em;
line-height: 1em;
}
legend + * { /* #link: http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/ */
clear: both;
}
It is indeed browser differences (bugs?) or vague spec, which don't allow to style it consistently without taking legend out of flow.
This is an old topic, but still can be useful to someone (my solution is below).
I searched all day for a solution and did not find it. I want to display it correctly in chrome, firefox, edge, opera and IE11 (which will probably also work on IE10).
"Float" or "position: absolute;" does not solve the problem for me, because it removes the transparent background of the legend. I want to keep it on the fieldset 's border and also keep its transparent background (so as one does not see the border beneath it).
I tried with negative top/bottom margins, but then I have a problem in firefox (which infact is the only one who displays the legend correctly).
How I solved it:
I just put "line-height: 0;" (no unit) on my legend and now it displays it correctly.
This way I managed to get the full height of the filedset, from top to bottom border (without the bottom overflow), with overlapping the content with the legend.
Now this can be solved with filedset's padding (detach the content from the label and/or vertically center it with top/bottom padding on the fieldset etc.).
If you need a border on the legend, you can do it with an absolutely positioned pseudo-element (width 100%, height in px/em/rem, top 50%, left: 0, translateY -50%), because padding on legend (even with negative margins) will bring back the same problem.
I tested this in all above-mentioned browsers, on Windows 8.1.
I have not tested it on mobile or safari. I will test it on several mobile browsers (android), but if there's someone to check it on safari, it would be nice.
I was going crazy with the same issue and I've found a css snippet for normalizing fieldsets, And it goes right, in my case I had to remove some properties that are unnecesary, I've removed the old IE versions support too.
this is what I've used to solve my problem commenting unnecesary lines and IE support:
fieldset {
margin: 0px; padding: 0px; display: block; position: relative; width: 100%;
//%border-top: none !important; /* for IE7, does not work with Webkit */
//_padding-top: 3em; /* for IE6 */
}
fieldset > * {
width: auto;
//%width: auto !important; /* for IE7 */
// margin-left: 1.5em; /* emulating fieldset padding-left */
// margin-left: 1.5em !important; /* for IE7 */
}
fieldset *:first-child + * {
// margin-top: 3em; /* emulating fieldset padding-top */
}
fieldset:last-child {
margin-bottom: 1.5em; } /* emulating fieldset pading-bottom */
legend {
width: 100%;
//%width: 100% !important; /* for IE7 */
position: absolute;
top: -1px; left: -1px; /* hide the fieldset border */
margin: 0px !important; /* suppress all margin rules */
line-height: 2em; /* emulating padding-top/bottom */
text-indent: 1.5em; /* emulating padding-left */
//%left: -8px;
} /* for IE7 */
/* user format */
fieldset, legend {
border: 1px solid #ddd;
background-color: #eee;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
legend {
font-weight: normal;
font-style: italic;
font-size: 1.2em;
text-shadow: #fff 1px 1px 1px; }
fieldset {
background-color: #f7f7f7;
width: 360px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px; }
This is the first time I try to help on stackoverflow, usually I only read the answers. Well the original and Snippet is on https://gist.github.com/paranoiq/827956/31303920733a98805cd46915c249ec788cfca6a6
Really, really usefull to understand how fieldsets works around different browsers, hope it can save others from frustration.
Pd: Sorry if my english isn't good enough, but hope you can understand it perfectly
I have a input select box and I have to align the text in this box.
In Google Chrome, Firefox and IE <= 9 it works fine.
But the Safari don't use the padding..
Here my code:
<select class="anrede1">
<option>Frau</option>
<option>Herr</option>
</select>
.anrede1, .land {
font-family:'Roboto Condensed';
font-size: 22px;
color: #575656;
margin: 10px 10px 10px 0px;
width: 100%;
height: 42px;
text-align: left;
padding-left: 17px;
border: 2px solid #e1eef9;
font-weight: 300;
}
http://jsfiddle.net/jhne7pfe/
Some ideas to fix that?
Its a late answer but I was searching for a solution to the same problem for a while. Using text-indent shifted the elements around the input element and the padding was still ignored.
-webkit-appearance: textfield;
Using that solved my problem, hope this saves someone else time.
as far as I know W3 specs don't allow to use padding in select fields. So Safari doesn't support it.
But you can use the following instead of padding-left:
text-indent:17px;
This should work fine.
Not sure, if my last comment reply came through:
As I don't have a Safari installed here, I hope this helps. Try to use:
padding-left:17px;
-webkit-padding-start:17px;
instead of
text-indent: 17px;
The -webkit-padding-start is for chrome and safari browsers only and should be ignored automatically, if padding-left works.
Unfortunately I also have no jsfiddle account yet.
Will be done as soon as possible ;-)
I'm having a issue with the navigation bar drop down positioning in IE.
As you can see, the Adhesive Tapes drop down is positioned fine on hover but when hovering over 'Adhesives' and Sealants it is slightly out of position.
I've checked it in Firefox and it's the same but only out by a few pixels.
I've spent some time this morning trying to solve it but only have limited knowledge.
Any help would be great.
www.stickyproducts.co.uk
HTML:http://pastebin.com/z7tu6wCX
CSS:http://pastebin.com/XjnXqEN8
Thanks in advance for any help
Personally I wouldn't set the position of the drop down menu to -999. I would position it in the exact spot it needs to be and then set the visibility: property to hidden;
something like this
.dropdown_4columns_sealants {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* I would set this to position where it should be all the time */
text-align:left;
padding:10px 5px 0px 5px;
border:1px solid #777777;
border-top:none;
z-index: 999;
visibility: hidden; /* I would set this to hide the menu right where it is at */
}
then in my JavaScript I would change the visibility property to visible when you hover over the links rather than reposition it from the original -999em.
I don't think you have a problem with the dropdown, unless there is something else I'm not seeing. But I did see you are forcing a margin -9px to left. I corrected that. Here is the code corrections and the before and after pictures
#menu, .nav-cush {
margin: 0px;
}
.overhang-right {
float: right;
position: relative;
right: 0px;
}
You can actually replace those margin corrections in the css that is already made for them instead of copying and pasting that exact code I gave you. That way you don't have to use !important to overrride anything.
Since you are displaying several behaviors in different browsers. I've edited the lines below with browser hacks. I tested in all browsers and they work. Please do some testing yourself and let me know if it needs work or mark it as an answer so that others can benefit from it.
Find and replace the following:
.dropdown_4columns_adhesives {
width: 988px;
float: left;
margin: 11px 0 0 -204px; /* Chrome & Safari */
margin: 11px 0 0 -198px \0/IE9; /* IE9+ & Opera*/
}
#-moz-document url-prefix(){
.dropdown_4columns_adhesives {margin: 11px 0 0 -203px;} /* Firefox */
}
.dropdown_4columns_sealants {
width: 988px;
margin: 11px 0 0 -349px; /* Chrome & Safari */
margin: 11px 0 0 -339px \0/IE9; /* IE9+ & Opera*/
}
#-moz-document url-prefix(){
.dropdown_4columns_sealants {margin: 11px 0 0 -348px;}/* Firefox */
}
This shows your menu bar pushed to the left
This shows your menu bar and ad image corrected
A better way to handle what you're doing would be to absolute position the dropdown within the main ul#menu (set to relative). Also, take position:relative OFF of the #menu li
this way you could set the dropdown div to position:absolute; top:100%; left:0; right:0; .
The way you have it right now (handling with negative margin) is dependent on the browsers' font rendering. As you can tell this is not consistent between browsers.
Doing it this way you wouldn't have to specify anything for the individual submenus. top:100%; left:0; right:0; would be able to be used for all 3.
An alternative option would be to set specific widths on all of your top level menu links.
I am using CSS to make input button look like a link.
I've styled it like this:
input#linkLike {
background: none;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
display: inline;
vertical-align: baseline;
}
This works fine in Chrome, but there is a whitespace around button in Ff and an even larger whitespace in IE.
http://jsfiddle.net/S4nF9/5/
Where this whitespace comes from, and how can I remove it?
According to this page,
Firefox uses pseudo-elements within the button elements themselves for drawing. As you can see above, this means that padding of 2px is added to the top and bottom of this inner pseudo-element, therefore it may be removed as follows:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
So that's Firefox taken care of. See new fiddle.
(Note: the article mentions top and bottom, but it also works for the left and right padding.)
I don't have IE here, so I can't test that now, sorry.
You could give it a width value.
I have a minor CSS problem, but I'm having trouble fixing it because I don't have any computer handy with IE7 installed...
In IE8, Chrome, FF, etc. I see this (correctly):
but IE7 gives me this:
the HTML code follows:
<div id="hub">
<div class="title highlight">Faster, Cheaper, Better</div>
<p>PNMS...
the relevant CSS code follows:
#hub {} /* literally nothing */
#hub div.title {
font-size: 4em;
font-style: italic;
font-variant: small-caps;
float: left;
margin: 5px 0px 20px 0px;
width: 940px; /* same as parent container */
}
.highlight { color: #ff6633;}
p {
text-indent: 30px;
font-size: 1.3em;
line-height: 1.1em;
letter-spacing: 1px;
margin: 5px;
}
Based on visitor traffic, I need my site to be compatible with IE7 (thankfully NOT IE6). But again, guessing blindly and then running browsershots.org is not a very efficient manner.
Can someone help? Thank you.
Found this somewhere, it may help:
CSS Double padding IE7 Fix
"Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (cough download Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my navigation menu."
CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
}
"And the fix…
Just add display: inline-block to the div with double padding. That’s it… I know, it’s ridiculous."
#nav {
clear: left;
display: inline-block;
padding: 16px 0 0 30px;
}
Another alternative is the parent of the Div which is not displaying correct add the margin: 0 in CSS for it.
Found it. The CSS body tag had a line-height: 18px;
For some reason known only to Microsoft, out of IE7, IE8, IE9, Firefox 3.5~6, and Chrome, only IE7 honored that instruction for a deeply nested div 400 lines further down the CSS sheet.