|
CSS - Navigation Menu Disappears In Ie7
Ok, 'guys' I've hit a snag.
I'm trying to redesign my website and am using blueprint css framework for the first time in my life. I've tested the layout in FF3.6, Google Chrome v8.0, Safari for Windows v5.03, IE8, and IE8 in compatibility mode [to emulate IE7]. It works great in ALL browsers I tested except emulated IE7. In this mode, the menu completely disappears except for a separate div that holds the left nav image. I have validated the html and my customized css file and have gotten rid of all errors found...but, still cannot get the nav menu to show up in emulated IE7 mode. So, I'm hoping Kravvitz or some other CSS god will come to my rescue. the short link to my dev page is http://drw65.servehttp.com/ this is a url redirect link that will redirect to my personal webspace from my ISP. thanks for reading. Similar TutorialsIm doing a project Located Here *** not work safe *** 96.0.176.55/login.php Please look at the css and html If you hover over with the mouse on the top navigation were you see Gallery you will notice there is a drop down menu with three separate choices or images... The problem is when you move the mouse down to the second or third image the dropdown disappears. Can someone please help? Thanks I want to make a left side navigation menu that nested menus popup beneath the parent menu when click the parent menu, submenus will be closed when clicks parent menu again How can do that using css and html? Hello, I want to create Vertical Navigation menu with pure CSS. Navigation menu will have main menus name. When user click on any of main menu, it should open list of sub-menu under same navigation(menubar). i mean like tree naviation but sub-menus should open under same menus. Navigation menu is vertical menus. Example: please go to : http://www.projectseven.com/tutorials/navigation/swapclassmenu/index.htm Under Overview:How it works section: Please click on See the finished SwapClass menu link. In that page they have left hand side vertical nav-menu with sub-menus open under same navbar. I want to create like above example. Is there any tutorials or open source for this? Thank you, tec I have a CSS, drop-down navigation menu for my company's site, at the top of every page: http://www.mediamogulsweb.com/. It works fine in Firefox and IE6. At first it seems to work in IE7. But if you mouse over the pop-out menus a few times, you'll notice that every so often the menu breaks (in IE7). My guess is that it has to do with the display property set for the embedded unordered lists in the menu. But I have "display" set to "none", so it seems like I shouldn;t be having this problem. Can anyone help? thanks... I'm working with a superfish menu. I re-colored the images and replaced them with the old images in the css. For some reason, the menu-btn_rtur is not showing up. I want it there when the menu is inactive, like you see right when you go to the home page. At some obvious points, it will need the sub indicator arrow. My client wants to launch today, so I'm really under the gun and need help-- eternally grateful to anyone who responds. Smile Site Link:staging.phantasea.net/cpi/ CSS I added: Code: #navigation-menu ul.sf-menu > li > a {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-btn_rtur.png) top right no-repeat;
display: block;
padding: 0 20px 0 0;
color: #ffffff;
text-decoration: none;
border:0 none;
cursor: pointer;
}
#navigation-menu ul.sf-menu > li > a > span {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-btn_ltur.png) top left no-repeat;
display: block;
padding: 10px 0 10px 20px;
color:#FFF;
line-height:22px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-with-arrow-btn_rtur.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator { /* give all except IE6 the correct values */
background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
background: url(../images/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
}
ORIGINAL CSS: Code: /* Begin Main Navigation Menu */
#navigation-menu {
position:absolute;
right:20px;
top:5px;
font-size:14px;
height:40px;
}
.navigation-menu {
position:relative;
z-index:22;
}
#main-menu {
background: url(../../common-images/main-menu-btm-border.png) repeat-x scroll 50% 100% transparent;
width: 100%;
position:relative;
z-index:101;
height:56px;
margin-bottom:-6px;
}
#dropdown-holder {
display: block;
position:relative;
}
#navigation-menu > ul {
padding-top: 7px;
}
#navigation-menu > * {
padding:0;
margin:0;
font-size: 1em;
}
#navigation-menu ul.sf-menu {
padding: 10px 0 0 0;
}
#navigation-menu ul.sf-menu > li {
background:none;
list-style: none;
float: left;
margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu a.default-cursor {
cursor: default;
}
#navigation-menu ul.sf-menu > li > a {
background: url(../images/menu-btn_r.png) top right no-repeat;
display: block;
padding: 0 20px 0 0;
color: #E8E8E8;
text-decoration: none;
border:0 none;
cursor: pointer;
}
#navigation-menu ul.sf-menu a {
line-height: 1.2em;
padding:8px 16px;
}
#navigation-menu ul.sf-menu a > span.sf-sub-indicator {
top: 17px !important;
}
#navigation-menu ul.sf-menu ul a > span.sf-sub-indicator {
top: 0.9em !important;
}
#navigation-menu ul.sf-menu > li > a > span {
background: url(../images/menu-btn_l.png) top left no-repeat;
display: block;
padding: 10px 0 10px 20px;
color:#FFF;
line-height:22px;
}
#navigation-menu ul.sf-menu > li {
margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
background: url(../images/menu-with-arrow-btn_r.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul:hover {
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator { /* give all except IE6 the correct values */
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li > a:hover {
background: url(../images/menu-active-btn_r.png) top right no-repeat;
color: #FFF;
text-decoration: none;
}
#navigation-menu ul.sf-menu > li > a:hover span {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a,
#navigation-menu ul.sf-menu > li.current_page_item > a {
background: url(../images/menu-active-btn_r.png) top right no-repeat;
color: #6A6A6A;
text-decoration: none;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span,
#navigation-menu ul.sf-menu > li.current_page_item > a > span {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #00717D;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover,
#navigation-menu ul.sf-menu > li.current_page_item > a > span:hover {
background: url(../images/menu-active-btn_l.png) top left no-repeat;
color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
}
/* End Main Navigation Menu */
Hello I have a site uptogether but having a problem with my top navuigation.I have my whole pag centered in the container but the navigation is to the left and i cant seem to move it.Here is the code I have used for the navigation :- #navigation { BACKGROUND: url(../_images/navbg.jpg) #0038ba repeat-x; WIDTH: 700px; HEIGHT: 35px; } #menu { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #ffffff; PADDING-TOP: 11px } #menu .item { PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-DECORATION: none } #menu .item A { COLOR: #ffffff; TEXT-DECORATION: none } #menu .item A:hover { COLOR: #ffc45d; TEXT-DECORATION: none } #categories { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; WIDTH: 240px; PADDING-TOP: 9px; TEXT-ALIGN: center } .catSelect { FONT-SIZE: 100%; WIDTH: 200px } .catSelectOrange { BACKGROUND: #ffae22 } Can anyone help me please. Cheers Stevo!! Hi, I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal. I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible. Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine. If any body could help me this would be great. This is what the index.html file looks like; <body> <div id="wrapper"> <div id="topwrapper"></div> <div id="mainwrapper"> <!-- Header Start --> <div id="header"> <div class="center"> <!-- Logo Start --> <div id="logo"> <a href="./index.html"><img src="./images/logo.png" alt="logo" /></a> </div> <!-- Logo End --> <div id="headerright"> <!-- Menu Navigation Start --> <div id="mainmenu"> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://" class="selected">Home</a> <li><a href="./about.html">About</a> <ul> <li><a href="#">Our Company</a></li> <li><a href="#">Vision and Mission</a></li> <li><a href="#">Testomonials</a></li> </ul> </li> <li><a href="#./.html">Services</a> <li><a href="./.html">Vehicles</a> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a> </li> </ul> </li> <li><a href="./.html">Testomonials</a> <ul> </ul> <li><a href="./html">Contact</a></li> </ul> </div> </div> <!-- Menu Navigation End --> </div> </div> </div> Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example. I dont understand what I am missing, the menu is suppose to be a drop down menu (and suppose to be horizontal, but i havent got that far yet) but its not dropping, its displaying everything? I would appreciate any help on making it work correctly, thanks much! -Sean nav_style.css file: Code: body {
font-family: Arial, Helvetica, sans-serif;
}
#nav {
width: 200px;
font-family: Arial, Helvetica, Sans-serif;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
border-bottom: 1px solid #ed9f9f;
}
#nav li a:link, #nav li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #b51031;
color: #ffffff;
text-decoration: none;
}
#nav li a:hover {
background-color: #711515;
color: #ffffff;
}
#nav ul ul {
margin-left; 12px;
}
#nav ul ul li {
border-bottom: 1px solid #711515;
color: #ffffff;
}
#nav ul ul a:link, #nav ul ul a:visited {
background-color: #ed9f9f;
color: #711515;
}
#nav ul ul a:hover {
background-color: #711515;
color: #ffffff;
}
and here is the head_nav.php file: Code: <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!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>?</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="css_inc/nav_style.css" /> </head> <body> <div id="nav"> <ul> <li><a href="#">Services</a> <ul> <li><a href="#">Cinematography</a></li> <li><a href="#">Photography</a></li> </ul> </li> <li><a href="#">Video</a> <ul> <li><a href="#">Demo Reel</a></li> <li><a href="#">Music Video</a></li> <li><a href="#">Commercial</a></li> </ul> </li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">About Valliant</a> <ul> <li><a href="#">Biography</a></li> <li><a href="#">Resume</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#">Links</a></li> <li><a href="#">Home</a></li> </ul> </div> </body> </html> I'm trying to get my horizontal navigation to work for a PTA page I'm creating. New to CSS and I think I've got a bit of the gist of it... but I'm really struggling with this. I've mostly "found" the coding I needed and then modified it to suit my needs. As a designer, though, I still want it to look the way I want it to and I'm not quite able to accomplish that. Basically, I would like a drop down menu added to the navigation I've created here - lwptsa . org/newsite/ This is the solution I found - lwptsa . org/newsite/dropdown . html But I am unable to get the dark blue to continue to the end of the container. ** ACK, not allowed to post images. You can find the image I'm referring to he lwptsa . org/newsite/images/navigation . jpg I'd like to fix the left margin spacing and it's coloring (A), making the lines between the buttons/blocks white (B) and having the blue flush with the white containers above and below (A). I'd also like to keep the top lines between the drop-down menu (C) but remove it from the main menu/navigation (B). Hopefully this makes sense. My style sheets a No drop-down menu, but working spacing and white separating lines (id - navigation): lwptsa . org/newsite/ Code: body
{
margin: 20px;
padding: 0;
font: 100%/1.3 arial;
font-size: medium;
color: #000;
background: #ccc;
}
h1, h2, h3, h4, h5, h6
{
margin: 0 0 1em;
line-height: 1.1;
}
h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
font: 80%/1.3 helvetica, arial, sans-serif;
}
img { border: none; }
a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }
a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }
a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }
#container
{
margin: 0 auto;
width: 1024px;
background: #fff;
}
#container table
{
font: 80%/1.3 helvetica, arial, sans-serif;
}
#header
{
font-style:italic;
font-size:small;
color: #00693e;
background: #fff;
text-align: center;
height: 115px;
padding: 20px 20px 20px 30px;
}
#navigation
{
font-size:small;
float: left;
width: 1024px;
background: #002664;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation ul ul
{
position: absolute;
background: #d1d5da;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}
#navigation li a
{
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { color: #a3d869; }
#content-container
{
float: left;
width: 1024px;
background: #fff;
}
#content
{
height: inherit;
clear: left;
float: left;
width: 590px;
padding: 0 20px 0 0;
margin: 20px 0 20px 30px;
display: inline;
border-right: 1px solid #00693e;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 340px;
padding: 20px 0;
margin: 0 20px 0 20px;
display: inline;
}
#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }
#footer
{
font-size: x-small;
clear: both;
color: #fff;
background: #002664;
text-align: center;
padding: 5px;
height: 1%;
}
#translator
{
text-align: center;
margin: auto;
position: absolute;
}
Drop-down menu, but issue with the blue not continuing to the end and weird issues with separating lines and margins (id - menu): lwptsa . org/newsite/dropdown . html Code: body
{
margin: 20px;
padding: 0;
font: 100%/1.3 arial;
font-size: medium;
color: #000;
background: #ccc;
}
h1, h2, h3, h4, h5, h6
{
margin: 0 0 1em;
line-height: 1.1;
}
h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
font: 80%/1.3 helvetica, arial, sans-serif;
}
img { border: none; }
a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }
a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }
a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }
#container
{
margin: 0 auto;
width: 1024px;
background: #fff;
}
#container table
{
font: 80%/1.3 helvetica, arial, sans-serif;
}
#header
{
font-style:italic;
font-size:small;
color: #00693e;
background: #fff;
text-align: center;
height: 115px;
padding: 20px 20px 20px 30px;
}
#menu ul
{
font-family: Arial, Verdana;
font-size:small;
margin: 0;
padding: 0;
list-style: none;}
#menu ul li
{
display: block;
position: relative;
float: left;}
#menu li ul { display: none; }
#menu li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #002664;
margin-left: 1px;
white-space: nowrap;}
#menu ul li a:hover { background: #00693e; }
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 11px;
}
#menu li:hover a { background: #00693e; }
#menu li:hover li a:hover { color: #fff;background: #008d53; }
#content-container
{
float: left;
width: 1024px;
background: #fff;
}
#content
{
height: inherit;
clear: left;
float: left;
width: 590px;
padding: 0 20px 0 0;
margin: 20px 0 20px 30px;
display: inline;
border-right: 1px solid #00693e;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 340px;
padding: 20px 0;
margin: 0 20px 0 20px;
display: inline;
}
#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }
#footer
{
font-size: x-small;
clear: both;
color: #fff;
background: #002664;
text-align: center;
padding: 5px;
height: 1%;
}
#translator
{
text-align: center;
margin: auto;
position: absolute;
}
Any and all help welcome. I'm trying to redesign the look and information of the PTA's website. a. Hey guys, Can someone help me with the following code? I've attempted two fixes, one that alters caching with JavaScript, and another fix with apache, but the server admin is restricting access to the config file. Does anyone know a work around besides these two methods (even if it's semantically incorrect)? 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*- Menu Tabs I--------------------------- */
#tabsI {
float:left;
width:100%;
/*background:#EFF4FA;*/
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
padding-bottom: 1px;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<ul>
<div id="tabsI">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
</ul>
</div>
</body>
</html>
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 I aim to create my own wordpress theme eventually, but for now I have been trying to customize free open source themes made by others. I have a test one set up at http://www.theepicnetwork.com/gfn My query here is that I am trying to make that navigation menu function as a dropdown menu, but I can't seem to do it. I managed to make it Wordpress 3.0 compatible so I can edit the menu items through the wp admin cp. But i just need to successfully give it a drop down function. Here is all my code. ------- NAV MENU CSS Code: /* Navigations*/ #nav { position:relative; padding:0; margin:0 auto; height:68px; width:1002px; background:url(images/nav_bg.png) no-repeat center top; } #nav ul { position:absolute; z-index:1; top:0; left:50px; width:900px; height:65px; padding:0; margin:0; list-style:none; } #nav li { float:left; margin:0; padding:0; list-style:none; } #nav a { display:block; padding:27px 20px; float:left; border:none; font:bold 12px Myriad Pro, Helvetica, Arial, sans-serif; color:#fff; text-transform:uppercase; } #nav a:hover{ color:#f0ff21; background:url(images/nav_over.gif) repeat-x center top; }
INTENDED DROPDOWN CSS - I copied this from one of my other sites. Code: #dropmenu, #dropmenu ul {margin-top:0px; margin-left:3px;padding:0px; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#0A7B05; font-weight:bold;} #dropmenu a {display:block; padding:6px 1em; color:#000; border-right:0px solid #000; text-decoration:none; background:transparent url(images/menu-button.png);font-weight:bold;} #dropmenu a:hover {background:transparent url(images/menu-button-hover.png); color:#fff;} #dropmenu li {float:left; position:relative;} #dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;} #dropmenu ul a {border:1px solid #000;} #dropmenu li ul {border-top:0px solid #000; width:14.1em;} #dropmenu li ul a {width:12em; height:auto; float:left; border-bottom:1px solid #000;} #dropmenu ul ul {top:auto;} #dropmenu li ul ul {left:12em; margin:0px 0 0 10px;} #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;} #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
HEADER.PHP MENU LAYOUT Code: <div id="nav"> <ul id="dropdown"><li><a href="<?php echo get_option('home'); ?>">Home</a></li> <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'nav' ) ); ?> </ul> </div>
----- any help will be appreciated I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image. I would really like your help on this been trying to do it for weeks now!! Cheers My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! Ok i have a problem with css in IE7(figures!)... Dont know if i need a hack for it or i just suck at css but when i load my page in firefox everything is perfect but when i load it in IE7 there is nothing! I figured out it is because of im using a clear and if i dont use the clear it shows up but of course it doesnt look right. html4strict Code: Original - html4strict Code <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="main"> <div id="header"> <div class="logo"> <img src="images/Logo beta2.jpg" alt="Logo" /> </div> <div class="top-section"> </div> <div class="top-border"> </div> </div> </div> </div> </body> </html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> CSS: css Code: Original - css Code @charset "utf-8"; #container { height: auto; width: auto; padding: 10px; visibility: visible; overflow: auto; } * html #container { height: 1%; } #main { position: relative; } #header { height: auto; width: auto; position: relative; } .top-border { height: 10px; width: 900px; position: relative; background-image: url(css-images/t-border.jpg); background-repeat: no-repeat; clear: left; } .logo { float: left; position: relative; } .top-section { float: left; height: 120px; width: 600px; position: relative; } @charset "utf-8"; Hi, the background of the top navigation (it's a drop down menu) disappears when I make the google custom search box float left. I need it to float left because I want it to be on the same line as the top navigation menu. The id of the div that should show the bg is #topNavContainer. Page: http://hopewwamericorps.org/index.php Style: PHP Code: #topNavContainer { background: #000000 url(../images/topNavBg.gif) repeat-x scroll; } #topNav { height: 40px; width: 760px; margin: 0px auto; text-align: left; padding: 0px 0px 0px 100px; color: #bcd5df; float:left; } #siteSearch { padding-top: 10px; width: 300px; float: left; display: block; } HTML: PHP Code: <div id="topNavContainer"> <div id="topNav"> <ul class="sf-menu"> -**REMOVED FOR POST**- </ul> </div> <div id="siteSearch"> <form action="http://hopewwamericorps.org/page.php?Page=Search_Results"> <input type="hidden" name="cx" value="018067663729731490355:_3djw8ivavo" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="Page" value="Search_Results" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> </div> </div> Thank you for your help! Please ask me to clarify if needed, thanks. I am having a problem.. The site am working on looks great in FF but in IE breaks when you click on a the link to view a larger picture and then mouse off the link. The padding on the bottom of the body (#main) disappears. i have a Javascript that switches the image out for another one. i am not sure if this is the problem. can someone please take a look i have been racking my brain on this for days. http://www.avallo.com/test/fatcatweb/phototest.shtml (Problem occurs when thumbnail is clicked and then moused off in IE 5.5 and IE 6) i have a border on the #main div so you can see what i am talking about. * Update * it isnt the javascript. here is the css and html. Code:
#main {
border:#333 dotted 1px;
float:right;
display:inline;
position:relative;
width: 610px;
padding-bottom:30px;
background:url(images/body-top.gif) no-repeat;
}
#mainbody {
margin: 30px 20px 20px 15px;
}
a.thumb {
float:left;
margin: 0 5px 5px 0;
padding: 2px;
border: #fff 2px solid;
}
a.thumb:hover {border: #895FA5 2px solid;}
<div id="mainbody">
<h1>Photo Portfolio</h1>
<p>Fat Cat Art Studio is proud to provide our clients with images of their business, area, or workers. This portfolio is a SMALL representation of recent photos.</p>
<div class="photos">
<h2>The Shore Photos</h2>
<div class="floatR" id="change1"><img src="images/photos/photo-01.jpg" alt="Enlargment" width="350" height="245" border="0" /></div>
<p>Taking a stroll on the shore leads to inspiration and some unique perspectives.</p>
<a class="thumb" href="javascript:change('change1','photo-01',350,245)"><img src="images/photos/photo-01x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
<a class="thumb" href="javascript:change('change1','photo-02',350,263)"><img src="images/photos/photo-02x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
<a class="thumb" href="javascript:change('change1','photo-03',350,264)"><img src="images/photos/photo-03x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
</div>
</div>
thanks, weston The right hand border for some of my table cells (Class "item_body") disappears, but they have almost identical coding to the cells the work properly. My CSS that pertains to the borders: Code:
td.item_body {background-color: #e7e7e7; border-left: 1px solid #c6c6c6; border-right: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6; margin: 5px 5px 5px 5px}
And the code for the table with the cell that doesn't work: Code: <table cellspacing='0' cellpadding='0' border='0' valign='middle' width='100%'> <tr height='22px'> <td class='item_title' width='100%'><p class='title'> Search Roster </p></td> </tr> <tr> <td class='item_body' width='100%'><p class='item_body'> Use this form to search for any Bronco Virtual Airlines pilot. You may use as many or as little fields as you would like. For best results, try to enter all the information you know. <form action="index.php" method='get'> <input type='hidden' name='page' value='roster' /> <input type='hidden' name='act' value='shw' /> <table cellspacing='0' cellpadding='2' border='0' width='100%'> <tr><td width=50%><p class='item_body'>Full Name:</p></td> <td><p class='item_body'><input type='input' name="name" /></p></td></tr> <tr><td><p class='item_body'>Pilot ID</p></td> <td><p class='item_body'><input type='input' name="pilotid" /></p></td></tr> <tr><td><p class='item_body'>Pilot Base:</p></td> <td><p class='item_body'><select name="base"> <option selected='selected' value='' />Any Base <option value='kboi' />KBOI <option value='kgtf' />KGTF <option value='ksea' />KSEA <option value='kslc' />KSLC </select></p></td></tr> </table><br /><p class='item_body_center'><input type='hidden' name='orderby' value='last' /><input type='submit' value="Search"></form> </p></td> </tr> </table> |
|||||||