CSS - Menu Items Centering Within Images: Urgent Help!

At h**p://www.topofferspage.com in IE6, the bullet points do not have images appearing unlike Firefox.

Before anyone says it's because of validation errors, it's not. I can turn off the offending stylesheets just fine and I get the same problem.


Little help? Why would background images not work in IE6 but every other browser?

Hi,

I was about to put my new website online when I noticed that our CSS drop-down menu no longer works in Internet Explorer.

The site is built off some software that we bought (a billing system called AWBS). When I got our template up and running on it, the menu worked fine in IE. Today I did some upgrades to the software, which included changing some of the templates around. I was careful to not disturb much in my template files, however it seems that I have, and I have no idea what.

You can see the site at http://www.estyles.com.au/awbs/testpage.php . The menu works fine in FireFox, and previously worked fine in IE before I upgraded. All the CSS for the menu can be found at http://www.estyles.com.au/awbs/temp...es/css/menu.css .

The code for the menu is:

Code:

<ul id="nav">
	<li><a href="http://www.estyles.com.au/awbs/index.php">HOME</a>
	</li>
	
	<li><a href="#">WEBHOSTING</a>
		<ul>
			<li><a href="http://www.estyles.com.au/awbs/hostingoverview.php" class="menuitem">Overview</a></li>

			<li><a href="http://www.estyles.com.au/awbs/hosting.php?spt=1" class="menuitem">Shared Hosting</a></li>
			<li><a href="http://www.estyles.com.au/awbs/hosting.php?pt=r" class="menuitem">Reseller Hosting</a></li>
			<li><a href="http://www.estyles.com.au/awbs/specials.php" class="menuitem">Specials</a></li>
		</ul>
	</li>

	<li><a href="#">DOMAINS</a>

		<ul>
			<li><a href="http://www.estyles.com.au/awbs/check.php" class="menuitem">Register Domain</a></li>
			<li><a href="pricing.php" target="_blank" onClick='window.open("http://www.estyles.com.au/awbs/pricing.php","pricing","width=700,height=300,status=yes,scrollbars=1,resizable=1");return false;' class="menuitem">Domain Prices</a></li>
			<li><a href="http://www.estyles.com.au/awbs/transcheck.php" class="menuitem">Transfer Domain</a></li>
			<li><a href="http://www.estyles.com.au/awbs/whois.php" class="menuitem">Whois Lookup</a></li>
		</ul>
	</li>

	<li><a href="#">SERVICES</a>
		<ul>
			<li><a href="http://www.estyles.com.au/awbs/webdesign.php" class="menuitem">Web Design</a></li>
		</ul>
	</li>
	
	

	<li><a href="#">ACCOUNT</a>
		
		
		<ul>

			<li><a href="http://www.estyles.com.au/awbs/cart.php" class="menuitem">My Cart</a></li>
			<li><a href="http://www.estyles.com.au/awbs/welcome.php" class="menuitem">My Account</a></li>
			<li><a href="http://www.estyles.com.au/awbs/helpdesk.php?search=open" class="menuitem">Support System</a></li>
			<li><a href="http://www.estyles.com.au/awbs/tos.php" class="menuitem">Terms of Service</a></li>
			<li><a href="http://www.estyles.com.au/awbs/LogOut.php" class="menuitem">Log Out</a></li>
			
							
				<li><a href="http://www.estyles.com.au/awbs/admin/adminwelcome.php" class="menuitem" target="_blank">Admin</a></li>

				
							
		</ul>
		
			</li>
</ul>

The HTML is messy and I have no idea where to start looking for the problem. The header and footer on the page both changed during the upgrade but the main content (everything inside the body tags) did not, so I suspect that the problem does not lie within the main content area.

If someone could at least point me in the right direction then I would greatly appreciate it, thanks

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

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!

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

Thanks for taking the time to read my question.

I am having problems centering my navigation images below the event calendar on my page (link below).

I think I know why, but can't get around it.

In my general css page (http://www.pierced.ca/Pierced.css) I have the line Code:

img {float:left; margin:0; padding:0;}

. I don't know what it does exactly, someone on this forum told me to put it on my page. Without it, my top margins on all my pages don't work. I think it is this code that is affecting my nav images. without the Code:

td.centercalnav {
padding: 1% 0 0 44%;
}

which is in (http://www.pierced.ca/PiercedEvents.css) they center to the page, not the table row.

With the current code it looks kind of ok in Fire Fox, but worse in IE.

What can I do to center the nav images under the calendar.

Thanks again,

Brad





http://www.pierced.ca/pierced-events.htm

Hi. I'm new here as well with cSS. Hope someone can explain this to me...darn it...cSS can be frustrating.

Here is my CSS code for an external style sheet:

#header {
background-image: url(images/penpal-inner.jpg);
height: 168px;
background-repeat: no-repeat;
background-position: center top;
border-bottom: 20px blue solid;
width: 640px;}


Here is the xhmtl code:

<div id="header"></div>

Why won't my background image center horizontally? It stays to the left of the page. If I take out the width (640px), it will center, but than I have a problem with the bottom border. I want the border to be the same width as the image but it is the width of the entire page.

So with the width (640 px) in the #header rule, I have the border the same length as the image, but not centered.

Without the width, the image centers but the border is now longer than the image.


how do i get the image to center on the page horizontally and still keep the bottom border the same width as the image?

Help please.

thanks

Steve.

Hi,

I'm new using CSS and was just handed the task of creating an external style sheet that will 'brand' the web page of a new service we are using with my company's logo and menu.

Our page has a logo on the left, with a menu bar extending to the right of it, then a graphic bannner with the company's slogan below all of it.

The requirements are for an external style sheet which will apply this to each page of the services hosted pages.

I desperately need an example of how this is done, or CAN it be done with an external style sheet (and what code needs to go into the HTML file to make it work).

Any help would be greatly appreciated. I've spent 4 days searching for an example and have come up dry, or what I did find didn't work. This is my last resort and I need to finish the project today.

Tillius

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;
    } 

Hello,

Thank you for reading my post

This is what I try to create.
A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered.
I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center.
The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width.

What I already got :
The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size.

I did try and search for several hours, but couldn't find a good solution.

Mainly my question would be, how I can shrink or grow an image without knowing his size.


Basicly my html code is

Code:

<div id="navBar">
  <div class="navElement" id="nav1">
	<img class="navImg" src="images/home.gif" />
  </div>
  <div class="navElement" id="navN">
	<img class="navImg" src="images/notHome.gif" />
  </div>
</div>

my latest css for unknown image size

Code:

#navBar { /* main page navigation container */
	height: 460px;
	width: 70px; /* 1. this will be dynamically set */
	left: 100px;
	top: 151px;
	position: absolute;
	visibility: visible;
	}
.navImg {
	height: auto;
	width: auto;
	/*	height: 60px;*/
	/*width: inherit;*/
	position: relative;
	top:0px;
margin:0 auto;
}
#navElement1 {
	position: relative;
	width: auto;
	height: 70Px;
	top:0px;
margin:0 3px;
	visibility: visible; }

With javascript I add a onclick event handler on each navImg wich trigger the action. This works to.

Please, Is someone willing to help with pointers.

Thanks in Advance
SC

Hello guys,
I know this is asked several time, but this case is different and can't find a working solution.

I'm creating a navbar using ul lists with items as images, and want to center it.
I'm using the blueprint css framework, and the list items contains images instead of text.

Here's the HTML code :
Code:

<body>
<div class="container">

<div id="header" class="span-24">
	
<div id="header_wrapper">

<ul>
<li><img src="images/nav_03.png" /></li>
<li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li>
<li><a href="#"><img src="images/nav_05.png" /></a></li>
<li><a href="#"><img src="images/nav_06.png" /></a></li>
<li><a href="#"><img src="images/nav_07.png" /></a></li>
<li><img src="images/nav_08.png" /></li>
</ul>

</div>

</div><!--End Header-->

</div>
</body>

Here's the CSS code :
Code:

#header{
	padding-top:53px;
	border:#F00 solid 1px
}
	#header_wrapper ul {
		text-align: center;
	}
	#header_wrapper ul li {
		display: inline;
	}

I tried many code configurations but can't get it to work!

a live preview is available here