|
CSS - Dreamweaver Menu & Cssp Problem
Hi,
I have been working on a project for a friend and all was working well in IE. I tested the site in Netscape and Opera and found that the CSS positioning i was using (DIVs) caused inconsistent layout accross the browsers. I used absolute positioning instead of relative, which seemed to solve all my problems.....not so. Now, for some reason, the pop-up menu appears behind the main content layer. I am quite new to using CSS for layout so forgive me if the answer to my problem is simple. Google (my usual saviour) proved to be of little help. Any help would be welcome, thanks. Dunc Similar TutorialsHi all simple question really, Im about to rebuild a site for a client and Id like it to be the bee's knees of accessability. I'd love to make it xhtml compliant with a nice textual version for the screen readers etc. however this will require CSSpositioning as tables are not allowed for layout in strict XHTML. Do people think CSSp is OK cross browsers, are there any good detection scripts for browser support (rather than detecting browser type) how bad will NS4 make it all look? whats the general feeling, Id like to make it accessable but not at the cost of the end users, some of whom will be on old browsers... Hi everyone, I am having a very difficult problem using Dreamweaver and I would be very grateful for any advice given. I recently created a simple website using layers and when I previewed it, it looked great and it had no reported browser errors. I had several people view it and only one of my friends had trouble seeing it. He said that the layers were out of position and sometimes overlaped. We both were using Explorer 6.0. The only difference between our computers is that he has a 21" monitor while I have a 17". Would that effect the web page design? Why are the layers not positioning correctly? If anyone needs to view the website it can be seen at http://sky.prohosting.com/lovecare Please help me! Thanks, Steve I'm sure all of you have stumbled onto this at some point if you use Macromedia Dreamweaver. You're working on a CSS-driven layout and it looks perfect in multiple web browsers, but in the actual Dreamweaver design edit mode the page appears garbled and elements are out of place or you can't even see them. While it's not really a problem for you to update and work with the site, it would certainly be difficult for someone not familiar with it to change content and make updates. Does anyone know of a plug-in that would resolve this problem? Or perhaps does someone know what attributes or elements most often cause the problem in Dreamweaver? I have a rule called #MainContent. Now I want to change this rule for just one page so I duplicate it but don't add it to the global style sheet but declare the rule for this page only. However this doesnt work the div still changes based on the #MainContent rule in the global css file Need guidance on how to set up CSS. Thanks I was just wondering if anyone knew how to fix the UL and LI hierarchy problem in css with tabmenus. I wanted the border under my featured tab to disappear but it doesnt work well in IE. Please have a look; if you look at this code in Firefox it should show the first tab as being white without the black border on the bottom of it. In IE the black border is there because the UL border overwrote the LI border. Does anyone know a work around? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<style type="text/css">
/* START TAB MENU */
ul
{
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
border-bottom: 1px solid #808080;
height: 21px !important;
height: 20px;
}
li
{
float: left;
margin-right: 10px;
border: 1px solid #808080;
border-bottom: none;
}
li a
{
background-color: #f2f3f5;
color: #808080;
padding: 2px 10px 3px 10px;
display: block;
text-decoration: underline;
font: 12px arial;
}
body .featured
{
background-color: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
text-decoration: none;
font-weight: bold;
}
/* END TAB MENU */
</style>
</head>
<body>
<ul>
<li>
<a href="#" class="featured">Create User</a></li>
<li>
<a href="#">Edit User</a></li>
<li>
<a href="#">View All Users</a></li>
<li>
<a href="#">Reports</a></li>
<li>
<a href="#">Log Out</a>
</li>
</ul>
</body>
</html>
Hi I used an online css menu generator. After tweaking it to my liking, I decided to take a look in IE7, the box that contains the menu is shifted out from the left of the page. It works fine in FF and Opera. Here is the code: Code: <ul class="menu"> <li><a href="#" class="active"><span>Home</span></a></li> <li><a href="#"><span>Trainer</span></a></li> <li><a href="#"><span>Studio</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> CSS Code:
.menu{
padding:0;
width:175px;
list-style:none;
margin-top: 10;
margin-right: 10;
margin-bottom: 10;
background-color: rgb(16,33,72);
background-position: left;
}
}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{
text-align:left;
height:40px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
padding-top: 0px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 50px;
}
.menu li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}
I have tried putting it in a frame, another div. Moving it lower down the page. But it still does the same thing. I cant figure out what attribute is causing it. Thanks for looking On the menu at the top left of my site the spacing in IE is to much i want the same as firefox, but if i make the margin small firefox does not look right please help. Website link CSS file Code: /* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background: url("back.gif") repeat;
}
#wrapper {
width: 579px;
height: 558px;
background: #fff;
margin: 0 auto;
}
#header {
width: 575px;
height: 125px;
background: url("header.jpg") no-repeat;
background-position: top right;
margin: 4px 0px 0px 0px;
}
#nav {
list-style: none;
z-index: 2;
padding-left: 3px;
margin: 0px 0px 0px 0px;
}
#nav li a {
color: #fff;
font: normal 11px verdana, arial, sans-serif;
display: block;
width: 120px;
height: 24px;
background-color: #000;
padding-left: 10px;
text-decoration: none;
margin: 1px 0px 0px 0px;
}
h1 {
width: 120px;
height: 30px;
background-color: #333;
margin: 1px 1px 1px 3px;
float: left;
font: bold 16px arial, verdana, sans-serif;
padding-left: 10px;
color: #fff;
}
h2 {
width: 431px;
height: 30px;
background-color: #333;
float: left;
font: bold 16px arial, verdana, sans-serif;
padding-left: 10px;
color: #fff;
cursor: default;
margin: 1px 0px 0px 0px;
}
#sidebar {
width: 129px;
height: 380px;
background-color: #ccc;
float: left;
font: normal 10px verdana, arial, sans-serif;
padding: 0px;
margin-left: 4px;
margin-top: 1px;
}
#content {
float:right;
width: 430px;
background-color:#fff;
margin-top: 0px;
font: normal 10px verdana, arial, sans-serif;
}
p {
margin: 5px;
}
I have this site here when i click on the side menu swapz or wantedz the main content part jumps down with it. How can i stop this from doing this It runs on joomla cms Hi All, I'm desperate for help on this. I did not build this site but am currently working as the developer to get it up to par on IE6. The lower menu on the page listed below is the one that is not currently working in IE6. Works fine in IE7 & FF. **I cannot post the URL as I'm a new member but would be happy to send it to you** **Worked on this myself for quite awhile to no avail** This site has two sets of navigation, both employing rollover CSS menus. The upper menu HOVER state works, the lower menu won't even recognize the links nor does the HOVER state work. The upper menu and the lower menu use almost the same exact code verbatim except for the classes and divs are named differently. Can you help? below is the CSS for the upper menu: Code: .menu2 {
padding:0 0 0 32px;
margin:0;
list-style:none;
width:868px;
height:35px;
background:#fff url(../images/navbar.jpg);
position:relative;
border-width:0 1px;
border-bottom:1px solid #ffffff;
}
.menu2 li {
float:left;
}
.menu2 li a {
display:block;
float:left;
height:35px;
line-height:35px;
color:#FFFFFF;
text-decoration:none;
font-size:13px;
font-family:verdana, sans-serif, ariel;
font-weight:bold;
text-align:center;
padding:0 0 0 8px;
cursor:pointer;
outline:none;
}
.menu2 li a b {
float:left;
display:block;
padding:0 16px 0 8px;
}
.menu2 li.current a {
color:#fff;
background:url(../images/button3-3.gif);
}
.menu2 li.current a b {
background:url(../images/button3-3.gif) no-repeat right top;
}
.menu2 li a:hover {
color:#fff;
background:#000 url(../images/button4-3.gif);
}
.menu2 li a:hover b {
background:url(../images/button4-3.gif) no-repeat right top;
}
.menu2 li.current a:hover {
color:#fff;
background:#000 url(../images/button3-3.gif);
cursor:default;
}
.menu2 li.current a:hover b {
background:url(../images/button3-3.gif) no-repeat right top;
}
/*=== END MAIN MENU===*/
HTML for the upper menu: Code: <ul class="menu2">
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>About Us</b></a></li>
<li><a href="#"><b>Apply</b></a></li>
<li><a href="#"><b>Cash Advance</b></a></li>
<li><a href="#"><b>Payday Loan</b></a></li>
<li><a href="#"><b>FAQ</b></a></li>
<li><a href="#"><b>Contact Us</b></a></li>
<li><a href="#"><b>Member Login</b></a></li>
</ul>
now here is the css for the lower menu: Code: /*___CASH_ADVANCE_MENU_________________________________________*/
#cashadvancenav {
width:675px;
}
.cashadvancenav2 {
padding:0 0 0 10px;
margin:0;
list-style:none;
width:665px;
height:35px;
background:#fff url(../images/cashadvancebar.jpg);
position:relative;
border-width:0 1px;
border-bottom:1px solid #ffffff;
}
.cashadvancenav2 li {
float:left;
}
.cashadvancenav2 li a {
display:block;
float:left;
height:35px;
line-height:35px;
color:#FFFFFF;
text-decoration:none;
font-size:13px;
font-family:verdana, sans-serif, ariel;
font-weight:bold;
text-align:center;
padding:0 0 0 4px;
cursor:pointer;
outline:none;
}
.cashadvancenav2 li a b {
float:left;
display:block;
padding:0 16px 0 8px;
}
.cashadvancenav2 li.current a {
color:#fff;
background:url(../images/button3-3.gif);
}
.cashadvancenav2 li.current a b {
background:url(../images/button3-3.gif) no-repeat right top;
}
.cashadvancenav2 li a:hover {
color:#fff;
background:#000 url(../images/button4-3.gif);
}
.cashadvancenav2 li a:hover b {
background:url(../images/button4-3.gif) no-repeat right top;
}
.cashadvancenav2 li.current a:hover {
color:#fff;
background:#000 url(../images/button3-3.gif);
cursor:default;
}
.cashadvancenav2 li.current a:hover b {
background:url(../images/button3-3.gif) no-repeat right top;
}
...and the html for the lower menu: Code: <ul class="cashadvancenav2">
<li><a href="#"><b>What's The Limit?</b></a></li>
<li><a href="#"><b>Quick</b></a></li>
<li><a href="#"><b>Low Fees</b></a></li>
<li><a href="#"><b>No Credit Check</b></a></li>
<li><a href="#"><b>Secure</b></a></li>
<li><a href="#"><b>States</b></a></li>
</ul>
I so BEYOND appreciate any enlightenment you can give me on this... Best- Anita-ACA Web I cannot figure out what I am doing wrong. My css drop down menu works perfectly in all of the browsers I have tested, except IE7. I have gone through a couple of different css drop down menu sites like suckerfish, cssplay to see if I could figure out what they have and I don't but nothing is standing out. Here is my CSS for the menu: Code:
#menu1 { width: 100%; background: #eee; height: 36px;}
#menu1 ul { list-style: none; margin: 0; padding: 0; float: left; }
#menu1 a, #menu1 h2 { font: normal 11px Verdana; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb;
margin: 0; padding: 2px 3px; }
#menu1 h2 { color: #fff; background: url(MenuBackground.jpg); height: 30px; line-height: 30px; text-align: center; border-right: 1px dotted #c0c0c0; font-weight: bold; }
#menu1 a { display: block; color: #FFFFFF; background: #555555; text-decoration: none; }
#menu1 a:hover { color: #FFFFFF; background: #c0c0c0; }
#menu1 li {position: relative; float: left;}
#menu1 li li { width: 13em; }
#menu1 ul ul { position: absolute; z-index: 500; }
#menu1 ul ul ul { position: absolute; top: 0; left: 100%; }
div#menu1 ul ul,
div#menu1 ul li:hover ul ul,
div#menu1 ul ul li:hover ul ul
{display: none;}
div#menu1 ul li:hover ul,
div#menu1 ul ul li:hover ul,
div#menu1 ul ul ul li:hover ul
{display: block;}
and the piece I am having trouble with is the submenu's menu that should flyout to the right of the menu but it drops straight down behind the menu (Other negative listings list should flyout to the right when mouse over) Code:
<ul>
<li style="width: 120px;"><h2> Negative Items </h2>
<ul>
<li><a href="CreditCounseling.php" title="Other Negative Listings">Other Negative Listings</a>
<ul>
<li><a href="CreditCounseling.php" title="Credit Counseling">Credit Counseling</a></li>
<li><a href="PartialPayments.php" title="Partial Payments">Partial Payments</a></li>
<li><a href="student_loans.php" title="Student Loans"> Negative Student Loans</a></li>
</ul>
</li>
</ul>
</li>
</ul>
My page at gvtdev .davebezaire .com/journeys/bolivia08/living-experience .html validates for HTML and CSS and works fine in Firefox 3.6, Chrome 9.0, and IE 8.0. My problem is in IE 7 which I test by using IE 8.0 in Compatibility Mode. In Compatibility Mode, links in the main content, located within a div with id="content", are not clickable. This is because I have a conditional CSS section for [lt IE 8] within the <head> section of the page which includes the rule Code: #content {position:relative;z-index:-1;}
If I turn off that rule (e.g., with FirebugLite), the links are clickable. However, the functionality of the main navigation menu items in the little houses across the top of the page does not work properly. Specifically, with the rule turned off, only the first three items in the dropdown menus (such as that under "Our Journeys") are accessible. If you try to move down over the 4th item, the dropdown closes. The main menu is in a ul with class="mnu hmnu". I've made several attempts to set the parent elements to position:relative and giving them a z-index, all to no avail. I would very much appreciate some assistance. Thanks in advance for your help! Dave I have a problem with my menu when viewed in Firefox it's wrong it looks right in IE. any help would be great URL: www.castlecottagebandb.co.uk Code:
/** CSS Document **/
* {
margin:0;
padding:0;
}
#wrapper {
width: 700px;
height: 658px;
background: #fff;
margin: 0 auto;
}
#wrapper_big {
width: 700px;
height: 1300px;
background: #fff;
margin: 0 auto;
}
body {
background: url("back.gif") repeat;
}
#header {
width: 695px;
height: 125px;
background: url("header.jpg") no-repeat;
background-position: top right;
margin: 4px 0px 0px 0px;
}
#nav {
float:left;
list-style: none;
z-index: 2;
padding-left: 0px;
margin: 0px 0px 0px 0px;
}
#nav li a {
float:left;
clear: left;
color: #fff;
font: normal 11px verdana, arial, sans-serif;
display: block;
width: 120px;
height: 24px;
background-color: #000;
padding:6px 0px 0px 9px;
text-decoration: none;
margin: 1px 0px 0px 0px;
}
#nav a:hover {
background-color:#333;
}
h1 {
width: 120px;
height: 30px;
background-color: #000;
margin: 1px 1px 0px 5px;
float: left;
font: bold 16px arial, verdana, sans-serif;
padding-left: 10px;
color: #fff;
}
h2 {
width: 550px;
height:25px;
background-color: #000;
font: bold 16px arial, verdana, sans-serif;
padding: 5px 0px 0px 10px;
color: #fff;
margin: 1px 3px 0px 5px;
}
h3 {
font: bold 16px arial, verdana, sans-serif;
color:#000
}
#sidebar {
width: 129px;
height: 380px;
background-color: #fff;
float: left;
font: normal 10px verdana, arial, sans-serif;
padding: 0px;
margin-left: 5px;
margin-top: 1px;
}
#content {
float:right;
width: 560px;
background-color:#fff;
margin-top: 15px;
font: normal 14px sans-serif, verdana, arial;
}
p {
margin: 5px;
}
img {
border: 0px;
margin: 5px;
}
.footer {
text-align:center;
}
/* LightBox*/
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
Here is the page I am working on. Here is the tabs.css: Code:
#tabBox {
border: 1px solid #000099;
clear: both;
padding-top: 5px;
background: #000099;
}
#contents {
padding: 1.5em;
background: #FFFFFF;
min-height: 100px;
}
#info {
position: relative;
width: 100%;
height: 3em;
}
#info ul#tabs {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
}
#info ul#tabs li {
display: inline;
list-style: none;
}
#info ul#tabs a, #info ul#tabs span, #info ul#tabs a.current {
display: block;
float: left;
padding: 4px 5px;
margin: 1px 3px 0 0;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
#info ul#tabs span, #info ul#tabs a.current, #info ul#tabs a.current:hover {
border: 1px solid #000099;
border-bottom: none;
background: #000099;
padding-bottom: 5px;
margin-top: 0;
}
#info ul#tabs a {
background: #FFFFFF;
border: 1px solid #000099;
color: #000099;
}
#info ul#tabs a:hover {
margin-top: 0;
border-color: #000099;
background: #3399FF;
padding-bottom: 4px;
}
Here is the html: Code:
<div id="product">
<h1>Compact Product Page</h1>
</div>
<!--Start tabs-->
<div id="info">
<ul id="tabs">
<li><span>Overview</span></li>
<li><a href="compact_td.html">Technical Data</a></li>
<li><a href="compact_rp.html">Related Products</a></li>
<li><a href="compact_img.html">More Images</a></li>
<li><a href="compact_ms.html">Maintenance & Support</a></li>
</ul>
</div>
<!--end tabs-->
<div id="tabBox">
<div id="contents"></div>
</div>
Ignore the problems with the top navigation - I have another post already going trying to fix that problem. in FF the #tabBox and #contents are at the bottom of the page and not right beneath the #tabs. I borrowed and edited the css/html to do this and have looked over it several times and I cannot figure out why it is doing this. I have this problem that the first level sub-menus don't stretch properly can anybody tell me where in the code to correct this thanks image: h ttp://img4.imageshack.us/i/77512707.png/ (can't post links so just join the h and t) css: Code: @charset "UTF-8";
/*------------------------------------------------------------------------------------------------------/
@section Style Framework */
/* First-level expected directory tag - li */
ul.dropdown li {
padding: 5px;
}
ul.dropdown *.dir {
padding-right: 20px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* Non-first level */
ul.dropdown ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul ul *.dir {
background-image: url(images/nav-arrow-right2.png);
}
/* Components override */
ul.dropdown-vertical *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
/*------------------------------------------------------------------------------------------------------/
@section Base Drop-Down Styling */
/* ALL LEVELS (incl. first) */
ul.dropdown {
font: 16px/normal Verdana, Arial, Sans-serif;
letter-spacing:-1.5px;
}
ul.dropdown li {
background-color: #333;
color: #fff;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
}
/* Links */
ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none;}
ul.dropdown a:hover {
border-top-color: #6a6969 !important;
border-left-color: #6a6969;
background-color: #6a6969;
color: #fff;
}
ul.dropdown ul a.dir:hover { /* proposal */
background-color: #6a6969;
background-image: url(images/comnav-arrowon.png);
color: #fff;
}
ul.dropdown a:active {
background: #6a6969 url(images/nav-sub-press.png) 0 0 repeat-x !important;
color: #fff;
font-family: "Myriad Pro";
}
/* NON-FIRST LEVEL */
ul.dropdown ul {
margin-top: -1px;
border-top: 1px solid #1a1a1a;
border-left: solid 1px #4c4c4c;
width: 100%;
font: bold 11px/1em Verdana, Geneva, Tahoma, sans-serif;
}
ul.dropdown ul li {
background-color: #3a3a3a;
}
ul.dropdown ul ul {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
border-top: none;
border-left: none;
font-weight: normal;
}
ul.dropdown ul ul li {
background-color: #4c4c4c;
}
ul.dropdown ul ul ul li {
background-color: #595959;
}
/* Mixed */
ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.dropdown ul li a,
ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }
ul.dropdown ul ul li a,
ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }
ul.dropdown ul ul ul li a,
ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }
/* Custom elements */
#n-movies { width: auto; text-align: center; }
#n-movies ul { right: auto; left: 0; width: auto; text-align: left; }
#n-movies ul ul { left: auto; width: auto; }
#n-movies ul a { width: auto; }
#n-movies ul a.dir { width: auto; }
#n-movies ul ul a { width: auto; }
#n-movies ul ul a.dir { width: auto; }
#n-movies ul ul ul { left: 100%; }
I have a problem with left menu. In FF, Opera and IE8 everything is good. But in IE7 left "Main Menu" submenus are different length. But should be the same. I don't know what else to try. I would be very greatfull for any help. You can see the problem he www kodukomfort.ee Hello, I hope, somebody help me with my problem. I created website menu, but I don't know, where is a bug, because it doesn't show properly.. Preview: Site: As you can see, something is bad. Can you help me please? Very thanks! CSS: PHP Code: #navhome {float: right; width: 74px; height: 40px;} #navnews {float: right; width: 74px; height: 40px;} #navdates {float: right; width: 74px; height: 40px;} #navbio {float: right; width: 74px; height: 40px;} #navphotos{float: right; width: 74px; height: 40px;} #navdownload {float: right; width: 100px; height: 40px;} #navlinks {float: right; width: 74px; height: 40px;} #navbooking {float: right; width: 74px; height: 40px;} #navcontact {float: right;width: 74px; height: 40px;} .navLinks { background: url(../img/nav_icon.png) no-repeat center left; color: #FFFFFF; font-weight: bold; } .navLinks,.navLinksSelected { display: block; float: left; font-size: 8pt; height: 28px; padding-top: 12px; text-align: center; text-decoration: none; white-space: nowrap; width: 100%; } .navLinksSelected,a.navLinksSelected:hover { background: url("../img/nav_sel.jpg") repeat-x scroll center bottom; color: #b9d62e; font-weight: bold; text-decoration: none; width: 76px; } a.navLinks:hover { background-color: #b9d62e; color:#ffffff; text-decoration: none; } HTML: PHP Code: <div id="navcontact"><a href="#" class="navLinks">CONTACT</a></div> <div id="navbooking"><a href="booking.php" class="navLinks">BOOKING</a></div> <div id="navlinks"><a href="#" class="navLinks">LINKS</a></div> <div id="navdownload"><a href="#" class="navLinks">DOWNLOAD</a></div> <div id="navphotos"><a href="#" class="navLinks">PHOTOS</a></div> <div id="navbio"><a href="#" class="navLinks">BIO</a></div> <div id="navdates"><a href="#" class="navLinks">DATES</a></div> <div id="navnews"><a href="#" class="navLinks">NEWS</a></div> <div id="navhome"><a href="/" class="navLinksSelected">HOME</a></div> Hello, I have a css menu (no ie) that I am almost finished with. you can view it and the source code here : http://www.ryanfarrell.org/newindex.php I have offset the second tier to the left by 10px so that I and you could see the problem. As you can see I put a red border around the nav div. I have a second div that will go under the whole menu system but right now the red border doesn't go around the whole menu, only the first tier. I could just increase the margin of the bottom div so that its not hidden by the second tier of the menu but when the user increases the text size, it gets swallowed up again. I hope you understand the problem. Any ideas? See anything wrong with the code? Thanks Hi there i have a small problem and i think it lies in my nav menu, basically i want my menu to float right which it does but i'm left with this large white area on the right side of my webpage. please could someone take a look and help me my website being webbid.co.uk and the code :- Code: ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul#nav {
float: right;
position: relative;
z-index: 597;
}
ul.dropdown li {
float: right;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 598;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 599;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 100%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
Thanks in advance. Hi all, I took inspiration from http://www.cssplay.co.uk/ but it has been too long since I was playing with css. Firefox was just emerging and IE7 was something not talked about. I need to get back on the tracks and the new hacks are unfamiliar to me. The sub sub menu's border is interupted and changed to a white line, which is probably from the image below, when over the sub menu. http://www.jefspalace.be/css/index.php thanks! Jef |
|||||||