I've got html+css code running and looking good on explorer 10.
When i open the page in chrome the only differnce is the resolution.
Things (like headlines for examp.) that take 100% of the screen in explorer takes something like 75%-80% in chrome.
That causes white spaces to apper on the remaining 20%-25%.
is there any solution that doesn't require massive modifications in the code?
thanks.
*any code will demonsrate the issue, for examp:
<!DOCTYPE html>
<html>
<body>
<div >
This takes all the screen in explorer 10 but not in chrome.................................................................................................................................................................................................................................................................................
</div>
</body>
</html>
Use a "reset" CSS file. Here are some of the more popular ones: http://www.cssreset.com/
The problem here is that the "user agent stylesheet" is different between browsers, so a reset stylesheet will impose specific styles, thus making all browsers look approximately the same.
That problem is because you are not providing any CSS code to the file!
When there is nothing to process, the browser adds its own style. Which are known as "User-agent stylesheet". Which have their own styling techniques.
To minimize this, you can add just a few of the codes such as:
body {
margin: 0;
padding: 0;
}
This way, you can minimize the browser's override to control and change the auto margin and auto padding techniques!
In Google Chrome, if you just create a simple file like the one you have. And run it after saving it, you will find that browser automatically adds
margin: 8px;
And some of the other styles to the document on its own! That is because of the browser's CSS sheet.
Related
I have following code in header.php file on a WP theme :
<style type="text/css">
#Subheader{display:none;}
</style>
This code hides a div with id="Subheader" which works fine in Chrome and Firefox, but not in IE 8. When I look at source code in IE, the code is there, but its not hiding the div.
Also I have similar code :
<style type="text/css">
#Footer, .lwa-submit-links {display:none;}
</style>
in a page from wp-admin page editor, which should hide the footer div when that page is opened. Again its not working in IE.
Any Help would be appreciated.
This sounds exceedingly like a long standing bug in IE, whereby trying to hide an element using display:none didn't work if it's parent container was already display none. When the parent was re-shown, the child also became visible even though it was still display:none.
The problem is described and demoed in an interesting site: Position is Everything, about browser bugs. The full link for this problem is http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm.
However it was apparently a thing which affects IE in Compatibility mode (set from Tools/Compatibility settings); I don't know if you happen to be running in that mode? Even if not it might be well worth while playing around with the sequence you set things to display none to see if that will fix your problem.
Two different outputs, but exactly the same super-basic code:
CSS
input {
display: block;
min-width: 200px;
padding: 10px;
}
HTML
<input type="text" />
<input type="text" />
<input type="submit" value="Register" />
produces the following output on jsFiddle (live demo here),
but this output in jsBin (live demo here)
I have tested this in latest Firefox and Chrome (same differences everywhere).
In a plain naked .html file, it looks like on jsBin btw...
Two reasons:
Tools like these apply a CSS reset to their content to reduce
variability caused by browser defaults. Different tools will apply
different defaults
The specific difference seems to be the box-sizing property. Jsfiddle is going with box-sizing: content-box; while
Jsbin is going with box-sizing: border-box;
content-box takes the width, then adds the padding - hence the extra width. border-box; includes the padding (and border) in the width.
You can see what's going on if you open up a debugging tool like Firebug (or Inspect Element), target the input box, and look at the Layout tab (or equivalent).
As a side note, I can't see exactly where the box-sizing settings are coming from - it looks like they're not being set directly but are being applied as a result of another setting. Either that or I just can't find them... either way box-sizing is rather experimental, I wouldn't be surprised if they're fixed and giving the same result as expected in a few months.
The difference is the doctype.
From JS Bin (no doctype):
<html>
From jsFiddle (html5 doctype):
<!DOCTYPE html>
The lack of a doctype on JS Bin is throwing the browser into quirks mode. Apparently quirks mode and standards mode use a different default value for the box-sizing property.
jsBin is of course showing the correct/expected output.
I can't say why jsFiddle extends the input fields in that way - I cannot even view it, you said it was slow, the website won't even load for me at the moment.
Perhaps their current issues are greater than just slow/unavailability.
If I were you I'd just use jsBin for now and not worry about it.
Edit:
user568458's answer is better. I can't comment, but I think box-sizing takes a default value from the version of javascript - selectable in jsFiddle not sure about jsBin.
Assuming this is true, I can say for sure 1.9.2 adds padding to a given width - had me stumped for a good thirty minutes when it messed with my Wordpress layout.
Here's my deal:
The boss asked me to fix a page not displaying properly in IE7.
I'm working with a div tag initially set as:
<div id="login_content" style="left: 0px; text-align: center;">
And so it is rendered in Firefox, Chrome, Safari, and IE9. The issue comes in IE7--somehow the div is cut off when IE7 automagically decides to set the inline style with a height of 8px.
There are no scripts that modify this (as I said, it doesn't get touched in other modern browsers) and upon inspection with IE9 developer tools, it's not inherited from a style sheet. Does anyone know what might cause this behavior?
If it's running through an external script it's probably an inline style in that. If you post a link we can use inspection tools.
You can use the conditional <!--[if IE7] code to fix it [endif]--> to just change how it renders on IE7.
We've got a really annoying layout problem on our site only in IE (7 & 8 tested), Firefox and Chrome works fine. The problem is on this page:
http://www.foe.co.uk/community/campaigns/climate/rio_resources_33589.html
The problem code is that the report images should appear to the left of the text to the right. We have a simple that contains the item and the a inner floated to the left and another floated to the left too. Both have widths that are less than add up to less than the outer DIV. Here's an example bit of code that isn't working:
<div class="resourceitem">
<div class="resourceleft">
Test LEFT
</div>
<div class="resourceright">
Test RIGHT
</div>
</div>
The relevant CSS is simply:
.resourceitem {
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
div.resourceleft {
float: left;
margin-left: 20px;
width: 156px;
}
div.resourceright {
float: left;
padding: 0;
width: 268px;
}
Any help is much appreciated, it's driving me bonkers!
Cheers,
Chris.
UPDATE - Fixed it.
Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).
Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.
Cheers!
Remove </a> from the following code It is an extra code (might be a typo) and causing trouble in IE:
<div class="resourceleft">
<img border="0" alt="Rio+20: Is this it?" src="http://www.foe.co.uk/imgs/Rio_-_is_this_it.png" />
</a>
</div>
Note: every <div class="resourceleft"> has an extra </a>
UPDATE - Fixed it.
Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).
Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.
Cheers!
Certain pages display terribly in IE generally, what is the best approach to solving these issues?
You forgot to add a doctype, so your page is in Quirks Mode.
Add this (the HTML5 doctype) as the very first line:
<!DOCTYPE html>
and it should look better.
Although, changing the Document Mode manually (using Developer Tools; hit F12), it still doesn't look right. There are evidently other problems with the page.
The most pertinent problem (after escaping Quirks Mode) is this:
<body style="margin: 0; padding; 0;background-color: 4DA2CA;">
Internet Explorer is not showing any background colour because you forgot the # before the colour. (And you have padding; 0, with a ; instead of :)
This will work:
<body style="margin: 0; padding: 0; background-color: #4DA2CA">
But you shouldn't be using inline styles in the first place..
This would be better:
<body>
with CSS in your stylesheet:
body {
margin: 0;
padding: 0;
background-color: #4DA2CA
}
you mean that in IE the Div's are smaller.Thats because in IE css border,margin are included in the width declared.So, if you have given a div width of 100px and a margin of 10px both sides then in IE the actual visible width of this div will be 100-10-10=80px.To solve the problem you can use child css decleration.
Considering our example if you want to show this div 100px width in both the browsers do the following
.mydiv{ /*This deceleration will be understood by all the browsers*/
margin:10px;
width:120px;
}
html>body .mydiv{ /*This deceleration will not be understood by IE browsers so other will override the width*/
width:100px;
}
Using this you can uniform the width of your Divs across both IE and non-ie browsers
Instead of pointing out the reason for each element's different way of rendering in IE, I would strongly recommend not re-inventing the wheel each time you create a new page element.
Even in modern standards-complaint browsers, CSS can be very unpredictable, so it's better to use bullet-proof snippets of code from trusted sources such as
CSS the Missing Manual
CSS the Definitive Guide
CSS Cookbook
Start out with working blocks of HTML/CSS and modify them to your liking and test cross-browser from there. The whole process will be much less frustrating.