|
CSS - Horizontal Nav Bar Ie Issue
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! Similar TutorialsHi 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 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 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 there, I have not done any html/CSS in a LONG time and have just got back into it. I am having some problems with a drop down, where, when the sub menu is hovered over, it will not go away again until the mouse is moved either up above the menu bar or off the browser page. I would like the sub menu to be hidden when the mouse is off the sub menu item. An example is here (oops, I can't post a URL) 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>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(images/carpet.gif);
width:100%;
margin: 0px;
}
#wrapper {
position: relative;
margin: auto;
width:840px;
top: 20px;
height: 920px;
}
#index3-03_ {
position:absolute;
left:5px;
top:45px;
width:840px;
height:263px;
background-image: url(images/thinslice.png);
background-repeat: no-repeat;
z-index: 2;
background-position: -66px -142px;
}
#navbar {
position: absolute;
top: 31px;
right: 0px;
margin: 0;
padding: 0;
width: 780px;
left: 38px;
height: 37px;
}
#navbar li {
list-style: none;
float: left;
padding-left: 20px;
font-size: 14px;
}
#navbar li a {
display: block;
text-decoration: none;
list-style-type: none;
list-style: unordered;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 5px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
text-decoration: none;
color: #363795;
text-align: center;
}
#navbar li a:hover {
color: #B00D46;
}
#navbar li ul {
display: none; }
#navbar li:hover ul, #navbar li.hover ul {
position:absolute;
display: block;
left:-42px;
top:-1px;
width:840px;
margin: 0;
background-repeat: no-repeat;
float: left;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0px;
z-index: 5;
clear: none;
background-image: url(images/fatslice.png);
background-position: -62px -281px;
height: 500px;
}
#navbar li:hover li, #navbar li.hover li {
float: left;
padding-left: 25px;
padding-bottom: 25px;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #363795;
position: relative;
left: 125px;
top: 25px;
}
#navbar li li a:hover {
color: #B00D46;
text-align: left;
position: relative;
left: 125px;
top: 25px;
}
#foobar1 {
position: absolute;
left: 62px;
top: 1px;
clear: both;
}
#foobar2 {
position: absolute;
left: 149px;
top: 1px;
clear: both;
}
#foobar3 {
position: absolute;
left: 32px;
top: 1px;
clear: both;
}
-->
</style>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="index3-03_">
<ul id="navbar"><li><a href="index.html" target="_self">HOME</a></li>
<li><a href="usage.html" target="_self">THIS IS BROKEN</a>
<ul>
<span id="foobar1"><a href="index.html" target="_self">HOME</a></span>
<span id="foobar2"><a href="usage.html" target="_self">THIS IS BROKEN</a></span>
<span id="foobar3"><a href="faq.html" target="_self">FAQ's</a></span>
<li><a href="parents.html" target="_self">PARENTS</a></li>
</ul>
</li>
<li> <a href="faq.html" target="_self">FAQ's</a></li>
</ul>
</div>
</body>
</html>
any help would be much appreciated 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. Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background. here is the vertical menu. http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html replace (dot)s with period I want to make the buttons next to each other, but with about 10px space in between them. Thanks. WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! How do I create a div with a horizontal overflow? I have a div box which is 150px high and 200px wide. I need it to fill up the height and then overflow to the right so I can scroll it horizontally. The div box contains thumbnail images. PHP Code: echo "<div class=\"tbody2\">"; echo "<div class=\"client\">Client<div class=\"clientname\">Client Name</div></div>"; echo "</div>"; Using the above code it displays Client on top of Client Name. How do I make Client name appear to the right of Client using only css? 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 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? I have a menu, click he http://progra.ro/demomenu/ This menu not appear correctly in Internet Explorer 6 due to "SPAN" element. Anyone know how to fix this problem leaving the span element intact in HTML ? All browser show the menu correctly, except IE6.Thanks! 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);
}
--- Hi, I have the following menu that is currently laid out with a table: http://www.ianarmstrong.com/menutest/ I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image. I need a way to handle the 5 different images, and have a mouseover effect as well. Could someone offer some direction on this problem? For my horizontal drop-down menu, the menu items that overlap the content disappear for some reason in IE7. Here is the link... sweetless.zxq.net I am an absolute newbie to CSS, so I'm not sure if I am missing something really simple? -S Hey guys nice forums.....am a css noobie i wanna know one thing how do i make a div stretch horizontally 100% , basically i want my website to be divided into 2 colors black and white the lower part would be black and the upper part would be white , now am not using a div container as i read through previous topics before so am using 2 divs as follows <div id="White">White area</div> <div id="Black">Black area</div> when i preview in IE i see the colors as i want but the divs do not stretch 100% as i said in the css. how do i do it ? hope i made myself clear on this I've been working on a site and have a problem with the horiztonal positioning of a div. At http://www.alphaworks.co.uk/problems/nicewag1/ I would like the position of the div with the id "page_footer" to move to the leftmost position. Can someone point out the mistake I'm making? Thanks, Geoff In the html below (see also http://www.creatief-denken.be/opl47k.html) I have in IE a horizontal scrollbar and a vertical scrollbar. In the #contentRight div I use the command "overflow: auto" in order to let the text scroll vertically. I want to get rid of the horziontal scrollbar but I don't want to use the command "overflow-x: none" and "overflow-y: auto", because then the vertically scrolling disappears completely on a MAC (OSX). I have tried already in many ways (change the width of the div's) to let the horizontal scrollbar disappear but it doesn't work. Is there an easy way to get rid of this horizontalscrollbar? This is the HTML: Code: <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<style type="text/css"><!--
.tekst { color: #4c5ea1; font: 11px Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; text-align: justify; margin-top: 0px; line-height: 16px;}
#contentRight {position:relative; width:490px; top:-10px; right:0px; z-index:100; voice-family: "\"}\""; voice-family:inherit; width:505px; margin-left: 20px;}
/* Again, "be nice to Opera 5". *//*#contentRight {width:450px;}*/
#contentRight p {width:420px; font:12px/16px arial, helvetica, saborder-left-width: 10px; margin: 0px 0px 10px 0; padding-right:0px; padding-left:0px;}
#contentRight img{ border-bottom-style: solid; border-bottom-color: #9DEFC7;border-right-style: solid; border-right-color: #9DEFC7; border-left: 15px; border-left-style: solid; border-left-color: #9DEFC7; border-top-style: solid; border-top-color: #9DEFC7; }
#contentRight div { font-size: 11px/16px arial, helvetica, sans-serif; height: 335px; overflow: auto; width: 465px; }
H1 { color: #0C0F7E; font-weight: 400; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; margin-bottom: -5px;margin-left: 0px;}
-->
</style>
</head>
<body bgcolor="white" text="black">
<table border="0" bordercolor="red" width="100%" height="100%" align="center">
<tr height="100%">
<td align="center" height="100%" valign="top">
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0">
<tr height="435">
<td colspan="3" height="435" width="510" bgcolor="#9DEFC7">
<div id="contentRight"><br>
<div class="tekst">
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<br><br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br></p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
www. cooperworkskilns.com The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it. This isn't working in IE. Lol, its created a rather interesting stairstep effect. Is there a way to make it span evenly across the page without adjusting the width of each <li>? Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line. #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { margin: 0 0 0 0; } #navbar a { float:left; display: block; text-align:center; color: #000; background-color: #FFF; width: 9em; padding: .2em .8em; text-decoration: none; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } #navbar a:hover { background-color: #003366; color: #FFF; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } |
|||||||