This is driving me mad...
I was doing my asp.net sandbox website when out of the blue I start to realize that in IE8 (IE7 compatible view or not) does not show CSS font proper...
in the image below I removed all CSS and add only one:
body {
font-size: 11px;
}
and this is (sadly) the result:
alt text http://www.balexandre.com/temp/2009-06-08_0927_iefont.png
Is there any soul willing to help me...? this is driving me mad since saturday night! I can't find a proper solution, I really thought is was something with CSS, so I even validate all CSS through CSS Validator and validate all the page...
nothing changed a bit of the result :(
All the help, or even a blow in the right direction is greatly appreciated.
Thank you.
P.S. both Opera and Chrome as well Safari display the same result as FF, the right result.
If the text is inside a table (as I see in your screenshots) try:
body, td {
font-size: 11px;
}
i think what Victor suggested should work. Also, next time you can try
* { font-size: 11px }
as a test. Obviously you don't want to alter other elements such as h1, h2, etc for their font sizes, but you can use the line above to try things out, so that you can guess that if the line above works, then maybe you need to specify font-size for an additional tag besides the body you originally specified.
Related
So I've been fighting with this for maybe a week off and on and every time I end up eventually giving up. There's a "search bar" input at the top right of this website I'm working on here. There's lots of information on text-aligning the placeholder text for inputs like this right here on StackOverflow and I've built out lots of these without ever having an issue with this. But for some reason on this site, I can't just apply something like 'text-align: left;', the text remains centered. I know this is a dumb question but I'm really confused on what's causing this. I can't seem to recreate this in a CodePen at all, it always behaves as expected everywhere except for on this production site.
Does anyone know why this specific input seems to not respond to "text-align: left;"? I'm using Chrome but every browser I've tested displays this the same way - centered placeholder text no matter what I do. I think I'm missing something simple here but I don't have a clue what it is.
That is not text. That is placeholder.
please add below to css
input.form-control.search::placeholder {
float: left;
}
I've looked into the code and I honestly have no idea what is causing this but I have a solution :)
<style>
.search::-webkit-input-placeholder{
text-align: left !important;
}
</style>
Set the important tag to tell the browser that that thingie maginie is important and set the property to the placeholder of the '.search'
Probably, he know what is a placeholder. The problem is text-align: center from your placeholder. If you want to see it with developer tools:
The trick is to enable 'Show user agent shadow DOM' in the Settings
panel of Chrome Developer Tools. Thank to Sean Anderson for the
answer
Also you can edit your placeholder using vendor-prefixed selectors
There is a setting in the style.css file:
.header-main .search-wrapper .search::-webkit-input-placeholder {
text-align: center;
}
It's got quite a high specificity so worth copying the lot and simply doing:
.header-main .search-wrapper .search::-webkit-input-placeholder {
text-align: left;
}
Apologies for including code within the title but it was the easiest way of explaining my small problem.
With the following html:
<p>the field of</p>
And the accompanying CSS:
p {letter-spacing: 6px;}
The 'f','i' and 'e' don't space correctly.
I wondered why this happens and also how to fix it.
Here is a small accompanying image of the problem so you can see it:
I suspect this might be a font and/or OS bug. Where are you seeing this?
In general, this works as expected. (See this JSFiddle)
I am using the same code as you are:
<p>the field of</p>
with
p {letter-spacing: 6px;}
and I am seeing the desired result
It's depend on the font and the also how the browser render it.
Try to use web fonts and then check it in the Firefox, Chrome etc.
On this site ( http://test.photoline.nl/biografie/ ) I have a Header2 (Biografie). When using IE8 (normal mode) the top of the header is not visible or disappears when the mouse is moved over the page.
I really have no idea why. CSS is not part of my core knowledge, so maybe there is a simple fix for this.
Thanks!
This is likely because of using a webfont. Sometimes they get clipped in older browsers. Try modifying the line-height of the <h2>:
h2 { line-height: 16px; }
I would also suggest using a CSS reset like normalize.css.
I have a TEXTAREA where spacing is very important. I formatted it as follows:
TEXTAREA {
font-family: Tahoma, Arial;
font-size: 8pt;
letter-spacing: 0px;
line-height: 13px;
}
How, if I enter some text, the line height is not correctly applied: The last line of every paragraph (before pessing enter or shift-enter) is one pixel to high:
This problem only occurs in Internet Explorer 9, not in Firefox 7 or Chrome 14 (haven't tested older versions so far).
Is there a way to get rid of thad?
BTW: It does not happen for the last line of the textarea, unless there is a linebreak behind it.
Regards,
Steffen
I know this may not actually help entirely nor be the full answer, but it may be worth while reading up a little on the use of !important declaration within CSS.
http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/
The only reason why this springs to mind is there may be another style/declaration that is applied after which is causing some sort of problem and this will make sure your textarea has the correct styles applied to it.
You may also want to check that any <p> CSS declarations are not causing conflicts/problems with any bottom or top margin's/paddings? Same goes with span or any other styles that could potentially cause some sort of problems.
Like I said, I'm aware this may not help in the slightest but it could be a possibility.
I have had similar problems with the last line in a textarea in IE8. When my textarea had a line-height of less than 18px, the cursor changed the line-height. The reason I bring this up is your line-height of 13px is quite small. You may want to experiment with larger line-heights to see if the problem goes away.
I just went many many rounds with this issue and finally discovered that IE9 is adding extra padding to textareas. Line height, height, etc had no effect. This did the trick:
padding: 0px !important;
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;