Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have a simple webpage set up to test a method of centering a floated div. It is supposed to center the buttons and have them all float left. In chrome, the buttons are not floated. When I inspect element it shows that the float is overridden. I have checked the whole document, and there isn't any float: none, however chrome says there is. In internet explorer the website displays fine. Is this a problem with chrome's defaults? How do I fix it? From what I have learned CSS gives precedence to more specific orders, so the float: left in the li css should override any Chrome defaults...
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Center Floated Div</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="content">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
html {
margin: 0;
padding: 0;
}
body {
background-color: #32127A;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#nav {
float :right;
position :relative;
left :-50%;
text-align :left;
}
#nav ul {
list-style :none;
position :relative;
left :50%;
}
#nav li {
float: left
position: relative; /* ie needs position:relative here*/
}
#nav a {
text-decoration :none;
margin :10px;
background :red;
float:left;
border :2px outset blue;
color :#fff;
padding :2px 5px;
text-align :center;
white-space :nowrap;
}
#nav a:hover{
border: 2px inset blue;
color: red;
background: #f2f2f2;
}
#content {
overflow: hidden /* hide horizontal scrollbar*/
}
You are missing the ; after the float in the css. You need to close it.
DEMO (Working with the missing ;)
Your code doesn't have a semicolon after the float. If the problem still persists you should add !important after the rule.
Related
This question already has an answer here:
Why does 'overflow: auto' clear floats? And why are clear floats needed?
(1 answer)
Closed 6 years ago.
If one checks the following code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
For a nav bar where elements are floated to the left, it seems imperative to set the overflow property of "ul" as "hidden". If this property is not set then the nav bar disappears completely. Why is this?
Thanks
If you dont do so, the <ul> is not inside the text flow I guess.
The right way to do this here is to not use the overflow attribute but float: left;
This has to do with what is known as a block formatting context.
Establishing a new BFC means that it is responsible for its own layout, especially when dealing with floated elements.
You could also have written overflow: auto. Basically, any other overflow value than visible (which is default) would make the nav bar visible.
Read more about BFC's here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
test.html:
div, li {
display: inline-block;
margin-left: 30px;
}
<div>тест1</div>
<ul>
<li>тест</li>
</ul>
Opening test.html gives such a result that although div and li tags share the same style rules, div tag content is nevertheless closer to the left screen border than li tag's (at least at Google Chrome 44, desktop). Why is it so and how is it "healed"?
<ul> have some margin from left in default css. You can reset your css, or just put to your <ul> margin: 0; and padding: 0;.
HTML elements have styling rules beyond simple left margin & display type (such as padding for example). Also elements are positioned relative to other elements (unless explicitly set otherwise).
There's no reason for your <div> & <li> to look identical.
Posting the full code in accordance with #Alesha Oleg's answer-
<!DOCTYPE html>
<style>
div, li
{
display: inline-block;
margin-left: 30px;
}
ul
{
margin: 0;
padding: 0;
}
</style>
<div>ABCD</div>
<ul>
<li>ABCD</li>
</ul>
Now you get same effect on both:
div, li{
display: inline-block;
margin-left: 30px;
}
ul {
margin:0;
padding:0;
}
Here is fiddle: http://jsfiddle.net/nphzbfwd/1/
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
It seems that when an element has display:block, the background-color of that element extends to 100% of the width of the parent element (as it is intended). I would like instead for the background-color to extend only to the edge of the text, so that the parent element's background-color is visible. I would use a float or inline-block, but it is also important that each element exist on a new line.
CSS Code:
body {
background-color:#fff;
color:#1a1a1a;
font-family: inconsolata;
font-size:13px;
}
#content {
position:absolute;
width:50%;
left:25%;
top:5%;
}
.entry {
/*background-color: #1a1a1a;*/
background-image:url('images/stripe3.png');
color:#f00;
/*padding:1px;*/
}
ul {
display:block;
}
li {
background-color:#fff;
margin-left:20px;
padding: 0px 4px;
}
HTML code:
<div id="content">
<div class="entry">
<ul>
<li>
the illuminator : ongoing : projection, social practice
</li>
<li>
color organisms : 2014 : projection, net art
</li>
</ul>
</div>
</div>
The point is that you have a pure text node inside the li which is difficult to select in CSS.
It is more common for text to be wrapped in some form of text tag such as a p, span or commonly in a list item an anchor tag a.
Thusly;
<div class="entry">
<ul>
<li>
the illuminator : ongoing : projection, social practice
</li>
<li>
color organisms : 2014 : projection, net art
</li>
</ul>
</div>
In this way, you can just target the anchor tag directly like so
.entry {
background-color: #1a1a1a;
color:#f00;
}
ul {
display:block;
}
li {
background-color:#fff;
margin-left:20px;
padding: 0px 4px;
}
li a { /* select anchor tag */
background-color: lightblue;
}
However, this might restrict the clicking area of your link so one might decide to make the anchor tag display:block also...and we're back where we started.
So, wrap the text again in an inline element such as a span and target that instead.
Revised HTML
<div class="entry">
<ul>
<li>
<span>the illuminator : ongoing : projection, social practice</span>
</li>
<li>
<span>color organisms : 2014 : projection, net art</span>
</li>
</ul>
</div>
Revised CSS
.entry {
background-color: #1a1a1a;
color:#f00;
}
ul {
display:block;
}
li {
background-color:#fff;
margin-left:20px;
padding: 0px 4px;
}
li a {
background-color: lightblue;
display: block;
}
li a span { /* like this */
background-color: yellow;
}
JSfiddle Final Demo.
Finally, if you wish to see the background of the ul, remove the background colors from the li and a - like this - http://jsfiddle.net/8QMvr/8/
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/
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>