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;
}
Related
The following code works differently in Firefox and Webkit (Safari/Chrome) and should not. From what I understand, Firefox is rendering it correctly. How can I make Webkit render it the same?
<!doctype html>
<html>
<head>
<style type="text/css">
.frell {
margin: auto;
position: absolute;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="container">
<button class="frell">Test</button>
</div>
<body>
</html>
Probably inheriting either it's parent's width or getting display:block. What does the Chrome developer tools say? I'd either specify a width (% or px) or display:inline (possibly inline-block)
Firefox is rendering it incorrectly, webkit is rendering it correctly. To make firefox behave, you need to add width: 100% to the class, even then, that won't work in all cases, but it will be closer.
Absolutely positioning an item and specifying both left and right should make the item become the necessary width to fill the space between them. For a simple test, here is a jsfiddle http://jsfiddle.net/c3EeF/2/ that shows what happens when you apply the same class to both the button and div tags. Firefox misbehaves when using the button, and I have been unable to find any setting that makes it work 100% correctly.
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 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/
Been working on this site for some time now, works perfectly on Mac and PC Firefox, as well as Safari. However, IE is making the site almost blank - any ideas on what is going on? Any workarounds?
Thank you in advance for your help!
http://www.alliedprintingsolutions.com
http://www.alliedprintingsolutions.com/style.css (Stylesheet)
Your html is invalid in many ways. Please fix that first.
Add a DOCTYPE!
Either HTML5 or HTML4 Strict (not Transitional) are recommended for best cross-browser support.
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(As you can see, HTML5 is much simpler, and still usable even if you're not yet using HTML5 tags.)
Note: The DOCTYPE must be very first thing in the file, before all other tags, and with no blank lines, tabs, nor spaces before it.
You may want to try adding a doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Edit: The doctype declaration should be the first thing in the html file. It goes even before the <html> tag.
The Quick Solution: Remove "overflow: auto;" from #wrapperbig and #wrapper.
This will get the content to be displayed.
However, be sure to look at the other answers. They have good points.
I too faced the same problem and found a solution after some research.
Do not code CSS on the HTML file
Make a separate CSfile and link to it using <link rel="stylesheet" href="css/style.css">
And always add <!DOCTYPE> tag to every HTML page //*This is the main solution
Had a quick look at the code in firebug. You seem to have a z-index of -1 on the content div (#wrapperbig), which browsers should ignore for non-absolute/relative content - this may be an odd implementation in IE.
Also, as mentioned before, add a doctype - IE will render the site in 'quirks mode' if there is no doctype.
I don't have FireBug on me right now (if you don't have this extension - get it!) But using images in the way you are right now is the problem.
Use CSS to apply a "background-image" attribute for your site's main content. For example:
<style>
.Page
{
background-image : url(../images/site_bg.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
</style>
...
<div class = "Page">
<!-- Content -->
</div>
That will work much better, and will work in all browsers just fine :)
In response to comment
I don't want to say your wrong, but when I can click and drag the background images with my mouse cursor that means that you are using an IMG tag to show the background instead of (or in conjunction with) the background-image attribute. I can almost gurentee that that is your problem. Remove all of your img tags and replace them with divs and the background-image style and your problem will be resolved.
If I had firebug on me I could go into more detail.
Second edit with example code
Here is some rough code that may help you remove your unneccecary image use.
<style>
.Container { margin : auto; width : 600px; /* BG and Header Width here */ }
.Header
{
background-image : url(../images/site_header.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
.Header .Link1:link, .Header .Link1:visited, .Header .Link2:link, .Header .Link2:visited
{
width : 60px;
heigth : 60px;
display : block;
float : left;
margin : 10 20px;
}
.Header .Link1:link, .Header .Link1:visited
{
background-image : url(../images/link1.jpg);
}
.Header .Link2:link, .Header .Link2:visited
{
background-image : url(../images/link2.jpg);
}
.Page
{
background-image : url(../images/site_bg.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
</style>
...
<div class = "Container">
<div class = "Header">
</div>
<div class = "Page">
Content
</div>
</div>
:)
There are too much woo-doo stuff happening with absolute positioning of content_left and content_right. You will be fine by removing “position: absolute” and replace it with “float:left” in both content’s (set wrapper width to 100%).
Thank you for all your suggestions, everyone. The majority of the content is showing up (relatively as it should be) on IE now, other than the footer which is slicing up my page in a gross fashion (haha). I see what youre saying, Nelson LaQuet, about the header images, I will have to try and play around with them, I'm still new to CSS and figuring out to having them all properly placed with an image map was headache enough as is. As for the Doctype, I added it as you told me and it seemed to muck up some content even on Firefox, so I know I must have some more errors to go through. When I remove it, things looked normal again. The "woowoo's" with the absolute positioning were pretty much necessary, as the positioning method used was the ONLY way I could find to work with the background images and header images in tact, with the column divs in the correct place. At least I made some positive progress it, but I guess I have more work ahead of me :/ Just wish it was a bit easier to correct as it looks just fine in Firefox. Oh well, thanks again for all your help, guys!
Shannon
Sometimes even after adding
<!DOCTYPE html>
Css is not loaded.
It is because of white spaces before
<!DOCTYPE html>
Make sure it is not present.
Else in IE, page will terribly shown
Not just white space before:
<!DOCTYPE html>
but also remove spaces before the curly braces in your style sheet (CSS file).
Example of simple style sheet (imagine it at the left margin in your text editor):
h1{
font-family:Arial;
color:purple;
}
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">