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

(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)

Related

Wordpress not obeying css rules on mobile devices

I hesitate to say that there’s a bug in wordpress but this has gotten me stumped. When I view the following in chrome as a html file it works perfectly. When I try to do this in wordpress I have all sorts of issues on different mobile devices. Essentially, the left and right id’s are not taking up the width that’s being assigned. I deactivated all plugins except add css code and I did a healthcheck, neither yield any insight to the problem. Here’s the code:
<!DOCTYPE html>
<html>
<head>
<style>
#container{
display:flex;
justify-content:start;
width:100vw;
font-size:3vw;
}
#left{
width:35vw;
border:solid black 1px;
border-shadow:border-box;
}
#right{
width:65vw;
border:solid black 1px;
border-shadow:border-box;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="left">mobile</div>
<div id="right"> different devices have problems</div>
</div>
</body>
</html>
The page I need help with: https://www.sustainablewestonma.org/test-2/
On your website, there's a CSS rule for html, body which contains min-width: 490px
This causes your body to be wider than the screen on small devices (i.e. more or less any smartphone in portrait orientation). The right/left rules apply, but their percentages are calculated from body width 490px.

Border of body/container not visible in IE 11

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.

What is the least horrible way to center an element with CSS?

I have html that looks like this:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Some title thing, who knows</h1>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</header>
</body>
</html>
If I give header an auto margin and a width, it's horizontally centered. What's the least horrible way to ensure that it's vertically centered, as well?
I am aware of the following articles which provide some discussion of the topic:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
http://www.vanseodesign.com/css/vertical-centering/
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
http://www.brunildo.org/test/vertmiddle.html
Since this question was tagged CSS3, here's a "least horrible" solution using CSS3's "flexbox". Unfortunately only recent versions of Safari, Chrome and Firefox support it.
html, body {
margin:0;
padding:0;
height:100%;
background:#eee;
}
header {
width:30em;
background:#fff;
}
body {
display:box;
box-pack:center;
box-align:center;
box-orient:horizontal;
}
A more complete demo can be found here.
If you do NOT know the height of the header the only way I often use, requires extra html if done properly, tough you could do without.
You make the header vertical-align: middle by making it a table-cell
html{
height: 100%;
}
body {
display: table;
height: 100%;
margin: 0 auto;
padding: 0;
}
header {
display: table-cell;
vertical-align: middle;
}
note that I set 100% height on the html node, which really isnt proper css as far as I know, it should be on the body and header should be in a encapsulating div wich has display: table http://jsfiddle.net/bgYPR/2/
Unfortunately, there's still nothing elegant for vertical alignment, only hacks.
I don't know if there's a best way, but there are a number of different ways (depending on your situation), and many are thoroughly discussed in this article.
Usually when I need vertical centering I use a pair of inline-block elements. You have one element that is the full height of the container, and a second element that is only the height of the content to be centered. Both are display:inline-block;vertical-align:middle.
I like to use b tags for this, because they have no semantic significance and are tiny:
<style>
.mycontainer {text-align:center;}
b.vcenter {display:inline-block;height:100%;width:1px;vertical-align:middle;}
b.vcenter+b {display:inline-block;vertical-align:middle;}
</style>
<div class="mycontainer">
<b class="vcenter"></b><b>This is my centered content<br>It makes me happy!</b>
</div>
Mind you, this specific code example wont work in IE7 because of the lack of inline-block and sibling selectors (+), but the same technique can be done using more complex code that IE7 will handle.
I would generally not verticially center, but specify a small top margin like 20px. We don't always know enough about the end user's equipment to make an assumption about what is convenient or usable for the platform they are viewing the site on.

Clear problem with nested divs in IE6 when inner div width=100%

I am using a two column layout with the navigation bar placed with float:left. The content div uses margin-left so it sits beside it.
All good, except when I use a div of width 100% inside the content div, it gets shifted down to the bottom of the navigation bar.
This only happens with IE6, every other browser is fine with it (IE7+/FF/Chrome). I wouldn't normally worry about IE6 too much, but this is a biggy because with a long nav bar it looks like the page is empty unless you scroll right down the bottom.
I'm assuming it's the request for 100% width on the inner div that causes the problem, and IE6 is incorrectly seeing that as a request for 100% of the page, not just the containing content div.
Any ideas on a workaround? Live demo at:
http://www.songtricks.com/Ie6ClearBug.html
<!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>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.left
{
width:300px;
float:left;
background-color:#CFF;
}
.left .navpanel
{
height:300px;
width:200px;
border:solid 1px black;
margin:10px auto;
}
.right
{
margin-left:300px;
background-color:#FFC;
}
</style>
</head>
<body>
<div class="left">
<div class="navpanel">navpanel</div>
</div>
<div class="right">
<div style="width:100%;">this should be at the top</div>
</div>
</body>
</html>
OK I found an answer. New users can't answer their own questions, so here it is.
Turns out the behavior can be normalised in IE6 by marginally reducing the width of the inner div just to 99% (or making it auto, but then you are at the discretion of the browser as to whether you get full width for the div or not, depending on what's in it).
So the lowest impact solution is to use:
<div class="right">
<div style="width:100%;_width:99%;">this should be at the top</div>
</div>
This leaves normal browsers unaffected, and puts a safe 99% in for IE6.
I'm sorry i don't understand very well your problem, i haven't IE 6..so i cant test your css...but: i can say something about your css.
First you'll need to add float: left to your .right class.
Second, if u set a margin on the same side of a float, IE doubled the margin.
I hope u understand my english..i'm sorry!!
Third: i dont remember exactly but some browser calcuate the border inside the div, other outside the div...so something if u set: div width 300px and border 1px, u can find your div total width is 301px
bye bye

css - Padding under background image link next to text link - why?

This CSS problem is killing me :-(
I cannot remove padding under a link in this page http://www.yart.com.au/stackoverflow/test2.htm
I have reduced the problem to the bare minimum so its really clear.
You can see my issue here http://www.yart.com.au/stackoverflow/blue.png alt text http://www.yart.com.au/stackoverflow/blue.png
<!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>
<style type="text/css">
*
{
padding:0;
margin:0;
font:15px arial;
}
div
{
display:inline;
height:18px;
line-height:18px;
background-color :blue;
}
.PageMove
{
display:inline-block;
background-image: url(http://www.yart.com.au/stackoverflow/page_move.gif);
background-repeat:no-repeat;
width:18px;
height:18px;
line-height:18px;
}
.Text
{
background-color :red;
display:inline;
height:18px;
line-height:18px;
}
</style>
</head>
<body>
<div>18 pixels high</div>
</body>
</html>
Things which are display: inline-block are treated as as characters and sit on the baseline. There is space beneath for descenders (which you find on letters such as p, j, g and q).
Set vertical-align: bottom to position the element on the bottom instead of the baseline.
why not use float?
<div style="width: give-it-a-usefull-width">
...
...
</div>
I don't know where your problem is exactly stemmed from but
inline elements cannot be specified a 'height'. So your height:18px; for the 'inlined' div will be ignored.
I ran into this issue on some email templates. IE and FF did not show the blue line but emails opened on mobile devices such as iphone and android did.
Emails opened in web email clients over chrome browsers also showed the blue line.
I solved the problem by placing the image in the middle of the cell.
align="middle"
Set the cell to align="middle" as well.
(this places the blue line behind the image and solves the problem)
On irregular shaped images (that are png, or gif) you may want to consider saving the image with a background color or converting to a jpeg on white backgrounds. Again its not the type of image that solves this, just removing a clear background and creating a solid rectangle of square block of color to hide the line solves the issue.
Good luck!
Nate Boe

Resources