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
Related
Scrollbar css works in Google chrome but not in mozilla and Internet Explorer.
My css is
.skin-1 ::-webkit-scrollbar {
width: 5px;
}
.skin-1 ::-webkit-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
.skin-1 ::-webkit-scrollbar-thumb {
background-color: #0e9aef;
}
.skin-1 ::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
Currently, it is exposed behind the -webkit vendor prefix for use in browsers using the Webkit (and Blink) rendering engine.
please read this CSS-Tricks article.
Scrollbar is NOT a css standard, that means some browsers may support it while others don't. In this case you are applying the `-webkit-´- prefix which aims just to next browsers:
Android, Chrome, iOS and Safari.
You can check here for more info.
Aa long as I know scroll bar is not supported at all in Firefox (if not changed reciently).
for a full browser compatibility I would recomend You to use some nice (and easy to use) jquery libraries around.
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'm having a CSS issue that only occurs in Safari and Chrome. I have a set of styles for links in the content of a site that I'm working on. Visited links should appear a different colour and with a dotted bottom border. In Safari and Chrome the visited links lack the bottom border though, although all other styles are applied. Does anyone know of a bug in the webkit engine that causes this or have I made some stupid mistake? Code below:
#content a:link {
color: #b32951;
text-decoration: none;
}
#content a:visited {
color: #353535;
border-bottom: 1px dotted;
text-decoration: none;
}
#content a:hover, #content a:active {
color: #b32951;
background: #E6B5AF;
}
This is not a bug, it's a feature. It was possible for a site to sniff the browser history through :visited-styles. You will only be able to style :visited in a way that doesn't affect the metrics of the link, which adding a border would. The same feature is coming to Fx4. (Source, MDC)
Try giving the border-bottom a color:
border-bottom: 1px dotted #000;
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.
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. :)