For some reason, I have some problem with my CSS positioning on a social networking sharing tray on my site..
The even odder aspect of the problem is that it's only showing up in IE and FF..
I've tried playing with the CSS properties in FireBugg, but to no avail.
The link is here:
http://www.marioplanet.com/index.asp
The look in FF and IE makes the icons look all jumbled, while in Safari and Chrome, you can see that they are all lined up properly.
Could anyone help explain this odd phenomenon?
Try add this rule, it's image border when I view it in FF.
a.trayIcon img { border: 0px; }
I changed line 85 in default.css:
#facebookicon, #youtubeicon {
margin-left: 22.5px;
}
to
#facebookicon, #youtubeicon {
margin-left: 17px;
}
and it looks like chrome.
Related
I'm having some cross browser styling issues with a site I've just loaded up onto a wordpress html5blank child theme.
For example, here's an image layout as it is showing in Chrome -
And this is in Firefox & Safari (how it should look) -
The style code is set correctly as display: inline-block; but Chrome isn't having it.
I also have issues in Safari and Chrome regarding font-weight (showing much lighter than is set) and font-size (smaller than it should be). Is there some method and/or plugin that stops all the compatibility issues?
UPDATE -
I've placed the code on a codepen here
With some help from the responses to this, I figured it out -
.staff .brick {
display: flex;
}
You just need to add
.brick { float: left;}
I tested it in your code pen, and when I inspected the element float: left; was greyed out for some reason. Then I just added the above to your code, and it worked.
Add this to target firefox
#-moz-document url-prefix() {
.brick {
float: none;
}
}
I'm doing some changes to a wordpress theme, but Safari (both on Mac and iOS) seems to be ignoring some of the CSS, whereas other browsers work fine.
An example - this is how it looks in Chrome and Safari:
https://s3-eu-west-1.amazonaws.com/cystennin/chrome-safari.png
This is the CSS I've used, specifically for the images.
.homeleftside1 img {
width: 70px;
height: auto;
margin-right: 15px;
float: left;
border-radius: 100%;
}
I've got a test site here so you can see what I mean: link removed
Any ideas where I am going wrong? Thanks
Is it possible that Safari doesn't support border-radius?
Try to add -khtml-border-radius: 50%;, that should work...
Similar question: Rounded cornes (border radius) Safari issue
Just took a look in Safari and Chrome, but Safari isn't even listing the styles you set in your stylesheet in the list of matched styles for that particular image you're targeting. However, Safari is reporting a couple of errors in your stylesheet: a couple of mismatched curly braces etc. Maybe they are throwing off WebKit? (Would have posted as a comment, but don't have enough rep yet.)
i use Allegro fonts for top menu and got problem when i hover on it the color not display full width in Chrome and Safari :(
you can test on this link
http://preview.86solutions.com/fairpart
There is something wrong with your font I guess.
When you add some more padding-right to the element it looks fine.
.menu a {
color: black;
padding-right: 20px;
}
see it yourself:
Add a border to the element and it will cut off on the right side.
Looking okay in both chrome and IE.I don't know what version are you using now, I have checked this demo in chrome 19.0.1084.82 and IE8 and IE9.I have seen your code and everything looks good.
BUT, IE does not support the font-family inherit property.If you still have the problem you should modify your style.css like this :
.menu a:hover,.menu a:active {
font-family: "Allegro"; /* because IE doesn't suprort inherit */
text-decoration:none;
color:#c4c04d;
}
Hope it helps !
I'm debugging this site and trying to sort out some issues that arise in Internet Explorer (big surprise).
I'm adding a sub-title to several links as follows:
.subtitle a:after {
content:"The Subtitle Here";
}
On all modern browsers (and IE9) the content is center aligned because the container uses text-align:center;. However, in IE8 "The Subtitle Here" is flushed left.
Is there any way to control that with CSS?
Thanks.
Turns out you can do it easily:
I added another style rule that targets the added content...
.subtitle a:after {
text-align:center;
}
I guess IE9 and other browsers inherit the text-align property for :after content but IE8 doesn't. IE always keeps it interesting...
text-align:center
didn't work for me. This is how i got it fixed in IE8. (I have a seperate style sheet for IE8)
.printIcon:after {
content: "Print" !important;
text-align: center !important;
margin-top: 25px !important;
position:relative !important;
left:25px !important;
}
Hope this helps someone.
Neither of the answers above worked for me because of an underlying issue I had. Apparently IE8 does not support ::after, I changed it to :after and it worked just as intended.
Worth checking for!
I want to use to simulate a cursor by adding the following class to it.
.cursor {
border-left: 1px solid red;
margin-right: -1px;
display: inline;
position: relative;
z-index: 1;
}
It works perfectly fine in Firefox. However, nothing is shown in Safari. I've been trying many different values. It seems like border-left is not understood by Safari although w3c claims that it's supported by all major browsers.
Can someone please help me fix this problem?
Thanks,
It seems to work fine for me, using your exact code. I've created a jsFiddle here, which displays a red "caret" in Safari.
Is there a particular Safari version you're having problems with? Does the jsFiddle shown work for you? It uses only the code you've provided.
On further investigation, it seems that the span must have content in order to show the border. I'm not sure exactly why -- perhaps Safari is "optimising out" the empty span, or giving it zero height, or something like that.
This appears to be a WebKit issue, as the same behaviour occurs in Chrome. As a workaround, if you set a height on the span, it seems to work. If I change your CSS to:
.cursor {
border-left: solid 1px red;
margin-right: -1px;
display: block;
position: relative;
z-index: 1;
height: 1em;
}
...that is, adding a height to the span, then your border displays whether or not it has content. Therefore I guess what's going on is that without content, WebKit is giving no height to your span, and therefore no border. Which is perfectly sensible behaviour, really.
Here is your original jsfiddle, with a height added, that works in Safari and Chrome.
border-left style works on safari v1.0+
See my code snipped that I've just tested on Safari 5.0.2 and it worked:
http://jsfiddle.net/DqhfJ/1/
in fact all css tags that you provided - work in Safari 1.0+ , except display tag (it works in Safari 1.3.2+)