CSS - Ie/ff Display Inconsistencies

I've been seeing people using ul and li tags to make their menus in css.

So I've started trying to do the same, here is an example.

But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working?

How can I get this to work or is there any other way to get a ul li menu to display this way?

Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either.

http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm

Hi!

Is is vicious to display a table as "display: block" to force margin-collapsing?

Otherwise there's no margin collapsing with other elements.

Thanks

Edit: Nevermind, I fixed my problem by working through each issue that the W3C validation service gave me, and fixing each one. It works in Internet Explorer now. Thanks for your time anyway.

Peace,
Pete Zaria.

Hi guys,

Just a quickie , I was looking at a site I produced in Netscape Navigator 7 and noticed a problem.

I have a left hand nav that expands to show a sub Nav on mouse over. When moving your mouse off the menu item onto another one the previous menu closes (unless it's the page your looking at)

Simple right? - well I noticed in NN7 that the display:none; I use to close the menu does not seem to work. No error, just doesn't work.

Does display:none; not work in NN7 then? Is there a way arround it?

Cheers,

Daz

I need some assistance getting my site menu to display correctly on FF. It displays fine on IE.

You can see an example of the page he http://www.gallery.vividusphoto.com. If viewed in FF, the menu table is touching the logo. In IE, the menu is aligned to the right. If I do an align="right" the "under construction" bar goes up under the logo/menu in FF and the menu is moved to the correct position all while IE is unchanged. Any help is greatly appriciated.

Code:

@charset "utf-8";
/* CSS Document */
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #333333;
}
.vividus #container {
	width: 46em;
	margin: 20px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.vividus #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #333333;
	height: 30em;
}
.vividus #headerContent {
	width: 46em;
	text-align: right;
	color: #CCCCCC;
}
.vividus #footerContent {
	width: 46em;
	padding: 10px 0 0 0;
	text-align: left;
	color: #CCCCCC;
	font: 75% Georgia, "Times New Roman", Times, serif;
}
.vividus #menu {
	width: 30em;
	border: 0;
	margin: 15px 0 5px 0;
	text-align: right;
	font: 75% Georgia, "Times New Roman", Times, serif;
}
a:link {
	color: #CCCCCC;
	text-decoration: none;
}
a:visited {
	color: #CCCCCC;
	text-decoration: none;
}
.login {
	background: #000000;
}
.login a:hover {
	text-decoration: none;
	color: #999999;
}
.newsBanner a:hover {
	color:#FFFFFF;
}
.vividus #newsBanner {
	background: #666666;
	padding: 7px 15px 7px 5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #CCCCCC;
}
.vividus #realContent {
	background: #FFFFFF;
	margin: 10px 0 0 0;
	height: 30em;
	padding: 10px 15px 10px 15px;
}
.vividus #realContentHome {
	background: #666666;
	margin: 10px 0 0 0;
	height: 30em;
	padding: 10px 10px 10px 10px;
}
.vividus #bodyHeadline {
	color: #000000;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: .8em;
	padding: 10px 0 0 0;
}
.vividus #bodyText {
	color: #000000;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: .8em;
}
.vividus #loginForm {
	padding: 5px 0 5px 0;
	border: 1px solid #000000;
}
.vividus #bodyHeader {
	font-size: 2em;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.floatright {
	float: right;
	margin: 10px 0 10px 10px;
}
.vividus #imgAbout {
	height: 30em;
	background: top right no-repeat url(../images/about_img.jpg);
}
.vividus #bodyHeadlineAbout {
	color: #000000;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: .8em;
	padding: 10px 0 0 0;
	width: 35em;
}
.vividus #error {
	color: #FF0000;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: .8em;
	padding: 10px 0 0 0;
	width: 35em;
}
.green	{
	background:#333333;
	margin: 0px 6px 6px 6px;
	border:1px solid #3b6e22;
	height:24px; 
	line-height:14px;
	color:#FFFFFF;
	font-size:12px;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin-right:10px;
	display:inline-block;
	text-decoration:none;
}
.login2 { 
 	width: 200px;
	font-size: 1.1em;
	font-family:Georgia, "Times New Roman", Times, serif; 
 	background-color: #FFFFFF; 
 	color: #102132; 
	border: 1px solid #284279; 
}

Hey all
I'm having a little trouble with my web site, which I have been attempting to make "css-based" and "tableless." The problem that I am having is that there are quite a few small but frusterating differences between how the page displays in IE and Mozilla Firefox (i tend to beleive that ie, the non-standards browser is wrong).

Anyway, to the problem. If you view this site:

http://trinity.killagraphix.com/index.php
Css: http://trinity.killagraphix.com/theme.css (i didn't want to paste the whole file as it is quite large)

In Internet explorer, you get a small margin between the Header image, and the rest of the content. This is not here viewing the same page in Mozilla.

Also, in both browsers the menu background image is slightly above the center of the line. I think this is because the image is not as big as the line size, is there a way to make the image (which is a css background property) appear vertically-aligned to the center?

Thanks in advance, sorry for the post length

Hello all,

I feel like such a dumb a$$ for not figuring this out...

I have a div with ID head and width 100%; In that div there are 4 elements, 2 images and two header ( h1 and h2 ) elements. The two gifs are positioned absolutely one top:0;left:0; and one top:0;right:0;

The parent div is set to min-height & height of 160px; The height of the images.

In firefox they display where you would expect them, top right and left corners. In ie 5,5.5, 6 and 7 they just don't display at all.

Here is some code:
CSS Code:
Original - CSS Code #head{ text-align:center; clear:both; width:100%; min-width:100%; max-width:100%; min-height:160px; height:160px; } #img1{ position:absolute;top:0;left:0; } #img2{ position:absolute;top:0;right:0; } #head1{ clear:none; width:100%; min-width:100%; max-width:100%; } #head2{ clear:left; margin:0; width:100%; min-width:100%; max-width:100%; }

  

 #head{


     text-align:center;


     clear:both;


     width:100%;


     min-width:100%;


     max-width:100%;


     min-height:160px;


     height:160px;


 }


 #img1{


     position:absolute;top:0;left:0;


 }


 #img2{


     position:absolute;top:0;right:0;


 }


 #head1{


     clear:none;


     width:100%;


     min-width:100%;


     max-width:100%;


 }


 #head2{


     clear:left;


     margin:0;


     width:100%;


     min-width:100%;


     max-width:100%;


 } 

HTML4strict Code:
Original - HTML4strict Code <link type="text/css" rel="stylesheet" href="default.css" /> </head> <body> <div id="head"> <img id="img1" src="img1.gif" alt="an animated gif"> <h1 id="head1">h1</h1> <h2 id="head2">h2</h2> <img id="img2" src="img2.gif" alt="an animted gif"> </div>

  

 <link type="text/css" rel="stylesheet" href="default.css" />


 </head>


 <body>


 <div id="head">


 <img id="img1" src="img1.gif" alt="an animated gif">


 <h1 id="head1">h1</h1>


 <h2 id="head2">h2</h2>


 <img id="img2" src="img2.gif" alt="an animted gif">


 </div> 

I'm working on a new site, and having trouble getting the CSS to work with IE7 (big surprise), it works fine in Firefox (big surprise).

You can see the site he http://www.gocubit.com
CSS he http://www.gocubit.com/styles.css
IE6 stylesheet he http://www.gocubit.com/ie.css

The problem is very simple, so let me explain what I have setup, and what is happening.

I have 4 backgrounds I want to display, in the following containers:

body - this contains a tiling wall texture

#outerWrapper - this contains a small non-repeating bg image that puts graffiti in the upper right corner on top of the wall bg

#innerWrapper - same as outerWrapper, but puts a graffiti bg in top left

#contentWrapper - this div contains the main display area, and displays a vertically repeating paper background that should fill the screen from top to bottom (on top of the wall and two graffiti backgrounds)

I've tried my best to get this to display right, but have one of two problems depending on how it is set up. In all cases, BODY and HTML are set to 100% height.

SCENARIO #1 (same problem in FF or IE7):
I set outerWrapper, innerWrapper, and contentWrapper to min-height: 100%.

This doesn't extend the paper background all the way to the bottom on pages that don't fill the screen with content (see the CONTACT page).

SCENARIO #2 (works in FF):
I set outerWrapper, innerWrapper to height: 100%, and contentWrapper to min-height:100%.

This actually appears to work on first glance (and does work in FF). But, if you go to a page with a lot of content (see the SERVICES page) where you need to scroll, what happens is that there is no paper BG in the area that is off screen. The content "below the fold", when scrolled to, has no paper BG. It's setting the height of the div to the screen height, filling in the BG, and any content below that height has no BG (only the wall BG in the body element).

Code:

html { height: 100%; }

body {
	background-color: #8d7c51;
	background-image: url(images/bgStucco.jpg);
	font-size: 12pt;
	margin: 0;
	padding: 0;
	height: 100%;
}


#outerWrapper {
	background-image:url(images/bgStucco_tr.jpg);
	background-repeat:no-repeat;
	background-position: right top;
	width: 100%;
	margin: 0;
	padding: 0;
	min-height: 100%;
}

#innerWrapper {
	background-image:url(images/bgStucco_tl.jpg);
	background-repeat:no-repeat;
	min-height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

Code:

<body><div id="outerWrapper"><div id="innerWrapper"><div id="contentWrapper">
CONTENT GOES HERE
</div></div></div></body>

Any ideas on how to get this to work?

Hello,

I am trying to make a website www.jazzsurlaplage.ch/2007/home.php (sorry for the french script over there) Here is the issue :

One Firefox or IE 7, the partners box appears to the right side of the page, whereas on IE 6, it appears way at the bottom.

you can check out the html source on the page itself (I've written it, not generated, so it must be pretty easy to get) and the css is over here : www.jazzsurlaplage.ch/2007/style.css


Here is the part in the file where I define the side box :

Code:

/*===========SIDE NAVIGATION==================*/

#sideinfo{
	left:600px;
	width:200px;
	position: relative;
	margin-top:3px;
	margin-bottom:0px;
}

.sidebox{
	margin:0px 0px 0px 0px;
	padding:15px 0px 0px 0px;
	width:200px;
	height:30px;	
	position:relative;
	background:transparent url(images/sidehead.jpg) left top no-repeat;
}

.sidebox .sidebody{
	position:relative;
	padding:0px 10px 0px 10px;
	background:url(images/sidebody.jpg) left top repeat-y;
	margin-bottom:0px;
	text-align:center;
}

.sidebox .sidefooter{
	position:relative;
	height:30px;
	width:200px;
	margin-top:0px;
	background:url(images/sidefoot.jpg) left top no-repeat;
}
/*============================END SIDE BLOCK===========================*/

/

Here is the part in the html file where I insert the box :

Code:

<?
//sidebar
	echo '<div id="sideinfo">';
		echo '<div class="sidebox">';
			echo '<div class="sidebody">';
			echo '<img src="images/partenaires.jpg" />';
			echo '<br />';
			echo '<img src="images/partenaires/arg.jpg" />';
			echo '<br />';
			echo '<img src="images/partenaires/chatnoir.jpg" />';
			echo '<br />';
			echo '<img src="images/partenaires/coheran.jpg" />';
			echo '<br />';
			echo '<img src="images/partenaires/heineken.jpg" />';
			echo '<br />';
			echo '<img src="images/partenaires/semeuse.jpg" />';
			echo '<br />';
			echo '<img src="images/partenaires/jardinnerie.jpg" />';
			echo '<br />';
			echo '<img src="images/partenaires/raiffeisen.jpg" width="130"/>';
			echo '<br />';
			echo '<img src="images/partenaires/aurelys.jpg" width="130"/>';
			echo '<br />';
			echo '<img src="images/partenaires/mb.jpg" width="130"/>';
			echo '</div>';
			echo '<div class="sidefooter"></div>';
		echo '</div>';
	echo '</div>';
?>

What do I do, and where can I get more info on these kind of issues ?

Thanks,
Manojo

Hey, at my site: http://www.optimumnutrition.com/products in IE/6 I am having a problem with the last side box in the left column. You can see a gap between the link to conditions of use and the curved bottom of the box.

Anyone see where this is coming from?

Thanks,

Ryan

I am trying to organize some DIV's like a table, because the data being rendered is a series of footer menu's, not a table.

It works fine in Firefox 7 alpha Google Chrome 12 Opera 11.50 Safari 5.1
But... as usually, Internet Explorer 8 and Internet Explorer 9 suck the big one and display my list as a straight vertical list, where the rest display it horizontally. Anyone have any recommendations?

my css code:
Code:

div#footer-menu		{
						display:table;
						width:960px;
					}
					
div#footer-menu-row	{
						display:table-row;
	
					}
div#footer-menu-row div.footer-menu-cell {
						display: table-cell;

					}

in my HTML I have
Code:

				<div id="footer-menu">
					<div id="footer-menu-row">
						<div class="footer-menu-cell">
							<h2><a href="#">Cat 1</a></h2>
							<ul>
								<li><a href="#">Sub 1</a></li>
								<li><a href="#">Sub 2</a></li>
								<li><a href="#">Sub 3</a></li>
								<li><a href="#">Sub 4</a></li>
								<li><a href="#">Sub 5</a></li>
							</ul>
								
						</div>
						<div class="footer-menu-cell">
							<h2><a href="#">Cat 2</a></h2>
							<ul>
								<li><a href="#">Sub 1</a></li>
								<li><a href="#">Sub 2</a></li>
								<li><a href="#">Sub 3</a></li>
								<li><a href="#">Sub 4</a></li>
								<li><a href="#">Sub 5</a></li>
							</ul>
						</div>
						<div class="footer-menu-cell">
							<h2><a href="#">Cat 3</a></h2>
							<ul>
								<li><a href="#">Sub 1</a></li>
								<li><a href="#">Sub 2</a></li>
								<li><a href="#">Sub 3</a></li>
								<li><a href="#">Sub 4</a></li>
								<li><a href="#">Sub 5</a></li>
							</ul>
						</div>
						<div class="footer-menu-cell">
							<h2><a href="#">Cat 4</a></h2>
							<ul>
								<li><a href="#">Sub 1</a></li>
								<li><a href="#">Sub 2</a></li>
								<li><a href="#">Sub 3</a></li>
								<li><a href="#">Sub 4</a></li>
								<li><a href="#">Sub 5</a></li>
							</ul>
						</div>						
						<div class="footer-menu-cell">
							<h2><a href="#">Cat 5</a></h2>
							<ul>
								<li><a href="#">Sub 1</a></li>
								<li><a href="#">Sub 2</a></li>
								<li><a href="#">Sub 3</a></li>
								<li><a href="#">Sub 4</a></li>
								<li><a href="#">Sub 5</a></li>

							</ul>
						</div>						
						<div class="footer-menu-cell">
							<h2><a href="#">Cat 6</a></h2>
							<ul>
								<li><a href="#">Sub 1</a></li>
								<li><a href="#">Sub 2</a></li>
								<li><a href="#">Sub 3</a></li>
								<li><a href="#">Sub 4</a></li>
								<li><a href="#">Sub 5</a></li>
							</ul>
						</div>		
						<div class="footer-menu-cell">
							<h2><a href="#">Cat 7</a></h2>
							<ul>
								<li><a href="#">Sub 1</a></li>
								<li><a href="#">Sub 2</a></li>
								<li><a href="#">Sub 3</a></li>
								<li><a href="#">Sub 4</a></li>
								<li><a href="#">Sub 5</a></li>
							</ul>
						</div>						
					</div>
				</div>

Code:

<!-- #Include virtual="/webcontent/doctype.txt" -->
<html>
<head>
<!-- #Include virtual="/tagsm.htm" -->
<!-- #Include virtual="/webcontent/cssinclude.htm" -->
<title>EPIC Performance</title>

<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/nav.js">
</SCRIPT>
</head>
<body>
 
<div class="wrapper">
	<div class="lefthandnav">
		<div class="headerimgleft">

			EPIC LOGO
		</div>

	<div class="bl"><div class="br"><div class="tl"><div class="tr">
			<a href="index.shtml">Home </a><br/>
			<a href="login.asp">Log In </a><br/>
			<a href="shopping.asp">Products</a><br/>
			<a href="history.shtml">History</a><br/>

			<a href="podcasts.shtml">Podcasts</a><br />
			<a href="news.asp">News</a><br />
			<a href="faq.asp">FAQ</a><br />
			<a href="contact.shtm l">Contact Us</a><br/>

				
</div></div></div></div>
<div class="clear">&nbsp;</div>
		
		
	<div class="bl"><div class="br"><div class="tl"><div class="tr">

			<b>Sponsors</b><br/><br/>
			
				<p><img src="/images/PowerLift_logo.jpg"></p>
				<p><img src="/images/Uesaka_logo.jpg"></p>
</div></div></div></div>
<div class="clear">&nbsp;</div>


<div class="bl"><div class="br"><div class="tl"><div class="tr">
			<b>EPIC Athletic Performance Inc.</b><br/>
			P.O Box 61689<br/>

			Colorado Springs, CO 80906<br/>

			<b>epicindex.com</b>
</div></div></div></div>
<div class="clear">&nbsp;</div>


	</div>

	<div class="righthandnav">
		<hr class="topline"/>

			<h2 class="headingtitle">Evaluate and Improve Athletic 
Performance</h2>
		<hr class="topline"/>

		<div id="menu">
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu5');">Testing</dt>
			<dd id="smenu5">
				<ul>
					<li><a href="#">Talent Identification</a></li>
					<li><a href="#">Big 33</a></li>
					<li><a href="#">Test Procedures</a></li>
					<li><a href="#">Test Equipment</a></li>
					<li><a href="#">Test Card</a></li>
				</ul>
			</dd>
	</dl>
	

	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Evaluation </dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Five Star Rating</a></li>
					<li><a href="#">Vertical Jump Index</a></li>
					<li><a href="#">Talent Identification Index</a></li>
					<li><a href="#">Individual Index</a></li>
					<li><a href="#">Multiple Test History</a></li>
					<li><a href="#">Team Data</a></li>
				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Goals</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Setting Goals</a></li>
					<li><a href="#">Six Weeks</a></li>
					<li><a href="#">High School</a></li>
					<li><a href="#">College</a></li>
					<li><a href="#">Pyramid Poster</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Program</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Selecting a Program</a></li>
					<li><a href="#">Strength Disk</a></li>
					<li><a href="#">Books</a></li>
					<li><a href="#">CD's</a></li>
					<li><a href="#">Videos</a></li>
	<li><a href="#">Posters</a></li>
	<li><a href="#">Nutrition</a></li>
	<li><a href="#">Make the Play Clinic</a></li>
	<li><a href="#">Performance Speakers</a></li>
	<li><a href="#">Program Equipment</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Equipment</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Program Equipment</a></li>
					<li><a href="#">Testing Equipment</a></li>
					<li><a href="#">Clothing</a></li>
				</ul>
			</dd>
	</dl>
	
</div>



	</div>

	
</div>

</body>
</html>

the problem is when you look at the website in mozilla and IE

I like the way it looks in mozilla but when you look in IE the top navigation is not aligning properly

there is a problem with the HR tag

here is the CSS code
Code:

body
{
margin: 0;
padding: 0;
font-family: arial; 
color: #000;
}
.wrapper {
width: 900px;
height:605px;
}

.lefthandnav
{
float: left;
width: 145px;
background-color:white;
padding:0px 5px 0px 0px;
}
.righthandnav
{
float: left;
width: 745px;
background-color:white; 
padding: 0px 0px 0px 5px
}

.headerimgleft
{
height:75px;
}

.clearing
{
clear:both;
}

.headingtitle
{
 font-weight: bold;
font-size: 15;
text-align:center;
}

.topline
{
margin: 0;
padding: 0;
width:94.3%;
margin:0px;
color: #CC0000;
background-color: #CC0000;
height: 5px;

}
.bl {background: url(bl.gif) 0 100% no-repeat #e68200;}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; text-align:center;padding:5px}
.clear {font-size: 1px; height: 1px}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
padding:5px 0px 0px 0px;
}
#menu dl {
float: left;
width: 8.7em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: left;
font-weight: bold;
background: #CC0000;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

a {text-decoration: none;
color: black;
color: #222;
}

any idea why its doing like that

todd

intrigue.net -- please copy and paste (link not allowed here since I'm a new member)

HTML & CSS both validate with no errors. The page displays correctly in Opera and Firefox, but in IE...

7+ does not color the menu (white), making it invisible
<7 displays only half of the page

I would love any assistance at all in getting this resolved (aside from bombing MS)

Thanks in advance.

-=-TS