I have created a list of items using <ul> and <li>. It's works fine in Firefox but in Internet Explorer 6 and 7 I cannot see the list bullet.
Here is what I've done:
I have a global ul , li reset value. After that I have created two column list using two <ul> block. I am overwriting the ul li global style value none in CSS to list style as disc. when I do this I can see the bulleted list item, but when I set the ul's width as some specific value the li bullets disappear in IE.
Even if I use list style as list-style-image: url(bullet.gif) that also does not appear in IE 6 and 7.
Here is the HTML code. Please have a look on this and let me know which way I can archive bulleted list in all the browsers.
<!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=utf-8" />
<title>List Sample</title>
<style>
* { padding: 0; margin: 0; }
body { font-size: 62.5%; background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; color:#000000;margin:0; }
p,ul { font-size: 1em; }
li { list-style: none; font-size: 1em }
.clear { clear: both; height:0px; font-size:0px;}
#box1{ font-size:1.5em; margin:10px 0px 0px 10px; width:350px; border:1px solid red; padding:10px 20px; clear:both;}
#box1 ul#listLeft{ display:inline;}
#box1 ul#listLeft li{ list-style:disc; border:1px solid red; width:150px; float:left;}
#box1 ul#listRight li{ list-style:disc; border:1px solid red; width:150px; float:left;}
</style>
</head>
<body>
<div id="box1">
<ul id="listLeft">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<ul id="listRight">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<div class="clear"></div>
</div>
</body>
For native disc bullets you need some margin, padding.. try with
ul li { margin:0 0 0 15px; padding:0 0 0 15px; }
And keep decreasing the left for either of those until you've gained consistency ( I forget which browser uses which - you might be able to just rely on one of those alone ). If you want to use an image use:
ul li { background:url(/images/bullet.gif); zoom:1; }
The zoom is to counter-act IE-oddities, sometimes it creates oddities though. Don't forget to set the background position depending on your design.
Related
I would like to have a fixed menubar at the top of my website. (which doesn't move when we scroll). My issue is that this menu bar can have a variable height (one or two (or more) levels depending of the number of items/screen size)
Because the top menu is fixed, I have to add a margin-top for my "real" content after that (or it will begin hidden under the menu), but as the menu height is variable, I can't set a margin-top.
So, is it possible to "force" the content not to be under/over my menubar ? How could I do this ? (I wish not to use javascript for this king of positioning)
Here is the code I am using to test a solution :
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<style>
body
{
margin: 0;
padding: 0;
color: #575757;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #cdcdcd;
}
#page
{
margin-top: 0px;
margin-bottom: 5px;
width:100%;
max-width:1500px;
margin-left:auto;
margin-right:auto;
}
#mainmenu
{
background:#b90014 repeat-x left top;
position:fixed;
/*height:28px;*/
width:100%;
z-index:100;
left:0;
background-image:linear-gradient(#b90014, #d00018);
}
#mainmenu p#lastUpdate
{
float:right;
color:#ffffff;
margin-top:5px;
margin-right:10px;
margin-bottom:0px;
margin-left:5px;
}
#mainmenu ul
{
padding:6px 20px 5px 20px;
margin:0px;
}
#mainmenu ul li
{
display: inline;
}
#mainmenu ul li a
{
color:#ffffff;
background-color:transparent;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding:8px 8px 4px;
}
#mainmenu ul li a:hover, #mainmenu ul li.active a
{
color: #d00018;
background-color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<div id="page">
<div id="mainmenu">
<p id="lastUpdate">Last Update : this date</p><ul id="yw0">
<li>Accueil</li>
<li>Rapports</li>
<li>Rapports personnalisés</li>
<li class="active">Rapports instantannés</li>
</ul>
</div><!-- mainmenu -->
<div id="content">
<div id="contentbox">
HELLO WORLD
</div>
</div><!-- content -->
</div><!-- page -->
</body>
</html>
Thank you !
I think what you are looking for are media queries:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can apply CSS styles depending on the size of the screen.
I don't think you can do this in just CSS as it's not able to able detect changes in the page like that. As stated below you could get somewhere near what you want using css padding but i would suspect it wont be exactly what you want. This is one of the things JavaScript is designed for. Id happily be proved wrong though
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/
So I've got some simple code here:
<div id="nav">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
CSS-
ul
{
list-style-type:none;
width:700px;
height:44px;
padding:0;
}
li
{
float:left;
margin:0;
padding:0;
width:80px;
height:auto;
}
a
{
height:40px;
text-decoration:none;
border:2px solid black;
background:blue;
}
-#nav
{
width:786px;
height:66px;
border:2px solid black;
background:#C4BD97;
margin:5px;
}
This code should force my a tags to align themselves horizontally and give them a definite height/width. They align perfectly, but their height and width WILL NOT change no matter what I do. Never ran into this problem before, is my HTML broken? Thanks.
display: inline elements do not respect height. Change them to display: inline-block (or perhaps block) or use line-height to alter the height.
http://jsfiddle.net/kHkyh/
Try setting the height and/or width on the anchor tags in the li. That is, push out the li using the anchor tags. You can do this in a decently uniform way using padding to make sure the entire area of the anchor is clickable. Also, this approach works back to I believe ie6(not sure about ie5, have not tested it). Following is roughly what I'm talking about:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body, #menu, #menu li
{
position: relative;
display: block;
padding:0px;
margin: 0px;
}
#menu
{
list-style-type:none;
width:100%;
}
#menu a
{
position:relative;
display:block;
float:left;
width:25%;
padding:10px 0px 10px 0px;
text-align:center;
}
</style>
</head>
<body>
<ul id="menu">
<li>One item</li>
<li>Another item</li>
<li>hola</li>
<li>Hi</li>
</ul>
</body>
</html>
I am having an issue with this horizontal menu bar. It is suppose to fit the window (width wise) but continues a little bit further than it should. It is also suppose to be top:0;left:0;
Everything I do either one of two things works. Either I align it the top left but the width is too large, or it's not aligned and the width does fit.
<!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=utf-8" />
<title>Website Title</title>
</head>
<body>
<style>
body{
}
.bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
#cssmenu ul {
list-style-type:none;
width:100%;
position:absolute;
display:block;
height:33px;
font-size:.6em;
background: #76B3F1 url(images/menu-bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
top:0;
left:0;
}
#cssmenu li {
display:block;
float:left;
margin:0;
padding:0;
}
#cssmenu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;
}
#cssmenu li a:hover,.current {
color:#fff;
background: #A3BAE6 url(images/menu-bg.png) repeat-x top left;
text-decoration:none;
}
#cssmenu .current a {
color:#fff;
font-weight:700;
}
</style>
<div id="cssmenu">
<ul>
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div id="background">
<img src="background/001.JPG" class="bg"/>
</div>
</body>
</html>
Add the box-sizing: border-box; css property.
This tells the menu to take the border into account when calculating '100%'
The answers so far seem cumbersome, so to re-post my comment as an answer:
Simply change the width:100% to left:0;right:0 in the ul style. This is supported in everything better than IE6. If you need to support IE6, use its expression syntax:
width:expression((this.parentNode.offsetWidth-2)+'px')
If you don't want to use the CSS3 property box-sizing as Rockafella suggested, you can try this edit of your CSS.
I got rid of your position: absolute, added 1px padding to the <div> container, and added -1px margin to the <ul>. This way, the width: 100% on the <ul> makes the width of the content box not include the 1px border you specified.
add overflow-x: hidden to your body
Instead of using a border, how about using an inset box-shadow? You'd need to get your prefix on, and it wouldn't work in older IE. As far as I'm concerned, the industry has turned the corner on older IE and understands that it's not worth the trouble giving it all the shadows and rounded corners.
box-shadow:inset 0 0 1px 0 #000;
I am currently trying to create some nested lists to display the following...
A...R...X
B...S...Y
C...T...Z
(where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following...
A
B...R
C...S...X
......T...Y
...........Z
I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel=stylesheet href="lists in IE.css" type="text/css">
</head>
<body>
<div id="container">
<ul id="links-nav">
<li>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>
<ul>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
</li>
<li>
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
CSS
#container{
width:940px;
margin:0px auto;
border: 1px solid #000;
padding: 20px 10px;
height:auto;
font-family: Arial, sans-serif;
font-size:11px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
a{
text-decoration:none;
color:#555;
}
#links-nav li, li ul li{
list-style:none;
}
#links-nav{
list-style-type: none;
margin:0px;
padding:0px;
}
#links-nav li ul{
float:left;
width:168px;
padding: 0px 10px;
list-style-type: none;
}
add in your css
#links-nav > li {
width:168px;
float:left;
}
Demo: http://jsfiddle.net/qUJuy/2/
or
#links-nav > li {
width:168px;
display:inline;
}
Demo: http://jsfiddle.net/qUJuy/3/
The above will fix the error in ie7 (in ie8 it was already correct).