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]-->
Related
I'm trying to get this to work:
<!doctype html>
<html>
<style>
section{
display: none;
}
section:only-child {
display: block;
}
</style>
<body>
<section>This should be visible</section>
</body>
</html>
I believe that the text 'This should be visible' should be visible! This is also the case in Firefox. Firebug, as well as Safari's Web Inspector think so as well.
However, if you open the page in Safari (OSX and iPhone), the text is not showing. Why is this?
I tested your code, also with a doctype, and with a non-HTML5 element (a div). All webkit browsers I could test had issue: Safari-on-Windows 5, Chrome Windows, Chrome Linux, Epiphany-webkit.
When I changed from display states to background colours, however, webkit worked fine. Changing other display states like float also worked fine.
This is very likely a bug (though I didn't see one via search engines, but I did not search bugs.webkit.org) purely to do with changing display states. It also works fine if the element is first set to block and :only-child is set to none, so it would specifically be overriding the display: none. Opening element inspectors seems to trigger the CSS display which remains until refresh.
Your code (if you add a doctype too) seems to be a pretty good test case. If this bug isn't already on bugs.webkit.org you could submit this code.
*edit okay I definitely have Javascript on, still don't see the ability to have this be a comment rather than an answer, which is what I originally intended.
I have the same problem and I found this workaround:
http://jsfiddle.net/ZxAnH/
section {
height: 0;
overflow: none;
}
section:only-child {
height: auto;
}
It wouldn't hide the elements margins but as a wrapper it could be enough to hide some elements. Did you found another workaround?
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've read about quite a few people having a problem with this and I've tried all the solutions I can find - hopefully someone can't point out where I'm making a mistake.
I'm working on this site, and as far as I can tell, I'm in standards mode. The doctype is the first thing in the file, and it's valid. I've tried using a wrapper div or body tag with text-align: center and the container div using text-align: left.
I can't seem to find anything that works. Any ideas would be greatly appreciated.
Your problem looks like it's in the ie7.css file. It has this rule:
* {
display:inline;
zoom:1;
}
Inline elements don't have margins. You'll need to drop this rule, or add display:block; to .container_12 somewhere.
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]-->
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