I have constructed this page: http://www.letstalkmarketing.co.uk/print
It works fine in IE6 and IE8 but doesn't seem to render anything below the red help and advice block in IE7.
I cannot see what is wrong and frankly without Firebug (Firebug Lite just doesn't really cut it) I am struggling to figure it out.
Thank you for any help you can offer.
IE7 and position:relative never were very happy bedfellows. Where you have
.info_boxes {
position: relative;
top: -20px;
}
You would probably do better with
.info_boxes {
position: static;
margin-top: -20px;
}
Alternatively, you could add a width. e.g.
.info_boxes {
width: 630px;
}
You can map this into a ie7 only stylesheet in a similar way as you've already done with iframe_ie6.css, but specifying the IE version in the conditional comment.
Related
We are working on a markup with customized scrollbars.
For this task we use ::-webkit.
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 0px;
background-color: #bfbfbf;
}
::-webkit-scrollbar-thumb {
background-color: rgb(255,51,0);
border-radius: 0;
}
Is working great on desktop devices (chrome)... But on Android Chrome nothing happens.
Is this not working on Mobile? Any workaround or other solution?
Thanks!
I've been having the same problem... So far, the only explanation I've been able to find is that, the custom scrollbars works only if the body has position: absolute.
I don't like this solution as it affects some other features in my site, but unfortunately, there isn't any other way I've been able to show custom scrollbars in mobile...
I'm not sure why it is so... Should be simple enough, but for some reason, it's too complicated!
I've got some CSS code in order to display the title attribute when touching on abbreviations and symbols of a smartphone's screen. Within a section '#media only screen and (max-width: 767px)' of my stylesheet I have the following code:
span[title]:active::after,abbr:active::after {
color: Maroon;
font-weight: bold;
content: 'Meaning: ' attr(title);
position: fixed;
top: 3ex;
left: 2ex;
display: block;
z-index: 100;
background-color: White;
box-shadow: .3ex .3ex .1ex Grey;
border: 1px solid grey;
padding: .4ex;
width: 70%;
height: auto;
}
It does work flawlessly on Android -I've tested it on Chrome, Firefox and Samsung browser- and my iMac -tested it on Chrome, Firefox, Safari and Opera after stretching the width of the browser's window, but it doesn't work on iOS at all! The trick/workaround of adding '-webkit-transform: translate3d (0,0,0);' added to the code did not help to this.
I should appreciate any help a lot!
Thank you very much indeed!
SOLVED!
I tried the solution as proposed in the following link: Enable CSS active pseudo styles in Mobile Safari
and it works fine. The problem was that Safari Mobile disables :active pseudo-class by default, and this simple idea solves it.
I tried some other working solutions, such as 'body ontouchstart=””' and similar ones, but all of them gave errors when checking the code against W3C validator.
Many thanks to all those that answered and tried to help!
The :active property only works on activabe elements. Documentation says:
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
So the most simple thing to do is to set the tabindex attribute to 0 for each element you want to be activable.
This has the big advantage that your code will work with keyboard.
EDIT: adding tabindex=-1 for all elements can be done easily with jQuery using
$("abbr[title]").attr("tabindex", -1);
or using standard javascript
var ele=document.querySelectorAll("abbr[title]");
for (var i=0;i<ele.length;i++) {
ele[i].setAttribute("tabindex", -1);
}
Here is how the site looks on Internet Explorer:
http://www.browserstack.com/screenshots/0c3c039e85f44bb70fddfc34b887b5bbc3357899
I've only seen it on the latest version of IE on Windows 8.1, but it's possible that it happens on older versions as well. Unfortunately, I'm on a Mac and can't find any emulators to run IE.. So I am coming to the greatest community of tech-savvy people I know of for help.
The site (built with Wordpress) is commercialpaintersinc.com. It looks great on Google Chrome and Safari.. so this issue seems to be just in IE (although I haven't tested in Firefox either..).
This is how it is supposed to look:
Anyone got any idea as to what CSS I entered that caused the issue and/or how I can fix it to make it look how it is supposed to on ALL browsers?
Any feedback is majorly appreciated. Thanks!
You are presently using negative margins to adjust layout, which is giving wildly different results in all three major rendering engines (Trident, Blink, and Gecko). I would advise against this, as it's likely these vendors will need to discuss whose approach is correct, or if all three need to adjust to be in better conformance with a fourth alternative.
The primary issue is is the over-hang of your logo beyond your negative margin. If you were to position the image absolutely, you could get more consistent results. However, upon doing so you will need to restore the layout of your header since a crucial element will no longer contribute to its dimensions.
#logo {
position: absolute;
}
#main-header {
min-height: 160px;
}
The above two rules appear to restore the layout for me in IE, and Firefox. That being said, I still think Chrome may be in the wrong here - you should always test your layout regularly in all three major browsers to ensure you aren't building on top of a browser bug.
I work on the Internet Explorer team, and have filed an issue internally for us to investigate this particular layout anomaly further. I've created a reduced demo of the issue as a public fiddle as well.
If you need to test Internet Explorer from a Mac in the future, please visit http://modern.ie.
Thank you all for the help. I was having a mental blockage and once again this community helped me to move forward.
Jonathan Sampson was correct that the root cause was that the CSS was not originally done correctly. I did the CSS edits myself and I am self-taught, so this was no surprise to me, haha. However, I had already come up with a solution.
My Solution:
I used the famous CSS Browser Selector script which can be found here: http://rafael.adm.br/css_browser_selector
I added it to my JS folder (mysite.com/wp-includes/js/css_browser_selector.js) and then added:
<script src="css_browser_selector.js" type="text/javascript"></script>
right before the </head> tag in the header.php file.
At that point I was able to just create browser-specific CSS. It's dumb that FF and IE are so picky when it originally worked fine how I had it in both Chrome and Safari... But oh well.
Here is the code for Chrome/Safari vs. the code for Firefox/IE:
Chrome/Safari (Webkit):
.webkit #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999;
background: #fff;
border-radius: 150px;
border: 20px solid #fff;
}
.webkit #main-header {
padding: 10px 0 0 0;
margin-bottom: -65px;
margin-top: -20px;
}
Firefox (and same used for IE as well):
.gecko .et_pb_slider {
top: -60px;
margin-bottom: -63px;
}
.gecko #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999 !important;
background: none repeat scroll 0% 0% #FFF;
border: 20px solid #FFF !important;
border-radius: 150px;
}
.gecko #main-header {
margin-top: -20px;
}
So yeah I didn't see Jon's answer until after I had "fixed" the issue. So, I will leave it as is.. although I'm sure my CSS is very sloppy! :P
Screenshot of IE browser now that it is fixed:
http://www.browserstack.com/screenshots/0d669a15d18040086fede2df90f134e526aef8f3
Thanks,
Chris
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.
I'm having some problems with some CSS properties in IE8.
I've tested my site in IE7, Chrome and Firefox and they work fine but IE8 is having some layout issues.
I inspect the developer tool option on ie8 and I've noticed that some of the properties I set in CSS are being ignored by ie8. For example:
#header
{
position: relative;
padding: 20px;
height: 100px;
background:url(header.png);
}
In this header IE8 ignored the height property:
If I inspect the element in developer tools it is missing that property and it's crushed into another line:
background:url;HEIGHT: 100PX
The same thing happens for floats too:
#logon
{
float: left;
text-align:right;
width:20%;
height: 40px;
padding-left: 0px;
padding-right:7px;
border:0;
margin:0;
background: url(navgradient.gif);
}
This ignores the float value:
background: url(navgradient.gif); FLOAT:left;
What is happening here and how can I fix it?
I've seen this too. Some styles are shown on the same line, happens to me with "filter" lines.
The HTML renders in IE correctly, but if you try to toggle that CSS line on/off, it affects both properties. So unchecking "filter: alpha(opacity=25); BOTTOM: 10px" in dev tools disables both the "filter" and "bottom" CSS rules.
So it seems like a bug in dev tools' parser, but not the IE rendering engine. It's crazy how this still isn't fixed.
Seems like a parse error, or similar. Try putting quotes around the image names;
background: url('navgradient.gif');
I've seen this happen if the stylesheet contains filter properties.