This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make IE support min-width / max-width CSS properties?
I have a site that has it's main navigation in a list (floated left).
The li elements need to have a min AND max width.
This css of course works fine in all good browsers.
But IE (9) doesn't react to it.
ul.dropdown li {
line-height: normal;
text-align: center;
max-width: 145px;
min-width: 88px;
min-height: 30px;
}
If I use this code on one condition, for example max width IE respects it.
http://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/
But of course I can't use the same for min-width.
I need a solution that IE respects max AND min width.
Is there a solution?
Thank You!
edit: I forgot to mention i already added
<!DOCTYPE html>
;)
Ok, I found the problem.
It wasn`t in the code, my IE just automatically switched into Quirks mode.
Changed it by going in the console (F12) and changed the Document Mode to IE9!
Thank You!
Try this (it's work on my ie8)
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>template</title>
<style type="text/css">
#content{
height:400px;
background:yellow;
*width: expression(if(document.body.clientWidth < 534){"533px";}else if(document.body.clientWidth > 776){"777px";}else{ "auto"; }); /* set min-width for IE */
background: red;
}
</style>
</head>
<body>
<div id="content">
hello
</div>
</body>
</html>
I don't know how to write this with ? and :.
Hack width with this : http://paulirish.com/2009/browser-specific-css-hacks/
Related
Can it be done - crossbrowser (IE9, Mozilla, Chrome, Opera) ?
In this snippet .box border is affected by zoom property. Can this be avoided ?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box {
zoom: 3;
-moz-transform: scale(3); /* FF fix */
border: 1px dotted black;
padding:10px;
}
</style>
</head>
<body>
<div class="box">content</div>
</body>
</html>
I'm not really sure what you expect here. If you apply the zoom property to any element, then all of it's measurements will be transformed by 1/x. Away your example, the best way to do this would be to divide the intended measurements by the value of your zoom. In your example, if you wanted to keep padding at 10px (or thereabouts), you'd use padding:3px instead.
However, because your issue is with the border property and specifically, having set 1px as the value, you can't divide this by your zoom value. Instead, you're going to have to wrap HTML around it:
<div class="border">
<div class="box"></div>
</div>
And move your border styling from .box to .border
Working Fiddle
I've been scratching my head over this for the last few hours. I'm trying to make an input field that stays put at the bottom of the page, similar to the Omegle chat bar.
I've set my height to 100% (well, 99, because if it's set to 100 the page has unnecessary scroll bars) and set the CSS bottom property to 0, but no matter what I try, the bar stays floating around 10% down the page.
My CSS code is:
html {
height:99%;
width:99%;
}
input.chatbar {
bottom:0;
width:90%;
height:5%;
outline:none;
resize: none;
border:none;
border-bottom:#000 medium solid !important;
}
and my HTML code 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Global Chat</title>
</head>
<body>
<input class="chatbar" />
</body>
</html>
and here is a JSFiddle of it.
I want it to float above the page and scroll with the user, like the Omegle bar. How would I do this?
Sorry, I know this is a basic question, but I can't find the answer anywhere else.
Add position: fixed; to the css
Also be careful about the percent heights. Check out min and max height properties
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 :)
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)
how can I (cross-browser compatible) maximize an iFrame so that it appears to be the page in the URL bar even though it is served from a different server?
I guess this ought to work:
<!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" xml:lang="en" lang="en">
<head>
<title>Test page!</title>
<style type="text/css">
html, body {
overflow: hidden;
margin: auto;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<iframe src="page.htm" width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>
Edit 1: You could just hide the scrollbars of the page, with the HTML and scroll=no directive
(that solution should be multi-browser)
Edit 2: Now even XHTML proof ;)
Edit 3: And finally w3 validator ok
(be sure to add scroll=no in the BODY if you run in Internet Explorer compatibility problems)
Use javascript with the event body load to set iframe height & width to window height & width.
For example in jquery :
$(document).ready(function () {
initIframe();
});
function initIframe() {
$("iframe").height($(window).height());
$("iframe").width($(window).width());
}
Tested on FF, IE and GC
You could set the width and height of the parent page's html and body tags to 100%, as well as the iframe tag that contains the page you want to load.