Please check the following URL:
http://www.deparche.com/registro
You might want to look this:
In Firefox, Chrome and Safari it looks ok, but on IE10 and Opera it looks like this:
I have tried several things like targeting the browser with JavaScript and reducing the padding of the input text but it doesn't make any sense. There's enough space to keep the alignment of the fields.
I don't know what to do.
Any ideas?
Thanks!
Internet Explorer adds 1px of right padding to your input#txtProfilePicPath element (actually there's 1px padding on every direction by default). Specifying padding-right: 0 on it solves the problem.
To the following selector:
div.formElementDiv input[type='text']
Add:
padding:0 0 0 10px;
This explicitly sets all padding to zero (except the padding-left) and fixes your problem.
You must delete from .file-input-wrapper float: left; and width: 100px;
Related
So i have this weird behaviour in Internet Exlporer 9-11 and EDGE (Spartan).
In all browsers now i see my example like this (which is desired):
In Internet Explorers i see it like this:
Before i had this stuff pretty much everywhere except Firefox, until i added:
svg {
width: auto !important;
}
This fixed problem everywhere, except IE...
Here's working simplified example that you can tweak:
http://codepen.io/failure13/pen/waxaOx
For myself i have no idea, i absolutely have no idea how IE behave here and calculates width: auto; based on what values...
I always thought it should be parent or element height itself.
I tried everything that came in my head for now.
I see no logic, so this seem to be some nasty bug.
If so, maybe there's workaround?
I really need it, coz i really don't want to use fixed width values (of course it will fix problem, but it's not solution).
Thanks in advance to everybody who may help with it, let's make web better place!
in your class
.svg-flex {
width: auto;
height: 100%;
display: block;
}
change the width to max-width:72px;
this works in ie 11 anyway. I checked
here is a working codepen: http://codepen.io/anon/pen/aOjNrN
I've got a problem with IE8.
I've got a select box to choose capacitance units pF, nF and mF.
Now, the text is a little bit down, even though I set padding:0, and it cuts the text.
And so the 'pF' option actually looks like 'nF' which is unacceptable.
I wonder if there is any fix at all. I can't think of nothing other than setting padding to 0 which doesn't work once again. Setting small line-height also doesn't do anything either.
CSS:
select {
width: 40px;
height: 16px;
padding: 0px;
font: 8pt Helvetica;
}
Any ideas?
Edit: There you go for JSFIDDLE:
http://jsfiddle.net/zuYsF/
See that 'pF' is selected by default, and it actually looks like 'nF'.
I don't think this is padding causing a problem, this might have more to do with line-height
So try setting the line height to the height of the box minus the border top and border bottom (which seems to be 4px in total judging by that image from looks...) that height is probably about 12px...
line-height: 12px;
If this doesn't fix it you will have to reproduce it in jsfiddle so we can tinker with the code to give an actual working example back to you.
Please note that form elements are notoriously unreliable styling wise, and you can't get away with everything. display: block can do wonders, but wouldn't help in this case.
This seems to be cheer limitation of the <select> tag styling... In all browsers really.
You might want to check this question, which doesn't seem totally unrelated.
I want to vertical-align text in select box
This is a question I belive has been asked before but I haven't found any solution.
Open my jsfiddle in both Firefox and Chrome (Or Safari instead of Chrome). If you look carefully at the letter 'y', you can see that there are one or two extra pixels between the letter and the lower border of the section1-div, in Firefox compared to one of the other two.
I have set padding and margin top/bottom to 0px on the most elements in order to reset the styling to som extent.
Why is that and what measures should I take in order to prevent this?
UPDATE: Using Chrome 17.0.963.56, FF 11 and Mac.
I'm not really sure why this problem happend. It was not working. In my own code I could relate it to the padding. Chrome/Safari and Firefox is handling the padding differently. By adding som padding to the standard css and making an exception for Firefox I did get the expected result. This doesn't help the jsfiddle example (it could actually be that there isn't any problem in the example, could be that the font is displayed a bit different and it looks like there are differen number of pixels between the letter and the border...).
#adminmenu a{
padding-bottom: 2px;
}
#-moz-document url-prefix() {
#adminmenu a{ padding-bottom: 0px; }
}
I have a footer, below a textarea, containing a list and two buttons (all inline) within a div with the id #share-something. For some reason it is placed differently in Internet Explorer. I want it to look the same in IE as it does in Chrome. What am I doing wrong? http://jsfiddle.net/h3twR/
Oddly enough, IE7 seems to be fine for me, but 8 & 9 are off. If you have an IE-only stylesheet (using conditional comments), you can add this:
#share-something-container textarea {
margin-bottom: 5px;
}
*:first-child+html #share-something-container textarea {
margin-bottom: 0px; /* targets ie7 and undoes the margin above, as IE7 is okay */
}
This doesn't explain why 8 & 9 behave differently, but I've long since given up looking for logic and reason in IE.
There seems to be some kind of difference between IE8/9 and the other browsers and how they're rendering TEXTAREA.
It looks like you just have to set TEXTAREA to display block. It seems some browsers behave differently in this situation as they will see all elements as inline and generate extra white space. However, setting it to display:inline doesn't seem to have the reverse effect, so it's weird like that.
Here's a solution:
http://jsfiddle.net/h3twR/2/
I simply added this:
#share-something-container textarea {
...
display:block;
margin-bottom:5px;
}
And it appeared to render more consistently. IE7 seems to be off a little bit more. But hopefully this helps a little.
Cheers!
A few days ago I re-skinned my website. Development of this skin was primarily done using safari, and as expected, it all renders fine using firefox and opera. I've had to make a few small tweaks for IE7, but nothing much, except for one problem...
The date indicators for a post are cut off in IE. This problem seems to occur only on nested span tags inside a left floating div. I think I need the floating div's in order to layout text on the left and the right side of the screen.
Do any of you know how to stop IE7 from clipping my text?
Edit: I have sort of given up on this problem. My scripts now check for IE7 and feed it somewhat simplified HTML that its limited engine can handle. It works in IE8, so, for now, just the special case for IE7 will have to do...
In most cases where IE6 or 7 clips off the bottom of text, just add:
line-height: normal;
to the CSS rules concerned. Should fix it nicely, but as you'll understand, it expands the box too.
There's a hack I figured out that fixes the problem of cutting off text in IE. I noticed the last line in my headline was the only one being cut off.
My original CSS which was cutting off the last line in IE7 but looked fine in other browsers:
h2 {
font-size: 22px;
line-height: 1em;
}
See image of problem here: https://skitch.com/pablohart/f4g3i/windows-7-x64
The fix I did included simply adding padding to the bottom and then taking that padding back with negative margin. Like this:
h2 {
font-size: 22px;
line-height: 1em;
padding-bottom: 5px;
margin-bottom: -5px;
}
See picture of fix in this image: https://skitch.com/pablohart/f4g4h/windows-7-x64
The problem with line-height: normal; is that it takes on the default line-height for the font, usually 1.3em.
Try adding overflow: visible; to your .postdate class. Maybe that helps.
I had a similar problem. I changed my span to a div and the problem was resolved. I think IE7 might have an issue processing line-height on a span. Haven't confirmed that to be the issue. There were other CSS elements. (Working on someone else's code.) But changing from span to div (block) resolved the issue.
for the .bigdate class, try replacing margin with padding; seems to me that this has something to do with IE's margin-handling.
Adding a specific height to .title fixes it for me (in IE6):
.title {
PADDING: 0 10px 0 0; MARGIN-top: 0.3em; FLOAT: right; height: 1em;
Despite being unable to test it on my current machine: I would suspect that it's a hasLayout bug. The methods of dealing with it are listed in the "properties" section of that link.
In my experience its invariably the bottom of the text that gets clipped and that too basically because of the overlapping divisions. If you are able to ensure that the divs don't overlap then the issue does get resolved . That apart adding overflow: visible does help at times.
Try adding
div.postmeta { height: 100px; }
div.postdate { height: 75px; }
Arbitrary height value... but you'd know the exact height you want. That should keep the text containers from clipping in IE7.
I think the problem is with the padding. I tried removing a "padding: 3px" style and it worked properly. Previously it was not showing anything. Paul Hart's answer showed me that.
Probably also removing/overriding margin properties may also help.