Though in 1996 I had one of the top 5 Leonardo DiCaprio web-sites - I'm no programmer. So I tried using 4ormat templates to make my life easier but they didn't have an option for image rollovers so I had to change the css and of course its causing problems for me. It works fine in every browser - sometimes it even works fine in chrome! But if you load it a bunch the first few images on the page will load and then disappear! Its been great in every other browser! What am I doing wrong??
http://sarahcrump.4ormat.com/retouching
the code looks like this:
.rollover a{
display: block;
text-indent: -9999px;
margin: auto auto auto auto;
cursor: pointer;
outline: transparent solid 0px;
}
#erilynn a{
height: 550px;
width: 393px;
background: url('http://4ormat-asset.s3.amazonaws.com/resources/1327226/0x550_1329240086.jpg') no-repeat left top;
}
#erilynn a:hover{
background-position: -393px;
}
I know other people have run into this problem as well but have yet to discover a solution that works.. Anyone know whats up?
If you are using dev channel of Chrome, this seems to be a bug in Chrome (Webkit more specifically) than in your code.
You can check the bug report for Chrome at http://code.google.com/p/chromium/issues/detail?id=111218
I have personally hit this problem few weeks ago in my code and sadly couldn't find a workaround.
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!
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
My site actually works okay in other browsers but when I checked in IE6, there is a problem. In my global navigation, I clicked this certain page. For example, I clicked ABOUT ME page. My global navigation changes its image when the page is active. Like it has a different color from inactive pages. In IE6, when I'm in the current page, ABOUT ME, the current image in the global navigation is different. Say, it's CONTACT US. But when hovered, the image that appears is correct.
This is the snippet of CSS:
.cat-item-5 {
float: left;
display: inline;
width: 162px;
height: 48px;
text-indent: -30000px;
background: -639px 0 url(images/menu.png) no-repeat;
}
.cat-item-5 a {
display: block;
width: 162px;
height: 48px;
background: -639px 0 url(images/menu.png) no-repeat;
}
.cat-item-5 a:hover,
.cat-item-5.current-cat a {
background: -639px 0 url(images/menu_o.png) no-repeat;
}
Hope you can help me, thanks!
IE6 has really really bad CSS support. It also has some nasty little bugs, of which you've been tripped up by one.
The bug is that when you have a double-class selector like .cat-item-5.current-cat, IE6 will only see the first of those classes, so it acts as if the selector is just .cat-item-5.
There's no good way around this bug. The only solution is to add another class to the relevant elements, and select that instead.
Your only other option is to simply drop support for IE6.
Being a web designer I hope to make websites that at least work in as many browsers as possible. I still try to design for IE 7 for those visitors only using IE and who don't know anything else. However I'm not too familiar id IE and it's spacing and it's hacks.
My website looks good, you can view it here, in every browser except IE. :s Thankfully it's only the footer now.
I'm hoping someone can give me advice and help me fix this hiccup and then maybe give me some references or articles about IE & it's spacing issues & hacks.
My footer doesn't work in either IE 7 or 8.
IE 7:
IE 8:
CSS
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; margin-top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89 !important; }
#footer a:hover { text-decoration: none; color: #fff; }
#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }
I've tried a bunch of different ways but I'm not sure whats happening in IE with this footer. If anyone can shed some light on what might be happening, it would be greatly appreciated!
you have an unclosed aside element for starters. if you view it in ie8 and use f12 developer tools you can see how the footer is now a child of the element. close that guy out....should help out.
I'm not sure of the root of the problem but instead of using "float: right;", using "position: absolute; right: -2px;" seems to solve the issue (also ensure #searchform has a relative position).
I have some problem with the background-image property in IE-6. In all other browsers, background-image is showing except IE-6. This is the url of my site http://indivar.info/godsak/node/2.
This is what I have written in the css.
body {
background-color: #D3D3D3;
background: url("../images/background.jpg") repeat scroll 0 0 transparent;
margin: 0;
padding: 0;
position:relative;
overflow-x:hidden;
}.
This question will lool outdated as this is related to IE-6. But the client needs it so I have to fix it. One more thing to clear I have checked on windows XP service pack 3 IE-6, there also its working fine. So problem with the IE-6 sp-2 of windows. Thanks in advance.
Instead of doing shorthand try:
body {
background-image: url("../images/background.jpg");
background-repeat: repeat;
background-color: transparent;
margin: 0;
padding: 0;
position:relative;
overflow-x:hidden;
}
This may/may not work
yes in IE Tester it shows fine. But I am using adobe browserlab.
http://browserlab.adobe.com/en-us/
Then BrowserLab might be misleading you.
Testing with your live site, it works fine in IE6 here: http://ipinfo.info/netrenderer/
And it works fine in genuine IE6 - I tested it myself locally using a virtual machine.
I don't think there's an actual problem here.