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).
Related
I am trying to create a navigation bar on my website for a project. I get the bar just fine, but I can't get it to center on the page. I have tried a variety of different methods. Can someone help me out? I'm using an external style sheet. Here is the code for my main page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="tylerschevy.css">
</head>
<body>
<h1>Tyler Chevrolet</h1>
<ul>
<li>Home</li>
<li>Show Room</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Official Site</li>
</ul>
</body>
</html>
Here is my style sheet:
h1 {text-align:center}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
display: inline-block;
float:left;
}
a:link,a:visited{
display:block;
width:120px;
font-weight:bold;
color:black;
background-color:#FFFF33;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active{
background-color:#0033FF;
color:white;
}
jsfiddle
Add class="nav" to your <ul>, and then in your stylesheet create a new class:
.nav {
display: table; margin: 0 auto;
}
jsFiddle
Center ul
body {
text-align:center;
}
ul {
margin:0 auto;
display: inline-block;
}
I recommend to put your ul in one wrapper (so you don't touch the body) like this
<div class="wrapper">
<ul>...</ul>
</div>
css
.wrapper{
text-align:center;
}
ul {
margin:0 auto;
display: inline-block;
}
I am trying to create a slide down vertical menu. My menu pushes down the other li's in the main part of the section like it's supposed to. The only problem is that the submenus move are moved to the right, and I want them lined up with their parent. This jsfiddle shows that problem. The source code is below, but all of it is in the jsfiddle.
Thanks,
Kirie
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DEMO</title>
<style>
div{
width:180px;
}
div ul ul {
display: none;
}
div ul li:hover > ul {
display: block;
}
div ul li {
list-style:none;
background:#F00;
width:180px;
}
div ul ul li {
background:blue;
width:180px;
}
div ul ul li a{
width:180px;
color:white;
}
div ul ul ul li {
background:red;
width:180px;
}
</style>
</head>
<body>
<div>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</div>
</body>
</html>
Add the below to your CSS:
ul ul{
padding:0; /* stop children from being offset left */
}
Demo Fiddle
Is this what you are looking for.
Add a class to the sub menus and style it as folowing
.sub
{
padding: 0px;
}
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 problems overlaping two boxes. Should I use absolute positioning? z-index or what techniques are out there? By the way I want them to overlap is just that I want to make sure it works cross modern browsers. IE8 or +
I cant push the black box to the center why?
<!DOCTYPE HTML>
<html>
<head>
<title>Metropolitan State Hospital Intranet</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<div id="masthead">
<div id="logo">
Logo here
</div><!--end logo-->
<div id="header">
<div id="horizontalMainMenu">
<ul>
<li>About Us |</li>
<li>Contact Us |</li>
<li>Metro Link |</li>
<li>WaRMSS Login </li>
</ul>
<br style="clear:left;"><!--I used float:left in the css to stack the list items now I need to clear it-->
</div>
</div>
<!--end header-->
</div><!--end masthead-->
<div id="container">
<div id="left_col">
<div id="verticalMainMenu">
<ul>
<li>Air Quality Control</li>
<li>CalATERS</li>
<li>Email Encryption</li>
<li>Employee Guide</li>
<li>Patient Special Function Requests</li>
<li>Request Home Address <br> Confidentiality Form</li>
<li>Travel Store</li>
</ul>
</div><!--verticalMainMenu ends here-->
</div><!--left_col ends here-->
<div id="page_content">
<div id="horizontalBodyMenu">
<ul>
<li>Home</li>
<li>Clinical</li>
<li>Administrative</li>
<li>Service</li>
<li>Search</li>
</ul>
<br style="clear:left">
</div>
</div><!--page_content ends here-->
</div>
<div id="footer">
Footer
</div><!--end footer-->
</body>
</html>
CSS:
/* CSS layout */
*{
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0;
}
#masthead {
min-width: 600px;
}
#logo {
float: left;
width: 200px;
background-color:yellow;/*I dont know what color this is in the template*/
}
#header {
background-color:yellow;/*I dont know what color this is in the template*/
height:300px;
}
#container {
clear: both;
min-width: 600px;
}
#left_col {
float: left;
width: 200px;
background-color:red; /*I dont know what color this is in the template*/
}
#page_content {
background-color:black;
margin:-50px 0 0 0;
width:95%;
}
#footer {
clear: both;
}
/* CSS common layout ends here*/
/* horizontalMainMenu starts here*/
#horizontalMainMenu{
width:100%;
background-color:transparent;
}
#horizontalMainMenu ul{
margin:0;
padding:0;
float:left;
}
#horizontalMainMenu ul li{
display:inline;
}
#horizontalMainMenu ul li a{
float:left;
text-decoration:none;
color:white;
padding:5px 9px;
}
/*horizontalMainMenu ends here*/
/*Body Menu Starts here*/
#horizontalBodyMenu ul{
list-style:none;
}
#horizontalBodyMenu ul li{
display:inline;
}
/* horizontalBodyMenu ends here*/
#horizontalMainMenu ul li a:visited{
color:white;
}
#horizontalMainMenu ul li a:hover,#mainMenu ul li .current{
color:#fff;
background-color:#0b75b2;
}
#verticalMainMenu ul{
margin:0;
padding:0;
list-style:none;/*removes the default bulltets*/
}
#verticalMainMenu li{
padding:0 0 0 10px;
background-image:url('');
background-repeat:no-repeat;
background-position:.5em;
line-height:200%;
}
#verticalMainMenu li a:hover{
color:#fff;
background-color:#0b75b2;
}
You should do it normally, and then pull "Box 2" upwards with margin-top: -80px.
This will work in "all browsers".
Here's a good article concerning negative margins:
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
You need to position box2 relative to box1. Lookup html relative positioning.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
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.