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.
Related
Check this Jsfiddle first.
Here my <input> with has a height of 10px; has given a padding of 10px;, I know it is not a right way of giving style. But still, it's working perfectly in Chrome, IE and Safari but it is an another story when it came to Firefox it crops my placeholder.why.?
I know different browsers have their different rendering methods but can anyone point me the exact reason behind this and is there a way I can solve this without changing the height, padding or font size(it should not be less than 14px).?
Please check if it works for you
input {
padding: 10px;
font-size: 14px;
font-weight: normal;
width: 100%;
line-height: 18px;
height: auto;
}
They count height and padding differently, try this.
Use only height or only padding. Here I add height and only x padding
input {
font-size: 14px;
font-weight: normal;
width: 100%;
height: 30px;
padding: 0 10px;
}
My code is perfect for Chrome, but not for others ..
Look at pictures, the parent of ul has a margin-top to his child (ul). It's working fine for Chrome, but for others it's too much !
Chrome (it's ok)
Firefox and Safari (not ok)
I'm not using webkit or moz, nor transition or other property like that.
EDIT
Sorry I forgotten the code ^^
The ul is in .wrap-orange-notre-vision :
#section-notre-vision:before{
content: "UNE OFFRE QUI MODERNISE ET AMÉLIORE VOTRE RELATION CLIENT.";
text-transform: uppercase;
position: relative;
font-size: 1.4em;
font-weight: bold;
margin: 30px auto 0 auto !important;
}
section#section-notre-vision{
height: 555px;
min-height: 500px;
}
.wrap-orange-notre-vision{
margin-top: 925px;
}
EDIT
It was just due to WordPress 😐
Pretty sure each browser renders html and css slightly differently due to some specs in the browsers code. I cant remember exactly what the difference is, but i know that there is a small difference.
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 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 few buttons on my jsp page and I am using the style as :
*.buttonblue {
background-color: #003366;
border-color: #99CCFF;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica;
font-size: 8pt;
font-weight: bold;
height: 20px;
display:inline;
line-height: 1.2;
text-align: center;
margin-top: 2px;
}*
In Firefox the buttons are bit smaller than IE6.
I can not define the size of buttons as the caption changes the button size changes accordingly.
I tried with width:auto but no success. Also, with overflow:visible the buttons in IE becomes bit smaller.
Please help.
IE has a bug with button padding, you may be experiencing this. Try something like this:
input.button {
padding: 0 .25em;
width: 0; /* IE table-cell margin fix */
overflow: visible;
}
input.button[class] { /* IE ignores [class] */
width: auto; /* cancel margin fix for other browsers */
}
Note: if your buttons become even smaller in IE after applying this fix, make sure you are not in quirks mode. In IE's quirks mode the widths of objects are calculated differently than in standards mode, making everything a bit smaller (for items with a specified width). Best to always use standards mode if you expect consistent cross-browser results (even though IE's standards mode isn't that good, it's still way more standard than quirks mode).
Either use Conditional Comments :
Ex:
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Or set custom width for input only read by IE like this :
.buttonblue {
background-color: #003366;
border-color: #99CCFF;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica;
font-size: 8pt;
font-weight: bold;
height: 20px;
display:inline;
line-height: 1.2;
text-align: center;
margin-top: 2px;
width: 100px; /* Read by FF */
#width:100px; /* Read by IE*/
}
Now you can tweak them accordingly
A button is rendered however the browser decides. You will need to use an image and set it up to work like a button if you want it to look that same in all browsers.