The following code renders differently in IE7 and FF3 (NEW CODE POSTED OLD CODE WAS MISLEADING - sorry for confusion)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#boxr1{
background-color:#FFFFFF;
border:3px solid #DDDDCA;
float:right;
width:420px;
}
#boxr2{
background-color:#FFFFFF;
border:3px solid #DDDDCA;
float:right;
width:420px;
}
#boxleft{
border:3px solid #DDDDCA;
color:#277491;
width:300px;
}
</style>
</head>
<body>
<div style="width:800px">
<div id="boxr1">test<br/>test<br/></div>
<div id="boxr2">test2<br/>test2<br/></div>
<div id="boxleft">leftdiv</div>
</div>
<div style="clear:both;"></div>
</body>
</html>
I can't seem to figure out what is causing the difference. I want it to behave the way FF does (of course). Any guidance is appreciated. The difference I see is that in FF the left div starts at the top of the page whereas in IE it is rendered "below" the other divs (although it is over to the left).
Starting with FF 3.5, they starting using the same box-model rendering as other more modern browsers (IE8, Safari, Chrome). IE7 is using an earlier out-dated model. You may need to target IE7 specifically with a CSS hack. One common IE7 hack is the *:first-child+html hack.
*:first-child+html <your class or id>
{
margin: ...
}
This will target ONLY IE7. If you want to target FF 3+, you can use:
html>/**/body <your class or id>
{
margin: ...
}
and for FF 3.5 ONLY:
body:nth-of-type(1) <your class or id>
{
margin: ...
}
I tweaked your original example a little and the code below looks the same in IE, FF, Chrome, and Opera.
<html>
<head>
<style>
#wrapper{
width: 923px;
vertical-align: top;
}
.boxRight{
background-color:#FFFFFF;
border:3px solid #DDDDCA;
float:right;
margin:3px 0;
width:560px;
}
#boxleft{
color:#277491;
width:357px;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="boxleft">leftdiv</div>
<div id="boxr1" class="boxRight">test<br/>test<br/></div>
<div id="boxr2" class="boxRight">test2<br/>test2<br/></div>
</div>
<div style="clear:both;"></div>
</body>
</html>
EDIT:
I updated my code after your edit to your original post. The above works in FF, Chrome, IE, Opera.
Since IE 7 does not include padding when deciding the width of the element while other modern browsers do the only option for you is to use a IE 7 only hack with width:560px
Instead of doing any hacks, try adding this to the beginning of the document before the <html> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Without a doctype declaration, IE7 goes into quirksmode and padding works differently than in Firefox.
From wikipedia (in quirksmode IE7 acts like IE5 in this regard):
When a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward. Internet Explorer 5 includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box.
Related
This is my 'brevity' HTML
<html>
<head>
<style type="text/css">
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% 36.1em;
overflow-x:hidden;
}
</style>
</head>
<body class="custom one_sidebar">
<div class="header_area"></div>
<div class="content_area"></div>
</body>
</html>
The problem is that the background image location does not work in IE7. It does in IE8 and just about every other browser. Would like some help in figuring out why.
that is because you mix up percent & em in the position.
For IE7 you have to use 2 times the same, percent/px or em:
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% value%;
overflow-x:hidden;
}
or
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat value_em 36.1em;
overflow-x:hidden;
}
First, be sure you have a Doctype selected, as without one, it will trigger Quirks mode and IE will not render some shorthand background properties correctly (or at all).
Try adding display: block, and a proper width and height to the sidebar CSS. IE has known issues with rendering some properties when the element isn't strictly defined as a block element.
Is margin treated differently in IE and Mozilla ? Because when I tried Mozilla 3.6 displaying margin correctly but IE 8 stretching it too far.
Here is my code
<div id="searchCriteria">
<table width="100%" border="1" bordercolor="#64A4F5">
</table>
</div>
<div id="searchResult">
</div>
Here is my css
#searchCriteria{
height:24%;
width:100%;
float: right;
display: block;
font-family:
verdana,arial;
font-size: 12px;
}
#searchResult{
height:70%;
width:100%;
float:right;
display:block;
margin-top:15px;
margin-bottom:5px;
}
Margin between searchCriteria and searchResult div is getting stretched in IE but working fine in Mozilla.
(It looks like in IE some space is coming between table element and searchCriteria div)
I tested your code In FF 3.6.13, IE7-8. I observed the issue only in quirks mode in IE, which probably means that you're either not using a Doctype declration or using IE in quirks mode. If you're using XHTML use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
</head>
<body>
<p>… Your HTML content here …</p>
</body>
</html>
If you're using HTML5 use:
<!DOCTYPE html>
See this for a list of other Doctype declarations to use.
height:24%;
Any certain reason to use percent values?
Anyway, I think it's probably Quirks Mode. Try adding <!DOCTYPE html> at beginning of document to see if it'll help.
Are you using a stylesheet reset? It's possible browser-inherited margins are conflicting with your design.
Eg.
div, table, td, th, tr, {
margin : 0;
padding : 0;
border : 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Here's a link to a more extensive CSS reset
It also may be helpful to use the developer tools (F12 in IE, and the Firebug extension in Firefox) to troubleshoot the discrepancy in your design--if you gather specific information (eg. there's 4px unaccounted for,) you will have a better change at spotting the problem.
P.S. Be extra careful when working with percentages--something like padding will compound the percentage values, resulting in overages. I'm actually not sure if your border : 1 compounds with 100% (resulting in 100% + 1px,) but just a helpful reminder.
Add a second margin-top declaration to your searchResult div like so :
margin-top:10px\9;
This will target only IE8 and below. Change the amount of pixel until it looks good to you.
Added height=100% to <table> and it works.
Thank you all for your suggestions :)
Why does this create a veritcal scrollbar in IE6, IE7 and IE8? How to avoid it?
(I had a real applet in there, but I discovered that this heavily mutilated one gave the same result and helps simplify the test case)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Why vertical scrollbar in IE?</title>
<style>
HTML, BODY {
height: 100%;
}
BODY {
padding:0;
margin:0;
}
/* And yes I can use this, but I'd rather not
BODY {
overflow-y: hidden;
}
*/
</style>
</head>
<body>
<APPLET WIDTH = "100%" HEIGHT = "100%"></APPLET>
</body>
</html>
Above also available as http://www.morch.com/download/ieVerticalScrollbars.html
applet {
display: block;
}
To prevent rendering the applet as an inline-element, which enforces line-height rendering.
Add position: absolute; to the applet's style.
Try bringing the height down to 99% or 98%. Or try throwing in some more thorough reset CSS. Don't ever use overflow-y on a body element. Terrible usability.
Thing 1 -- CSS/overflow
Here are the CSS settings you can work with (if they help): http://www.w3schools.com/Css/pr_pos_overflow.asp
Thing 2 -- CSS-erize the scrollbar itself (i.e., turn it completely white, or whatever works for your page.: http://www.draac.com/css/csstricks.html (scroll down a ways)
can anyone help?
I have a problem aligning rounded corners in IE6/7. Basically everything seems to work in Firefox / IE8 but in IE6/7 the left / center / and right divs get misaligned.
This basically shows exactly what i am refering to.
here is the example in IE8 and everything works ok http://es.drop.io/ern0fye/asset/ie8-jpg
And here is the problem (this example is running in IE8 with compat mode set to IE7)
http://es.drop.io/ern0fye/asset/ie7-jpg
I seem to remember there being a bug in IE6/7 with lineheight or similar but i don't recall exactly.
I will paste the CSS and HTML below it is very very simple. Basically there is a left div that holds the left corner image and center div which has a background of RED which is the same as the corner images and finally a right div which holds the right corner image.
I would appreciate any input anyone has. Thanks in advance.
Here is the CSS
.vl-top-left
{
float:left;
width:12px;
height:12px;
}
.vl-top-center
{
float:left;
width: 485px;
background-color: #F04A23;
height:12px;
}
.vl-top-right
{
float:left;
height:12px;
width:12px;
}
and the HTML is :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="vl-top-left">
<img src="content/images/esquina_sup_izq.gif" width="12" height="12">
</div>
<div class="vl-top-center">
</div>
<div class="vl-top-right">
<img src="content/images/esquina_sup_der.gif" width="12" height="12">
</div>
</body>
</html>
EDIT
Applied also margin:0 and padding:0 on the body and on each DIV but still the left and right div drops down as per the screenshot
Apply style img { float: left; }
this is my css. It is working fine in firefox but not working in IE.
#Createinner {
position: fixed;
width: 400px;
height: 280px;
margin-left: -200px;
margin-top: -140px;
top: 50%;
left: 50%;
background-color: #ccc;
}
How to solve this.
Thanks in advance
Simply add DocType Tag on top of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
What sorted my problem with IE was the code in:
http://annevankesteren.nl/test/examples/ie/position-fixed.html
basically added:
h1{
position:fixed;
_position:absolute;
top:0;
_top:expression(eval(document.body.scrollTop));
}
for fixed position in IE 8
DOCTYPE is very very important.
one of:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
or
<!DOCTYPE HTML>
And its very very important that
those be in first line.
css:
#footer
{position: fixed; right: 0px; bottom: 0px; }
html:
<div id="footer" >
Fixed Div
</div>
IE6 doesn't support position fixed.
If you really need this to work in IE6, use conditional comments to serve an IE only CSS file and fake position:fixed with CSS expressions.
(edited to correct IE version info.)
I recently wrote a jQuery plugin to get position:fixed working in IE 6+. It doesn't jitter on scroll, it looks at capability (not user-agent), works in Internet Explorer 6, 7, 8.
If you use strict mode in IE7+ position:fixed will be honoured, but by default IE7+ operates in Quirks Mode. This plugin checks for browser capability, and if it doesn't honour position:fixed, then it implements the jQuery fix.
http://code.google.com/p/fixedposition/
Something like this may work for you:
$(document).ready(function(){
$("#Createinner").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
You may need to make some minor CSS adjustments to get it working for your code. I'm working on "offset" values as options as we speak.
Versions of IE pre 8 do not support position fixed properly.
What is the problem with the CSS e.g. why is it not working, what do you see on the screen?
http://ieproblems.blogspot.com/ use this one it will solve your problem
#mainDiv{
overflow:auto;
}
#subDiv{
position:relative;
top:expression(this.offsetParent.scrollTop+'px');
left:expression(this.offsetParent.scrollTop+'px');
}
<html>
<head>
</head>
<body>
<div id="mainDiv">
<div id="subDiv">
This Text is Fixed
</div>
</div>
</body>
</html>
You have tagged this as HTML but `` is not an HTML element. Internet Explorer will not let you style elements that it does not recognise.
- Use only [HTML elements][1] in HTML documents
You have updated your question so that it appears you are using an id selector not a type selector. This renders my original comment irrelevant.
IE 6 does not support position: fixed
Use workarounds if you need to support IE6
Other versions of IE don't support position: fixed in quirks mode
Use a standards mode triggering Doctype (generally HTML 4.01 Strict is the right choice)