CSS - Css Menu: Centering Items, Separate Border For Pop-up Menus And Ie Compatibility

Hello,

I'm customising a theme in wordpress and having a problem centering the three widgets that appear in the footer at the bottom. Nothing seems to work that I have tried. I know very little about css but understand the basic principle but can't seem to find the problem. I want the footer to be 100% the width of the page and for the three wigets to be in a single row of 3 but in the center and not off to the left. I've tried adjust the float but it just stacks them on top of each other set to none and over to the right set to right... I've inlcuded the CSS below and also the code in my footer.php page. Thanks in advance.

test site is http://mtbireland.com/hkr



Code:

</div>
</div>
</div>
<div style="width:100%; text-align: center; margin: 0 auto;">
<div id="footer"><div id="footer-left">
    <ul>
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 1') ) : ?> <li>
      <?php endif; ?>
    </ul>
  </div>
  <div id="footer-middle">
    <ul>
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 2') ) : ?> <li>
      <?php endif; ?>
    </ul>
  </div>
    <ul>
<?php if ( !function_exists('dynamic_sidebar')
   || !dynamic_sidebar('footer 3') ) : ?> <li>
      <?php endif; ?>
    </ul>
  </div>

Code:

#footer {
	height:200px;
	padding:20 0 0 0;
	color:#FFFFFF;
	font-size:12px;
	font-weight:normal;
	line-height:20px;
	font-family: Tahoma,georgia,Century gothic,  Arial, sans-serif;
	width:100%;
	float:left;
	background:#392E2C;
	text-align:left;
	}

/* Footer Widgets */
#footerwidgets {
	display: block;
	width:100%;
	background:#392E2C;
}
#footer-left {
	width: 210px;
	float: left;
	margin: 15px 10px 10px 30px;
	padding: 10px;
	text-align:left;
}
#footer-middle {
	width: 210px;
	float: left;
	margin: 15px 10px 10px 15px;
	padding: 10px;
	text-align:left;
}
#footer-right {
	width: 210px;
	float: right;
	margin: 15px 10px 10px 15px;
	padding: 10px;
	text-align:left;
}

hello,

i have this in my html:

Code:

<div id="link_image">
<a href="http://www.mylink.com/" target="_blank">My link with image
</div>

& here the css:

Code:

#link_image a
{
display:block;
width: 130px;
height: 21px;
text-indent:-3000px;
overflow:hidden;
text-decoration:none;
background:url(images/image.jpg) 0 0 no-repeat;
padding: 7px;
background-color: #667700;
}

Now I would like that the image is right in the center of the background border with color #667700. Like now, it's just on the left side, not centered.

thanks!

Hi and thanks for the help so far Kravvitz. I checked my menu out on IE and got the following results (see screen captures below).

You can probably see the element doesn't seem to go to the edge of the dropdown. Because of this the next ul level is appearing right beside the highlighted area (as it would normally), but since it isn't going to the end of the 'row' it is resulting in overlapping!

Is there a way to make this work out in IE as well that you could recommend? Thanks.

I have a drop down menu that is working fine in FF 3.5 but not in IE 7. Will you please have a look at it and help me find out where the conflict is? I am thinking it is a CSS issue but it may also be a javascript issue. The menu is he

http://bit.ly/42iVkG

and the menu script I used is he

http://bit.ly/4pvcXj

Thank you.

Hello,

In my menu, I'm trying to center the first level of the List Items, and left justify the second level of the List Items. So the Menu will be centered and the pop-up links will be left justified. I know it's probably super simple, but for some reason, I'm missing it!

Quote:
/*!!!!!!!!!!! Menu Core CSS !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:10000;}
.qmmc .qmdividery{float:left;width:0px;}
.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:10000;}
.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}
.qmmc {position:relative;zoom:1;z-index:10000;}
.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:10000;}
.qmmc div a,
.qmmc ul a,
.qmmc ul li {float:none;}
.qmsh div a {float:left;}
.qmmc div{visibility:hidden;position:absolute;}
.qmmc
.qmcbox{cursor:default;display:block;position:relative;z-index:10000;}
.qmmc
.qmcbox a{display:inline;}
.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}
.qmmc li {z-index:10000;}
.qmmc ul {left:-10000px;position:absolute;z-index:10000;} .qmmc,
.qmmc ul {list-style:none;padding:0px;margin:0px;}
.qmmc li a {float:none}
.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}

Hi,

Can somebody tell me why the menu on the url below needs so much space
between menu items? (between the home, browses, forms, pages).

Maybe a margin / padding problem, but I cannot seem to find it.

The URL: http://www.genwise.com/temp/ordersbrowse.aspx.htm

Thank you!

--
Fizgig2

I'm using a menu from CSSPlay, and I have it working. http://www.wattersisere.co.uk/devshed

It also works for browsers with 800x600 screens. However, as you can see the menu items on the top bar are close together (2 * 11px). I am wanting to increase the spacing between them depending on the browser size. Maybe a % would be appropriate, any other ideas would be super.

Alternatively, I could increase the spacing between them to an aesthetically pleasing size and then force the smaller browsers to have a horizontal scrollbar. What would I have to make this work, or would you not recommend it?

Thanks,

Watters

Hey all,

Here's the site in question. It validates, and more or less displays how i want it in FF.

Thing is, is that in IE it displays the menu button images in reverse order...i have NO idea why it's doing this. It's based off the alistapart menu, that i've used numerous times without problems.

Here's the HTML;
Code:

      <ul id="nav">
        <li><a href="index.php"><img src="images/home_button.gif" alt="Home button image"></a></li>
        <li><a href="about.php"><img src="images/about_button.gif" alt="About Freedom Boat Sales button image"></a></li>
        <li><a href="#"><img src="images/inventory_button.gif" alt="Product inventory button image"></a> 
          <ul>
            <li><a href="newproducts.php" class="menutext">new</a></li>
            <li><a href="preownedproducts.php" class="menutext">pre-owned</a></li>
          </ul>
        </li>
        <li><a href="#"><img src="images/requests_button.gif" alt="Request button image"></a>
          <ul>
            <li><a href="requests.php?item=products" class="menutext">products</a></li>
            <li><a href="requests.php?item=pricing" class="menutext">pricing</a></li>
            <li><a href="requests.php?item=brochure" class="menutext">brochure</a></li>
          </ul>
        </li>
        <li><a href="contact.php"><img src="images/contact_button.gif" alt="Contact button image"></a></li>
      </ul>

Here's the CSS;
Code:

#menuposition {
width:730px;
height:30px;
position:relative;
margin:auto;
z-index:10;
}

ul#nav {
	list-style: none;
	height:30px;
	width:730px;
	}

ul li {
	float:left;
	height:30px;
	width:146px;
	position: relative;
	}

li ul {
	position: absolute;
	top:30px;
	display: none;
	list-style:none;
	}

ul li a {
	display: block;
	text-decoration:none;
	text-align:left;
	font:10px verdana, arial, sans-serif;
	}

li:hover ul, li.over ul {
    display: block;
	margin-left:20px;
	margin-top:-1px;
	width:118px;
	background-color:#E7E7E7;
	border-top:2px solid #666;
	border-left:1px solid #CCC;	
	border-right:1px solid #CCC;	
	border-bottom:1px solid #CCC;	
	}

.menutext {
width:118px;
height:30px;
}

a.menutext {
color:#255CB8;
text-decoration:none;
}

a.menutext:hover {
color:red;
text-decoration:none;
background-color:#DCDCDC;
}

	
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: right; }
* html ul li a { height: 1%; }
/* End */

Also, any thoughts on why the blue background won't extend the full screen height in FF?

Thanks!

Hello,

I'm new to this site which is really interesting, I hope a nice soul will be able to help me... I've tried to solve this but I can not find the solution.

my site is here, the code are too long to post here. I hope the moderator will understand.

moureau . me / pro.xml
moureau . me / site.css

The products menu has a problem... As you can see.

If I use display-block or -inline-block the result is different but never ok.

If I use Inline-Block, all the drop down menu items have the width(+padding) of the father menu except the last line which is longer without the right padding also, text and background.

If I use Block, all the drop down menu items have the width(+padding) of the father menu but the last line goes out of the menu only during an hover and just the text, not the black transparent background which has the same length as other drop down menu items...

What should I add to solve that ?

I would like the menu to be large enough to show all the items.

I'm using ImpressPages.org CMS that's why I can not use another layout for these menus.

Thanks a lot.

When I view my web pages with IE6 or resize the window the footer items fall start falling out of place.

Link: website

CSS Link: CSS Code

I am creating a dropdown menu based on suckerfish. The top level appears correctly, however the first submenu level puts all the menu items stacked over top of eachother right under the top level. Everything is correct except the items are overlapping. My html and css are below.

<ul id="nav">
<li style="border-left: none;">
<link here>
<ul>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
</ul>


#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
}

#nav li {
float: left;
padding: 0px 10px 0px 10px;
}

#nav li ul {
position: absolute;
width: 200px;
color: #FFF;
background-color: #000;
left: -999em;
}

#nav li:hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

#nav li ul ul {
margin: -1em 0 0 10em;
}

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
left: auto;
}

My CSS is pulled pretty much straight from suckerfish. there are a few small changes like the widths and background color, but the issue was there even when it was a direct copy. Currently I am only trying to get this to in firefox, as I am getting the same issue in every browser I try.

Just an fyi, I am using umbraco as the CMS for this site, and it is generating the html for the menu. There are actual links I just cant post them as I am new here, they contain just the hfer attribute.

Thanks

hi, Im making a menu that looks like:
link1 link2 link3 link4

and then wen you hover over link a dropdown may appear

i have the problem that when they appear, they lay on top of each other. ANy idea how to make they display under each other. (it doesnt even work in IE at the mo, but i gues ill laft2 sort that later)

thanks

this is the html: PHP Code:
<ul>
<li><a href="index.php?action=home">home</a></li>
<li><a href="index.php?action=whatnew">what's new</a></li>
<li><a href="index.php?action=offers">special offers</a></li>
<li><a href="#">collections</a>
    <ul><a href="#">drop1</a></ul>
    <ul><a href="#">drop2</a></ul>
<!--when looping thru categories, do a WHERE cat_status >= 2-->
</li>
<li><a href="index.php?action=sBask">shopping basket</a></li>
<li><a href="index.php?action=contact">contact us</a></li>
</ul> 





this is the relevant css:
PHP Code:
#nav ul li {
        position: relative;
        margin: 0;
        padding: 0 10px 0 10px;
        list-style: none;
        display: inline;
    }

    #nav ul li ul {
        position: absolute;
        display: none;
    }
    
    #nav ul li:hover ul {
        display: block;
        left: 0;
        top: 10px;
    }

    #nav ul li:hover ul li {
        height: 20px;
    } 

I've worked out most css problems but I can't find any css that will make the drop down menu on my site sit on top of the YouTube video that you can see he www the-bizness .co. .uk

If you click on Home Page or Multimedia the drop-down menu is behind the video clip.

Very annoying. Any help appreciated!

I am having a lot of trouble with a menu I created. It works fine in firefox, but does not display properly in IE. I created a page with images and code to explain the problem he

chrisbanker.com/cb_com_new/help.html

If anyone could help me out, that would be great. This is the one thing that is holding me back from putting this new site up.

Please reply or email cbanker[at]gmail[dot]com if you have any advice.

Thanks,
Chris