|
CSS - Ie6 (of Course) Css Menu Problem...
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 Similar TutorialsHi 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 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%; }
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. 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 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 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;
}
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> 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>
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 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. 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 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 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>
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;
}
Looks fine in Safari and IE, for some reason the last tab drops down in FireFox... I usually figure these things out but I must admit I am stuck on this one, please help www . goldenbroom-janitorial.com/test Here is the HTML Code:
<body><br>
<div id="wrapper">
<div style="text-align:left; width:800px;">
<table border="0" width="800">
<tr>
<td width="800" style="height:300" align="left"><table style="height:300; width:800px; ">
<tr>
<td width="800" height="268" style="background-image:url(images/logo_header.jpg); background-position: top center; background-repeat:no-repeat;">
</td>
</tr>
<tr>
<td width="800" height="300"><table>
</td>
<td width="800" height="300"><table>
<tr>
<td width="800" height="10"><table>
<tr>
<td width="10" height="10"><img src="images/corner1.gif" alt="" border="0" /><br /></td>
<td width="800" height="10" style="background-image:url(images/topline.gif)"></td>
<td width="10" height="10"><img src="images/corner2.gif" alt="" border="0" /><br /></td>
</tr>
</table></td>
</tr><div id="menu">
<ul>
<li><a href="index.html" class="current"><font color="#FBC431">Home</font></a></li>
<li><a href="cleaning_services_dallas.html">Services</a></li>
<li><a href="house_cleaning_employment_dallas.html">Employment</a></li>
<li><a href="cleaning_services_questions_dallas.html">FAQ's</a></li>
<li><a href="cleaning_services_free_estimates_dallas.html">Free Estimates</a></li>
<li><a href="cleaning_services_dallas_contact.html">Contact Us</a></li>
</ul>
</div>
Here is the CSS: Code:
/*--- Menu ---*/
#menu {
height:138px;
width: 800px;
background: #A8A676;
display:inline;
}
#menu ul {
margin: 0px;
padding: 0px;
text-align: center;
}
#menu ul li {
display: inline;
}
#menu img {
display: inline;
}
#menu ul li a{
float:left;
margin-right: 0px;
padding: 25px 0px 0px 0px;
width: 133px;
height: 95px;
font: 14px "tahoma","verdana","impact";
font-weight:bold;
text-align: center top;
text-decoration: none;
color: #1e1717;
background:url(../images/menu_background.gif) no-repeat;
}
#menu ul li a:visited {
color: #1e1717;
}
#menu ul li a:hover, #menu ul li .current {
color: #FBC431;
text-decoration: none;
background: url(../images/menu_hover.gif) no-repeat;
}
/*--- End of Menu ---*/
THE CONTACT TAB IS DROPPING DOWN FOR SOME REASON! Thanks in advance! Hi guys, I've written a drop-down menu, located here (there's only a drop down menu on the "Services" link in the menu. Now, the menu works fine in FireFox, however it completely screws up in IE (I'm not too worried about the menu being put on the right in IE, just moreso about all the gaps its making). To do the menu, I'm simply using an extra table for the drop down menu which has its display property set to none, and giving it the css property of "position: absolute;". Then when it is rolled over, it just changes to "display: block". How would I go about fixing this? Hey all! I got a problem with my Pure CSS Menu on my blog (blogspot). I created the menus, but when i put it in my blog, the sub-menus stay behind the posts and widgets. Can anyone help me changing the code or html config please? I want the sub menus in front of the posts and widgets! Thank you very much! My blog: slipplanet.blogspot.com Hey I'm having some trouble with the website I'm trying to make. I got a css style pulldown menu, but the pulldown part can't be seen because its on the top frame of a frameset. Is there a way to make the pulldown extend over the edge of the frame? Hi I am trying to create a horizontal menu for my interface and am running into a problem. I created the menu and it seems to work fine, but after I try to move it to where I want it, it leaves a blank spot in my content area that I cant get ridd of. Here is the link www.isostudios.com Im a little new to css so dont be to hard on me |
|||||||