CSS - Items Skewed Right

I've tried the popular tricks to figure this out, but don't seem to have the touch.

In IE, the list item is 2px taller than in FF.

page:
URL Removed

CSS:

Code:

.mainNav ul {margin: 0; padding: 0; list-style: none;}
.mainNav ul li {border-top: 1px solid #27466c; border-bottom: 1px solid #021940; background: url('../images/menu_bg.gif') top left repeat-y; display: block;}
.mainNav ul a, .mainNav ul span {display: block; height: 17px; padding-top: 4px; font: 11px Verdana,Sans-Serif; color: #ffffff;}
.mainNav ul a:link, .mainNav ul a:visited {text-decoration: none;}
.mainNav ul a:hover{text-decoration: none; color: #9fb3cb;}
.mainNav ul ul ul a:hover, .mainNav ul ul ul ul a:hover {text-decoration: none; color: #3e5064;}
.mainNav ul ul li {border: 0; background: url('../images/sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul li {border: 0; background: url('../images/sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul ul li {border: 0; background: url('../images/sub_sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.unselected, .selected, .empty {display: block; float: left; height: 21px; width: 22px;}
.currentPage {border-right: 4px solid #000530; margin-right: 1px;}

HTML on page (it's quite heavy)

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!

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

Hi Guys,
I am trying to incorporate a CSS file into an xml document.I have the following problem.

My XML file is:

<!-- example of an list item -->

<?xml-stylesheet type="text/css" href="styledocument.css" ?>

<document>

<employee>
<firstname>peter</firstname>
<lastname>lance</lastname>
</employee>

</document>

My corresponding styledocument css file is :

employee {display:list-item;color:red;}
firstname {display:inline;}
lastname {display:inline;}

---

Output in IE5:

peter lance
-----

The expected output should be peter and lance as list items with bullets preceding them and in red color. But my output is
peter lance in just red color without any bullets.

List-item value of the display attribute is not recognised at all.

Can u help deal with this problem!!!

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

I am not sure how to centre all items on the suckerfish menus:

I thought this would work, but it doesn't and even if it did it won't validate:

<ul id="nav">

<div style="text-align:center;margin-left:auto;margin-right:auto;">

NAV ELEMENTS HERE...

</div>

</ul>

Surely someone has had to centre there suckerfish menu to a fixed width box..or any box for that matter.

ss

I have an unordered list of 4 items that I have styling to be a horizontal navigation. I have set the css of the li to have a width of 25%. This works fine when the screen is full width but as I scale the browser to have a smaller width the text inside the li wrap - as to be expected. My question is, is there a way of ensuring that all 4 li's have the same height even when the content is of different lengths (thus some of the li's content do not wrap).
Also can this be done purely in CSS without the use of Jquery?
Thanks in advance

I have a site that is using the suckerfish style dropdown sorta...

On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region...

Any help would be appreciated.

Here is the CSS for that section:
Code:

 /*******************************/
	/*   BEGIN: Drop-Down Styles   */
	/*******************************/
	
	#navigation, #navigation ul {
		position:absolute;
		padding: 0;
		margin: 0;
		list-style: none;
		line-height: 20px;
		font-size: 11px;
		font-family: Arial, Helvetica, sans-serif;
		z-index: 10;
		font-weight: bold;
	}
	#navigation li.main {
		text-align: center;
		}
	
	#navigation ul {
		margin: 0 0 0 -1px;
	}
	
	#navigation a {
		display: block;
		background-color: transparent;
		color: #F1F1F1;
		text-decoration: none;
		padding: 2px 4px 2px 6px;
		z-index: 10;
	}
	
	#navigation li {
		float: left;
		width: auto;
		border: solid 1px #0f2344;
		border-right: none;
		background-color: #0f2344;
		color: white;
		z-index: 10;
	}
	
	#navigation li li {
		border-right: solid 1px black;
		border-bottom: none;
		width: 160px;
	}
	
	#navigation li.last {
		border-right: solid 1px black;
		border-bottom: solid 1px black;
	}
	#navigation li.hr {
		border-right: solid 1px black;
		border-bottom: solid 1px black;
		
	}
	
	#navigation li ul {
		position: absolute;
		width: 160px;
		display: none;
	}
	
	#navigation ul ul {
		margin: -20px 0 0 160px;
	}
	
	#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
		display: none;
	}
	
	#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul  {
		display: block;
	}
	
	#navigation li:hover, #navigation li.over {
		color: black;
		background-color: #467BB4;
		cursor: pointer;
	}
			
	#navigation li:hover>a { /* IE/Win ignores this declaraion */
		color: black;
		background-color: #467BB4;
	}

And a segment of the HTML I'm using.

Code:

<ul id="navigation">
			<li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a>
			  <ul>
			    <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a>
				<li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a>
				<li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a>
				</li>
		      </ul>
			</li>

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.

hello!
i'm trying to line up some text in my unordered list but haven't been able to figure out the CSS to make it look something like this: Code:

Accomplishments:

Job title		some job here
			another job
			yet another job

Duties			Designed company website.
			Proofread advertisements

Code:

<div id="resume">
	<h4>Accomplishments</h4>
	<ul>
		<li>Job title</li>
		<ul>
			<li>some job here</li>
			<li>another job</li>
			<li>yet another job</li>
		</ul>
			
		<li>Duties:</li>
		<ul>
			<li>Designed company website.</li>
			<li>Proofread advertisements</li>
		</ul>
	</ul>
</div>

so i tried doing stuff like Code:

div#resume ul li ul {
	position:absolute;
	top:-20px;
	left:50px;
}
div#resume ul li ul li{
	float:none
	position:relative;
}

i can't get the words, "Job title" to line up horizontally with the first list item, then have the list items listed vertically like in my example up top (i know it doesn't line up perfectly in here)
can someone correct my css??
thanks!
drGiggles

We have a list of items that are not lining up under each other.

The list of items is under a class 'item-list',
each individual item that is in the list is listed as an instance of the same class ''view-item view-item-RecentReviewSummary'. Each list item consists of a title (a link), a small photo to the left with labels/text wrapping around the photo on the right.

It happen when the page is wide (different monitors, resolutions etc) and in cases where the text wraps under it's photo (ie long enough text to require an extra line under the photo).
We were trying to use display: block, margins and positions to fix this. any ideas? Thank you. Some HTML/CSS following

HTML for first list item:
<div class="item-list">
<ul>
<li>
<div class='view-item view-item-RecentReviewSummary'>
<div class='view-field view-data-node_title'><a href="/millennium_park_lake_shore_walk">Millennium Park/Lake Shore Walk</a>
</div>
<div class='view-field view-data-node_data_field_small_image_field_small_image_fid'><img src="(URL address blocked: See forum rules)/files/ac_millennium_park_small.jpg" alt="Millenium Park" title="Millenium Park in the heart of Chicago" width="150" height="150" />
</div>
<div class='view-label view-label-node_data_field_reviewer_rating_field_reviewer_rating_value'>AC Rating
</div>
<div class='view-field view-data-node_data_field_reviewer_rating_field_reviewer_rating_value'>3
</div>
<div class='view-label view-label-node_data_field_description_field_description_value'>Summary
</div>
<div class='view-field view-data-node_data_field_description_field_description_value'>Check out the amazing "Cloud Gate" sculpture at
Millennium Park and then walk across Lake Shore Drive, Stroll along the Lake and then circle back through Grant Park toward Buckingham Fountain. This trip can be made easily with a wheelchair if your attendant likes to hike, however, the roughly two mile stroll may be a lot if you are on your own. Start by parking your car in the Grant Park North Parking Garage.
</div>
</div>
</li><li>

CSS: (each list item is a link, fields/labels and an image)

#view-label {}

.view-label-node_data_field_reviewer_rating_field_reviewer_rating_value {
/* AC Rating label */
float: left;
padding: 0 5px 0 0;
color: #369;
font-weight: bold;
text-decoration: italicize
}

.view-label-node_data_field_description_field_description_value {
/* Summary label */
color: 369;
font-weight: bold;
width: 350px;
padding: 4px 5px 0 0;
}


#view-field {}

.view-data-node_title {
/* attraction title value */
We thought putting code here would fix but didn't....
}

.view-data-node_data_field_reviewer_rating_field_reviewer_rating_value {
/* rating nbr */
position: relative; top;
float right;
background: url('fourstars.gif') no-repeat top left;
padding: 0 0 0 10px;
}

.view-data-node_data_field_description_field_description_value {
/* summary text */
margin-bottom: 15px;
font-size:.8em;
}

.view-data-node_data_field_small_image_field_small_image_fid {
/* image */
float: left;
margin-right: 5px;

I have a list, Each item has a graphic as a background image, so each li is 60px high

Some of the text is long and wraps

Some of the text remains on one line

This means the the spacing is not consistent and looks a little odd

I've tried

Code:

ul#myListId li {
     vertical-align:middle;
}

and

Code:

ul#myListId li * {
     vertical-align:middle;
}

This has no effect in any of the browsers

Hi
I'm writing here after spending a few hours searching google without luck.

I bought a "mega menu" plug in for wordpress but its acting very odd.
It generally works as it should but ive found that theres something wrong with the formatting of the drop down menus.
There is an issue where line breaks do not happen at all, and most important - list items are not shown on a new line. The content all seems to flow around its self rather than being formatted.
See attached pic:
img14 .imageshack .us/img14/964/screenshot047cr .png

I did run the css and html though a validator and it spits out hundreds of errors but i think they are pretty much only shown because its css3.

I'm really curious what would cause line breaks to not appear after list items. I had thought previously it may be the css clashing with my themes css but i tried a fresh install on a really mimimal theme and the error is still there

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