I have a div tag with a few other elements inside of it, as follows:
<div>
<h3>Text</h3>
<hr/>
<ul>
<li>Text</li>
</ul>
<hr/>
<span>Text</span>
</div>
Between each different element in the div, I have 0 padding and margins set for all of the elements (and it is reflected in the developers tools), however in all Internet Explorer browsers there is a significant space (roughly 4-6 pixels) between each element. I've tried setting the html, body padding/margins to 0, as well as pretty much every other element above it in the DOM hierarchy, however the spacing remains. I've also tried minimizing the HTML so there are no new-lines or spaces, however it does not resolve the problem.
Any suggestions what could be the problem?
I guess the issue is the hr element in IE... it's not treated like other HTML elements. There are a number of solutions out there... but I couldn't get any of them to work when you want to decrease the margins.
That being said... through trial and error I managed to get negative margins for IE only rendering to work. Can't be sure it'll work in IE<6, IE7, IE>8 (can't test).
The minimal CSS code fragment:
<style>
hr {padding:0;margin:0;height:1px;border:none;color:#000;background-color:#000;}
</style>
<!--[if lte IE 8]>
<style>hr {display:block;margin:-7px 0;}</style>
<![endif]-->
... I've limited it to IE8 and less since word on the web is things will change in IE9... we'll see once it can be tested :). Note if you want to change the colour of the line, you'll need to change values of color and background-color (depending on the browser one or the other is used: ref)
Tested and working in:
IE 8.0.6001...
IE 6.0.2900...
FF 3.6.15
Cr 10.0.648.134
(on WinXP)
The space you are seeing is not padding, margin or border. You are seeing the " " character written that exists between each tag.
Options:
1) Set all elements to display:block or display: inline-block.
2) Write all the tags one after the other, dismissing all SPACE or ENTER characters
Related
I have a textarea within a parent div. The parent div has 'white-space: nowrap'. Should the textarea be inheriting the 'white-space: nowrap'? In IE11 the textarea inherits the 'nowrap'. Chrome ignores the inherited 'nowrap' and instead uses 'white-space: pre-wrap' from the user agent stylesheet. I know I can fix this by explicitly specifying the textarea's white-space property. Should I have to set the whitespace of the textarea explicitly, or is this an IE11 bug?
The following JSFiddle demonstrates the issue. (Open it in IE11 and Chrome and note the difference).
http://jsfiddle.net/sTAB3/1/
Here is the code in the JSFiddle:
.a {
white-space: nowrap;
}
<div class="a">
<textarea id="log" rows="20" cols="50">If I may... Um, I'll tell you the problem with the scientific power that you're using here, it didn't require any discipline to attain it. You read what others had done and you took the next step. You didn't earn the knowledge for yourselves, so you don't take any responsibility for it. You stood on the shoulders of geniuses to accomplish something as fast as you could, and before you even knew what you had, you patented it, and packaged it, and slapped it on a plastic lunchbox, and now you're selling it</textarea>
</div>
This appears to be an IE 11 bug that allows the white-space property of a parent element to be inherited by a child textarea. This should be considered as unexpected behaviour.
I would apply white-space: pre-wrap to the textarea and treat it as an IE 11 bugfix.
I cannot find an official bug report (sources welcomed), but below are two examples of problems arising from this bug.
Example 1
Example source
From the link:
Ticket description textarea doesn't wrap on whitespace in IE11
Example 2
Example source
Internet Explorer 11 word wrap is not working
It seems that word wrapping no longer works for textarea elements in IE 11. In IE 10 and earlier, FF, Safari, and Chrome word wrapping works as expected.
I have a CSS menu setup here:
http://pans.saebermedia.com/
The problem is, I noticed IE doesn't display the menus properly, and now I'm back to using my computer to fix it which has IE8. I'm using compatibility mode.
I've noticed two problems. On the submenu, (Say "Resource Center"), there is extra spacing between each item that when your cursor passes through it closes the menu. This sounds like the IE Whitespace bug but I used PHP to strip out the White-space. If I use float:left;clear:left; it causes the menus to be in-equal lengths in Firefox and IE.
Anybody know what's going on?
I tested my solution only on IE 7.
in elements:
li.menu-item
you have to change
display:block;
to
display:inline;
Wow, that took me a bit. You should really reduce the amount of css that you are throwing at these elements. You are overwriting a lot of cascaded values, etc. However, there are 2 primary values that IE7 is having an issue with.
The first is min-width on #main-nav > ul > li ul a. For some reason IE7 having this value on the a is making it ignore that it is display: block. It's probably something related to the parent being misinteruputed as inline-block (see #2).
Second is the display: inline-block being inherited by the lis in the .sub-menu from the li.menu-item above ul.submenu. When I remove these items IE7 starts acting appropriately.
In all cases this has nothing to do with, what you call, the "IE Whitespace Bug". inline-block elements are treated no different than inline elements when the collapes of whitespace is calculated. This is per the spec. IE does not have a bug, any browser that does not collapse whitespace to 1 single whitespace between inline and inline-block elements (without the use of bikesheding: discard) is in violation of the spec.
This is not working on my IE:
<table style="padding:5px">...</table>
however it works on Opera.
Is there a workaround?
The earlier CSS specs (which IE6 follows -- and I use the word "follows" loosely) are not clear about what padding defined on a table should even mean. IE6, naturally, decided to interpret this differently than every other browser, by ignoring the padding. Other browsers decided to render it by adding spacing between the table border and the outermost cells, without affecting the spacing inside cells, or between internal cells. By the time IE7 came out, the specs had cleared up to work like the other browsers, but IE6 still has the problem, where it simply ignores the padding.
The best solution is to avoid putting padding on your table, but instead surrounding it with a div, and putting the padding there.
<div style="padding: 5px;">
<table...>
</table>
</div>
Of course, if what you want is cell spacing or cell padding (as opposed to just padding on the table), then you should use the cellspacing or cellpadding attributes (even if you don't want these, you at least need cellspacing="0" to avoid another separate issue with IE6 table rendering).
Also, the inline styles here are for demo purposes; using css classes is generally considered better practice.
Did you try using <table cellpadding="5">? IE has problems with some css styling.
Also your syntax is wrong you forgot a semi-colon.
I'd venture to guess something else is wrong in your code.
Padding works fine in IE:
http://jsbin.com/ewuho4/
If you want to pad the cells then use cellpading attribure (cellpadding="X") if you want to padd a table, then that is awkward considering it's structure, I recommend that you put a margin if you want some space between it and the rest of stuff. Padding does not work on IE an even though I am not a fan of IE I do not blame it for that
I'm having an odd issue with whitespace in a design I'm building.
I created a <div> to contain voting elements - it holds an upvote button, downvote button, and vote total, each inside their own <div> element, and using <img> for the buttons.
Source:
<div class="votebox">
<div class="vote"><img src="upvote.png" /></div>
<div class="votetotal">15</div>
<div class="vote"><img src="downvote.png" /></div>
</div>
In the mini-reset in my CSS, both <div> and <img> elements are defined to display without margins or padding, and FireBug confirms these specific elements have no margins or padding, but I'm seeing whitespace being added between the bottoms of the <img> elements and the bottom of their respective containing ` elements.
I added the following CSS to display a border around each element:
.votebox * {
border: 1px #000 solid;
}
and this is how it displayed in Firefox 3.6 (yes, those are StackOverflow vote images.. I'm using them as placeholders for the moment):
Now, the obvious answer to this problem is to simply set the "vote" class to have an explicit height of the images (and I will do this, possibly even opting for CSS sprites over <img>s), but I'm much more interested in learning why these elements are displaying in this manner (this is supposed to be a self-teaching project after all).
Can anyone shed some light on this for me?
Edit: Steve H has pointed out to me that I should be using outline, rather than border, to show the outer edges of elements. I've made that change, and also separated the elements in CSS so they each display as a different colour.
The new outline looks like this:
As you can see, the issue is a bit different than I thought. It looks like there is some whitespace below the image, but this is compounded by the fact that the bottom image seems to be rendered slightly outside its containing <div>. This seems weird to me.
Images in HTML are inline elements and are by default placed on the font base line, so what you are seeing is probably the space for the descenders. The usual way around this is either setting them to display: block or vertical-align: bottom.
EDIT: BTW, you can format images with CSS just like any other element, so you can mostly likely drop the extra divs around the images.
Your using a strict doctype, so
.votebox img{display:block;}
Should do the trick
Depends on the doctype you use. If you use Transitional ( <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ) it will be shown in the way you want.
example with transitional: http://jsbin.com/icesi
example with strict: http://jsbin.com/icesi/2
A related statement that may help you understand the issue is the following
Here's another example. You may have
found that setting font-size: medium
results in different font sizes in
Explorer versus Navigator. This occurs
because of the way the Internet
Explorer for Windows team interpreted
the intent of the CSS specification.
In order to stay consistent with the
Windows version, Internet Explorer for
the Macintosh emulated its behavior in
the 4.x series. If you put IE5/Mac
into bugwards compatibility mode, it
will continue to treat font-size:
medium as IE4.x/Win does. In strict
mode however, it will act as Navigator
does, which is actually the correct
interpretation according to the W3C.
Source: http://oreilly.com/pub/a/javascript/synd/2001/08/28/doctype.html?page=2
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.