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
Related
I have the following situation, in .NET I have a master page that contains the following CSS for printing:
<style type="text/css" media="print">
div{overflow:visible !important}
</style>
This works fine in Firefox and Chrome, however, in IE the top of the page gets cut off. I spent quite a bit of time trying to adjust the page, I know I need overflow:visible !important otherwise the page looks terrible in other ways, like the scroll bar appearing. Anyone have any advice?
Printing CSS:
Make sure all print floats are: float none;
Make sure your body is overflow-y: visible;
Make sure all your contents for print have display: block;
http://philliesnation.com/
I am currently debugging this site for Internet Explorer and am running into two issues:
In IE7/8/9 at the bottom of each post there is a "Filed Under:" section that has a ul set at 200px wide. But for some reason in IE it is being shrunk down to 50px by adding an inline style to each li item. Therefor, the section shows up vertical instead of horizontal. In FF/Ch/Saf it looks fine.
In IE7 the main navigation is not properly working. If you scroll over nav points you get a dropdown with more information, but on on three tabs: News/Features/Multimedia these dropdowns dont work at all.
I did not build this site but am helping to debug it and have been trying for numerous hours on end to figure out why these bugs occur. Any help is much appreciated.
To fix your first issue: In your func.js you have the following line:
if( $.browser.msie ) {
$('.post-links ul li').css({ 'width' : '50px' });
};
Thats whats messing up the width of your "File Under.." section in IE. Remove that and all is well (i see no reason why to keep it).
For your second issue: I can't quite diagnose the problem because your site keeps freezing my IE browser (it's so heavy!!) but from what i can tell your nav script is not firing in IE correctly, so you're going to have to force it with some conditional comments in the header of your document, like so:
<!--[if lt IE 9]>
#navigation li:hover .dd-menu {
display: block;
}
<![endif]-->
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]-->
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]-->
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 ;