I'm building a page which works fine in all browsers except IE6, where a small space appears below the cart. The background also has a gap in IE6, so I'm wondering what might be causing that, as it's probably related to the main issue.
If anyone could help I would really appreciate it! Many thanks.
Hi add this in your style file
#navigation {
width:736px;
height:auto;
background:url(../images/nav.gif) no-repeat;
float:left;
}
Have you tried adding a ie6 only stylesheet? Add this to the head tag and then add the appropriate styles to the css document and they should only apply to ie6.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6_xxx.css"><![endif]-->
Related
Been browsing the questions and Googling it but I can't seem to find a fix for this issue. The layout looks perfectly fine for the Grid anywhere else except for IE7 (surprise).
http://lalive-branch.aeg-webdev.com/
The boxes should all be within 5 pixels of each other, but in IE7 the spacing below divs get botched up completely. There are a few fixes I put to try to minimize the display differences between browsers, but this one just boggles my mind completely.
Any insight or help would be greatly appreciated. Please ignore the jquery error and the likes :), thank you.
Remove: clear:both inside your css code for:
.gridRow {display:block; /* Remove - clear:both; */}
Then it will work on all browsers.
you have to use script for solve this error of css.
in your core you have to create one javascript and this script you have to create one method like as below.
if(browser_version == 7 || browser_version == 8){
document.getElementById("your_div").style.padding = padding as you want.
}
else{
document.getElementById("your_div").style.padding = default padding.
}
i think this can help you for Browser CSS Error.
You have to make few changes inside your CSS:
1) Inside .gridRow remove clear: both then you should consider adding overflow attribute and put all margins and paddings inside .gridRow insted of .gridBox. It's better practise because you need to change only one class when your layout get changed.
.gridRow {
/*clear: both;*/
display: block;
margin-top: 5px;
overflow: auto;
}
If you want IE7 styles only, you can add the following to your tag:
<!--[if IE 7]>
<style type="text/css">
.myIE7onlyClass {/*styles here*/}
</style>
<![endif]-->
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
I'm having an issue with IE9 showing horizontal scroll bars on a printed page even though the contents of the page fit entirely. I've tried several things to remove them in my print css. Has anyone else had this issue and found a way around it?
I faced the same issue. It is a funny fix. Define the overflow property as important. It works. LOL on IE.
overflow:hidden !important;
I have had this issue several times with IE in the past. It is usually a margin issue. Different browsers calculate margins differently. How are you positioning the elements? Do you have a fixed-width wrapper around the content or does the body expand to the browser width?
It's really difficult to pinpoint the problem without the actual css code.
I would suggest removing any negative margins you have (IE does not like these), and check to see if you have any right margins on elements that are unnecessary.
#media print{
.dont-print
{
overflow:hidden;
}
}
dont-print is just a class name which i've used before, changed that to whatever you need
Use following code on body tag in JavaScript function print:
printWin.document.write(
'<style>div {overflow: visible !important; height:auto !important;}</style>'
);
Are you sure you set the right stylesheet media type? Like:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />`
And try the following in your print.css:
html, body { overflow-x: hidden; }
I'm using the HTML5 elements and in a project i'm working on and the css seems to be working fine in Chrome. However, it doesn't appear to be working in Safari or Firefox (I haven't tested IE, but I'd imagine it's the same), and the page layout is all over the place.
Any ideas why this may be? I know Firefox and Safari both support these elements, and Safari is webkit-based like Chrome, so I can't figure out what the problem is.
You can see the webpage here. {website link not available}
Safari and Firefox have the same level of ‘support’ for HTML5 sectioning elements (after seeing your demo page, I’m guessing these are the elements you’re talking about): they can be styled, but you have to set display: block; implicitly.
aside, article, section { display: block; }
Adding this rule to your CSS will solve the problem.
To make these elements stylable in IE, you just need to use the HTML5 shim/shiv. Put the following HTML in your <head>:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Which part isn't working exactly? The <canvas> element appears to be rendering correctly, your <article> container isn't being ignored.
I'm in FF3.6.2, btw. The only CSS errors I see are just that: CSS errors.
I had a problem with "figure" element, not showing background image. so i overcome the problem with this...
background-image:url("../img/login_bg.jpg");
background-position:center center ;
background-repeat:no-repeat;
background-size:cover;
This didn't work...
background: rgba(0, 0, 0, 0) url("../img/login_bg.jpg") scroll center center / cover ;
There is 20px margin/padding below the catmenuconatiner (second navigation bar). This is only showing in firefox and chrome not in IE 6+
Here is the page: www.fish-and-web.blogspot.com
Another problem related to the same issue is between the comments. The comment boxes have 15px margin between them. Again, this is only showing in Firefox and Chrome not in IE6+
Here is the comment page: http://fish-and-web.blogspot.com/2010/05/alfa-romeo-9c_24.html
It'd be great if someone comes along and guide me in the right direction. I have been working on this for hours and I just cannot get it to work. Just so you know that the page is hosted on blogger.
Thank you.
You may want to consider an IE6 conditional style sheet, this can be done by creating a new css sheet (ie6.css) and pasting creating a conditional as follows:
<head>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
</head>
Within your IE6.css add the following style for the catmenu container:
ul.topnav {
padding-left: 0px;
}
You can also add the solution from the previous answer (Maj. Fail) to the IE6.css.
That should do it. Hope that helps.
The answer to your second problem is that it appears you have not cleared each comment. just before the closing part of the comment div put in
<div style="clear:both"></div>
The first problem I'm not sure about because I don't see what the problem is =/ It seems to be displaying fine for me?
In order to remove any margin/padding cross-browser problem, do this at the start of every css file.
body, h1, ul, li
{
margin: 0;
padding: 0;
border: 0;
}
This way you always reset them to 0 and any further margin/padding should act the same way in every browser