|
CSS - Horizontal Dropdown Nav - Ie6 Issue
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! Similar TutorialsThis is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE. I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action: http://www.forma3.com/stuff/css/index-v1.2.html http://www.forma3.com/stuff/css/css/index-v1.2.css I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error. 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! 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 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. Everything works perfect expect one thing. When a mouse hovered on a link, dropdown links appear. Problem here is when I move my mouse towards the new links, they disappear before I reach them. Did I explain the problem well? No. Try the link. Menu at the top here. http://www.refinethetaste.com/html/ Code:
<style type="text/css">
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/elegant1.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#navigation { float:left; height:26px; width:776px; background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif);
}
#navigation .menu {padding:0; margin:0; list-style:none; font-size:16px;}
#navigation .menu table {border-collapse:collapse; height:0; width:0; margin:0 -4px -1px 0;}
#navigation .menu li {float:left; margin:0 5px;}
#navigation .menu li a {display:block; float:left; color:#FFFFFF; height:26px; text-decoration:none;}
#navigation .menu li a.current {font-weight:bold; border-bottom:3px solid #9d0808; cursor:text;}
#navigation .menu li:hover {position:relative; z-index:100;}
#navigation .menu li a:hover {position:relative; z-index:100; border-bottom:3px solid #aaa;}
#navigation .menu ul {position:absolute; left:-9999px; top:38px; width:140px; padding:0; margin:0; list-style:none;}
#navigation .menu ul li {margin:0;}
#navigation .menu ul li a {width:140px; height:20px; color: #000000; font-size:14px; border:0; text-align:right;}
#navigation .menu ul li a:hover { border:0;}
#navigation .menu ul ul {position:absolute; margin-left:100%; top:0; padding:0; margin:0; list-style:none;}
#navigation .menu :hover ul {right:0; left:auto;}
#navigation .menu :hover ul ul {left:-9999px; width:130px; padding-left:10px; }
#navigation .menu li ul :hover ul {left: 140px; height:20px; right:auto;}
#navigation .menu li ul li ul li a { color:#000000; font-size:12px; text-align:left; }
</style>
Hi, My sub sub-menu won't work properly in IE regardless of version, but in FF and Chrome it's good to go. Basically, the sub sub-menu is covered up by the sub-menu. The sub sub-menu also appears when rolling over the main menu option, Resources, but it's blank. Weird stuff here. Here's a link: http://loganrealtyinc.com/ You can see what I'm talking about by mousing over: Resources > Things to Do See how the sub sub-menu options, thus Things to Do covers up Norton Museum and so forth? Any ideas? As always, thanks in advance. 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! 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 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 been grappling with this for a long while now. I pretty much have it working, except for the life of me I cannot get the drop down menus to appear under the corresponding link. position: absolute makes the menus always appear off to the left. Does anyone know what the secret is to this? Code: <div id="nav_wrapper"> <div id="nav_bar"> <div id="nav_content"> <ul id="nav_ul"> <li><a href="/">Home</a></li> <li><a href="/forum/">Forum</a> <div class="nav_subcontent"> <ul> <li><a href="/forum/search.php">Search</a></li> <li><a href="/forum/memberlist.php">Members</a></li> </ul> </div> </li> <li><a href="#">A link without a menu</a></li> </ul> </div> </div> </div> Code:
/* Wrapper */
#nav_wrapper {
clear: both;
}
/* Bar */
#nav_bar {
background: url('images/nav_swish_fade.jpg');
background-repeat: repeat-x;
height: 36px;
}
/* All the buttons within the bar, the middle portion */
#nav_content {
display: inline;
margin: 0 auto;
text-align: center;
background: #fff;
height: 36px;
}
/* Entire unordered list */
#nav_ul {
list-style: none;
position: relative;
}
/* Top level unordered list */
#nav_content ul>li {
display: block;
}
/* Top level unordered list links */
#nav_content ul>li a {
display: block;
float: left;
padding: 9px;
margin-left: 2px;
margin-right: 2px;
}
/* Menus */
.nav_subcontent {
display: none;
position: absolute;
background: #222;
margin-top: 8px;
}
/* Menu link */
#nav_content .nav_subcontent a {
display: block;
padding: 9px 20px 9px 0;
margin-left: -5px;
text-align: left;
min-width: 100px;
}
/* Show menus */
#nav_content ul>li:hover .nav_subcontent {
display: block;
}
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 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 Sorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows. In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css. So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things. If i assume correctly: If i use text-align - this is meant for text only If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width So is there any normal solution to this? 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? Hi all, I have just found this forum and have an issue to solve... I'm creating my online portfolio and as many photographer I have choosen to use an horizontal scrolling. It works fine on all browsers except IE below version 8. Do you know what can be the trick ? The code is the following : There is a main images container in which two type of images are placed (landscape or portrait orientation) Code: #images {
background-color: #FFF;
overflow: auto;
position: absolute;
left: 0;
right: 0;
height : 600px;
top: 63px;
white-space: nowrap;
z-index:1;
overflow-y: hidden;
}
.imagew {
display: inline-block;
width: 800px;
height: 600px;
text-align: center;
line-height: 600px;
}
.imageh {
display: inline-block;
width: 450px;
height: 600px;
text-align: top;
line-height: 600px;
}
after that the code is : Code: <div id="images"> <div class="imagew"><img alt="" src="offshore/1.jpg"/></div> <div class="imagew"><img alt="" src="offshore/2.jpg"/></div> <div class="imagew"><img alt="" src="offshore/3.jpg"/></div> <div class="imagew"><img alt="" src="offshore/4.jpg"/></div> <div class="imagew"><img alt="" src="offshore/5.jpg"/></div> </div> I don't have an external webserver so i'll explain as best I can. I have a left and right section of my webpage each with their own background. The problem is a white gap between to the two backgrounds. I set the margin and padding on everything to 0 and it has no effect. This occurs in IE and FF. PHP Code: <html> <head> <style> body {margin: 0; padding: 0;} .left {float: left; background-image: url('background_left.jpg'); height: 100%; width: 300px; background-repeat: no-repeat; background-attachment: fixed; margin: 0; padding: 0;} .right {background-image: url('background_right.jpg'); background-repeat: repeat-x; height: 100%; margin: 0; padding: 0;} .menu {} .content {} </style> </head> <body> <div class="left"> <div class="menu"> </div> </div> <div class="right"> <div class="content"> </div> </div> </body> </html> |
|||||||