CSS - Menu Great In Ie7, Way Off In Ff And Safari

Hi,

Here's my demo site: http://www.alpha-dreams.com/demo5/

Why is IE 7 off? I've looked everywhere. Do I need a stylesheet for IE 7?

Thanks

Alrighty, my friend made this menu: phreakyourgeek.com/tf2/original which looks great in Firefox/Opera. However, Internet Explorer absolutely rapes it and it comes out all whacked up. He gave me the task of redesigning it for IE.

I am not a CSS whiz, but I made it this far: phreakyourgeek.com/tf2 which needs some help.

-Background does not move when hovered over.
-The menu is aligned along the left side, they need to align along the right

CSS for my menu is embedded in the source, CSS for original is in phreakyourgeek.com/tf2/original/stylesheet.css

Please help me make any adjustments to either of them; there must be a way to make the first IE compatible. Thank you for your time.

EDIT: I was informed upon posting that links were not allowed for new posts; I have removed the "www." preventing such restriction. I disagree with your rule; my links are legit and without them my visit would be useless.

Haven't checked on IE for Windows, but here are my issues on the mac:

my list items Elixir Volume 1, 2, etc are not left-aligned in IE and I cannot figure out why! my arrow list image is not showing up in IE the signup form fields are not formatted properly in IE. they look fine in Firefox though.
the url:
http://www . nectardesign . com

the source code:

Code:

<td valign="top" align="left" width="230">
	<span class="hometext"><b>RECENT ELIXIR NEWSLETTERS</b></span><br /><br />

	<span class="hometext"><ul><li><a href="/blog/2008/04/04/elixir" rel="bookmark" title="Elixir (Volume 1, Issue 3)">Elixir (Volume 1, Issue 3)</a><br />Going with the Lateral Flow...</li><li><a href="/blog/2008/03/19/ekuxur-volume1-issue-2" rel="bookmark" title="Elixir (volume1, Issue 2)">Elixir (volume1, Issue 2)</a><br />Chilling for Recovery...</li><li><a href="/blog/2008/03/05/39" rel="bookmark" title="Elixir (volume1, Issue 1)">Elixir (volume1, Issue 1)</a><br />Making Children Healthier with Design...</li></ul></span>
        <span class="hometext">Receive our monthly design-industry newsletter <a href="http://www.nectardesign.com/blog/index.php?s=elixir">Elixir</a> via email:</span><br />

<div class="ddfmwrap"><form class="ddfm" method="post" action="http://www.nectardesign.com/" enctype="multipart/form-data">

<p class="fieldwrap"><label for="fm_name">Name</label><input class="fmtext" type="text" name="fm_name" id="fm_name" value="" /></p>

<p class="fieldwrap"><label for="fm_email">Email</label><input class="fmtext" type="text" name="fm_email" id="fm_email" value="" /></p>

<p><input type="hidden" name="MAX_FILE_SIZE" value="1000000" /></p>
<div class="submit"><input type="submit" name="form_submitted" value="Join List" /></div>

</form></div>

and the css:

Code:

.hometext {
font-size: 12px;
/*width: 230px;*/
letter-spacing:.02em;
padding: 0 10px 0 0px;
background: #fff;
color: #7F7F7F;
text-align: left;
}

.hometext a {
color: #FE6E18;
}

.hometext a:hover {
color: #7F7F7F;
}

.hometext ul {
list-style-image: url(http://www.nectardesign.com/images/arrow.gif);
margin-left:3px;
margin-top:0px;
padding:0 0 0 15px;
clear:both;
text-align: left;
}

.hometext li {
padding:0 0 5px 0;
clear:both;
text-align: left;
width: 230;
]

I'm pretty green with CSS (okay, ALL of html )

I used a template from Mollio.org, then modified it, problem is things just dont look right in IE.

url:
http://www.m87-blackhole.org/foo/

css file:
http://www.m87-blackhole.org/foo/css/wushuwest.css

js
http://www.m87-blackhole.org/foo/js/common.js

The biggest problem is the handling of png+transperancy, I added a fix for it in common.js but it doesnt seem to work very well. Also, the head image, in firefox it has a width of 800, which is what I want, but in IE it spans the entire page, how can I fix that?

Any ideas, pointers or resources?

Thanks,
Mike

I figured it out, I think.

It would seem I am always "taking" from this sites and never giving much back, but not today. I had posted a message a few days ago which generated a reply with a link to this site - http://www.sitepoint.com. While I was there, I requested a sample download of some chapters of a book. It was in the book "Html without tables" or something like that they pointed me to this sample site - www.footbagfreaks.com What an awesome way to learn css layout. I checked it in both IE and NS and it was pefect. There are three .html files and one style sheet. I know I will be studying this code if only to get the basics down. I hope this works for you.

EDIT: solved, can be closed

Essentially it lines up correctly but when I view it in firefox it doesn't. How should I tweak my code to make this work?

Here is the url:

http://www.westcadet.com/designs/index.htm

Here is the CSS code snippet that is making this all work

Code:

/*--------------- Navigation Layout Begin ---------------*/
#HeaderTopLeftInnerRight {
	width:618px;
	height:100px;
	vertical-align:top;
}

#NavMenu {
	width:600px;
	padding-top:22px;
	
}

#NavMenu ul {
	list-style: none;
	margin-left:22px;
}

#NavMenu li {
	float: left;
	padding-left:8px;
	padding-right:8px;
}

#NavMenu li a {
	color:#FFFFFF;
	text-decoration: none;
}

#NavMenu li a:hover {
	color:#EB2A2D;
}

.NavChosen {
	background-color: #858181;
	color:#FFFFFF;
}

Check out this site (WIP)... the issue specifically is with the Screenshots table...

Firefox displays exactly like I would expect it to, screenshots contained within a div, with overflow: auto... looks great in firefox, nicely aligned, no vert. scrollbar... perfect.

Now look at it in IE... looks like it is automatically expanding to include ALL 10 screenshots, which stretches the whole page...

I've done a little research on this, but I can't find a way to get IE to behave... tried word-wrap: break word (as suggested on another site), but this fails as I'm using images.

What makes IE decide to expand the <div> tag automatically.

Here's the code pertaining just to the screenshots section.

Any help or advice you might give me would be appreciated, I've spent a long time developing the site in css and have only opted to use tables for this particular page... thanks!

the CSS:
---------------------------------------------------------
.screenshots_table {
width: 100%;
border: 1px solid #000;
backgroung-color: #061840;
line-height: 15px;
}

#screenshots_table_overflow {
overflow: auto;
padding: 0px;
display: block;
}
---------------------------------------------------------

the html:
---------------------------------------------------------
/* --- START SCREENSHOTS CONTAINER --- */
// establish the number of screens in the directory
$dir_path = "Game Archive/" . $platform_name . "/". $title . "/Screen Captures/";
$screen_count = count (glob ($dir_path . "screen*.jpg"));

echo"<td colspan='5'>";
echo"<table border='0' cellpadding='0' cellspacing='0'>";
echo"<tr>";
/* start screenshots details tab */
echo"<td>";
echo"<table border='0' cellpadding='0' cellspacing='0'>";
echo"<tr>";
echo"<td><img border='0' width='38px' class='display_block'";
echo"src='images/tab_left.jpg'></td>";
echo"<td width='100%' background='images/tab_bg.jpg'></td>";
echo"<td><img border='0' class='display_block' width='70px'";
echo"src='images/tab_screenshots.jpg'></td>";
echo"</tr>";
echo"</table>";
echo"</td>";
/* end screenshots tab */
echo"</tr><tr>";

/* start screenshots */
echo"<td>";
echo"<div id='screenshots_table_overflow'>";
echo"<table width='100%' border='0' class='screenshots_table'";
echo" cellpadding='0' cellspacing='0'>";
echo"<tr>";

// iterate through loop and display linked screenshots as req'd
for ($i = 1; $i < $screen_count + 1; $i++) {
echo"<td cellspacing='1' valign='top' bgcolor='#04112d'>";
echo "<a href='Game Archive/" . $platform_name . "/" .
$title . "/Screen Captures/screen" . $i . ".jpg' rel='lightbox'
class='horizontal'><img border='0' class='border'
src='Game Archive/" . $platform_name . "/" .
$title . "/Screen Captures/small" . $i . ".jpg' /></a>";
echo"</td>";
}

echo"</tr>";
echo"</table>";
echo"</div>";
echo"</td>";
/* end screenshots */
echo"</tr></table>";
echo"</td>";
/* --- END SCREENSHOTS CONTAINER --- */
---------------------------------------------------------

Yesterday I was able to get my page to validate with strict XHTML and get it looking exactly how I want it to in Firefox:

http://www . restonheights . com/

However, the design falls apart a bit in IE6. Viewing in it IE6 causes the feedback div to grow causing a left-right scroll bar. Scary things also happen if you reduce the width of your browser. Again, it behaves perfectly in FF.

Can anyone recommend an IE hack that would get that feedback div to behave?

I'm beating my head against the wall on this one and could use some expert help. In full disclosure, I am using a css template site I found on a open source template site. The site renders fine in Firefox and Opera, but is problematic with some pages.


Here is one of the pages I am having trouble with in IE:

http://worldwidemediaproject.com/tvrating.php

You'll notice that in IE it appears like there are a bunch of <br>'s after the TV Stations header. This does not appear in either Firefox or Opera.

The strange thing is this one appears fine in IE:

http://worldwidemediaproject.com/tvrating.php?id=71&language=all&genre=all

but this one doesn't:

http://worldwidemediaproject.com/tvrating.php?id=216&language=all&genre=all

The only real difference is that the table size is larger in the pages that have display problems.

Is there some kind of IE hack that I need to apply?


Many thanks....

Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page:

Code:

<body>
	<div id="issingle">
	<div id="container">
		<div id="sitename">
			<a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a>
		</div>
	<div id="mainmenu">
		<ul>
			<!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>-->

			<li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li>
			<li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li>
			<li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li>

			<li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li>
		</ul>
	</div>

And here is the css pertaining to that code:
Code:

body {
	background:#fff;
	color:#303030;
	font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
	margin:0 auto;
	padding:0;
	text-align:center;
	width:850px;
}
#container {
	position: relative;
	background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
	color:#303030;
	border:1px solid #C8C8C8;
	margin:10px;
/*	padding:10px;*/
	text-align:left;
	height:598px;

}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
	position: absolute;
	right: 10px;
	top: 27px;
	margin-right: 5px;
}

#mainmenu li.page_item {
	float:left;
/*	height:35px;*/
	list-style:none;
	margin:0;
	padding:0;
}

#mainmenu a {
	border-right:1px solid #b0b0b0;
	color:#808080;
	display:block;
	margin: 0;
	padding: 1px 8px;
	text-transform:lowercase;
}

Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all.

Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info.

Thank you!!
J

Fun title

anyway - pretty straight forward question :

essentially i have 2 divs, we'll say Div A and div B -- now heres their relation :

Code:

<div id="a"> 
  <div id="b">
  </div>
</div>

=====
css info : 

/*DIV A*/

#pageContent {  
position : absolute;
display : block;
top : 6.75em;
left : 38em;
width : 340px;
overflow: hidden;
height : 19em;
z-index: 2;
font-family :arial;
font-size : 12px;
color : #c8c8c8;

}

/* DIV B */

#scrollo { 
overflow: scroll;
width : 150px;
height : 150px;
margin: .1cm;
z-index: 1;
font-family :arial;
font-size : 12px;
color : #c8c8c8;
}

in my CSS file, DIV A has a specific Width / Height set -- AND -- an "overflow" setting of "hidden" ( aka hides anything that exceeds its boundries - obviously. )

DIV B has it's overflow set to "scroll"

OK WHY ?

essentially I wish to hide the horizontal scroll bar (since its of no use).


THE CATCH 22 :

Safari : This works fine.

FireFox 1.5.x : Horizontal Scroll bar is still displayed.


3 cheers for standards right? Anyway - I was curious if anyone has encounted this, and if so, knows a work around .

Thanks !

edit: The child being Z-indexed lowwer then the parent was just a "logic attempt" on my part - it does not change the outcome if its zindexed to the same or high lever.

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.


Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; } 
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; } 
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; } 
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; } 
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; } 





PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul> 





<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page