|
CSS - Drop Downs Missing In Ie6
Hello All,
I'm working on this site at the moment: http://www.whitecapgraphics.com/APP Unfortunately I seem to be missing the drop down menus in IE6. Can anyone explain why? (No, I haven't made it standards compliant yet and I am aware that the png is not transparent in IE6. Aside from that feel free to pick on me for anything else, I take criticism well.) CSS: Code:
* {margin:0; padding:0;}
body {
background-image:url(images/background.gif);
color:#450109;
}
a {
color:#450109;
text-decoration:none;
font-weight:bold;
font-variant:small-caps;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:.9em;
}
a:hover {
color:#D6970C;
text-decoration:overline underline;
}
div#main {
background-color: #FFFFFF;
margin: auto;
width: 95%;
border-width: 0px 5px 0px 5px;
border-style: solid;
border-right-color: #450109;
border-left-color: #D6970C;
border-bottom:15px solid #450109;
}
#main #logo {
background-image:url(images/logo.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:#71001E;
}
#main #leftflourish {
float:left;
}
#main #rightflourish {
float:right;
}
div#navigation {
background-color:#400000;
float: right;
margin: 0;
width: 100%;
min-height: 24px;
}
div#navigation ul {
margin-left: 193px;
padding-left: 5px;
padding-right: 5px;
}
div#navigation ul li {
background-color: #400000;
float: left;
list-style-type:none;
width: 25%;
position: relative;
z-index:99;
}
div#navigation a {
text-decoration:none;
font-variant:normal;
color: #DFCDB6;
text-align:center;
display: block;
width: 100%;
line-height: 25px;
font-family: serif;
font-size:1.1em;
font-weight:normal;
}
div#navigation a:hover {
color: #FFCC00;
}
div#navigation ul li ul {
width: 90%;
padding: 0;
margin:0;
margin-left:5%;
margin-right: 5%;
position:absolute;
display: none;
}
div#navigation ul li ul li {
width: 100%;
}
/* shows drop down on hover */
div#navigation ul li:hover ul, div#navigation ul li ul:hover {display:block;}
div#lcolumn {
width: 190px;
float: left;
margin: 0;
padding: 0;
position: relative;
top: -66px;
z-index:999;
}
div#lcolumn ul li {
list-style-type:none;
text-align:center;
width: 167px;
padding-bottom: .1em;
}
#main #body #lcolumn ul li a {
background-image: url(images/yapdropback.jpg);
display: block;
background-repeat: no-repeat;
min-height: 24px;
color:#DFCDB6;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:.9em;
line-height: 24px;
letter-spacing: -.02em;
font-variant:small-caps;
}
#main #body #lcolumn ul li a:hover {
color: #ffcc00;
}
#main #body #lcolumn #featureContent {
padding-top: 24px;
}
#main #body #lcolumn #featureContent div{
padding-right: 30px;
padding-top: 60px;
background-image: url(images/featuresback.jpg);
background-repeat: no-repeat;
}
#main #body {
background-image:url(images/chaser.jpg);
background-position:bottom right;
background-repeat:no-repeat;
position: relative;
margin-bottom:3em; /*1.25 + 1.75*/
clear:both;
}
#main #body #content {
padding-left: 200px; /*fix for IE - it's including from side of L Column*/
position: absolute;
top: 48px;
z-index:1;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
line-height:1.1em;
text-transform: uppercase;
color: #350000;
width: 50%;
}
#main #body #content div ul li {
float: right;
list-style-type:none;
padding-left: 2%;
top: .4em;
line-height:2.2em;
display:block;
font-weight:bold;
}
h2 {
position:relative;
width: 98%;
background-image:url(images/navback.jpg);
background-repeat:repeat-x;
padding-top:1%;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
text-indent: 2em;
}
#main #body #content div ul {
width: 46%;
position: absolute;
top: .4em;
right:0;
padding-right:4%;
}
h1:first-letter {
font-size: 1.7em;
}
#content p {
padding: 2em;
}
#main #footer {
text-align: center;
position:relative;
top: -1em;
}
/* Aslett Clearing Method */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
* html #main #body #content {padding-left:0px; width:78%;}
.clearfix {display:block;}
/* end backslash hack */
Similar TutorialsHi there, Any help would be appreciated. Im currently building a site http://lafine.101webtech.com Im implementing the drop down menu system from CSSPlay for some reason its all good in IE7, Firefox, Safari (PC) but IE6 is not display the top level items as a horizontal list. I know the menu works in IE6 as I tested on the site before I grabbed the code. It must be something in my implementation but I can't for the life of me work out what. Cheers, Phil Is is possible to get CSS drop-downs to work in IE6? If so what does it require? Thanks! This method is just awesome, but how on earch does someone get the font color to stay on its hover state? http://htmldog.com/articles/suckerfish/dropdowns/ This should be a sticky and lets solve this problem together. This question is always asked but never answered. I don't have any styles applied to these drop downs. I don't really know how to do what I need to do. I want to make this drop down: graiai [dot] com /screenshots/makethis.gif Look like this drop down: graiai [dot] com /screenshots/looklikethis.gif Help! Hi there, I have this css to display some drop downs, but the drop downs are not showing in IE, but they are in FF. any ideas why? Code: #navt,
#navt ul {
padding: 0;
margin: 0;
list-style: none;
z-index: 1000;
}
#navt a {
display: block;
z-index: 1000;
width: 10em;
}
#navt li {
float: left;
z-index: 1000;
width: 10em;
}
#navt li ul {
z-index: 1000;
position: absolute;
width: 10em;
left: -999em;
}
#navt li:hover ul {
z-index: 1000;
left: auto;
}
#navt li:hover ul,
#navt li.sfhover ul {
z-index: 1000;
left: auto;
}
drlinklove.com/drew/index4.html Some of the navigation items have drop-down menus. It seems that sometimes the drop-down menu disappears before the user has a chance to click one of the options. Anyone have a guess to how I can make it more stable? Hi all, The following CSS and HTML work fine in Mozilla, Netscape and Firefox. It can be viewed in action at: http://www.sirfragalot.com/wikindx2/ (choose the 'chocolate vanilla fudge sundae' from the Wikindx/preferences menu.) I have two questions: 1/ I'm aware that Konqueror does not support CSS drop-downs. It doesn't concern me as I've programmed a way around it. However, the menu items occasionally stack up vertically on the left side of the browser window: they're supposed to be horizontal. This stacking and subsequent un-stacking seems to be quite random. What's the fix? 2/ In IE, the drop-downs are rendered from the bottom right corner of the originating top menu item (they should be directly underneath). What is the fix? HTML CODE: 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" xml:lang="en" lang="en">
<!-- begin header template (+ 3 lines up!) -->
<head>
<title>WIKINDX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="chocolate.css" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<!-- begin menue template -->
<table class="menuTable" border="0" cellspacing="0" cellpadding="0" align="left">
<tr class="" align="left" valign="top">
<td class="" align="right" valign="top">
<ul id="nav">
<li><a class="menuLi" href="index.php?action=frontNoMenu">Wikindx</a>
<ul>
<li><a class="menu" href="index.php">Home</a></li>
<li><a class="menu" href="index.php?action=preferencesDisplay">Preferences</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=fileNoMenu">File</a>
<ul>
<li><a class="menu" href="index.php?action=exportRtf">Export RTF</a></li>
<li><a class="menu" href="index.php?action=exportBibtex">Export BibTeX</a></li>
<li><a class="menu" href="index.php?action=showFiles">Show Files</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=editNoMenu">Edit</a>
<ul>
<li><a class="menu" href="index.php?action=editCreator">Creator</a></li>
<li><a class="menu" href="index.php?action=editJournal">Journal</a></li>
<li><a class="menu" href="index.php?action=editPublisher">Publisher</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=resourceNoMenu">Resources</a>
<ul>
<li><a class="menu" href="index.php?action=listDisplay">List</a></li>
<li><a class="menu" href="index.php?action=searchDisplay">Search</a></li>
<li><a class="menu" href="index.php?action=selectDisplay">Select</a></li>
<li><a class="menu" href="index.php?action=resourceNew">New</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=textNoMenu">Text</a>
<ul>
<li><a class="menu" href="index.php?action=allMusings">Musings</a></li>
<li><a class="menu" href="index.php?action=randomMusing">Random Musing</a></li>
<li><a class="menu" href="index.php?action=allParaphrases">Paraphrases</a></li>
<li><a class="menu" href="index.php?action=randomParaphrase">Random Paraphrase</a></li>
<li><a class="menu" href="index.php?action=allQuotes">Quotes</a></li>
<li><a class="menu" href="index.php?action=randomQuote">Random Quote</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=adminNoMenu">Admin</a>
<ul>
<li><a class="menu" href="index.php?action=superadminLogonDisplay">Logon</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=helpNoMenu">Help</a>
<ul>
<li><a class="menu" href="index.php?action=helpDisplay">Wikindx Help</a></li>
<li><a class="menu" href="index.php?action=aboutWikindx">About Wikindx</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<br />
<!-- end menu template -->
</body>
<!-- end footer template (+ 1 line down!) -->
</html>
CSS CODE: Code: body {
background : #74664a;
font-family : sans-serif;
font-size : 0.9em;
color : #f6eedf;
}
/* SuckerFish CSS drop down style */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 7em;
}
#nav li {
float: left;
width: 7em;
background : red;
}
#nav li ul {
position: absolute;
width: 7em;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* End Suckerfish Style */
/* Standard links such as top menu links */
A:visited, A:link, A:active {
text-decoration : none;
color : #74664a;
background : #efd197;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
A:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
/* .menu = submenu links */
A.menu:visited, A.menu:link, A.menu:active {
text-decoration : none;
color : #74664a;
display : block;
border-bottom : 1px solid #f6eedf;
width : 6em;
background : #efd197;
font-size : 0.9em;
text-align : left;
}
A.menu:hover {
text-decoration : none;
background : #f6eedf;
display : block;
color : #74664a;
border-bottom : 1px solid #f6eedf;
width : 6em;
font-size : 0.9em;
text-align : left;
}
/* normal links and paging links */
A.link:visited, A.link:link, A.link:active, A.page:visited, A.page:link, A.page.active {
text-decoration : none;
color : red;
background : transparent;
border : none;
}
A.link:hover, A.page:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* resource links for resource URLs */
A.rLink:visited, A.rLink:link, A.rLink:active {
text-decoration : none;
background : transparent;
color : #f6eedf;
border : none;
}
A.rLink:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* image links */
A.imgLink:visited, A.imgLink:link, A.imgLink:active {
text-decoration : none;
background : transparent;
border : none;
}
A.imgLink:hover {
text-decoration : none;
background : transparent;
border : none;
}
/*****
* .titleTable: the table containing the title bar
*****/
.titleTable {
width : 90%;
}
/*****
* .menuTable: the table containing the drop-down menus
*****/
.menuTable {
margin : 0 0 0 5%;
}
/*****
* .menuLi: text-color in list items of the drop-down menus
*****/
.menuLi {
color : black;
}
/*****
* .mainTable: the table containing the main content of WIKINDX
*****/
.mainTable {
border : none;
width : 90%;
padding : 0.2em;
clear : both;
}
/*****
* redefine HTML headings - see /core/html/MISC.php
*****/
h1, h2, h3, h4 {
color : #f6eedf;
margin : 0 0 1em 0;
}
/*****
* .footerFooter: footer information at end of script - part of a table
*****/
.footerTable {
font-size : 0.6em;
color : #f6eedf;
width : 90%;
}
/*****
* .error: <p>error messages</p>
*****/
.error {
background : red;
color : black;
}
/*****
* .success: <p>success messages</p>
*****/
.success {
background : #33ff00;
color : black;
}
/*****
* .small: small text
*****/
.small, .hint {
font-size : 0.8em;
}
/*****
* .hint: text hints given to provide further information usually on form input. Often used in conjunction
* with .small and usually the class of <span>....</span>
*****/
.hint {
color : #f6eedf;
}
/*****
* alternate background colours and font sizes for <td>resources</td> in a bibliographic list
*****/
.alternate1 {
/* background : #efd197; */
/* background : #f8efdf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
.alternate2 {
/* background : #ede5d8; */
/* background : #f6eedf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
/*****
* .highlight: highlight <span>search terms</span> in text
*****/
.highlight {
color : #583b04;
background : yellow;
}
/*****
* .required: highlighting for <span>required</span> form input elements (asterisk).
*****/
.required {
color : red;
}
Hello, I want to make a shadow effect for my content panel. To do this I made 4 div inside a wrapper. The main content, the shadow top right, the shadow right and the shadow footer. In the code below I just used simple colors. The problem is that the div which should be on the right side is missing. What can be wrong? Here is my code: 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">
<!--
.main {
width: 400px;
}
.main .content {
background-color: #CCCCCC;
width:390px;
float:left;
}
.main .topcorner {
background-color: #006666;
margin: 0px;
padding: 0px;
float: left;
height: 10px;
width: 10px;
}
.main .right {
background-color: #FF9933;
margin: 0px;
padding: 0px;
float: left;
width: 10px;
}
.main .bottom {
background-color: #99FFCC;
clear: both;
height: 10px;
width: 400px;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="content">Main content<br>with shadow border</div>
<div class="topcorner"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
hey all, i'm kinda stumped on this one. Take a look at that page in FF and it's all good, but in IE, all the content on the left side of the content box is missing. Don't know what's causing it. here're the styles. [edit]it seems the form doesn't show up on the contact page in IE either.[/edit] Any help'd be appreciated. I'm having a big problem with IE5/Win... my navigation menu and footer divs (which also contains a few links) are both MIA in IE5! I'd say once every four or five page refreshes will load the page as it should be loaded. Checking the source reveals the correct code regardless of whether my navigation shows up or not. Has anyone ever heard of this problem? I don't want to give a URL or source code, but I will say that the setup of the page is pretty standard: <div id="header"> ... </div> <div id="container"> <div id="navigation"> ... </div> <div id="content"><div id="spacer"> ... </div></div> <div id="footer"> ... </div> </div> I have tried everything I could find to try and it still underlines the links .. I don't want it to in any browser... Here's the CSS: Code: <style type="text/css">
<?php { ?>
.toggler { background-image:url('modules/mod_news/img/<?php echo $backgr ?>'); background-size:24px; background-repeat:repeat-x; text-decoration:none; cursor:pointer; color:<?php echo $backtext?>; font-weight:bold; margin: 0; padding:3px; font-size:<?php echo $fontsize?>px; font-family:Arial, sans-serif;}
<?php } ?>
.toggler:hover { background-image:url('modules/mod_news/img/silvergradient.gif'); font-family:Tahoma; font-size:16px; font-color:black;} .element{ padding:0 5px; }
.image { margin:10px 20px; } .tool-tip { float: left; background: #ffffcc; border: 1px solid #D4D5AA; padding: 5px; max-width: 200px;}
.tool-title { padding: 0; margin: 0; font-size: 100%; font-weight: bold; margin-top: -15px; padding-top: 15px; padding-bottom: 5px; background: url(modules/mod_news/img/arrow.png) no-repeat;}
.tool-text { font-size: 100%; margin: 0;}
</style>
I have put the text-decoration: none; in every place I can think of and it just doesn't work. If I put blink that works ... what am I missing here? Thanks!! For some reason on my site when I add a customer to my business directory using wordpress my sidbar moves under everything. I think im missing a div tag or something like that but can figure it out. Can anyone help me? I know this should probably be turend into pure css but for now I'm stuck with tables i have the following table structure Code: <table class="subitemtable"> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItemOn"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> </table> using the following css styles Code:
.subItemTable{
width:100%;
border-collapse: collapse;
margin:0px;
padding:0px;
}
.subItem{
margin:0px;
border-bottom: 1px solid #0E59AE;
border-right: 1px solid #0E59AE;
background-color:#e8e8e8;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItem a{
font-size: 9.5pt;
color: #666666;
}
.subItem a:link,.subItem a:visited{
text-decoration:none;
}
.subItem a:hover{
text-decoration:underline;
}
.subItemOn{
margin:0px;
border-right: 1px solid #fff;
border-bottom: 1px solid #0E59AE;
background-color:#ffffff;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItemOn a{
font-size: 9.5pt;
color: #666666;
}
.subItemOn a:link,.subItemOn a:visited{
text-decoration:none;
}
.subItemOn a:hover{
text-decoration:underline;
}
my problem is after the first cell the bottom right most pixel of the border is just missing. This happens in firefox and IE ..The attached picture should show what I'm talking about. Thanks for your help When I view the segment below, I can't see the background image in Fx (Win32 and IceWeasel), however when I view it when editing the CSS in Chris Pederick's Web Developer Toolbar, it's there. I know it's probably something really stupid that I've overlooked, but if someone could point me in the right direction, I'd be grateful Code: .tuesday {
background-image: url('images/tu.jpg');
}
Code: <div class=tuesday> blah blah </div> I got the following, which is perfectly displayed in IE: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#container { overflow: hide; }
#container .content { float: left; margin: 0px 0px -2000px 0px; padding: 0px 0px 2000px 0px; }
</style>
</head>
<body>
<div style="width:585px;overflow:hidden;" id="container">
<div style="width:585px;height:9px;background-image: url(images/product/mid_top2.gif);background-repeat:no-repeat;padding:0px;float:left"></div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;clear:both"></div> <!-- div missing in FF --->
<div class="content" style="width:583px;background-image: url(images/product/mid_back2.gif);background-repeat:repeat-x;">
content goes here..
</div>
<div class="content" style="width:1px;background-image: url(images/product/mid_back_edge2.gif);background-repeat:repeat-y;float:left"></div>
<div style="width:585px;height:7px;background-image: url(images/product/mid_bottom2.gif);background-repeat:no-repeat;clear:both;float:left"></div>
</div>
</body>
</html>
But the div at the left-side (see comment) is just not shown in Firefox. Can anyone explain why? When printing pages from this site http://www.sorensteensen.dk/kvl/ one or two lines disappear when the pages break. I have no idea why. Anyone knows about it? Soren Steensen Hi everyone! I am having a problem with some missing colours and images in firefox. I have validated my XHTML 1.0 and CSS as OK. It looks correct in IE 6.0 but not in FF, i am sure someone will know the answer straight away! address is http://www.wellandpower.net charlie I am having a css issue with IE 6 showing a gap in mambo template however this does not appear in Firefox and the site looks perfect viewing in Firefox.. Over at http://www.stlaware.com and look at the weather box on the left side of the site if your using IE you will see a white gap I would say maybe 200ish pixel width on the right side of the weather box which I don't want any spaces or padding around the box but padding: 0px or margin: 0px doesn't seem to fix it. If you have both browser compare it in IE and Firefox and you'll see what I mean .. also on the right of the site is a random image and it also have the gap on each side of the image which is not seen in Firefox either Any way to correct this gap and make it disappear in IE? I am sorta a newbie in css but I am fast learner Here the part of index.php html table where the weather resides in .. Quote: <tr> <td width="112" height="34"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_43.png" width="118" height="34" hspace="0" vspace="0" border="0"></td> <td width="100%" background="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_27.png"> </td> <td width="10" align="right"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_30.png" width="7" height="34"></td> </tr> <tr align="left"> <td height="15" colspan="3" class="mainWindow"><?php mosLoadModules ( 'left' ); ?></td> </tr> and the right side table where random image reside in Quote: <tr> <td width="112" height="34"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_43.png" width="118" height="34" hspace="0" vspace="0" border="0"></td> <td width="100%" background="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_27.png"></td> <td width="10" align="right"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_30.png" width="7" height="34"></td> </tr> <tr align="left" valign="top"> <td height="15" colspan="3" class="mainWindow"><?php mosLoadModules ( 'right' ); ?></td> </tr> And partial of my css sheet Quote: /* Body */ BODY { margin: 0px 0px 0px 0px; background-color : #FFFFFF ; color : #465675; scrollbar-3dlight-color: #FFFFFF; scrollbar-base-color: #CCE1E3; scrollbar-darkshadow-color: #356C82; scrollbar-face-color: #CCE1E3; scrollbar-highlight-color: #CCE1E3; scrollbar-shadow-color: #CCE1E3; scrollbar-track-color: #CACEDB; scrollbar-arrow-color: #CCE1E3; padding: 0px; text-align: center; } .headertable { border-bottom: 1px solid #003366; } td.mainWindow { border-bottom: 1px solid #666666; border-right: 1px solid #666666; border-left: 1px solid #666666; } } td,tr,p,div { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #333333; } Any suggestion tips help assistance with this will be greatly apprecated .. the 'left' loadmodule where the weather is loaded into and the 'right' loadmodule is where the random image is loaded into Thank you Bill pls refer to: http://www.myshops.com.sg/atomio/ http://www.myshops.com.sg/atomio/screen.css Spent all night trying to solve two problems. 1. When mouse over the second image, the weird spacing disappeared. It doesn't happen for the first or third image, although I just duplicate the DIV code. 2. Height:100% for the side color boxes doesn't seen to be working after a certain length? Thanks. Guys, In IE, when I hover over a folder menu, the text in its sub-menu is missing. The entire navbar works fine in both Firefox and Chrome. Any suggestions? HTML PART: Quote: <!-- Start of Navbar header --> <div id="header"> <div id="lgo"><a href="index.html"><strong>RIVER rafting</strong></a></div> <ul class="menu"> <li><a href="index.htm" id="m1" class="act">home</a></li> <li><a href="locations.htm" id="m2">Locations</a> <ul id="me2"> <li><a href="locations.htm">Hiranandani</a></li> </ul> </li> <li><a href="corporateevents.htm" id="m3">Corporate Events</a> <ul id="me3"> <li><a href="corporateevents.htm#activities">Activities</a></li> <li><a href="corporate-events/locations.htm">Outbound Locations</a></li> <li><a href="corporate-events/goals.htm">Goals</a></li> </ul></li> <!-- <li><a href="index-3.html" id="m4">news</a></li> --> <li><a href="equipmentsales.htm" id="m5">Equipment Sales</a> <ul id="me5"> <li><a href="equipment-sales/markers.htm">Paintball</a></li> <li><a href="equipment-sales/atvs.htm">ATVs</a></li> <li><a href="equipment-sales/zorbing.htm">Zorbing</a></li> </ul> </li> <li><a href="aboutus.htm" id="m6">About Us</a> <ul id="me6"> <li><a href="about-us/contactus.htm">Contact Us</a></li> <li><a href="aboutus.htm">About Headrush</a></li> <li><a href="about-us/media.htm">Media</a></li> <li><a href="about-us/corporateclients.htm">Corporate Clients</a></li> </ul></li> </ul> </div> <!-- End of Navbar --> The CSS IS: Code:
ul.menu {
position:absolute;
top:135px;
left:0;
width:327px;
height:300px;
}
ul.menu li:hover > ul {
visibility: visible;
}
ul.menu ul {
visibility: hidden;
position: absolute;
width: 80%;
height:80%;
top: 1px;
}
ul.menu ul li {
float: none;
background-position: 0px 46px;
font-size:0.4em;
line-height:31px;
padding:0 0 0 15px;
}
ul.menu ul li a:hover {
text-decoration:underline;
}
ul.menu li {
width:100%;
overflow:hidden;
height:50px;
}
ul.menu li a {
display:block;
font-size:4.0em;
line-height:57px;
text-transform:uppercase;
text-decoration:none;
letter-spacing:0px;
background:url(images/menu_bg.png) no-repeat top left;
color:#000;
padding:0 0 0 25px;
height:53px;
margin:-3px 0 0 0;
}
a#m1 {
width:327px;
background-position: 0 -103px;
}
ul#me1 {
top: 1px;
left: 40%;
}
a#m2 {
width:327px;
background-position: 0 -86px;
}
ul#me2 {
top: 45px;
left: 55%;
width:150px;
}
a#m3 {
width:327px;
background-position: 0 -6px;
}
ul#me3 {
left: 85%;
top: 13px;
width:180px;
}
a#m4 {
width:327px;
background-position: 0 -46px;
}
a#m5 {
width:327px;
background-position: 0 -6px;
}
ul#me5 {
left: 80%;
top: 50px;
width:130px;
}
a#m6 {
width:327px;
background-position: 0 -163px;
}
ul#me6 {
left: 55%;
top: 45px;
width:180px;
}
a:hover#m1, a.act#m1 {
width:327px;
background-position: -327px -103px;
}
a:hover#m2, a.act#m2 {
width:327px;
background-position: -327px -86px;
}
a:hover#m3, a.act#m3 {
width:327px;
background-position: -327px -6px;
}
a:hover#m4, a.act#m4 {
width:327px;
background-position: -327px -46px;
}
a:hover#m5, a.act#m5{
width:327px;
background-position: -327px -6px;
}
a:hover#m6, a.act#m6{
width:327px;
background-position: -327px -163px;
}
Thanks |
|||||||