i am using FF as the main testing platform and Chrome (for Mac) as the secondary.
I just noticed that Chrome is showing ~20px off positioning for CSS. (just to be clear Chrome is showing the TEXTAREA ~20px down as compared to FF)
Also Chrome is not obeying the width CSS property for TEXTAREA.
Is it just me or everyone is having this problem? I thought IE was crazy.
TEXTAREA {
background-color: white;
border: #ccc 2px solid;
color: black;
font-family: calibri, helvetica, arial, verdana, ms sans serif;
padding: 10px;
font-size: 16pt;
font-weight: normal
min-width:320px;
min-height:138px;
max-height:138px;
resize: none;
}
Is there a solution??
I think it would help if you could show us your 'troublesome' page. Maybe make a copy and upload it to the web so we can give it a check?
Whatever the case, I'm sure it has something to do with more than just the textarea itself. Perhaps its one of the containing elements, a rule on a parent div or table td or who knows. Since it's a textarea, I'm pretty sure there's a form or submit of some type involved so yeah, please show us more of your code ;)
You might find this useful anyway so that you can edit your code individually for moz or chrome:
Gecko browsers (FIREFOX):
#-moz-document url-prefix() {
/* Gecko-specific CSS here */
}
WebKit browsers (CHROME, SAFARI):
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here */
}
Cheers
Different browsers have different defaults. Add the following to the top of your CSS file:
* {
margin: 0;
padding: 0;
}
Also, what doctype are you using? If XHTML then "TEXTAREA" needs to be lowercase.
Related
A web-page I've made works fine in Chrome and in Firefox when it isn't zoomed, however, the zoom breaks the layout in Firefox (but, for some reason, not in Chrome). You can see the live version.
Here is what it looks like in Firefox:
However, when zoomed in, it looks like this:
Here is the CSS code of that web-page:
body {
font-family: sans-serif;
}
#format_as_code {
font-family: "Lucida Console", monospace;
font-size: 12px;
white-space: pre;
width: calc(80 * 7.2px);
background: #111111;
color: #eeeeee;
height: calc(24 * 14.5px);
display: block;
}
h1 {
text-align: center;
}
#center {
margin-left: auto;
margin-right: auto;
width: calc(80 * 7.2px);
}
Any idea what I am doing wrong?
As long as i can tell even zooming-in in firefox doesn't break the layout (see the screenshot below). Maybe you may want to remove the width from the <span id = "format_as_code"> or set it to auto to see if anything changes at all.
Quick tip for performances thought: i've noticed that every seconds all the spans (which i think represent the pixels of your canvas) updates, even the ones that don't change at all !
This leads to a noticeable performance decrease so may want to look into it.
I'll attach a screenshot of how i see the website and how it renders on FF 79 64bit.
Hope this helped you a little!
Chrome and Opera render my page properly without issue, however IE11 and Edge do not.
I am using pure CSS to expand/collapse 3 section headings. It was my understanding IE 11 had more support for CSS3/webkit and I definitely thought Edge would of stepped up it's game.
https://jsfiddle.net/x0c5fsqh/
CSS Snippet
summary::-webkit-details-marker {
background: url(/images/toggle-expand.png) center no-repeat;
color: transparent;
font-size: 125%;
margin-right: 2px;
}
details[open] summary::-webkit-details-marker {
background: url(/images/toggle.png) center no-repeat;
color: transparent;
}
summary:focus {
outline-style: none;
}
article > details > summary {
font-size: 28px;
margin-top: 16px;
}
details > p {
margin-left: 24px;
}
details details {
margin-left: 36px;
}
details details summary {
font-size: 16px;
}
Rendered Properly
How IE/Edge renders it
All of the headings overlap in to the content of the previous sections that should be hidden and the toggle images do not appear at all. Just looks like the above CSS is completely ignored.
Any ideas?
From what I can see the <details> and <summary> elements are not supported in IE and Edge. It has nothing to do with supporting CSS3 features. It looks like those elements are part of the HTML5.1 spec.
Reference: MDN, WebPlatform, caniuse.com.
Take a look at the Resources tab on caniuse.com. There's a few links pointing to some polyfills.
As others have noted, CSS properties prefixed with -webkit- won't work in IE/Edge. Just as -o- or -ms- wouldn't work in Chrome.
I have read extensively on this site and others about how to change my css for different browsers, but none of the methods I have found are working.
I have an unordered list whose list items appear with different amounts of padding on different browsers. The value is set to 8 px and works perfectly on chrome and safari. I have tried
ul.titles li {
padding: 8px;
-moz-padding: 7px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}
I also tried
ul.titles li {
padding: 8px;
padding: -moz-7px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}
Both of these had no effect. When I tried defining one for -webkit- and one for -moz- it messed up both mozilla and chrome.
You can try this :
#-moz-document url-prefix() {
ul.titles li {
padding: 7px;
}
}
for sure otherwrite your css maybe add a class to your li
Try adding your styles inside of a Mozilla extension:
#-moz-document url-prefix() {
/* Styles go here */
}
So in your case, you can add the following lines of code to your CSS stylesheet:
#-moz-document url-prefix() {
ul.titles li {
padding: 8px;
font-family:"Subway", "Courier New", "serif";
font-size:11;
color: #000000;
}
}
Another option you might want to try is Normalize.css, which makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. I highly recommend it.
Instead of addressing every browser one by one, I suggest using Normalize.css to make common elements begin with common styles. A must have for every single website I develop.
I have built a webpage, it works fine in chrome, ff, but not in IE.
http://www.magyarregeszet.hu/
I have found many specific bugs about tables and layout, however I can't seem to figure out the font and text-transform type bugs.
Can someone help me? E.g. the menu entryes on the top left should be uppercase in IE too. This entry is:
.menu-item:not(.menu-item-77) {
color: white;
text-transform: uppercase;
font-weight:normal;
margin-bottom: 4px;
border-bottom: 1px solid white;
text-decoration: none;
}
I use wordpress, and the constructor theme.
You cannot use the :not pseudo-class in IE8, check http://caniuse.com/#search=:not for support. Internet Explorer 9+ supports this advanced selector.
If you require IE8 support, I would encourage you to provide your basic styles:
.menu-item {
color: #FFF
}
And then your specific styles afterward:
.menu-item-77 {
color: #CCC
}
Fiddle: http://jsfiddle.net/jonathansampson/w39a7/
:not is not compatible with IE8 http://www.quirksmode.org/css/contents.html
I'm looking for a way to get text-shadow that looks like css3 text-shadow, but that works with IE, Firefox, Opera, Safari , etc... The solutions I found either looked messed up or did not look consistent in IE. Thanks
http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows
.shadow {
height: 1em;
filter: Shadow(Color=#666666,
Direction=135,
Strength=5);
}
This doesnt work for me... in IE
ul.dropdown a.selected-l {
background-image: url('Images/Navigation/Left_round/hoverL.png');
height: 50px;
width: 130px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: large;
color: #FFFFFF;
text-align: center;
text-decoration: none;
line-height: 50px;
vertical-align: middle;
/* pretty browsers*/
text-shadow:#000 0px 0px 5px;
/* ugly ie */
zoom:1;/*force hasLayout*/
position:relative;/*for absolute position of child element*/
;
}
ul.dropdown a.selected-l span {
position:absolute;
left:-7px;top:-7px; /* strength + pixelradius */
z-index:-1;/* force under the normal text */
/* the magic: filters */
filter:
progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')
;
zoom:1;/*force hasLayout*/
}
My suggestion will be to use CSS3 text-shadow (for Webkit-based browsers, FF3.5, Opera 9.5).
For IE, use IE conditional comments to implement one of the followings:
sIFR
cufon
FLIR (not too sure about shadow effect)
IE-DXImageTransform
Some related articles:
Cufon vs sIFR vs FLIR
SO - sIFR or FLIR?
SO - SIFR vs Cufon vs Typeface.js
Check out this post i wrote about this problem:
Crossbrowser Text Shadow with Jquery
Maybe that's more up your alley? It IS using jQuery though and isn't a really über efficient way.. but anyway it's something. :)