|
CSS - Unwanted Gap In Ie
Similar TutorialsI've read many forum replies to help getting rid of indents in li & ul items. None of the solutions are working for me. PLease help! I have a footer divided into 3 columns. The text inside each column is left-aligned with no padding/margin except for my twitter feed, which shows up with a ~41px indent. I've tried every combination of padding & negative margin in the CSS, nothing works. Currently: #twitter_update_list li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside} #twitter_update_list ul li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside} #twitter_div {padding:-41px 0 0 0; text-indent:0px; margin-left:0 0 0 0; overflow:hidden; display:inline; text-align:left;} My website is marinaporter.blogspot.com Thanks so much... Hello, im working on styling an unordered list into a file tree. So far, so good. However, do you see that space that is showing in between each <li>, between the T (elbow2.gif) image, its very unwanted. Code:
/* -- FILE BROWSER -- */
#browseFiles {
padding: 0 0 0 20px;/* 000pix handles indent */
}
#browseFiles ul {
font: 10px sans-serif;
color: #000;
list-style:none;
margin: 0;
padding: 0;
}
#browseFiles li {
/*display:compact;
height: 18px;*/
padding: 0;
margin: 0;
}
#browseFiles .fileDiv {
height: 18px;
background: url(images/elbow2.gif) no-repeat scroll 0 0;
}
#browseFiles .fileLink {
padding: 0 0 0 13px;
margin: 3px 0 0 0;
}
#browseFiles .dir {
list-style:none;
font: bold 10px sans-serif;
margin:0;
padding:0;
}
#browseFiles .file {
padding: 0 0 0 3px;
margin:0;
}
Heres the html Code:
<div id='browseFiles'>
<ul>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
</ul>
</div>
Thank you for the help in advanced. Hi everyone. I have a header image and directly below it the div that holds my navigation. In FF it works great, but in IE I get about a 5px space inbetween the header image and the navigation div. The navigation div is colored so it's really easy to tell where it stops and starts in IE. Here's my CSS code: Code:
body {
background-image: url(images/bgshadow.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
#content {
width: 738px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
vertical-align: top;
}
#header {
width: 738px;
margin: 0 0;
padding: 0 0;
}
#nav {
width: 738px;
height: 25px;
margin: 0 0;
padding: 0 0;
background-color: #86462F;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
}
#nav ul {
width: auto;
float: right;
margin: 5px 0 0 0;
padding: 0 0;
}
#nav ul li {
margin: 0 25px 0 0;
padding: 0 0;
list-style-type: none;
display: inline;
}
and my markup: Code: <div id="content"> <div id="header"> <img src="images/header.jpg" width="738" height="100" /></div> <div id="nav"> <ul> <li>Home</li> <li>Register</li> <li>Go Play!</li> </ul> </div> I've tested the white-space bug in windows IE (taking out all of the white-space in the markup) but that only had a marginal effect on the list. Does anyone have any ideas? Thanks, -Brian Hi, everyone. Funny I've never run into this before, but I've got a div with a background colour applied, and within it there's an image I want to appear snug to the top, right where the bgcolour starts. Here's the html/css: Code: <TD style='vertical-align:top; text-align:left;'> <div style='background-color:#DA1B28; padding:0px; vertical-align:top; color:white; height:19px; width:385px; margin-left:20px; margin-top:8px;'> <a href='blah.html' style='margin-top:0px;'><img src='images/viewcart.gif' border='0' alt='View Cart!' style='margin-left: 4px; margin-top:0px;'></a> </div> </TD> </TD> I'm getting a bout 2px of space before the image starts; is the only way around this to use a negative margin-top, or am I missing some parameter in one of the styles? Thanks in advance! hello all, I have been working on a web site that is constructed 99% using divs and CSS. I have a unwanted space that is appearing in the main image in Internet Explorer on PC. MAc IE, Safari, Mozilla (PC), etc. work fine. Can someone see what is happening...I hope so! You can see the site at www.obsign.com Here is the code that I am working with: Code: <body>
<script language=JavaScript>
function Navigate() {
var number = NavSelect.selectedIndex;
location.href = NavSelect.options[number].value; }
</script>
<table class="boundaries">
<tr>
<td class="vertical">
<center>
<div id="site">
<div class="padding">
<div class="navigation"><div class="navigation">
<a href="index.php?id=2&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about_over.jpg');" onmouseout="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about.jpg');"><img name="about.jpg" alt="About Us" src="customizations/uploadedmedia/images_navigation/about.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=4&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services_over.jpg');" onmouseout="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services.jpg');"><img name="services.jpg" alt="Services" src="customizations/uploadedmedia/images_navigation/services.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=6&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources_over.jpg');" onmouseout="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources.jpg');"><img name="resources.jpg" alt="Resources" src="customizations/uploadedmedia/images_navigation/resources.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=8&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact_over.jpg');" onmouseout="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact.jpg');"><img name="contact.jpg" alt="Contact" src="customizations/uploadedmedia/images_navigation/contact.jpg"
width="94" height="30" border="0" /></a>
</div>
</div><div class="locations"><img alt="Cincinnati, Ohio - Cleveland, Ohio - Austin, Texas" src="customizations/safeharbor/templates/images/locations.jpg"
width="362" height="30" border="0" /></div><div class="clear"></div><div class="logo"><img src="customizations/safeharbor/templates/images/logo.jpg"
width="195" height="281" border="0" /></div><div class="image"><div class="main_1"><img name="width='533px' height='237px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_1.jpg"
width="533" height="237" border="0" /><br><img name="width='278px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_2.jpg"
width="278" height="21" border="0" /><select style="vertical-align:top; padding:0px; border:0px; margin:0px; width:189px;" name="NavSelect" onChange="Navigate(this.form)"><option value="" SELECTED>Choose the Solution for You:<option value="#">Option 1<option value="about:blank">Option 2<option value="#">Option 3</select><img name="width='66px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_3.jpg"
width="66" height="21" border="0" /><br><img name="width='533px' height='22px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_4.jpg"
width="533" height="22" border="0" /></div></div>
<div class=""><h1>HOME BODY</h1>
<p class="general_text">Now that you have installed the system, please proceed to customize and populate with content.</p></div>
</div>
</div>
</center>
</td>
</tr>
</table></body>
</body>
</html>
Code:
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
margin:0px;
padding:0px;
background-image: url('http://www.obsign.com/customizations/safeharbor/templates/images/bg.jpg');
background-repeat:repeat
}
img {
margin-bottom: 0px;
}
#site {
text-align:left;
width:770px;
padding:0px;
border:0px;
margin:0px;
background:#ffffff;
border:1px solid #CFC9C0;
}
table {
font-size: 100%;
}
a.breadcrumb {
color: #444444;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-decoration:none;
}
a.breadcrumb:visited {
color: #888888;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-decoration:none;
}
ul {
margin-bottom:5px;
margin-top:5px;
padding:0px;
border:0px none;
list-style-type:square; list-style-image:url('/uploadedobjects/images/bullet.gif')
}
li {
padding-top:3px;
}
.text_highlight {
background: #FDFD00;
color: #000000;
}
.clear {
clear:both;
}
.gentext {
font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
color:#666666;
}
.gentext a {
font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
color:#666666;
}
input.liteoption {
background: #efefef;
font: normal 100% Verdana, Arial, Arial Narrow, sans-serif;
color:#444444;
text-align:center;
padding: 1px;
border: 1px solid #dddddd;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
}
input.searchoption {
font: bold 100% Verdana, Helvetica, Arial, sans-serif;
background-color : #eeeeee;
color : #000000;
border: 1px solid #000000;
}
input.text {
font: normal 105% Verdana, Helvetica, Arial, sans-serif;
border: 1px solid #dddddd;
border-top: 1px solid #aaaaaa;
border-left: 1px solid #aaaaaa;
}
select {
font: normal 100% Verdana, Helvetica, Arial, sans-serif;
color: #000000;
}
.form_label {
font:bold 100% Verdana, Helvetica, Arial, sans-serif;
display:inline;
color:#000000;
}
.search_text{
font:normal 9px Verdana, Helvetica, Arial, sans-serif;
color:#000000;
border-top:#000000;
border-left:#000000;
}
.boundaries {
width:100%;
height:99%;
}
.vertical {
vertical-align:middle;
}
.padding{
padding:16px;
}
.navigation{
border:0px;
margin:0px;
float:left;
width:376px;
}
.locations{
border:0px;
margin:0px;
float:right;
width:362px;
}
.logo{
padding:10px 10px 10px 0px;
float:left;
border:0px;
margin:0px;
}
.image {
padding:10px 0px 10px 0px;
border:0px;
margin:0px;
}
.main_1{
float:right;
background:#EAE3DB;
border:0px;
white-space:nowrap;
margin:0px;
padding:0px;
}
I have some body text on a site I am working on. On Firefox and Safari the text appears with an underline even though it isn't set in the CSS to have this line. Strangely it doesn't happen in Internet Explorer 6. Also, it only happens on one page of the site in Firefox and Safari. Please look at http://certified.tmhdesign.com/know.asp in FF I have a div element with an id of "know" that is appearing under an h1 element with an id of know_header In Firefox there is an unwanted top margin on the div#know (or a bottom margin on the H1 element). I can't seem to understand why? T Hi there, I'm building a page that requires 100% width & height, and absolutely NO margins on any side. I've applied the following inside my CSS: body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-color: 000000; } For this to work in Firefox, I've also had to add the same code just above the head tag (inconvenient, but I don't mind). My problem is the unwanted right margin that appears in IE. I have no idea how to remedy this. You may view the page here. Thanks so much! Hi all, I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited. The test page is here You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text. Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color. BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited. Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this? CSS file is here Thanks! Chris It seems the form that creates unwanted space in IE. Site in question: http://www.phaseninedesign.com/p/uber/ HTML: Code: <div id="topMenu"> <form action="#" method="post"> <div id="reviewsBut"><a href="#"><img src="images/reviewsBut.gif" alt="Reviews" /></a></div> <div id="articlesBut"><a href="#"><img src="images/articlesBut.gif" alt="Articles" /></a></div> <div id="aboutBut"><a href="#"><img src="images/aboutBut.gif" alt="About" /></a></div> <div id="contactBut"><a href="#"><img src="images/contactBut.gif" alt="Contact" /></a></div> <div id="sponsorsBut"><a href="#"><img src="images/sponsorsBut.gif" alt="Sponsors" /></a></div> <div id="loginButTop"><a href="#"><img src="images/loginButTop.gif" alt="Sponsors" /></a></div> <div id="passwordBoxTop"><input type="password" id="password" onFocus="if(this.value=='password')value=''" onBlur="if(this.value=='')value='password';" value="password" /></div> <div id="userTopBox"><input type="text" id="user" onFocus="if(this.value=='Username')value=''" onBlur="if(this.value=='')value='Username';" value="Username" /></div> </form> </div> ----------------------- CSS: Code:
#topMenu{
width: 1005px;
height: 23px;
margin-left: auto;
margin-right: auto;
background-color: #282a1d;
background-image: url(images/topMenuBG.gif);
border-right: 1px solid black;
border-left: 1px solid black;
}
I've tried moving the form outside of the dive that its in, but that makes the space even bigger. I'm just playing around with some HTML and CSS for my student home page. I'm trying to use divs only, without the aid of any tables. All seems to be going well, except for my content area. I cannot post a link, becuase I'm a new user, but here is the page I'm working on: http://students.uww.edu/beghindb27/. The page is CSS and HTML validated properly, but only views properly in IE 6, not Firefox. In Firefox there appears to be a 10px padding below the content_top and above the content_bot divs. This should not be there, and does not appear in IE. In the past I've been able to remove this by using "!important" in my CSS to have Firefox ignore the accepted padding, but I'm looking for a better way to fix this, or the actual reason these paddings are showing up. CSS: Code: <style type="text/css">
body {
background: #000000 url(images/bg.jpg);
font-family: Arial;
font-size: 12px;
padding: 0px;
margin: 0px;
}
#header {
height: 220px;
width: 820px;
background: url(images/header.gif);
margin-top: 5px;
margin-bottom: 5px;
}
#content_top {
height: 20px;
width: 820px;
background: url(images/content-top.gif) no-repeat;
}
#content_mid_wrapper {
height: auto;
width: 820px;
background: url(images/content-mid.gif) repeat-y;
}
#content_mid {
height: auto;
width: 780px;
}
#content_bot {
height: 19px;
width: 820px;
background: url(images/content-bot.gif) no-repeat;
}
</style>
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<style type="text/css">
body {
background: #000000 url(images/bg.jpg);
font-family: Arial;
font-size: 12px;
padding: 0px;
margin: 0px;
}
#header {
height: 220px;
width: 820px;
background: url(images/header.gif);
margin-top: 5px;
margin-bottom: 5px;
}
#content_top {
height: 20px;
width: 820px;
background: url(images/content-top.gif) no-repeat;
}
#content_mid_wrapper {
height: auto;
width: 820px;
background: url(images/content-mid.gif) repeat-y;
}
#content_mid {
height: auto;
width: 780px;
}
#content_bot {
height: 19px;
width: 820px;
background: url(images/content-bot.gif) no-repeat;
}
</style>
</head>
<body>
<div align="center">
<div id="header"></div>
</div>
<div align="center">
<div id="content_top"></div>
<div id="content_mid_wrapper">
<div id="content_mid">
<p align="justify">
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, what is the point? Look, we all know who is at fault here, what the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Huh? No, what the **** are you... I'm not... We're talking about unchecked aggression here, dude.<br>
<b><a href="http://www.imdb.com/name/nm0000114/">Donny</a></b>: What the **** is he talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: My rug.<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Forget it, Donny, you're out of your element!<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, the chinaman who peed on my rug, I can't go give him a bill, so what the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: What the **** are you talking about? The chinaman is not the issue here, Dude. I'm talking about drawing a line in the sand, Dude. Across this line, you DO NOT... Also, Dude, chinaman is not the preferred nomenclature. Asian-American, please.<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, this isn't a guy who built the ****ing railroads here. This is a guy...<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: What the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, he peed on my rug!<br>
<b><a href="http://www.imdb.com/name/nm0000114/">Donny</a></b>: He peed on the Dude's rug.<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Donny you're out of your element! Dude, the Chinaman is not the issue here!
</p>
<p><font size="6">beghindb27 [at] uww [dot] edu</font></p>
</div>
</div>
<div id="content_bot"></div>
</div>
</body>
</html>
Thank you. I'm a CSS novice, struggling to understand the nuances of some open source CSS I'm using for a site. The main horizontal navigation has an extra item at the end of the row and I can't figure out why. Can you help me get rid of it? Here is my include for the navigation: <ul> <li><a href="/index.shtml">Home</a></li> <li><a href="/about.shtml">About</a></li> <li><a href="/ultreyas.shtml">Ultreyas</a></li> <li><a href="/weekends.shtml">Weekends</a></li> <li><a href="/FAQs.shtml">FAQs</a></li> <li><a href="/servant_community.shtml">Servant Community</a></li> <li><a href="/resources.shtml">Resources</a></li> <li><a href="/stay_in_touch.shtml">Stay in Touch</a></li> <li><a href="/donate.shtml">Donate</a></li> </ul> Here is the CSS: /*----------------------------*/ /* 2.4 - Navigation - Level 2 */ /*----------------------------*/ .nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;} .nav2 ul {float: left; width: 770px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(64,134,204); font-weight: bold;} .nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;} .nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;} .nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;} .buffer {clear: both; width: 770px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);} I'd like "Donate" to be the last item, but there is another empty box appearing to the right of it. Much obliged, Laurie Hello. I've been playing with css for about a week now and after tearing my hair out and calling it a stupid language a number of times, have eventually solved all my problems. However todays problem I thought I'd ask about. There are 3 or 4 white pixels at the corners of my css image changing navigation buttons that I didn't put there. They don't show up when viewed in photoshop or when I use Javascript rollovers. I can't find any help anywhere else either. I am trying to style a css layout. I keep getting a vertical space between two different block containers. here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="menu"> </div> </div> </div> </body> </html> Here is the CSS: Code:
#wrapper{
margin: 0 auto;
width: 977px;
}
#header {
margin: 0;
background: url(images/header_01.jpg) no-repeat 0 0;
width: 977px;
height: 198px;
}
#menu{
margin: 0;
background: url(images/header_02.jpg) no-repeat 100% 0;
float: left;
width: 977px;
height: 44px;
position:relative; top: 100%
}
My theory: the top part of the header is 154 px tall. The bottom part is 44px tall. That makes 198px height. so with header being 198px tall, and the smaller image with a relative position 100% down from the top should correctly line up the two images. But yet I have a HUGE gap?!?! Why? Even if I put 154px instead of 100% for top ... it will not line up correctly. I'm a bit confused why text in a relatively positioned div, following a floating div, would not align flush along the left edge of the div. My understanding was that the float would remove the div from the flow of the page, thus not affecting the relative div. But the mere presence of the floated div forces an indent of the text in the relative div. What gives? Example www.asticafe.com Can anyone tell me why the right column is clearing the left images? It only happens in IE, not modern browsers like Firefox or Safari. What's causing it and how can I fix it? I've tried playing around with "clear:none" and "float:right" properties for the right column, but it just makes the problem worse. EDIT: Realized this is not an HTML issue. If a mod could move this to the CSS forum I would appreciate it. Thanks Please take a look at this page: http://www.4xp.net/template2/ I cannot get the space under the horizontal nav bar to go away. It has to do with the image links, because if I remove then and put plain text in there, that space goes away. It only happens in IE, the space isnt there in FF. Here is my css PHP Code: body { margin-top: 5px; margin-bottom: 5px; background-image: url('images/bg.jpg'); } #header { width: 900px; height: 90px; padding: 0; margin: 0; text-align: left; background-image: url('images/header_bg.jpg'); } img { padding: 0; margin: 0; } #menu { border-top: 1px solid #003366; border-bottom: 1px solid #003366; width: 100%; height: 25px; background: url('images/menu_bg.jpg'); background-repeat: repeat-x; text-align: left; } .menulink { margin-left: 20px; height: 25px; } #page { width: 900px; border: 1px solid #000000; text-align: center; margin-left: auto; margin-right: auto; } #status { width: 900px; height: 25px; vertical-align: middle; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #003333; margin: 0; padding: 0; border: 0; } Any help would be very much appreciated. Thanks everyone! The page below renders as I want in Firefox but IE inserts extra spaces I don't want in the 1st list. I've worked out I can get rid of this by removing all whitespace from the html, but this makes for some hard to maintain code. Is there something I can do in css that will make IE handle the list the way I want it to? Code:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Document</title>
<style type="text/css">
#nav
{
background: #eef;
font-size: 0.8em;
}
#nav a
{
text-decoration: none;
color: black;
background: #ffe;
display: block;
}
#nav a:hover
{
color: white;
background: blue;
}
#nav ul
{
list-style: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id='nav'>
Example 1
<ul>
<li><a href="">Item 1</a>
<ul>
<li><a href=''>Item 1 1</a></li>
<li><a href=''>Item 1 2</a></li>
<li><a href=''>Item 1 3</a></li>
</ul>
</li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>
Example 2
<ul><li><a href="">Item 1</a><ul><li><a href=''>Item 1 1</a></li><li><a href=''>Item 1 2</a></li><li><a href=''>Item 1 3</a></li></ul></li><li><a href="">Item 2</a></li><li><a href="">Item 3</a></li></ul>
</div>
</body>
</html>
|
|||||||