<ul> list styles appearing while coding in dreamweaver, but not when testing in any browser
I've been trying to create a navigational menu with the appearance of clickable buttons. I tried to style the navigation list using css; and it appears correctly within the IDE of dreamweaver, but any browser I try to test it in will merely display an unstyled list. I've done some searching but can't find anything wrong with either the html or css I've typed. Any advice?
<!DOCTYPE html PUBLIC "-//W3C//DT开发者_如何学编程D 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>Maine Windependence</title>
<link href="mainStyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="leftCol">
<div id="nav">
<ul>
<li><a href="Homepage.html">Home</a></li>
<li><a href="Contacts.html">Contacts</a></li>
<li><a href="Calendar.html">Calendar</a></li>
<li><a href="GeneralInfo.html">General Info</a></li>
<li><a href="FactSheets.html">Fact Sheets</a></li>
<li><a href="GetInvolved.html">Get Involved!</a></li>
<li><a href="News.html">News</a></li>
<li><a href="OtherResources.html">Other Resources</a></li>
</ul>
</div>
and the relevant css excerpt:
#nav {
font-size: 14pt;
line-height: 200%;
}
#nav ul {
padding: 1em;
list-style-type: none;
}
#nav a:link, #nav a:visited {
padding: 0.5em;
color: #039;
background-color: #FFF;
text-decoration: none;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-bottom: 1px solid #039;
border-right: 1px solid #039;
}
#nav a:hover {
border-top: 1px solid #039;
border-left: 1px solid #039;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
}
Thanks guys, any advice would be greatly appreciated!
================================================================ EDIT:
Finally figured it out, turns out the issue was a missing closing bracket in an earlier part of the css file. (Durrrr....) Thanks for the help anyway y'all!
James, I suspect that the CSS file is either not saved properly or in the wrong location. For your example it needs to be in the same directory as your HTML file.
Additionally, last time I used Dreamweaver (MX) it had a nasty habit of making case-insensitive links that worked fine on my (at the time) Windows box but which wouldn't work at all on my Linux server. Make sure that the case on your CSS filename matches the case in the link, especially the file extension (which Windows hides from you by default!)
Edit: As Sotiris says, your example appears to be drawing properly in JsFiddle so it's really quite likely that some combination of Dreamweaver and your filesystem is making a sticky mess. :)
加载中,请稍侯......
精彩评论