Problem with IE Quirks Mode - Div with fixed height expanding - css

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

Related

How to reduce the gap between HTML5 video tag

How to reduce the gap between two video tag, I have tried with margin and padding its not worked any help are appreciated
DEMO
My HTML
<div class="videoTest">
<video controls="controls"></video>
<video controls="controls"></video>
<video controls="controls"></video>
<video controls="controls"></video>
</div>
My CSS
.videoTest > video{
border:1px solid red;
margin:0;
padding:0;
}
The <video> element is an inline element by default. That's why there are gaps between them representing the whitespaces and/or line-breaks in your markup.
.videoTest > video {
display: inline-block;
border:1px solid red;
margin:0;
padding:0;
}
.videoTest {
font-size: 0;
}
By using font-size: 0, the line-breaks and whitespaces are being kind of ignored and you get rid of the gaps. Their size is set to 0.
Updated Fiddle
This is a common workaround when working with inline-blocks and is in some situations superior to floats when it comes to centering for example.
try this
http://jsfiddle.net/Ng6XU/5/
.videoTest > video{
border:1px solid red;
margin:0px;
padding:0;
float:left;
}
TRY THIS CSS :
.videoTest > video{
border:1px solid red;
margin:0;
padding:0;
float:left;
}
I have found the link which gives various method to solve this issue, may be helpful to some one Reference : http://css-tricks.com
Published April 21, 2012 by Chris Coyier
Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them.
In other words:
<nav>
One
Two
Three
</nav>
nav a {
display: inline-block;
padding: 5px;
background: red;
}
Will result in:
Often highly undesirable (check the link for the output)
We often want the elements to butt up against each other. In the case of navigation, that means it avoids the awkward little unclickable gaps.
This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.
Here's some ways to fight the gap and get inline-block elements sitting directly next to each other.
Remove the spaces
The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
or with comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
They're all pretty funky, but it does the trick.
Negative margin
You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don't care about those browsers at least you can keep the code formatting clean.
nav a {
display: inline-block;
margin-right: -4px;
}
Skip the closing tag
HTML5 doesn't care anyway. Although you gotta admit, it feels weird.
<ul>
<li>one
<li>two
<li>three
</ul>
Set the font size to zero
A space that has zero font-size is... zero width.
nav {
font-size: 0;
}
nav a {
font-size: 16px;
}
Matt Stow reports that the font-size: 0; technique has some problems on Android. Quote: "Pre-Jellybean does not remove the space at all, and Jellybean has a bug whereby the last element randomly has a tiny bit of space." See research.
Also note, if you're sizing fonts in ems, this zero font size thing can be an issue, since ems cascade the children would also have zero font size. Rems would be of help here, otherwise any other non-cascading font-size to bump it back up.
Another weirdness! Doug Stewart showed me that if you use #font-face with this technique, the fonts will lose anti-aliasing in Safari 5.0.x. (test case) (screenshot).
Just float them instead
Maybe they don't need to be inline-block at all, maybe they can just be floated one way or another. That allows you to set their width and height and padding and stuff. You just can't center them like you can by text-align: center; the parent of inline-block elements. Well... you kinda can but it's weird.
Just use flexbox instead
If the browser support is acceptable to you and what you need out of inline-block is centering, you could use flexbox. They aren't exactly interchangeable layout models or anything, but you might get what you need out of it.
Since the video tag defaults as an inline-block element, simply make the video tag a block element in CSS. Bob's your uncle.
video {display: block;}
In my case, I was using 640x480 for the video size. I changed it to 640x360 and that removed the white space above the video.
I would say that in my case setting this css helped:
height:auto;

vertically stacked divs have space between them (firefox)

a little css problem that i cannot quite find on SO - although I assume it has been asked before, apologies.
So, here is the html:
<html>
<body style="color:white">
<div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div>
<div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div>
<div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div>
</body>
</html>
lovely.
If i open this in ff, i get three vertically stacked divs - but with space in between them! This is not what i wanted! Drama-rama!
ie renders this as i'd expect, which raises some alarm bells.
ie is 9, ff is 11
cheers,
andrew!
UPDATE a lot of mentioning the "p" tag - why/how is the p tag affecting anything? Isn't it wrapped by the div, and the div has the background color applied? Shouldn't, in fact, the div just be internally bigger, but with no space between adjacent divs?
UPDATE:
So i tried this html instead:
<html style="margin:0px; padding:0px;">
which didn't fix the issue, and also this:
<body style="color: white; margin:0px; padding:0px;">
which also didn't fix the issue - shouldn't the css be inherited by the "p" tag in both cases? Interestingly, i also examined the resultant css with firebug, and the p tags all have a margin and padding of 0...
ideas?
UPDATE: a lot of responses asking me to set padding to 0. This doesn't work. Any more answers stating that and i'll down vote 'em.
UPDATE: the question is really specific about using inline css. I don't actually care for inline css myself, but why is everybody providing css stylesheets for their answer?
UPDATE: somebody mentioned -webkit, and while i'm not using a google chrome at all, it is an interesting idea. I cannot see any ff related extra css that might be causing this problem, anybody have any ideas?
I tried it with Chrome and saw the same behavior. After looking at the underlying CSS (F12), Chrome is applying the following two lines to the <p> tag:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
If I add the following to the css the blank lines go away:
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
Hope that helps!
Basically the P tags are by default taking margin. Add css
p{margin:0px; padding:0px;}
This is because of the auto-generated margin of a <p> element.
Firefox (and others) do this differently than IE.
You can "reset" this simply by doing a p{margin: 0} in your css.
You can do the same for all elements at once (which I recommend) by simply adding * { margin: 0; padding: 0;} in your css.
Small tip: Install a browser extension to inspect the behavior of your elements such as Firebug.
Your <p> tags have vertical margins. Vertical margins in CSS collapse, so that child margins can sometimes apply to parents. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
I resolved this be specifying a CSS 'line-height' I just set it to the same as the font size and then I got consistent DIV spacing across all browsers.

Hyperlink block element doesn't work in Internet Explorer

My head is about to explode after looking into why this is not working for me. All is ok in Firefox but in IE nothing shows up to click unless I have text or something in the <a>'s. I've searched for a long time and would prefer not using un-needed .gifs. You can ignore the high z-index values. I've also tried putting <a> in a <span>. Basically what I want is an empty div and empty a that links to an image.
.gallery
{
position:absolute;
width:400px;
height:100px;
margin-left:300px;
margin-top:0px;
z-index:1000000;
}
.gallery a
{
position:relative;
cursor:pointer;
display:block;
width:400px;
height:100px;
z-index:999999999;
}
<div class=\"gallery\"><a title=\"Front Entrance of the new Pontiac branch.\" href=\"images/Pontiac/P5020002.JPG\"></a></div>
The problem is IE needs a background. You can fool it with a spacer image or just a dummy image like:
background:url(/no-image.jpg);
That should fix it.
I'm not sure if you're using that HTML directly, but you don't have to escape the double quotes.
Your example works for me in IE once I fixed the quote issue: http://jsfiddle.net/U2yeJ/
Are you sure you clicked in the right area?

CSS Page-Break Not Working in all Browsers

I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.
Firefox separates the divs correctly but only prints the first page.
Chrome and Safari only applies the page break to the last div.
How can I get this working across all browsers correctly?
The HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.
I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.
The CSS:
#media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
Parent elements can not have float on them.
Setting float:none on all parent elements makes page-break-before:always work correctly.
Other things that can break page-break are:
using page-break inside tables
floating elements
inline-block elements
block elements with borders
For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.
I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).
I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.
It looks like it's a bit of an arms race to discover the next property that might break page-breaks.
This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.
#media print {
div { float: none !important; position: static !important; display: inline;
box-sizing: content-box !important;
}
}
There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.
<div style='float:left'>
<p style='overflow:hidden;page-break-before:always;'></p>
</div>
Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table; or display:table-cell; applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).
Here is an example of how to do this for the popular clearfix problem.
.clearfix:before, .clearfix:after{
display: block!important;
}
The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;
If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block; with display:block should work.
I had a position: absolute; in the div printing that caused this not to work.
Make sure the parent element has display:block; rather than display: flex;. This helped me fix the issue
"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values."
IE support is also partial
you can achieve what needed by :page-break-before:always; which is supported in all browsers
"but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)
what's your code?
like this?:
<style>
#media print
{
table {page-break-after:always}
}
#media print
{
table {page-break-before:always}
}
</style>

padding not even in IE

If you paste the following code into a test.html and browse with firefox,it's ok.
But if you browse with IE,you can see that there are more space to the right of <a> element.:
<style>
li {
display:inline;
margin:0 90px;
padding:6px 12px;
background:#777777 none repeat scroll 0 0;
}
li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
</style>
<div id="tabs">
<div class="nav">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
EDIT:How to make the text even in IE?
To answer your question simply: put all your li elements on a single line or float them.
I did look at your source and tried it for myself.
In Firefox 3.0.11 and Internet Explorer 8 I was showing pretty much identical pages.
One thing I can say is that the pages looked different initially because my browsers were at different widths but not the margin problem you were having. In my case resizing the browser worked.
But the problem you're having is common. Internet Explorer will almost always display pages different than a typically standards-compliant browser will. One way that people have found to work around this (and this may very well solve your problem) is to use a CSS Reset sheet.
Some good ones are:
Eric Meyer's Reset CSS
Yahoo! YUI Reset CSS
The problem is an unfortunate disagreement between the browsers as to where the CSS box model decides what to do about the padding:
IE decreases the space for the content within a div when you increase the padding, so keeping the div size the same
Firefox increases the div size with the padding, keeping the content size the same.
Tested in IE6, it seems to add an extra space to the anchor tags. Copy and Paste it and you will see for yourself. Firefox does not add the extra space.
You can change the margin for IE if you want. Its not a perfect solution, but it may help you to make the tabs look similar. If you need it to be identical in all browsers, you could always use an image instead. But try this:
li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
*html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}
*+html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}

Resources