I have a question regarding CSS in Firefox.
If i set a width of a floated div - lets say 200px - setting a padding-left to 10px will in Firefox add those extra 10px to the width. In IE that is not the case.
What can you do to prevent Firefox from adding the extra width to the div?
It's not firefox that's the problem, it's IE.
IE does not perform to standards, there are a few tricks to this but they are all a pain in the ass: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
The easiest way is to include a valid strict doctype tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Then just rewrite the css for the standards-compliant box model
More doctypes here
By default, box-sizing is set to content-box in mozilla and border-box in IE.
by using:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
in your style's you can set box sizing of mozilla, safari and opera to border-box too.
for more information check:
http://www.css3.info/preview/box-sizing/
Related
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>opera border radius</title>
<style type="text/css">
img{
border-radius:10px;
-o-border-radius:10px;
}
</style>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Bonsai_IMG_6426.jpg/450px-Bonsai_IMG_6426.jpg" width="337" height="450" alt="my think">
</body>
Opera doesn't like adding border-radius to images directly -- Opera is stubborn like that.
For a solution that works in Opera, check out http://www.komodomedia.com/blog/2010/10/border-radius-rounded-images-and-avatars/
Also, put the real CSS rule border-radius after the vendor-prefixed rule -o-border-radius.
Take a look at http://dev.opera.com/articles/view/css3-border-background-boxshadow/#border-radius
Border-radius has had issues in opera, since quite some time. In latest versions, if supported
can be used directly using border-radius property.
Officially, Border radius property is supported by all Opera versions > 10.5, but NOT on Opera Mini, and Opera Mobile < 11, but seems to give problems.
(Also, tag this question under css3)
[EDIT]
I just checked your code again. You wanted to appy border-radius to an image. This is not possible in Opera, unless you put it as a background-image using css instead of foreground one.
So to get this done, make a div and apply the rounded corners to the div instead of the img.
then set the background-image as the image, you should get the rounded corners. In case the image doesn't come centered, just change position property. That should do the trick.
Here, try this : http://jsfiddle.net/c8nmZ/5/
My knowledge of css is very limited. In a larger context, I need to do something like the following:
Inner div goes inside other divs. I am trying to position the inner div, offset from the browser window and with a size that is certain percentage of the browser window. So I apply the following css to the inner div
.abs_pos {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: yellow;
z-index:1002;
overflow: auto;
}
This works on Chrome and Firefox. But on IE (all version), the inner div's width becomes a percentage of the immediate outer div and not that of the browser window, while the height appears to be determined based on the content of the inner div.
I have the link here to the sample html file.
http://orissaclassifieds.com/pos.html
So how can I make this work? Thanks for your help.
Your current code should work, but you are using an invalid/incomplete doctype which is sending IE into quirks mode.
For HTML4.01 Transitional it should be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
However, a much shorter/simpler doctype to use is HTML5's. It will trigger standards mode in all browsers:
<!DOCTYPE HTML>
You can make it work in all browsers by making the parent div have a css rule:
position:relative;
excuse me, but i don't understand why you use percentage for every parameter, also width and height inside another div... unless the main container is the body page. In your case i should use pixels, and if the div is placed into another div you can use relative instead of absolute...that is relative to the container where you're into...hope this helps
i am working on my website http://bookmyshirt.co.cc/help/index.html but its background is not align in internet explorer but it is working fine in firefox.
Please help me out.
Try adding a DocType.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I also had a look at your styles. If you replace the styles on #maincontainer:
left: -480px;
margin-left: 50%;
position: relative
with
margin:0 auto;
width: 960px;
Everything should line up. If it doesn't, use IE's developer toolbar to trace the styles. Much like Firebug.
Edit:
Please note, you must set a width on the element, otherwise margin:0 auto won't have any effect.
I have a div with a pretty curve background image so it does rounded corners on all browsers.
The problem is that in Internet explorer, the background image is followed by a background-coloured line. If I set the div's height, Firefox and Chrome will both shrink the height of the div, however IE will not adjust anything.
Here's my CSS. Note that the rest of the CSS is applied in IE (and FF/Chrome) fine.
#MSBottomSlot .topCurve {
background:url("images/topCurve.jpg");
background-repeat:no-repeat;
height:10px; /* Changing this value does nothing in IE */
width:100%;
}
Is there some IE 'gotcha' regarding height that I'm missing?
Here are some additional details:
The line does not appear in FF or Chrome.
There's little javascript on the page, nothing that would impact how this renders.
Other changes to the css get applied to the div.
if i could understand right, the height is not effected becasue of the line-height and font-size. so you must add
line-height: 0;
font-size: 0;
Remember to set the doctype so the browser doesn't go into quirksmode
First line of your html document should be
<!DOCTYPE html>
You could also use a more traditional xhtml doctype like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But i will recommend the first type which is html5 compliant and works fine in IE as well even tho they don't do html5, and it looks so much better than that awful xhtml doctype ;)
Also remember that you cannot apply height to inline elements, only block level elements, so your element needs to be display: block or display: inline-block or similar ;)
Try applying overflow:hidden to your CSS
#MSBottomSlot .topCurve {
background:url("images/topCurve.jpg");
background-repeat:no-repeat;
height:10px; /* Changing this value does nothing in IE */
width:100%;
overflow:hidden;
}
I'd like to say that the height of a text area is equal to, say, 50% of the height of the viewport. How can I do that? A simple height: 50% doesn't do the trick.
A simple height: 50% doesn't do the trick.
No, because its parent doesn't have an explicit height. So 50% of what? Parent says ‘auto’, which means base it on the height of the child content. Which depends on the height on the parent. Argh! etc.
So you have to give its parent a percentage height. And the parent's parent, all the way up to the root. Example doc:
<!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>
<style type="text/css">
html, body { margin: 0; padding: 0; }
html, body, #mything, #mything textarea { height: 100%; }
</style>
</head><body>
<div id="mything">
<textarea rows="10" cols="40">x</textarea>
</div>
</body></html>
The other possibility if you don't want to have to set height on everything is to use absolute positioning. This changes the element that dimensions are based on from the direct parent to the nearest ancestor with a ‘position’ setting other than default ‘static’. If there are no ancestor elements with positioning, then dimensions are based on the “Initial Containing Block”, which is the same size as the viewport.
Finally, there's the trivial problem of ‘100%’ being slightly too big because of the additional padding and border applied to textareas. You can work around this by:
compromising on something like 95%, or
setting padding and border to 0/none on the textarea, or
using “box-sizing: border-box;” to change what ‘height’ means. This is a CSS future soup feature which requires many additional browser-specific restatements (such as ‘-moz-box-sizing’).
Here is a little example of a textarea which takes exactly 50% of the viewport height using the CSS3 vh viewport unit which is
Equal to 1% of the height of the initial containing block.
So if we set the height of the textarea to 50vh, it will get half of the body height:
html, body, textarea {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
textarea {
height: 50vh;
}
<textarea></textarea>
It's pretty good supported by the different browsers, except for Opera mini and partial support in IE.
I think you need to use javascript in some way to do this. Handle the resize event, and set the text area to be that many pixels.
You can do it if you set display:block. But in html 4.01 strict you must define cols and rows, but I think you can override them with css.
HTML and CSS aren't so good at doing this kind of thing with heights. They are definitely more about scrolling vertically through a free-flowing page. I think JavaScript is likely to be your most complete solution, as FryGuy says.
While I do not have all browsers to test this in, it appears as though most accept simply specifying the height should work.
I tested this in Internet Explorer 7, and Firefox 3.0.
Simply use the following code:
<textarea style="height: 50%; width: 80%;">Your text here</textarea>
What browser(s) were you having issues with?
This was probably not around when this question was asked, but CSS Values and Units Module Level 3 includes viewport-percentage lengths. It seems not to be supported on mobile browsers except iOS, though.
Try remove
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">