|
CSS - Slight Problems With A Layered Menu
I am trying to set up four menus on the same page. Please view draft at www.tallnorwegian.com/meyer.htm
I am struggling with the menu in the top left corner. The positioning of the first and second level layer. The left menu is meant to mirror the functionality of the right hand side menu. I've torn most of my hair out.... Can anyone help me - and have a look? Much appreciated, Sigi. Similar TutorialsHi, http://img136.imageshack.us/img136/2268/demonfmconceptqq9.jpg This is the concept design for a site I am working on. I need some assistance in getting the background right as I've never used done anything more complex than a simple single background image or colour before. The grey bar at the top needs to stretch all the way across the screen, the light grey background for all the content needs to stretch all the way down the screen, even if there is no content there. While I can both get them to do this, when I then try and overlay the logo and navigation background over the grey strip going along the top, in Firefox it's 1px too far to the left, and in IE it's 1px too far to the right. Everything I try seems to fail, so anybody who can give me some assistance or point me in the direction of a good tutorial, I'd greatly appreciate it. Cheers I am trying to use divs to create multiple backgrounds for my site. One on top of the other. Specifically, I want 3, but I will settle for 2. The problem is that when I try to create container divs and add backgrounds, nothing happens. I think this is because there is no content so the div remains collapsed. However, if I add a width or height, it does not stretch out for all resolutions. If I use 100% for the width, it does nothing. I really need some help! Thanks! Code: body {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
background-color:#DADADA;
background-image: url(images/metal9.jpg);
background-repeat: repeat;
}
img {
margin:0px;
padding:0px;
border:0px;
display:block;
}
a {
color:#3366CC;
}
a:link {
color:#3366CC;
}
a:visited {
color:#Browser Default;
}
a:hover {
color:#Browser Default;
}
.bigbox {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
margin:0px;
padding:0px;
background-image: url(images/fade.png);
background-repeat: repeat-x;
}
.outerbox {
position:absolute;
top:0px;
left:0px;
width:100%;
background-image: url(images/topbanner.gif);
background-repeat: repeat-x;
}
.mainbox {
position: absolute;
top:70px;
left:390px;
width:650px;
border:1px solid #000000;
background-color:#FFFFFF;
padding-left:50px;
padding-right:50px;
padding-top:25px;
padding-bottom:5px;
}
.headtext {
overflow:hidden;
font-size: 24px;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
text-align: center;
}
I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on. if there is a better way of doing this all please let me know this is menu.php PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>BHI and Roth's Website menu</title> <?php <link rel="stylesheet" type="text/css" href="menu_css.css" /> </head> <BODY STYLE="background-color:transparent"> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="home.php" target="showframe">Home</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <li class="pureCssMenui"><a class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenui"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li> </ul> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="logout.php" target="_top">Logout</a></li> </ul> </body> </html> <?php } } } else //if the cookie does not exist, they are taken to the login screen { header("Location: login.php"); } ?> </html> And this is menu_css.css Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#990033;
background-repeat:repeat;
border-color:#FFEE00;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:210px;/*width:138.6px;*/
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#990033;
border-width:0px;
border-color:#990033;
border-style:solid;
text-align:center;
text-decoration:none;
padding:4px;
_padding-left:4;
font:normal 11.5px Verdana;
color: #FFEE00;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none;
padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#BB99BB;
background-image:none;
}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FFEE00;
border-color:#0099cc;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FFEE00;
border-color:#990033;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
Hi everyone, I'm working on a layout that looks fine in IE7 and in FF but when viewed in with IE6 the header graphics are slightly skewed. I'm not seeing any reason for the problem whatsoever so I'm thinking there needs to be some sort of hack to trick IE6 into displaying this correctly? I'd appreciate any thoughts on why this is happening. Here is the URL... http://www.karenwilliamson.com/joom/ Thanks In Firefox my page is dropping the center orange header for some reason. And in IE the text under the orange headers is moving over for an image that is floated to it's left, even though the text div's left margin is set high enough to clear it. Any help would be apprciated. Page is he Code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
height:100%;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
color:#333333;
}
#wrapper {
width:750px;
margin:auto;
position:relative;
}
#top {
width:750px;
height:60px;
padding:5px 1px 0 3px;
position:inherit;
}
#toplink {
height:60px;
width:365px;
margin-left:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}
#nav {
list-style:none;
width:416px;
float:right;
width:420px; !important
}
#nav li {
width:100px;
height:20px;
margin-left:4px;
float:left;
position:relative;
}
a.inactive, a.inactive:link, a.inactive:visited, a.inactive:active {
display:block;
height:15px;
background-image:url(images/inactive.gif);
background-repeat:no-repeat;
color:#999999;
text-align:center;
text-decoration:none;
padding-top:5px;
font-weight:bold;
}
a.inactive:hover {
color:#888888;
}
a.active, a.active:link, a.active:visited, a.active:active {
display:block;
position:absolute;
width:100px;
height:16px;
top:0;
left:0;
z-index:1;
background-image:url(images/active.gif);
background-repeat:no-repeat;
color:#334C99;
text-align:center;
text-decoration:none;
padding-top:5px;
font-weight:bold;
}
#subnav {
list-style:none;
/*list-style-image:url(images/subnav_arrow_blue.gif);*/
background-image:url(images/subnav_background1.gif);
height:22px;
clear:both;
border:1px solid #CECECE;
/*border-bottom:0;*/
color:#999999;
}
#subnav li {
width:124px;
height:18px;
text-align:center;
float:left; /*Change order of subnavs high to low or low to high*/
}
#subnav li a, #subnav li a:link, #subnav li a:visited, #subnav li a:active {
display:block;
height:14px;
padding-top:4px;
text-decoration:none;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color:#999999;
}
#subnav li a:hover {
color:#888888; /*CHANGE ME TO BLUE, ORANGE, OR SOMETHING*/
}
#subnav li a:active {
color:#334C99;
}
#midbanner {
height:170px;
background-image:url(images/banner.gif);
margin-bottom:3px;
}
#bottomcontent {
text-align:left;
color:#000000;
}
#leftboxes {
width:190px;
height:auto;
padding:5px 8px 0 1px;
float:left;
border-right:1px dashed #cccccc;
}
.leftbox, .leftboxBottom {
height:80px;
width:98%;
border:1px solid #8D8D8D;
background-image:url(images/leftboxstripSM.gif);
background-repeat:repeat-x;
background-position:top;
color:#334C99;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
padding-top:2px;
}
.leftbox{
margin-bottom:10px;
}
#rightboxes {
width:535px;
padding:5px 0 0 0;
margin-left:210px;
}
.rightbox1, .rightbox2, .rightbox3 {
position:relative;
height:176px;
width:165px;
background-image:url(images/teststrip8z.gif);
background-repeat:no-repeat;
background-position:top;
color:#ffffff;
font-weight:bold;
}
.rightbox1 {
float:left;
}
.rightbox2 {
margin-left:183px;
}
.rightbox3 {
float:right;
}
.packagetitle {
margin: 5px 0 0 28px;
font-size:12px;
}
.packagecontent {
margin: 12px 0 0 50px;
font-size:9px;
font-weight:normal;
color:#666666;
line-height:15px;
}
.packageimg1, .packageimg2, .packageimg3 {
width:45px;
height:49px;
margin:25px 0 0 0;
background-repeat:no-repeat;
float:left;
}
.packageimg1 {
background-image:url(images/pkg_personal1.gif);
}
.packageimg2 {
background-image:url(images/pkg_smallbiz1.gif)
}
.packageimg3 {
background-image:url(images/pkg_corporate1.gif);
}
#bottombox {
height:80px;
width:535px;
margin-top:10px;
border:1px solid orange;
}
/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:750px;
}
/* end hide */
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="toplink" align="right"><img src="images/arrows2_1.gif">Client Login</div>
</div>
<ul id="nav">
<li><a class="active" href="#">Home</a></li>
<li><a class="inactive" href="#">Hosting</a></li>
<li><a class="inactive" href="#">Tools</a></li>
<li><a class="inactive" href="#">About</a></li>
</ul>
<ul id="subnav">
<li><a href="#">Subnav 1</a></li>
<li><a href="#">Subnav 2</a></li>
<li><a href="#">Subnav 3</a></li>
<li><a href="#">Subnav 4</a></li>
<li><a href="#"><img src="images/subnav_arrow_orange1_2.gif" border="0">Subnav 5</a></li>
<li><a href="#">Subnav 6</a></li>
</ul>
<div id="midbanner"></div>
<div id="bottomcontent">
<div id="leftboxes">
<div class="leftbox"><img src="images/bluearrows2.gif">Service Gurantee</div>
<div class="leftbox"><img src="images/bluearrows2.gif">Earn $ For Referrals</div>
<div class="leftboxBottom"><img src="images/bluearrows2.gif">Domain Lookup</div>
</div>
<div id="rightboxes">
<div class="rightbox1">
<p class="packagetitle">PERSONAL</p>
<div class="packageimg1"> </div>
<div class="packagecontent">
<p>300MB Disk Space</p>
<p>3GB Transfer</p>
<p>Unlimited Subdomains</p>
<p>Unlimited Emails</p>
<p>Unlimited Databases</p>
<p>Free Setup</p>
<p>24/7 Support</p>
</div>
</div>
<div class="rightbox3">
<p class="packagetitle">CORPORATE</p>
<div class="packageimg3"> </div>
<div class="packagecontent">
<p>1000MB Disk Space</p>
<p>8GB Transfer</p>
<p>Unlimited Subdomains</p>
<p>Unlimited Emails</p>
<p>Unlimited Databases</p>
<p>Free Setup</p>
<p>24/7 Support</p>
</div>
</div>
<div class="rightbox2">
<p class="packagetitle">SMALL BUSINESS</p>
<div class="packageimg2"> </div>
<div class="packagecontent">
<p>500MB Disk Space</p>
<p>5GB Transfer</p>
<p>Unlimited Subdomains</p>
<p>Unlimited Emails</p>
<p>Unlimited Databases</p>
<p>Free Setup</p>
<p>24/7 Support</p>
</div>
</div>
<div id="bottombox">Ad #4</div>
</div>
</div>
</div><!--end Wrapper-->
</body>
</html>
Hey, I have just about finished this website here except for the footer issue in Internet Explorer. My main issue is that I'm limited to a Macbook Pro right now, I have VM Fusion but haven't been able to use my external harddrive with my virtual machine on it and have no other way to test in IE. Browsershots has it's limitations, haha. Anyway, it displays fine in WebKit and Firefox, but internet explorer is being real finnicky. If I have to I can resort to calling in a modified footer strictly for IE, but then I have to go design a footer for it down at the library so i can use on of their computers to test it. Thought I'd try posting a question here and see if anyone could spot something in my CSS that may not be working with IE. Thanks in advance, really appreciated. The link is http://www.laserbodysculpting.ca/beta/ The screenshots in IE are MSIE7.0 and IE6.0 . I'm using the following DIV structure. (http://pastebin.com/meef27b4) Code: <div id="footer"> <div id="fcont"> <div id="f1" class="fwrap"><h2>Newsletter</h2> ... </div> <div id="f2" class="fwrap"><h2>Map</h2> ... </div> <div id="f3" class="fwrap"><h2>Contact</h2> ... </div> </div> <div id="minifooter"> ... </div> </body> </html> Here is the CSS Code: #footer {
width: 100%;
height: 270px;
position: static;
clear:both;
text-align: center;
border-top:solid 1px #414243;
background:#9a9a9a;
letter-spacing: 0.2em;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
#footer h2{
font-size: 15px;
color: #414243;
padding:0 0 .5em .1em;
}
.info {
color:#fff;
}
.map {
border: 1px #414242 solid;
margin: 2px;
}
#footer h3{
font-size:10px;
padding:0 0 .5em 0;
letter-spacing:5px;
color:#414243;
font-weight:bold;
}
#fcont {
width:100%;
margin-left:200px;
overflow:auto;
}
#minifooter {
clear:both;
width: 100%;
height: 15px;
padding-bottom:10px;
border-top:solid 1px #000;
background:#414243;
color: #fff;
letter-spacing: 0.2em;
}
#minifooter a:hover {
color:#fff;
}
#f1 {
display: inline;
float:left;
text-align: left;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
width: 300px;
}
#f2 {
display: inline;
text-align: left;
float:left;
position: relative;
margin-top: 10px;
width: 300px;
}
#f3 {
display: inline;
text-align: left;
float:left;
position: relative;
width: 300px;
margin-top: 10px;
}
I have a vertical CSS menu using lists on my website. Everything looks ok when the page is first loaded but when I click on one of the menu items the left edge of the menu shifts to the left making the entire menu 10px wider. The div containung the menu has a left value of 10px but this seems to be ignored or overwritten when I click on a menu item. The right edge of the menu does not change. If I refresh the page it appears correctly again. Any ideas? Im relatively new to CSS and im trying to make a navigation menu. I've been able to gather some code from other tutorials and finally got one that works fine under firefox 3.5, Opera 9 and IE8. However i've been told that its not working properly under IE7. Can anyone tell me if theres a fix for this? i've searched around other tutorials but couldnt make sense of them (which is probably why the CSS is a bit messy). Anyhelp would be greatly appreciated. link: users.tpg.com.au/tetsuo/css_help/index.html CSS: users.tpg.com.au/tetsuo/css_help/awis.css I've never used CSS to make a menu before so i used an online maker @ purecssmenu.com, unfortunately they don't appear to have a decent support forum or any means of emailing them. I'm having a small problem putting the menu in to my site. The banner image for the site is 800px. When i put the menu in its not wide enough and i can't see a way of making it fit. Also i'm using a table to position it. When its positioned to the left there seems to be some padding or somthing making it not align up with the banner image. It appears to be 1 or 2px short. The style for the menu is... Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#000000;
background-repeat:repeat;
border-color:#808080;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
height:21px;
float: left;
}
ul.pureCssMenu ul{
width:225.75px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#000000;
border-width:1px;
border-color:#000000;
border-style:solid;
text-align:center;
text-decoration:none;
padding:2px 5px 5px 10px;
_padding-left:0;
font:normal 11px Tahoma;
color: #ffde00;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#808080; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#ffde00;
border-color:#000000;
border-style:solid;
font:normal 11px Tahoma;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#ffde00;
border-color:#000000;
border-style:solid;
font:normal 11px Tahoma;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #557D4F !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:9px;}
ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span{background-image:url(./images/arr_white.gif)}
ul.pureCssMenu table a:hover table span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:23px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(./images/btn3.jpg);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(./images/btn4.jpg);
font:normal 11px Tahoma;
color:#eee;
}
ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
padding:0px 0px 0px 0px;
}
ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
And the html for the site is... Code: <!-- Start PureCSSMenu.com MENU --> <ul class="pureCssMenu pureCssMenum0"> <li class="pureCssMenui0"><a class="pureCssMenui0" href="/index.html">Home</a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>About Us</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/news.html">News & Events</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/promotions.html">Promotions</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/distribution.html">Distribution Network</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Services</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/service.html">Service</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/delivery.html">Delivery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/m2m.html">Made to Measure</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Products</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/linings.html">Linings</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/blackouts.html">Blackouts</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Interlinings</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/interlining.html">Interlining</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/wadding.html">Wadding</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/2fold.html">2 Fold</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="accessories.html">Accessories</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Blind Systems</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/bsm2m.html">M2M & Component</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/setsize.html">Set Size & Open Rail</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/motorisedbs.html">Motorised</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bsaccessories.html">Accessories</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bslinings.html">Linings</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Curtain Tracks</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/easyflow.html">Easy Flow</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/trackservices.html">Track Services</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/handdrawn.html">Hand Drawn</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/corded.html">Corded</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/motorised.html">Motorised</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/panelsystem.html">Panel System</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/metalpoles.html">Metal Poles</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/woodenpoles.html">Wooden Poles</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Contract</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/contractlinings.html">Contract Linings</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/contractfabrics.html">Contract Fabrics</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bamboo.html">Bamboo Fabrics</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/cushions.html">Cushions & Duvets</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/upholstery.html">Upholstery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/printing.html">Printing</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/irishlinen.html">Irish Linen, Garment Linings & Interlinings</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Contact Us</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/general.html">General Enquiries</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/newenquiries.html">New Enquiries</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="/orders.html">Orders</a></li> </ul> <a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a> <!-- End PureCSSMenu.com MENU --> <!-- (c) 2009, PureCSSMenu.com --> If anyone can help me make this 800px wide even if it means having a blank image at the end to fill any space and help removing any padding thats making it not appear full width it would be much appreciated. Hello, if you go to: http://tombraiders.net/katie/Site/index.html you'll see that the items in the menu aren't spaced evenly. I've tried to put some padding underneath but it doesn't appear to be working. I would like it if they were all evenly spaced, because some of the text (where there's two lines of text) is quite cramped. The CSS file can be found here Thanks! I've just started to learn CSS, and I've picked it up without much trouble so far, but I'm stuck with a small formatting problem I'm having. Using Firefox, the spacing for the menus on the right and left side are basically where I want them to be. Link Horizontal Line Link HR and so on... The page is at http://www.mcconaha.com/csscenter.php and the CSS is at http://www.mcconaha.com/csscenter.css So I have two questions... 1) What formatting trick am I missing when it comes to the padding under text like that? I've used the padding attribute in the CSS, but it doesn't seem to do anything. The only solution I've found is to set the margins to -Xpx and use that, but then it overlaps in FF. This has to be simple and stupid, I just haven't figured it out. 2) This isn't as vital, but would be nice if I could figure out. The nav boxes are stacked down each side. If I add an item to the top box, I have to readjust the top attribute in the CSS for all boxes by whatever the increase in size of the first box was. Is there a way to align the top box, then make all the others conform down when you add something above? Thanks in advance. I'm sure I'll be posting more questions as I have them. Hello, I just started trying to learn about css and html layouts by following this tutorial he hxxp://www . subcide.com/tutorials/csslayout/page2.aspx This is my webpage: (link removed as issued is resolved) but I'm having issues making the navigation look correct (not repeat and be about 50 px down) Can someone give me a little hand. ? cheers. ps....errrr...I see nothing that I am doing wrong in the forum rules about the urls...... I'm having trouble with the drop down menu for my website and I know it just has to be an easy fix, but I can't figure it out! I've spent grueling hours on it and now I've probably just messed up the original code! The menu will not center, and if I get it to, either the entire background turns white, the background for the menu turns white, or something else goes wrong (mostly more IE problems). Any help would be great....it looks like I can't post a link to the site, nor can I post the enormous amount of code in here??? Can someone tell me how I can do either or simply direct you to my site? I'm not self-promoting it, I just need help! Hello. I'm trying to create a CSS/SPRY dropdown menu. It seems to work fine in Firefox but in IE 6 the dropdown goes horizontal until I mouse over then it goes verticle. Also how do I add black 1px border around each list item in the dropdown menu? I have tried but it tends to give the first Menu Item the border as well which doesnt work so well with the layout. Here is the temp site. http://www.nessphysiotherapy.com/tempmenuhelp.html Quote: @charset "UTF-8"; /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: auto; float: left; white-space: nowrap; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; z-index: 1020; cursor: default; width: auto; position: absolute; left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { float: none; background-color: transparent; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { background: #781844; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; color: #FFFFFF; text-decoration: none; font-family: Tahoma, "Times New Roman", Serif, Arial; font-weight: bold; font-size: 0.9em; line-height: 0.98em; padding-top: .9em; padding-right: 1.1em; padding-bottom: 1em; padding-left: 1.1em; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color: #99CCCC; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { color: #99CCCC; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe { position: absolute; z-index: 1010; } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; background: transparent; } } Hello, everyone. I'm a relative newcomer to CSS, and I decided I'd try and add a neat flyout menu to the new site I'm developing: www.mindwallpictures.com. As you'll notice, it works great in Firefox, but doesn't work at all in IE. Here is the CSS code from my site: Code:
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at (URL address blocked: See forum rules)
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
height:150px;
font-size:90%;
/* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background:#6b6b6b url(images/button.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background:#6b6b6b url no-repeat right center;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#FFF;
text-indent:5px;
border:1px solid #6b6b6b;
border-width:1px 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px;}
/* style the link hover */
* html .menu a:hover {color:#adbaad; background:#888d88; position:relative;}
.menu li:hover {position:relative;}
/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color:#adbaad; background:#888d88;}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#adbaad; background:#888d88;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
</style>
and here is the html that goes with it: Code:
<div class="menu">
<ul>
<li><a href="index.html">MindWall Home</a></li>
<li class="sub"><a href="#nogo">News</a>
<ul>
<li><a href="news/recent/index.html">Recent News</a></li>
<li><a href="news/archives/index.html">News Archives</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Films</a>
<ul>
<li><a href="films/rendezvous/index.html"><i>A Dreamer's Rendezvous</i></a></li>
<li><a href="films/millberg/index.html"><i>Millberg Apartments</i></a></li>
<li><a href="films/musicvids/index.html">Music Videos</a></li>
<li><a href="films/upcoming/index.html">Upcoming Projects</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Links</a>
<ul>
<li><a href="http://www.mooseheadfilms.com">Moosehead Studios</a></li>
<li class="sub"><a href="#nogo">Purdue</a>
<ul>
<li><a href="http://www.purdue.edu">University Home Page</a></li>
<li><a href="http://www.cla.purdue.edu/film-studies/">Film Studies Program</a></li>
<li><a href="http://purduefvsnewsletter.blogspot.com/">FVS Newsletter</a></li>
</ul>
</li>
<li><a href="http://www.imdb.com">Internet Movie Database</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">About Us</a>
<ul>
<li><a href="about/mindwall/index.html">About MindWall Pictures</a></li>
<li><a href="about/awards/index.html">Awards & Recognition</a></li>
<li><a href="about/crewbio/index.html">Crew Biography</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Contact Us</a>
<ul>
<li><a href="contact/mindwall/index.html">Contact MindWall</a></li>
<li><a href="contact/crew/index.html">Contact film crew</a></li>
</ul>
</li>
</ul>
</div>
It has been altered (by myself, the n00b) from the original code found at CSSplay: http://www.cssplay.co.uk/menus/flyout_4level.html It's bugging the crap out of me, and the guy wants the site done as early as next week. This is the one thing holding me back, since people...actually...use IE. -_- Poor souls. Any help would be greatly appreciated! Thanks. I've got a drop down menu that has a hover feature. Problem is that as soon as you try to mouse over the options in the menu after they pop up on the hover on the title of the menu, the menu disappears. it does this in FF and Safari but in IE it works. weird, eh? any ideas? hey all, I have been working on a multilevel suckerfish menu tutorial and i have the following: http://www.wildhosting.co.uk/cssMenu/menu.php However, i am having a couple of final problems. 1) In FF the grey highlight colour does not seem to fill from top to bottom on the main menu. 2) In FF, When a sub menu (for the top option of the menu) appears the top border of the submenu overlaps the bottom border of the main menu. 3) In IE, the above are ok but the submenu appears a long way from where it should, ie 5cm to the right... any help would be great, thanks RF Hey, I have a drop down menu that when i view it in Internet Explorer is aligned fine but isnt working properly in firefox. I think the problem lies in the white spaces either side of the page. If the page fits the screen snug there isn't an alignment problem, this is better explained when viewing the site on different resolutions. I'm pretty sure the problem lies in the css but i don't know enough pinpoint it. I can't post the address on the forum because of the rules but its www northsidestageschool com (where spaces are dots). Sorry if this breaks rules but my problem really doesn't make any sense with out the link! Any ideas? Mike |
|||||||