Can somebody please explain this IE7 bug to me? It occurs in Standards and Quirks mode rendering, it does not occur in Firefox, Chrome or IE8 (though switching the rendering engine via IE8 developer tools will provoke it). Here's the HTML to reproduce the behavior:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
/* h1 { margin: 0px; } */
ul { padding: 0; margin: 0; list-style-type: none; }
ul li { float: left; width: 140px; padding: 3px; }
div { clear: left; padding: 3px; }
div, li { background-color: OrangeRed; }
/* ul { border: 1px solid blue; } */
</style>
</head>
<body>
<h1>Heading 1</h1>
<ul>
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
<div>yada</div>
</body>
</html>
This renders a floated <ul> above a <div> (supposed to be a tabbed user interface).
There's an unexplained gap between the <div> and the <ul>.
Now do one of the following:
Uncomment the CSS rule for <h1>. The gap disappears and the list is rendered tight to the <div>, but also very close to the <h1>.
Alternatively, uncomment the CSS rule for <ul>. Now a narrow blue border is rendered above the <ul>, but the gap disappears.
My questions:
How can the <h1> margin (I suppose any block level element with a defined margin will do) affect the space below the list?
Can I prevent this from happening without having to set header margins to 0 or messing with the <ul> borders (setting border-width: 0; does not work BTW)?
I suppose it is connected to the <ul> itself having no height because it has only floated children. Maybe someone with more insight into IE7 peculiarities than I have can explain what the rendering engine is doing here. Thanks!
It's the Incorrect Float Shrink-Wrap Bug. The linked article explains the issue. It also affects IE6 btw.
As Sjaak Priester, the person whom Gérard Talbot credits for the bug, reasons is that IE first renders the floated element on the same line as the previous float, then sees clear and clears it under but fails to redraw the text.
One of the common solutions is the clearfix hack as answered by someone else here, or placing an empty clearing element after the block with the floats, like a <br style="clear:left;">. Put it between the ul and the div. This way IE will force the clear before reaching the div.
I've come up with a solution that is what seems like a good compromise. It's based on the fact that setting a border on the <ul> solves the problem, while the margin-bottom of the preceding-sibling block-level element obviously causes it.
So setting a border-top: 1px solid transparent; on the <ul> displaces it by merely one pixel, which is okay with me. As BalusC rightly points out in the comments, setting margin-top: -1px; would counteract the displacement.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
ul { padding: 0; margin: 0; border-top: 1px solid transparent; list-style-type: none; }
ul li { float: left; width: 140px; background-color: red; }
div { clear: left; background-color: red; }
</style>
</head>
<body>
<h1>Heading 1</h1>
<ul>
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
<div>yada</div>
</body>
</html>
I admit that this is a bit of hackery, too; it requires remembering what the bogus border is for, which is not much better than the usual CSS tricks (but a little).
Previous version of the answer: I've fixed it like this for now (seems it works across browsers and does not require CSS hackery)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
div.t ul { padding: 0; margin: 0; list-style-type: none; }
div.t ul li { float: left; width: 140px; background-color: red; }
div.c { background-color: red; }
</style>
</head>
<body>
<h1>Heading 1</h1>
<div class="t">
<ul>
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
<br style="clear: left;">
</div>
<div class="c">yada</div>
</body>
</html>
I don't like this solution very much because the of the extra elements it requires. But I dislike dirty CSS tricks even more.
That's a really bizarre problem, IE seems to be full of these delights. I haven't found out exactly why it's deciding to render like that but with proper clearing of the floats you can usually avoid all of this trouble. The following code seems to give some consistency (in other words it's the same with or without the H1 css rule).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
h1 { margin: 0px; }
ul { padding: 0; margin: 0; list-style-type: none;}
ul li { float: left; width: 140px; padding: 3px; }
div, li { background-color: OrangeRed; }
ul { border: 1px solid blue; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
</style>
</head>
<body>
<h1>Heading 1</h1>
<div class="clearfix">
<ul class="t">
<li>bla 1</li><li>bla 2</li><li>bla 3</li>
</ul>
</div>
<div>yada</div>
</body>
Related
I am getting unwanted margin horizontally on my li a elements when I put a comment next to the code in the .html file. When I remove it, the margin goes away. What is going on, and is there a way I can add comments without affecting the display? Here is the code, where the comment is in the li rule:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name=”viewport” content=”width=device-width”>
<title>Test Navigation</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: white;
position: absolute;
}
li {
display: inline-block; <!--allows you to display like an inline but you can add width and height-->
float: left;
border: 1px solid red;
}
li a {
display: block;
font-size: 1.3rem;
text-align: center;
min-width:140px;
height: 50px;
line-height: 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#" >HOME</a></li>
<li>VIDEOS</li>
<li>DOCUMENTS</li>
<li>SCTE</li>
<li>TRAINING</li>
<li>EVENTS</li>
</ul>
</body>
</html>
That part of the code is CSS and here the comments must be enclosed between /* */, not <!-- -->. Currently that line is being ignored by the browser.
e.g.
display: inline-block; /* allows you to display like an inline but you can add width and height */
you are in css (style tags) so style and script is /* */ html (other html codes) is <!— —> for css on your file use /* and */
hope it helped!
display: inline-block; /* allows you to display like an inline but you can add width and height */
Hello guys) seems like I have pretty common issue with :hover'ing over floated list elements in IE, though I didn't find any solution so far. IE11 + WIN7. Here is my HTML...
<!doctype html>
...
<ul id="horizontal-menu">
<li></li>
<li></li>
<li></li>
</ul>
And I have my CSS this way...
#horizontal-menu {
list-style: none;
}
#horizontal-menu li {
display: inline-block;
float: left;
margin-left: 3px;
}
#horizontal-menu li a {
background-color: green;
display: inline-block;
float: left;
height: 30px;
width: 30px;
}
#horizontal-menu li a:hover, #horizontal-menu li a:active {
background-color: red;
}
The problem is that in IE the actual :hover area of those list item links has a strange left margin, and it works fine for the rest of the browsers...
Though I don't have enough reputation to post images, here you gonna find a fast link to my explanatory drowings...
Need your good advice fellas :/ tnx
...
Just used this !DOCTYPE...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
didn't solve the issue...
...
Just removed the display:inline-block rule from both li and a elements... didn't work for me
...
Removed also all possible inherited margins and paddings... still the same
The issue still exists
remove the display:inline-block rule from both li and a elements
so I was beginning work on an html/css document and can't find out exactly why the text isn't positioned correctly in my menu bar. I've tried to put the text align: left; and margin: 0 auto and padding: 0 and none of these seem to work. I've also looked through a good amount of the questions and run my html/css through validator.w3.org. If anyone is able to help me out that would be great!
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>
<title>title!</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site_title">
<h2><span>the problem</span></h2>
</div>
<div id="menu">
<ul>
<li>is </li>|
<li>that </li>|
<li>my </li>|
<li>text </li>|
<li>isn't centered</li>
</ul>
</div>
</body>
</html>
css:
body
{
font-family: "Arial", "Helvetica", "Avant-Garde";
font-size: 14px;
color:black;
text-align: left;
background-image: white;
margin: 50px 40px 20px 100px ;
}
div#site_title
{
font-size: 21px;
letter-spacing: 1.5px;
}
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
}
j fiddle so you can see!
EDIT: I should explain that the menu with the smaller text is the one I want to move a few spaces to the left so it doesn't look tabbed. I also fixed the title so it shows what the actual problem is.
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
* {
margin: 0;
padding: 0;
}
or
import
http://meyerweb.com/eric/tools/css/reset/
http://necolas.github.io/normalize.css/
You haven't set fixed width to your containers, so they are 100% width, you have set for display: inline for <li>, so you can simply center it using text-align:center to <ul>.
btw. as #putvande said in comment, you can't directly inside <ul> you can put only <li>. To avoid putting |, use this css:
div#menu li:after {
content:'|';
}
Have you tried add this?
div#menu ul {
text-align: center;
}
http://jsfiddle.net/XaQbr/6/
remove the margin on the body and padding on the ul to see it better centered http://jsfiddle.net/XaQbr/8/
Also the pipes outside of the li's, those are invalid
try this:
div#menu ul{padding:0;}
right-click the element in your browser and click "inspect element". there you can see dimension, margins and paddings in color. (for chrome at least...)
Your markup is invalid. You cannot have the | or any other tags or content in between the li. The separator should be done using border-left or right. You can control height of the separator using line height on the li and spacing using left/right padding on the a not using space.
<div id="menu">
<ul>
<li>is</li>
<li>that</li>
<li>my</li>
<li>text</li>
<li>now centered</li>
</ul>
</div>
CSS:
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
padding:0 10px;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
line-height:14px;
border-left:1px solid gray;
}
div#menu li:first-child{
border-left:none;
}
http://jsfiddle.net/XaQbr/10/
I'm trying to do Tabs with pure HTML/CSS, and it works nice in all major browsers. Except IE, both 7 and 8.
If I don't add display: table to the ul, the content is not on a new line in every browser. However, IE doesn't display it in a new line even after I add that. What can I do about that? Is there a better way to make tabs in pure HTML/CSS?
<!DOCTYPE>
<html>
<head>
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: yellow;
}
ul.tabs>li.selected {
background-color: orange;
}
div.content {
border: 1px solid black;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="selected">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="content">
This should really appear on a new line.
</div>
</body>
</html>
Because of the floated <li> elements your <ul> element is zero height.
Try adding ul { overflow: auto; } and div.content { clear: both; } to your CSS
Does this (jsfiddle) work for you?
Changes made:
Removed display: table; from ul.tabs
Removed float:left from ul.tabs li's
Added display:inline-block to ul.tabs li's
I always just "float" the li elements:
ul.tabs{list-style: none;}
ul.tabs li{float:left;}
I've used this approach which works well. It uses an inline list: http://nontroppo.org/test/tab1.html
UPDATE: Above is outdated. If I were to answer the question now I would suggest using the CSS target pseudo-class method outlined here: http://www.w3.org/Style/Examples/007/target. There are other methods like using (hidden) radio buttons in combo with the checked pseudo-class but using target seems the cleanest.
I've got a list with floated list items which should use the standard bullet. But in IE7 only, these bullets don't appear:
Here is the all the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
/*ul { overflow: hidden; margin: 1em; padding: 1em; } */
ul li
{ width: 30%;
float: left;
border: dashed red 1px;
/* list-style-position: outside; list-style-type: disc; margin-left: 1em; padding: 1em; zoom: 1; */
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit </li>
<li>consectetuer adipiscing elit</li>
<li>Etiam sapien neque</li>
<li>dictum at</li>
<li>bibendum ut</li>
<li>posuere quis</li>
</ul>
</body>
</html>
The commented-out CSS are rules that I tried, but which didn't make the bullets appear.
When I remove the float: left; declaration, the bullets do appear in IE7.
How can I get floated lis with bullets to display in IE7?
Further to my comment (to the question), a demo is posted over at JSBin.
With the following CSS seems to achieve your aims:
ul li {
float: left;
list-style-position: inside;
margin: 0 0 0 1em;
}
I'm seeing the bullets disappear in Safari on MacOS, as well... I found a page that, in one of the comments, gave me a solution that worked for me: Putting a display: list-item; style onto a or span tags when they occur inside an li, like this:
CSS:
ul li {
width: 30%; /* or whatever; copying your example */
float: left;
}
ul li a, ul li span {
display: list-item;
}
HTML:
<ul>
<li>link to something</li>
<li><span>not a link</span></li>
<li> ... [oops, no bullet!] </li>
</ul>
Note that in the case of an a tag, the bullet will be part of the link (and colored as one, etc.). With span (and removing the ul li a styling), that should be avoidable.
Sadly, this does mean changing your markup... but at least it's hopefully not an entirely unreasonable type of change.
Also of note: this works with ol lists, too, with an interesting caveat: If you stop floating them (and thus they get their normal numbering back), you end up with each item numbered twice! So, be careful of doing this to all li a or li span combinations; perhaps you'd want to use a class for lists that would be treated this way, and only apply these stylings to that. For example, one might change the above to:
.floated li { width: 30%; float: left; }
.floated li a, .floated li span { display: list-item; }
I hope this helps (if not the original questioner, this being so old, then someone, sometime).
I had to use a workaround to get the bullets to display in IE7. I created an image of the bullet, and set it as the background-image for the LIs, along with some extra padding.
I would be happy to accept another answer though! ;)