Border of body/container not visible in IE 11 - css

Border is visble in Chrome and Firefox but not visible in IE 11
I googled it and previously my code was border:2px solid black ; I changed it to border-style and added all the specifics in multiple lines. That did not help.
.container{
margin:10px;
padding:5px;
border:2px;
border-style:solid;
border-color:black;
border-radius:3px;
text-align:center;
}
This is how it looks in Firefox
This is how it looks in IE 11

I'm so glad my comment worked! I was unsure so I posted it as a comment but here it is as an answer so people can accept/upvote:
Its a weird fix but I have had borders disappear in IE and I fixed it
by either adding display:block or display:inline-block to the element
depending on what element it was. It is hard to offer better advice
without more code to be able to reproduce your issue. This is a hack
fix but microsoft will be discontinuing support for IE this year which
means you will no longer have to support it as well. Our office is
going to throw a party when IE support is officially over :D
Glad it worked out for you!

I made a test with your CSS code in IE 11.
Code:
<!doctype html>
<head>
<style>
.container{
margin:10px;
padding:5px;
border:2px;
border-style:solid;
border-color:black;
border-radius:3px;
text-align:center;
}
.bodyCore{ border:1px dotted black; padding:40px; margin-top:8px; margin-bottom:8px; }
</style>
</head>
<body>
<div class="container">
<div class="bodyCore">sample text</div>
</div>
</body>
</html>
You can see in the result below that border is visible with IE 11.
I suggest you to make a test with this code and check whether it is showing the border or not. If issue persist than try to post the exact HTML and CSS code of that page. We will try to make a test with it to check for the issue.

Related

Why does Firefox display my page differently?

I'm totally clueless to describe my problem clearly enough so I tried to make a jsfiddle as simple as possible here: http://jsfiddle.net/Emf2f/. On Chrome+IE, my image is under #div3, while on Firefox, is next to #div3. Why does this happen? which result is more "standard"?
<div id="div1">
<div id="div2">
<div id="div3"> Text </div>
</div>
<img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>
#div1{
width:500px;
overflow:auto;
border:1px solid red;
}
#div2{
margin-bottom:-1px;
}
#div3{
background:cyan;
float:left;
width:200px;
height:100px;
}
I would use "clear" around the object that you do not want the image to appear inline with. You can read more about positioning here: http://w3schools.com/css/css_float.asp
The site has the exact example you are trying to accomplish.
I added your image into a div tag (div4) then placed the clear:both in the css file for that div and it works properly in Chrome, IE and FF.
div4{Clear:both;}
Let me know if this helps. Thanks.
From a content perspective they are all doing the same thing showing the img inline (as per the HTML spec), what differs is the default overflow behavior. In Chrome and IE they are wrapping as per text (this is actually what I would imagine the correct behavior is) whereas Firefox is not. If you want the image to always display below, mark it as display:block;

Absolute overlay div element doesn't cover relatively positioned elements

In IE7 browser, I just meet one issue about position.
I made a demo page to test the position conditions of relative and absolute.
There are the related codes below:
[CSS]
.rela{
width:200px;
height:100px;
background:#EEE;
margin-bottom:10px;
position:relative;
}
.abs{
width:50px;
height:50px;
position:absolute;
background:#333;
left:20px;
top:80px;
z-index:10;
}
[HTML]
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
Now, the problem is, in IE7 browser, the "abs" element is covered by the next "rela" element, but it displays well in other browsers like Firefox, chrome, IE8.
I know somebody said that we can add a more higher z-index to the parent "rela" element, but for the codes above, the issue can't be fixed in this condition, coz there are more than two rela elements and all of them have the abs element.
I have no idea about how to fix it now. Also, if someone could kindly provide a official explanation about this "bug", it will be so good.
Give all divs with class rela an z-index, the first with the hightes till the one on the bottom with the lowest value.
<div class="rela" style="z-index: 40;"><div class="abs"></div></div>
<div class="rela" style="z-index: 30;"><div class="abs"></div></div>
<div class="rela" style="z-index: 20;"><div class="abs"></div></div>
<div class="rela" style="z-index: 10;"><div class="abs"></div></div>
Also see this example.
The same question was asked here.
Don't ask me why, but the last answer there seems to fix the problem (though you'll need jQuery or the like):
http://jsfiddle.net/Xmznn/1/
see the changes, it is working in IE 7
.rela{
width:200px;
height:100px;
background:#EEE;
margin-bottom:10px;
}
.abs{
width:50px;
height:50px;
background:#333;
margin:80px 0 0 20px;
z-index:0;
position:absolute;
}
Try adding
z-index : 0;
To div.rela
know issue and well documented out there.
check - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
that might help you out.
There's a helpful resource to address this issue.
Long story short, if your absolutely placed div (.abs) is empty, IE doesn't like to place it in front of other elements regardless of z-index. You can use a 1x1 transparent gif to overcome this, eg. by setting a style like the following on the div:
.abs {
background: transparent url('/images/clear.gif') repeat 0 0;
}
I've found this to help. It's great as there's very little additional styling needed and you don't have to explicitly manage z-indices.

Alternative to overflow-y in CSS?

I'm creating a calendar and need to replicate the behaviour I would get with
overflow-x:visible;
overflow-y:hidden;
for browsers that don't support these css attributes. Is there some kind of workaround I can do? I don't just want to compromise and add in overflow:hidden for those browsers, since the client really wants this feature. Does anyone have any good ideas?
Many thanks.
Here is someone who asks roughly the same question (overflow-x visible and -y hidden).
http://forums.devnetwork.net/viewtopic.php?f=68&t=116457
Someone named Weirdan says I'd say there's isn't any expected behavior because such style is unavoidably internally inconsistent, and shows an example where it is not clear (says Weirdan) whether the area to the southeast should be hidden or shown.
S/he also says that the effect you want is easily achieved by wrapping the outer div with another div and setting overflow-y on that div to hidden, and shows this example (I hope it's OK that I copy it to here?).
<style type="text/css">
#outer-wrapper {
overflow-y:hidden;
}
#outer {
width:100px;
height:100px;
background:red;
border:solid red 1px;
overflow:visible;
}
#inner {
width:200px;
height:200px;
background:green;
}​
</style>
<div id="outer-wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>

Problem with IE Quirks Mode - Div with fixed height expanding

I'm having a weird problem with IE8.
Page DOCTYPE is QuirksMode and I CANNOT change it (I wish I could, but there's no way at this time). Widths are hacked to fix the difference of box modem interpretation between IE and other browsers.
It's a simple horizontal navigation bar. It has a border all along, and the selected item should be a little bigger in order to "cover" the outer border. Works like a charm at FF, but in IE, the #container ignores it's height property and expands to fit it's childs, gets up to 34px and the border is not covered.
The simplified HTML is this:
<style>
#container {
padding:0px;
margin:0px;
height:30px;
border-bottom:#000 2px solid;
background-color:#ccc;width:780px
}
#list {
padding:0px;
margin:0px;
height:100%;
float:left;
background-color:#CCFFFF
list-style-type:none;
}
#list li {
float:left;
}
.selected_item {
height:30px;
*height:32px;
border-bottom:#FFF 2px solid;
background-color:#FFCCFF
}
.nonselected_item {
height:28px;
}
</style>
<div id="container">
<ul id="list">
<li class="selected_item">First item</li>
<li class="nonselected_item">Second item</li>
</ul>
</div>
Any ideas?
Thanks in advance.
Andrea.
Try adding position:absolute to #list
Thank you for your answer Alohci, that did the trick!
MSW, thank you for your answer too, but this application is used by about 5 thousand users a day, along 40 productive websites that run on the same code, and we should upload and test about 2 thousand pages in order to change doctype. AND... we don't have this kind of CSS problems often because structure doesn't change ofte. We may have one or two of this ones a year, so the effort to change doctype is not justified right now. We'll change it the day that we need to implement a change that affects all 40 websites and cannot be achieved otherwise.
With a Quirks DOCTYPE, you are asking IE to pretend it is IE6 (more-or-less). If it is truly an immutable DOCTYPE, then you either have to code to IE6 quirks and proper markup as a decade of webslingers have had to or find some way to tell IE8 to never respect Quirks.
Engineering is about tradeoffs; yeah, I understand that you may not be able to change that one word in that mission critical page and that it will cost you immense effort to code to browser standards from 2001, but if those are the constraints, so it goes.
first line, no type defined, try <style type='text/css'>
on the 7th line you missed a semicolon after width background-color:#ccc;width:780px
try adding max-height:32px; to #list li

What is this IE CSS bug called? (Double vertical padding)

(Note, this is not the double-margin bug. I'm calling this the double-vertical-padding bug for now unless someone else has a more clever/documented name for this?)
Just when I thought I'd seen all the quirky IE CSS bugs, I've produced a simple test case that continues to confuse me. The page below looks and works great in FF, Opera, et al. However, IE 6 and IE 7 seem to be confused. I will let the document I'm pasting below speak for itself.
Edit: I've put this at the following URL: http://jsbin.com/efele Open it up in IE and again in FF. Compare.
My question is: what is this bug called? (Have I missed this somewhere? Is it found on this page?) I'm familiar with the 3px jog bug and the double-(horizontal)-margin bug and lots of other float-related bugs. But... vertical padding is being duplicated? (And put in the wrong place, to boot.)
<!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=iso-8859-1" />
<title>IE bork!</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
#container {
border:1px solid red;
background-color:#CC99CC;
width:800px;
margin:0 auto;
padding-top:100px;
}
#sidebar {
float:left;
display:inline;
width:200px;
border:1px solid blue;
background-color:#00CCFF;
}
#content {
float:right;
display:inline;
width:510px;
border:1px solid green;
background-color:#66CC99;
}
.clear {
clear:both;
/* height:0px; <<< setting height seems to be the only thing that makes this work as expected?!? */
background-color:#CCCCCC; /* bg color here is just for debugging */
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">I am the sidebar</div>
<div id="content">I am the content</div>
<div class="clear"><!-- clear! --></div>
</div>
<p>There should be 100px of space above the two floats, but <em>no</em> space below them...</p>
</body>
</html>
P.S., I did eventually figure out how to appease IE on this. The solution (explicitly setting a height on my "clear" div) is commented out in order to show the bug. I only wish I could have the last few hours of my life back that it took me to stumble across the real issue/solution!
Thank you!
Given the solution you found, it seems to be the hasLayout IE quirk. (Explicitly setting the height on your clear div set hasLayout to true in the eyes of IE)
On a side note, in cases where specifying height won't work for some reason, I've often found that including zoom:1; anytime I need hasLayout to trigger in IE has been a lifesaver. Anytime I have these types of weird layout issues in IE, I always try that to see if it's a layout refresh issue first. (Then if that doesn't work, proceed to bang head against keyboard)

Resources