|
CSS - How Do I Fix This Css-firefox Issue Involving Horizontal Menu?
How do I fix this CSS-Firefox Issue?
I have a horizontal CSS menu with a width of 400px. There are four elements each with a width of 100px. The height is 50px (if that matters at all). This whole menu is centered using the <center> tag right outside the <ul> tag which I use to center the menu. The following is the CSS I'm using. It's not fully complete with respect to the images. The problem is that the elements (with a width of 100px) will all line up horizontally as expected in IE, but the fourth element drops off (vertical ~20px vertical shift) in Firefox. I have tried adjusting the width of the <ul> in the CSS and it will bring all the elements on the same horizontal level if I change the width to 500px, but it doesn't center the menu anymore. Is there anyway I could center my menu without the error in Firefox. CSS: #nav {width:400px; list-style:none; overflow:hidden;} #nav ul li {padding: 10px; list-style-type:none; display:inline; /*text-indent: -9999px;*/} #nav a {display:block; float:left; text-decoration:none; outline:none; width:100px; height:35px;background-image: url(MenuBar.gif);} #home {} #home:hover {background-position:0 -100px;} #products #products #history #history #contact #contact #nav a:link {color:blue;} #nav a:hover {color:green;} a {outline:none;} HTML: <td width="80%" id="nav"><center><ul id="nav"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="product">Products</a></li> <li><a href="#" id="history">History</a></li> <li><a href="#" id="contact">Contact</a></li> </ul></center> </td> [This menu is organized by a large table, hence the 80% width which helps organize the elements of the page] PLEASE Help me. I can't seem to get it working. EDIT: Solved. Similar TutorialsHi, I have an issue with Vertical menu contained in Re-sizable DIV. This menu appears differently in IE vs Firefox (Please refer attached Image) http://img402.imageshack.us/img402/7830/resize.png URL Attached Image Following is the Code for the Style class mentioned in the image Code:
.cwc_navMenuLabel {
line-height:14px;
vertical-align:top;
white-space:nowrap;
}
.AccButton{
float: right;
align:right;
text-align: right;
position: relative;
top: -1px;
z-index: 10;
width: 16px;
margin:0 5px 0 0;
}
/*USE THIS FOR IE*/
.AccLiIE {
display: inline;
background-color: #A2C2E4;
background-image: url(../../images/acordion_backgr.png);
background-repeat: repeat-x;
border-top: 1px solid #7591AC;
height: 19px;
white-space: nowrap;
}
/*USE THIS FOR NON-IE BROWSER*/
.AccLi {
background-color: #A2C2E4;
background-image: url(../../images/acordion_backgr.png);
background-repeat: repeat-x;
border-top: 1px solid #7591AC;
white-space: nowrap;
}
Please let me know the change that i have to do in CSS to make the menu appear in IE the way it looks in Firefox. Thanks and appreciate your help Well, i'm designing a website for myself and i've run into a setback(i'm totally new to web design) with the navigation and how it appears in firefox. Heres how it displays in IE, and firefox.(well my url has been blocked so showing a picture may not be possible) I'd like it to appear in firefox the same as IE.. Heres the html code: Quote: <div id="Navigation"> <ul> <li><a href="main.htm"><b>Homepage</b></a></li> <li><a href="home.html">About Me</a></li> <li><a href="home.html">My Interests</a></li><br> <li><a href="home.html">Cool Sites</a></li> <li><a href="home.html">My Opinions</a></li> </ul> </div> Css code thats formatting the <div> and its contents. Quote: #Navigation { width: 9em; border-left: 3px #000000 solid; padding: 0 0 1px 0; magin-bottom: 2px black; font-family: Verdana; background-color: #202020; color: #4b225b; text-align:c enter; font-size: 10pt; font-weight: normal; } #Navigation ul { list-style: none; margin: 0; padding: 0; border: none; } #Navigation li { border-bottom: 1px solid #202020; margin: 0; } #Navigation li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px #202020 solid; background-color: navy; color: #ffffff; text-decoration: none; width: 100%; } #Navigation li a:hover { border-left: 10px solid black; background-color: black; color: #white; } I wonder if its possible to help me find the cause of the issue as i'd prefer that it appear the same in both IE and Firefox >.> Thank you for your help Here is the issue in firefox: It's displaying the divider 1 pixel down? It displays inline with IE. The code is: #navigation { height:37px; background: url(/img/menu_bg.jpg) repeat-x; } #navigation ul{ list-style:none; } #navigation ul li{ display: block; float: left; width:83px; /* 751 divided by number of items (9) */ text-align:center; background: url(/img/divider.jpg) right no-repeat; line-height:37px; } #navigation ul li.last{ background: none; } #navigation a:link,#navigation a:visited { color:#FFFFFF; font-weight:bold; text-decoration:none; } #navigation a:hover { color:#ff9f47; } Help appreciated. Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: Code: <!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>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
Hello all, I've just recently began adventuring into the world of CSS and am in need of some help. I've created a horizontal nav menu that works perfectly fine in FF, Opera, etc. but refuses to listen in IE. The drop-down menu is positioned over to the right in IE, while in every other browser the menu is positioned (correctly) centered. I'd post a url but I'm just working offline on my computer so I don't have one to provide :\. I appreciate any advice you guys got for me. HTML (probably only the commented nav bar section is relevant) Code: <!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> Rutgers Libertarians | Home </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css" title="BasicStyle" media="screen"> @import "test.css"; </style> </head> <body> <div id="screen"> <div id="header"> <img src="header.jpg" width="1000" height="145" alt="banner" /> </div> <!--Navbar--> <ul id="navbar"> <li><a href="test.html">Home</a> </li> <li><a href="">Meetings</a> <ul> <li><a href="#meetings">Regular Meetings</a></li> <li><a href="#events">Events</a></li> <li><a href="#photo">Photos</a></li> </ul> </li> <li><a href="">Invisible Hand</a> <ul> <li><a href="#hand">Overview</a></li> <li><a href="#articles">Articles</a></li> </ul> </li> <li><a href="">About Us</a> <ul> <li><a href="#liber">Libertarianism</a></li> <li><a href="#board">Executive Board</a></li> <li><a href="#contact">Contact Us</a></li> </ul> </li> <li><a href="">Links</a> <ul> <li><a href="#main">NJ Party</a></li> <li><a href="#mutt">National Party</a></li> </ul> </li> </ul> <!--Sidebar--> <div id="leftbar"> <h3>News</h3> <ul id="leftlinks"> <li><a href="#news1">News 1</a></li> <li><a href="#news2">News 2</a></li> <li><a href="#news3">News 3</a></li> </ul> <h3>Site Map</h3> <ul id="rightlinks"> <li><a href="test.html">Home</a></li> <li><a href="test.html">Meetings</a></li> <li><a href="test.html">Invisible Hand</a></li> <li><a href="test.html">About Us</a></li> <li><a href="test.html">Links</a></li> </ul> </div> <!--Main Content--> <div id="main"> <div id="title"> <h1>Rutgers Libertarians</h1> <p>The Rutgers Libertarians are an organization dedicated to bringing the philosophy of liberty to Rutgers University. We welcome any who believe in any form of Libertarianism or just want to know what Libertarianism is.</p> </div> <div id="news"> <div class="news"> <h2><a name="news1">Libertarian Party Takes White House</a></h2> <img src="white.jpg" width="100" height="100" alt="white" /> <p>In an unprecedented turn of events the Libertarian Party stormed the gates of the white house Tuesday, placing Ron Paul as the head of government. Paul has promised an immediate withdrawal from Iraq, the dissolution of the Federal Reserve, and the holding accountable of failing banks.</p> <div class="comments"> <a href="">comments</a> </div> </div> <div class="news"> <h2><a name="news2">Pot of Brownies Event</a></h2> <img src="brownie.jpg" width="100" height="100" alt="brownie" /> <p>The Rutgers Libertarians held their annual Pot of Brownies event on Wednesday. There was a record 10,000 students in attendance and over 12,000 brownies were consumed - pot free. The message of decriminalizing drugs really seems to be catching on.</p> <div class="comments"> <a href="">comments</a> </div> </div> <div class="news"> <h2><a name="news3">Invisible Hand Remains Invisible</a></h2> <img src="invisible.jpg" width="100" height="100" alt="invisible" /> <p>The Rutgers Libertarian publication, <i>The Invisible Hand</i> has been delayed once again. Though the club president has reported recieving articles, no one seems to know why the newspaper never seems to come out.</p> <div class="comments"> <a href="">comments</a> </div> </div> </div> </div> <!--Main end--> </div> <!--Screen end--> </body> </html> CSS Code: /* CSS Formatting */
body {
text-align: center;
background: #153464;
}
#main {
background: url(bg.gif);
border: 1px black solid;
padding: 10px;
}
img {
border: 1px solid black;
}
h1 {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;;
font-size: 22px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
color: #ACACAC;
margin-bottom: 25px;
border-bottom: 1px solid #ACACAC;
}
h2 {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
text-align: left;
color: #ACACAC;
border-bottom: dotted 1px #ACACAC;
margin-bottom: 0px;
}
h3 {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
text-align: left;
color: white;
border-bottom: solid 1px white;
margin: 10px 0 0 3px;
}
p {
font-family: "Rockwell", "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 12px;
font-weight: 400;
color: white;
}
#title {
margin: 10px;
border: black solid 1px;
background: #30538D;
padding: 10px;
}
#news {
margin: 10px;
border: black solid 1px;
background: #30538D;
padding: 10px;
}
#screen {
/* top, right, bottom, left */
width: 1000px;
margin: 20px auto 0 auto;
}
#main {
width: 810px;
margin: 0 auto 70px auto;
float: right;
}
.news {
height: 150px;
}
.news p {
text-align: justify;
}
.news img {
float: left;
margin: 13px 15px 0 0;
border: 1px solid black;
}
#links a {
color: #EF8861;
border: 0;
padding: 10px 10px 0 0;
}
#links a:visited {
color: #EF8861;
}
#links a:hover {
color: #F8C473;
}
#leftbar {
display: block;
width: 150px;
border: 1px solid black;
float: left;
text-align: left;
background: url(bg3.jpg);
}
#leftbar p {
padding-left: 10px;
}
#leftbar a, #leftbar ul {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
display: block;
width: 150px;
text-decoration: none;
color: black;
list-style: none;
text-align: center;
}
#leftbar ul {
position: relative;
left: -41px; /* ** Copy this for other problem areas ** */
}
#leftbar a:link, #leftbar a:visited {
background: white;
border: 1px solid black;
margin-bottom: 10px;
padding: 3px 0 3px 0px;
}
#leftbar a:focus, #leftbar a:hover, #leftbar a:active {
background: #30538D;
border: 1px solid black;
margin-bottom: 10px;
padding: 3px 0 3px 0;
}
.comments {
text-align: right;
}
.comments a:link, .comments a:visited {
position: relative;
top: 50px;
color: white;
padding: 3px 0 3px 0px;
text-decoration: none;
}
.comments a:focus, .comments a:hover, #leftbar a:active {
margin-bottom: 10px;
padding: 3px 0 3px 0;
text-decoration: underline;
}
/* Nav Bar */
#navbar, #navbar ul { /* Remove default list formatting; Inline replicates problem in IE */
padding: 0;
margin: 0;
list-style: none;
}
#navbar li { /* Make navbar appear horizontally */
float: left;
width: 175px;
padding: 10px 0 10px 25px;
color: white;
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
}
#navbar li ul { /* Hide second level when not hovered */
width: 175px;
position: absolute;
left: -999em;
}
#navbar li:hover ul{
left: auto;
background:url(bg3.jpg);
border: 1px solid black;
padding: 5px 0 5px 4px;
margin-top: 5px;
margin-left: -5px; /* -90 for IE */
}
#navbar a {
width: 175px;
display: block;
text-decoration: none;
color: white;
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
}
#navbar li ul li { /* Make list items smaller */
text-align: left;
}
#navbar li:hover ul li {
border: none;
padding: 4px;
}
#navbar a:hover {
text-decoration: underline;
}
#leftbar {
clear: both;
}
Thanks for your help! I'm using this for a horizontal rule, I'm after a 1 pixel blue line... Code:
hr {
border: 0;
width: 98%;
height: 1px;
color: #003366;
}
But while I get what I'm after in IE, in Firefox there is nothing, zip, no line at all. What's wrong? See the last post for the solution. Before I get to the CSS and the markup, some background info: I am rebuilding a web-based database to be all-CSS (except for the tabular data, of course). I want to make it accessible in Safari, Firefox/Mac and Firefox/Win. Anything else would be a plus but is not necessary. The markup relies heavily on PHP. The problem lies with a horizontal nav bar I have at the top of every page. I'm using a modified version of the Suckerfish Dropdown that you can find on either HTML Dog or A List Apart. In Safari, this works to perfection. In Firefox/Mac, the alignment is a little off (which I'll fix later), but other than that works pretty well. In Firefox/Win, this absolutely blows up all over the place. There are a lot of symptoms to describe, so for now I'll provide the CSS and the markup, and if more description is necessary, I'll provide it as best I can. Without further ado, here's the CSS for the menu: Code: #main_menu {
top: 0;
left: 0;
position: fixed;
width: 100%;
background: #D8DCEF;
margin: 0; padding: 1px 0;
text-align: left;
border: 1px dotted #446CB4;
border-width: 0 0 1px 1px;
}
#nav, #nav ul {
float: left;
list-style: none;
padding: 0;
margin: 0 2px;
font-weight: bold;
}
#nav a { color: #111; }
#nav li, #nav li.search {
float: left;
padding: 1px 4px;
margin: 0 2px;
border: 1px solid transparent;
background: transparent;
text-align: center;
}
#nav li.search { padding: 0 4px; border: 0; }
#nav li:hover { border-color: #3466B1; background: #fff; }
#nav li.search:hover { background: transparent; }
#nav li span { font-size: 9px; line-height: 11px; }
#nav li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
border: 1px solid #3466B1;
margin: 1px 0 0 0;
}
#nav li li {
width: 142px;
margin: 0;
padding: 0 4px;
line-height: 1.5em;
border: 0;
background: #fff;
text-align: left;
}
#nav li li a {
display: block;
width: 142px;
text-decoration: none;
padding: 0;
}
#nav li li a:hover { color: blue; }
#nav li ul ul { margin: -1.6em 0 0 150px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li li:hover, #nav li.sfhover { background: #D8DCEF; }
#nav ul.end { width: 300px; }
#nav ul.end li, #nav ul.end li a { width: 292px; }
#nav ul.long { width: 165px; height: 300px; overflow: auto; }
#nav ul.long li, #nav ul.long li a { width: 142px; }
#nav li.flyout { background: url(../images/icons/arrow.gif) center right no-repeat #fff; }
#nav li.flyout:hover { background: url(../images/icons/arrow.gif) center right no-repeat #D8DCEF; }
#nav li.separate { border-top: 1px solid #3466B1; background: #EFF1F9; font-style: italic; }
And here's an anonymized version of the markup: Code: <div id="main_menu"> <ul id="nav"> <li>Menu 1<ul> <li><a href="#">Choice 1</a></li> <li><a href="#">Choice 2</a></li> </ul> </li> <li>Menu 2<ul> <li><a href="#">Choice 1</a></li> <li class="flyout">Submenu 2a<ul class="end"> <li><a href="#">Subchoice 1</a></li> <li><a href="#">Subchoice 2</a></li> <li><a href="#">Subchoice 3</a></li> </ul> </li> <li><a href="#">Choice 2</a></li> </ul> </li> <li>Menu 3<ul> <li><a href="#">Choice 1</a></li> <li><a href="#">Choice 2</a></li> <li><a href="#">Choice 3</a></li> </ul> </li> <li>Menu 4<ul> <li><a href="#">Choice 1</a></li> <li><a href="#">Choice 2</a></li> </ul> </li> <li class="search"><form name="search" action=""><input name="name_search" type="text" onFocus="if(this.value=='Search')value=''" onBlur="if(this.value=='')value='Search';" value="Search" size="25"> <input type="submit" name="Submit" value="Go"></form></li> </ul> </div> When I comment out the main menu, the pages load just fine, so it has to be somewhere in the code for the main menu (or that means it's somewhere else entirely). Thanks in advance for taking the time to look at my code, and any help at all is extremely appreciated. Hi there, I'm wondering if someone here can help me out with a little problem I'm having. I've set up a test page here to show you what I'm trying to do. Basically, the horizontal line needs to be closer to the 'center surface winders ect.' links. Since IE and Gecko based browsers (Firefox, Mozilla ect.) read horizontal lines differently, I've set 3 different line classes in the basic CSS code. Everything works out fine in the Gecko based browsers, but IE still doesn't allow me to change the margin properties for the bottom of the line. I've tried editing pretty much every property but can't find out what is controlling this in IE. Any help would be greatly appreciated. Thanks I am experiencing a strange bug where if the content of another div goes past the right edge of the screen, my header div does not reach, even though it is at width: 100% Here is the code: index.php Code: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="main.css" type="text/css" media=screen /> <link rel="stylesheet" href="menu/menu_style.css" type="text/css" /> <title> Home - Nortrat Consulting </title> </head> <body> <div class='header'> Nortrat Consulting<br/> <div class="slogan">Building On The Northern Strategy</div> </div> <div class="sidebar"> <div class="sidehead">Sections</div> <a class="side" href="#heading1">TEST HEADING<a/><br/> <a class="side" href="#heading2">TEST HEADING<a/><br/> </div> <div class="menu"> <ul class="menu red"> <li class="current"><a href="" target="_self">Home</a></li> <li><a href="" target="_self">Northern Strategy</a></li> <li><a href="" target="_self">Building on the Northern Strategy</a></li> <li><a href="" target="_self">How NORSTRAT Can Help</a></li> <li><a href="" target="_self">About Lee Carson</a></li> <li><a href="" target="_self">Northern Strategy news blog</a></li> </ul> </div> <div class="menughost"></div> <div class="container"> <a name="heading1"><div class="heading">Test Heading</div></a> BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB BLURB <div class="imagecaption"> <img src="Picture1.jpg" alt="picture1" width="250"/><br/> Almost half our land and two thirds of our coastal water lies in the North. </div> </div> <div class='footer'> FOOTER TEXT </div> </body> </html> main.css Code: .header
{
height: 100px;
background: #CC0000;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
font-family: Trebuchet MS Bold;
color: #000000;
text-decoration: none;
word-spacing: normal;
letter-spacing: 0;
font-size: 26px;
font-weight: bold;
}
.container
{
margin-left: 155px;
margin-top: 105px;
font-family: Trebuchet MS Bold;
color: #000000;
text-decoration: none;
word-spacing: normal;
letter-spacing: 0;
font-size: 11px;
font-weight: bold;
}
a.side:link
{
text-decoration: none;
color:#777777;
}
a.side:visited
{
text-decoration: none;
color:#555555;
}
a.side:hover
{
text-decoration: none;
color: #66CCFF;
}
a.side:active
{
text-decoration: none;
color:#777777;
}
.heading
{
font-size: 14px;
color: #3399CC;
text-decoration: underline;
}
.imagecaption
{
font-size: 10px;
color: #777777;
text-align: center;
width: 250px;
}
.slogan
{
font-size: 13px;
font-style: italic;
}
.sidehead
{
color: #000000;
text-decoration: underline;
}
.sidebar
{
padding-top: 5px;
border-right: solid 1px red;
width: 150px;
text-align: right;
padding-right: 5px;
position: absolute;
left: 0px;
top: 100px;
font-family: Trebuchet MS Bold;
color: #000000;
text-decoration: none;
word-spacing: normal;
letter-spacing: 0;
font-size: 11px;
font-weight: bold;
}
.footer
{
text-align: right;
font-size: 11px;
border-top: solid 1px red;
margin-top: 25px;
height: 100px;
width: 100%;
}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */
#nav-menu
{
width:30em
}
menu_style.css Code: ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
border-right:none;
margin:0;
padding:0;
}
ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}
ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
font-weight:normal;
}
ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
text-decoration:none;
}
ul.menu .current a {
color:#fff;
font-weight:700;
}
.menu
{
width: 900px;
position: absolute;
left: 0px;
top: 33px;
z-index:1;
border-right:none;
}
.menughost
{
background:url(images/bg.png) repeat-x top left;
width: 100%;
height: 33px;
position: absolute;
left: 0px;
top: 66px;
z-index:0.5;
border-top: solid 1px black;
border-bottom: solid 1px black;
}
/*RED*/
ul.menu.red{
background-color:#B11718;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}
And a screenshot of the issue: (the red area is my header) Hi-- I'm building a horizontal nav that needs to work in (ugh) IE6. Of course it works fine in every browser but IE6. I was hoping someone could give me some help. Here is a link to a test version of the nav: (removed) I used ugly colors for testing purposes. Basically (and you'll have to see this for yourself in IE6 I suppose) the display:block code is not working properly. When you mouse over the top level tabs, the background should stay red. In IE6 if your cursor touches the text (which I've outlined in white for ease of viewing), the red turns off. It works fine if the cursor doesn't touch the text. The nav is built using an unordered list with CSS. I can't for the life of me figure out what's up. I've tried all sorts of IE6 hacks. If you're industrious here is a zip file with all the source files (CSS & HTML) (removed) Thanks for any tips! I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages. When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below. Ideas anyone? Code: Code: Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> Jake what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu i looked at these and could find one http://www.cssdrive.com/index.php/menudesigns/category/C20/ I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item? I've tried the tutorials on CSS menus but can't seem to get it to work right for my project. I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help? The code is below: Code:
<tr>
<td width="766">
<div id="navcontainer">
<ul>
<li><a href="">Home</a></li>
<li><a href=""> Project Status</a></li>
<li><a href=""> Tasks</a></li>
<li><a href="">General Information</a></li>
<li><a href="">Completed Tasks</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS Code:
body,html {
margin: 0;
}
#navcontainer ul {
list-style-type: none;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0.2em 1em;
color: #fff;
background-image: url(images/back.gif);
height: 24px;
line-height: 23px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #960033;
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
background-image: url(images/backover.gif);
}
--- |
|||||||