Here are my styles:
Parent container:
div.musicContainer {
width:820px;
height:54px;
margin-bottom:20px;
}
Child containers:
div.hardcorePlayer {
width:400px;
float:left;
border:none;
background-color:#996600;
}
div.feedbackPlayer {
width:340px;
float:right;
border:none;
background-color:#996600;
}
The issue is: i installed IE9 yesterday and while IE8 was displaying fine well now the feedbackPlayer div is not lined up to the right boundary any longer. it displays fine in other browsers as before.
is this a IE9 bug?
IE9 image:
other browser image:
thank you very much for your thoughts on this.
website url: www.guygar.com/guygar.html
NOTE: here is the new CSS with the reset data. Have i done something wrong?
Maybe you should try to reset the css so that all browsers start out with the same defaults (like padding, margin ect.)
You can find a css-reset and more information here: http://meyerweb.com/eric/tools/css/reset/
Edit:
Related question: https://stackoverflow.com/questions/116754/best-css-reset
This line is in flash.
Change body background to white, and .musicContainer to red. You will see that html is not failing. In my opinion it is a flash like bug.
Try zooming in FF ( I tested in 5.0) on few zooms there is also same gap.
I couldn't find a css reset being used on the site you provided. It may just be a difference in how IE9 displays different elements (margins, padding etc). I tried out the provided website in IE9 and didn't see the problem so it's a bit difficult to diagnose, though.
I'm using this approach for my websites I created prior to IE9.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Let it be the very first meta tag in your head tag, and IE9 will act as it was IE8, hopefully in the same identical way.
It solved all my problems in all my websites until now.
Enjoy
It's related to flash redrawing. It behaves the same in ie8. Try resizing the browser window width and you will see that it doesn't update correctly.
Why dont you try a html5 player like http://www.jplayer.org/ instead?
Maybe try using js to check the browser and alter the size or position with js in an if statement.
w3 schools has a nice tutorial on browser checking.
http://www.w3schools.com/js/js_browser.asp
Related
I realize this question has been asked before but the solution that is usually supplied involves adding this to the target tag:
overflow-x: hidden
which I've done. This fix prevents horizontal scrolling in Firefox but fails when it comes to Chrome and IE8 (not so much an issue at this moment in regard to IE8). Judging by previous questions this may have become an issue since Chrome version 34. So how do I go about fixing this?
Thr problem CSS that is causing the scrolling looks like this:
// Tablet portrait and landscape
#media (min-width: #screen-sm-min) {
& {
margin: 0 -100% !important;
padding: 30px 100% !important;
}
}
the above causes the content to appear evenly in the center as per the requirement. Any advice on this or a possible resource to explain why this happens in Chrome?
Thanks
P.S. I also noticed that this site doesn't have that problem - why would that be? Fundamental difference in structure? Or the CSS I'm looking for?
Thanks for everyone's efforts even though I provided little information. We solved the error though we still don't know why it was happening. We have different .LESS files for different pages but they are all imported into one called ice-styles.less
Here was were I was adding the overflow-x: hidden and for some reason this was being ignored even with an !important suffix appended. My understanding of this was that it should apply to all pages because it was being attached to the html and body tags.
So we moved the same line above into the .LESS page that the problem was occurring and it fixed the problem - but it didn't introduce the problem into other pages - this suggests that the structure of the page was the real culprit.
Thanks again everyone
did you tried styling it by jquery?
$(document).ready(function(){
$('body').css('overflow-x','hidden !important');
})
or even if it didnt worked trying it after few seconds
$(document).ready(function(){
setTimeOut(function(){
$('body').css('overflow-x','hidden !important');
},1000)
})
there is something that is overwriting you overflow:hidden tag...
maybe there is some css that gives your element some width and then you force the overflow which does not happen at times in chrome or IE...
html {
overflow-x: hidden; //or none
}
My website appears different in firefox compared to chrome or safari, the logo image at the top of the page is placed higher towards the top of the page.
I have tried using vertical-align but had no luck. Any suggestions? (page is institute101.com)
header .logo img.standard {
display: none;
vertical-align: middle;
}
The page is even more messed up in IE, is there a general rule I should keep in mind when making a page compatible for all browsers?
The difference in layout is because Firefox is not honouring the 30px padding on your body element. Firefox seems to be ignoring that.
The problem is highly likely to be the dreaded Quirks Mode.
Many browsers will put the page into quirks mode if the site does not begin with a valid Doctype. The problem with quirks mode is that it works differently in different browsers.
Your page does have a doctype, but importantly, it is not the first thing in the page, and that is why it is going into quirks mode -- you have some rogue CSS and javascript tags before it; these need to be moved into the <head> section of your page.
Fixing this will definitely solve the problem as far as IE is concerned. It will probably solve the problem for Firefox.
Hope that helps.
The problem comes from this css file:
Last row of this file is:
body { margin:0; padding:30px 0 0; }
if you delete the padding you'll have the same appearance with Firefox.
I have this "web-site" -> http://www.krlja-ustvari.hr
It works 'perfect' in Google Chrome. By 'perfect' I mean that content is always 100% width and 100% height, overflown stuff is hidden and line breaks are made without <br /> tags. That's exactly what I need.
However, when I look at the same page in Firefox or Internet Explorer (didn't check with other browsers) I can see vertical scroll bar. That's exactly what I don't want.
My question is simple: how to make this page render in all browsers like in Google Chrome?
Thank you very much for any help!
if you do not need scrollbars in the body/document at all
<style type="text/css">
body { overflow:hidden; }
</style>
I believe that if you change the min-height:100% declaration on #content to just height:100%, you should be fine in those other browsers.
That worked when I edited your page in Firebug for FF.
The following web page is not showing properly in IE 9.
It seems to be only a problem in IE 9.
http://froyo.tv/test/
the list-style-image are over the image!
IE9
Firefox, Chrome, IE8, ...
EDIT: I know how to fix it! But I want to know what is really going on with IE9
Fixed: http://froyo.tv/test/index_fix.php
I'm not sure why IE9 is behaving differently, but you can fix it to work consistently by:
Removing margin-right: 30px on .image.
Removing width: 500px on .detail (you may wish to add back a smaller width)
Adding float: left to .detail.
Here's a simple reproduction of the problem.
Broken: http://jsfiddle.net/Nh3kf/
Fixed: http://jsfiddle.net/Nh3kf/1/
This is a fix for the problem in IE9:
li{list-style-position: inside;}
I guess that IE9 doesn't have the list bullets "inside".
Se the fix here:
http://jsfiddle.net/Nh3kf/40/
Okay, using Chrome I can see the custom list images, IE9 doesn't handle list-style-image.
Instead of using it, try this:
li {background:url(your_image.jpg) center left;}
For IE 6 we have plenty of bugs to bug us as a designer.
incorrect box model etc etc.
i have searched for fixes via JavaScript and found
[link text][1]
IE7.js
IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
but do we have real life saver other than javascript via css.
Ways to deal with IE6 bugs with CSS? Sure.
See: http://www.quirksmode.org/css/condcom.html
for conditional comments
There are other ways, such as adding some specific characters in some CSS properties that get ignored in some browsers but not in others.
However, in some cases, web designers should be very cautious when using these.
The alternative is to live within the IE 6 world of bugs and design your pages to look right despite them. You can serve up different css for your IE6 clients, or even different html if necessary, depending on your design. In some cases, you can use one CSS file that will mean different things to IE6 clients, but that technique is problematic with respect to IE7 and 8.
this link is also handy one
How do you deal with Internet Explorer?
I never knew this - thanks svinto
"IE6 doesn't have the incorrect box model unless you have the wrong doctype. – svinto"
There are some simple stylesheet hacks that can modify the presentation in various internet explorer versions to solve your CSS problems. For example these three:
Simplified box model hack for IE4, IE5, IE5.5:
div.values { margin: 10px; m\argin: 20px; }
star html hack for IE4, IE5, IE5.5 and IE6:
* html div.values { margin: 5px; }
star first-child+html hack for IE7:
*:first-child+html div.values { margin: 5px; }
PNG transparancy issues could be solved with solutions like this:
<div style="width:50px;height:50px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/logo/logo.png');">
<img src="/images/logo/logo.png" height="50" width="50" alt="" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" />
</div>
Great info so far but one thing to note is that IE7.js doesn't fix pngs in all cases (at least last I looked). For instance, you won't be able to tile a background image with transparency.
In the case of DXImageTransform you may find that when this is applied to elements that contain links, those links are no longer 'clickable'. You can sometimes fix this by giving the parent element that has the transform applied to it static positioning and to position the child anchor element e.g.,
h2{
position:static;
zoom:1;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/mypng.png", sizingMethod="scale");
}
h2 a{
position:relative;
}
<h2><a href="" >a link!</a></h2>
If you have to do this sort of garbage put it in a separate stylesheet and control loading with conditional comments. If the design is of any complexity try you best not to support ie6 or <. If you can't avoid doing it, charge more ;). Sometimes that is enough to persuade someone that supporting ie6 isn't "worth their while".
why don't you try FireBug Light for IE? It's not as powerful as FireFox FireBug but can be helpful
Many bugs can be worked around in CSS using conditional comments or CSS selector hacks. But there are some bugs that CSS hacks alone cannot handle such as IE6's .multiple.class.selector.bug
There's another quick and dirty hack for IE6 styles
for e.g.
You can define the CSS as;
.divTitle
{
padding: 5px;
width: 600px;
_width: 590px;
}
All the other browsers picks up 600px as the width value & IE6 overwrites it & take 590px;
I've tested this in IE7 & FF as well.
Also you may want to check this link;
link text