CSS - How To Fix Dumb Space Appearing In Ie And Not Ff

Hello, for some reason my CSS XHTML web site shows an Iframe in the body of the body. here's the link:http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php

I've fiddled with the widths and container widths with no luck.

Can anyone tell me why this is happening?

thanks
-Sean

example, look in middle of page (blank space)

it is supposed to be in the middle, but instead there is a blank space. no, the ad is not new, over 3 months old. i changed something and forget what (a while ago), now i just noticed this.

heres the code:
php Code:
Original - php Code $i = 0; $gamesperpage = 50; $adplaced = false; // display game boxes $a = 2; foreach ($games as $game) { display_gamebox('float='.$a.'&display=rating', $game); if($a == 2) $a = 1; else $a++; if(!$adplaced && $i >= count($games)/2 && $a == 2) { echo ' <div class="clearboth clearafter aligncenter"> <script type="text/javascript"> <!--google_ad_client = "pub-5687621631516277"; /* 468x60, created 3/18/08 */ google_ad_slot = "1797650152"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>'; $adplaced = true; } $i++; } // end of foreach game echo " <div class='clearboth'><hr></div> ";

  

 $i = 0;


         


         $gamesperpage = 50;


         $adplaced = false;


         


         // display game boxes      


         $a = 2;


         


         foreach ($games as $game) {


             display_gamebox('float='.$a.'&display=rating', $game);


             if($a == 2) $a = 1;


             else $a++;


             


             if(!$adplaced && $i >= count($games)/2  && $a == 2) {


                 echo '


                 <div class="clearboth clearafter aligncenter">


                     <script type="text/javascript">


                     <!--google_ad_client = "pub-5687621631516277";


                     /* 468x60, created 3/18/08 */


                     google_ad_slot = "1797650152";


                     google_ad_width = 468;


                     google_ad_height = 60;


                     //-->


                     </script>


                     <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js">


                     </script>


                 </div>'; 


                 $adplaced = true;


             }


             $i++;


         } // end of foreach game


         


         echo "


         <div class='clearboth'><hr></div>


         "; 

I have a div called #Nav and inside it I have created a horizontal list. The issue is unless I set the height of the Nav div to like 40px the text shows up below the div OR the entire Div gets shifted down. Its like there is a margin or padding somewhere by default that i have not unset.

Code:

<div id="header">
	<div id="wrapper">
    	<div id="navcol1"></div>
		<div id="navcol2">Insert List with Links </div>
	</div>
</div>

<div id="nav">
    <center>
		<ul class="nav">
  			<li class="nav"><a href="#home" class="nav">XRPpro</a></li>
  			<li class="nav"><a href="#home" class="nav">X-Ray Equipment</a></li>
  			<li class="nav"><a href="#home" class="nav">QuickSOAP Touchnotes</a></li>
        	<li class="nav"><a href="#home" class="nav">Online Courses</a></li>
  			<li class="nav"><a href="#home" class="nav">Chiro Marketing</a></li>
  			<li class="nav"><a href="#home" class="nav">Bohnology</a></li>
		</ul>
    </center>
</div>

Code:

#header {
	width:100%;
	height:160px;
	background-image:url(Images/header_background.jpg);
	margin-bottom:0px;
}
#nav {
	width:100%;
	background-color:#343434;
}
ul.nav	{
	list-style-type: none;
}
li.nav	{
	display: inline;
	margin-right:15px;
	font:"Century Gothic", Verdana, Geneva, sans-serif;
	font-size:12px;
}

As always IE woes...

Anyway I have a design that I'm currently reworking into a css/div positioned site.

I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about.

The HTML is:
Code:

<div id="container">
  <div id="top"></div>
  <div id="brands">
   ....stuff here....
  </div>
  <div id="slides"></div>  <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
  <div id="vert_nav">
     ....stuff here....
  </div>
</div>

CSS
Code:

/* CSS Document */

html, body {
  background: #000000;
  padding: 0px;
  margin: 0px;
  color: #FFFFFF;
}

#container {
  width: 760px;
  padding: 0px;
  margin: 0px;
}

#top {
  width: 760px;
  height: 239px;
  background: url(../images/top.jpg) top left no-repeat;
}

#brands {
  width: 760px;
  height: 31px;
}

#slides {
  width:  667px;
  height:  350px;
  float: left;
  background: url(../images/slides.jpg) top left no-repeat;
T}

#vert_nav {
  width: 93px;
  height: 350px;
  float: right;
}

should.jpg is how the page is supposed to look.

shouldnt.jpg is how it is appearing in IE.

I'm playing around with web development after quite a lengthy break. I wrote the home page out by hand and had attempted to validate, fixed the errors and repeated until it validated at w3.org. When I copied the code from the first page and removed the right side of the table ( it was 3 columns on the main page but I only wanted 2 columns for the "template page" ). When viewing the template page in IE the table is off center ( all the way to the left ) and the links have unwarranted line spaces between them.

I can understand removing a column might affect the alignment of a table ( or at least, this is not what I'm worried about so much ) but the alterations to the navigation pane are baffling. Specifically, because the nav pane is inserted by the same php script on both the working, and dysfunctional page. The css is also the same as they are coded to pull from the specified url copy and pasted from one doc to the other as opposed to mistakenly using a css in a different directory than the working one.

The working page is:
Code:

<html>
<head>
<title> Under Construction </title>
<link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<table class="main">

<tr class="header">
	<th class="left"><div  id="img"></div></th>
	<th class="center"><h1 class="MainHeading">Brendan Walton</h1></th>
	<th class="right">&nbsp;</th>
</tr>
<tr class="body">
	<td>
		<div id="navMenu">
<ul class="navlist">
<li>
<div class="navhead" onclick='IsOpen(0)'>Literature</div>
<ul class="navlist" id="sm0" style="display:block;">
<li><a href="" class="navlink">Guides</a></li>
<li><a href="" class="navlink">Web Reference</a></li>
<li><a href="" class="navlink">Desktop Reference</a></li>
<li><a href="" class="navlink">External Reference</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick='IsOpen(1)'>Fun and Random</div>
<ul class="navlist" id="sm1" style="display:none;">
<li><a href="" class="navlink">Videos</a></li>
<li><a href="" class="navlink">Images</a></li>
<li><a href="" class="navlink">Music</a></li>
<li><a href="" class="navlink">Random Page</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick="IsOpen(2)">Code Base</div>
<ul class="navlist" id="sm2" style="display:none;">
<li><a href="code_base_sample2.html" class="navlink">Java</a></li>
<li><a href="code_base_sample2.html" class="navlink">C++</a></li>
<li><a href="code_base_sample2.html" class="navlink">PHP</a></li>
<li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li>
</ul>
</li>
<li><div class="navhead" onclick="IsOpen(3)">General</div>
<ul class="navlist" id="sm3" style="display:none;">
<li><a href="" class="navlink">About Us</a></li>
<li><a href="" class="navlink">Don't Like the Look?</a></li>
<li><a href="" class="navlink">Community</a></li>
<li><a href="" class="navlink">Site Map</a></li>
</ul>
</li>
</ul>
</div>
<div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div>
<script type="text/javascript" src="javascript/menuwork.js"></script>
	</td>
	<td>
		<h4 class="heading">Coming Soon!!</h4>
		<hr class="pagebreak" />
		<p class="cblock"> This website will eventually have content, for now, just enjoy the pretty colors and the fancy, interactive menu to the left...</p>
		<h4 class="heading">Update: April 6, 2010</h4>
		<hr class="pagebreak" />
		<p class="cblock"> I have changed the navigation to the left to reflect the content the site will eventually house. Additionally I have begun styling how the codebase will eventually display it's information. To see a sample of the code output simply click any of the codebase links to the left.</p>
		<p class="cblock"> On a personal note, it has recently come to my attention that Dom's birthday was actually the second of April, not the fourth. I apologize for the tardy wishes. </p>
		<h4 class="heading">Update: April 4, 2010</h4>
		<hr class="pagebreak" />
		<p class="cblock"> Still working on the style for the website, It's coming along, albeit slowly... Also, even though you're never going to see this, Happy birthday Dom 8-)</p>
	</td>
	<td><img src="images/Brendan.jpg" alt="Brendan" id="portrait" />
	<hr style="width:150px;" />
	<p class="iblock"> "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding"</p>
	<hr style="width:150px;" />
	<a href="aboutus.php"> About Us </a>
	</td>
</tr>
<tr >
	<td>&nbsp;</td>
	<td>
		<!-- footer removed for containing urls -->
	</td>
	<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

The dysfunctional page is:
Code:

<!-- XHTML 1.1 -->

<!-- Document Start -->
<html>

<!-- Head -->
<head>

<!-- Title -->
<title>  </title>

<!-- Style Sheet -->
<link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" />

<!-- Charset UTF-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- PHP Includes -->
</head>
<!-- End Includes -->
<!-- Body -->
<body>

<!-- Main Table -->
<table class="main">
<!-- First Row - Header -->
<tr class="header">
	<!-- Start Banner -->
	<th class="left"><div  id="img"></div></th>
	<th class="center"><h1 class="MainHeading">Brendan Walton</h1></th>
	<!-- End Banner -->
</tr>
<!-- End First Row -->
<!-- Second Row - Content -->
<tr class="body">
	<td>
		<div id="navMenu">
<ul class="navlist">
<li>
<div class="navhead" onclick='IsOpen(0)'>Literature</div>
<ul class="navlist" id="sm0" style="display:block;">
<li><a href="" class="navlink">Guides</a></li>
<li><a href="" class="navlink">Web Reference</a></li>
<li><a href="" class="navlink">Desktop Reference</a></li>
<li><a href="" class="navlink">External Reference</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick='IsOpen(1)'>Fun and Random</div>
<ul class="navlist" id="sm1" style="display:none;">
<li><a href="" class="navlink">Videos</a></li>
<li><a href="" class="navlink">Images</a></li>
<li><a href="" class="navlink">Music</a></li>
<li><a href="" class="navlink">Random Page</a></li>
</ul>
</li>
<li>
<div class="navhead" onclick="IsOpen(2)">Code Base</div>
<ul class="navlist" id="sm2" style="display:none;">
<li><a href="code_base_sample2.html" class="navlink">Java</a></li>
<li><a href="code_base_sample2.html" class="navlink">C++</a></li>
<li><a href="code_base_sample2.html" class="navlink">PHP</a></li>
<li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li>
</ul>
</li>
<li><div class="navhead" onclick="IsOpen(3)">General</div>
<ul class="navlist" id="sm3" style="display:none;">
<li><a href="" class="navlink">About Us</a></li>
<li><a href="" class="navlink">Don't Like the Look?</a></li>
<li><a href="" class="navlink">Community</a></li>
<li><a href="" class="navlink">Site Map</a></li>
</ul>
</li>
</ul>
</div>
<div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div>
<script type="text/javascript" src="javascript/menuwork.js"></script>
	</td>
	<td>
		&nbsp;
	</td>
</tr>
<!-- End Second Row -->
<!-- Third Row - Footer -->
<tr>
	<td>&nbsp;</td>
	<td>
		<!-- footer removed for containing urls -->
	</td>
</tr>
<!-- End Third Row -->
</table>
<!-- End Table -->
</body>
<!-- End Body -->
</html>
<!-- End Doc -->

The css is:
Code:

body
{
 color:#333333;
 background-color:#FFFFFF;
 margin:0px;
 padding:0px;
}

hr.pagebreak
{
 width:450px;
 color:#550072;
}

.subHeading
{
 color:#8A00B8;
 font-size:18px;
}

ul.navlist
{
 display:inline;
 list-style-type:none;
 margin:0px;
 padding:0px;
}

a.navlink:link
{
 color:#FFFFFF;
 background-color:#550072;
 display:block;
 text-align:right;
 text-decoration:none;
 font-weight:bold;
 margin:0px;
 padding-right:2px;
}

a.navlink:visited
{
 color:#FFFFFF;
 background-color:#550072;
 display:block;
 text-align:right;
 text-decoration:none;
 font-weight:bold;
 margin:0px;
 padding-right:2px;
}

a.navlink:hover
{
 color:#FFFFFF;
 background-color:#8A00B8;
 text-decoration:none;
 margin:0px;
 padding-right:2px;
}

tr
{
 vertical-align:top;
}

table
{
 margin-left:auto;
 margin-right:auto;
 margin-bottom:0;
 margin-top:0;
}

table.main
{
 background-color:#FFFFFF;

}

th.left
{
 width:150px;
}

th.center
{
 width:500px;
}

th.right
{
 width:150px;
}

a.navhead:link
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

a.navhead:visited
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

div.navhead
{
 display:block;
 text-decoration:none;
 text-align:left;
 color:#550072;
 font-weight:bold;
 border-style:groove;
 margin:0px;
 padding:0px;
}

h4.heading
{
 display:block;
 margin:0px;
 padding-right:30px;
 color:#550072;
 text-indent:15px;
 text-align:right;
 font-size:24px;
}

img
{
 display:block;
 margin:0;
 padding:0;
}

p.cblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:475px;
}

p.fblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:475px;
 text-align:center;
}

.footer
{
 text-align:center;
}

#navMenu
{
 height:300px;
}

h1.MainHeading
{
 font-size:50px;
 color:#550072;
 text-align:left;
}


#img
{
 background-image:url("../images/purple-150x150-clear.jpg");
 background-repeat:no-repeat;
 height:150px;
 width:150px;
}
img.cssscriptimg
{
 display:inline;
}

#portrait
{
 width:150px;
}

p.iblock
{
 display:block;
 text-indent:15px;
 padding-left:10px;
 width:150px;
}

The navigation script is below:
PHP Code:
<?php
// This is a simple script to insert the navigation pane into every page

function echoNav ()
{
    // color changer
    //echo "<img class=\"cssscriptimg\" src=\"images/purple.jpg\" alt=\"purple\" onclick=\"LoadCss(\"purple\")\" />";
    //echo "<img class=\"cssscriptimg\" src=\"images/red.jpg\" alt=\"red\" onclick=\"LoadCss(\"red\")\ />";
    //echo "<img class=\"cssscriptimg\" src=\"images/green.jpg\" alt=\"green\" onclick=\"LoadCss(\"green\")\" />";

    // navMenu devision
    echo "<div id=\"navMenu\">\n";
    
    // Section List
    echo "<ul class=\"navlist\">\n";

    // First section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick='IsOpen(0)'>Literature</div>\n";

    // First link list
    echo "<ul class=\"navlist\" id=\"sm0\" style=\"display:block;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">Guides</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Web Reference</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Desktop Reference</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">External Reference</a></li>\n";
    echo "</ul>\n";

    // End first section
    echo "</li>\n";

    // Second Section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick='IsOpen(1)'>Fun and Random</div>\n";
    echo "<ul class=\"navlist\" id=\"sm1\" style=\"display:none;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">Videos</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Images</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Music</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Random Page</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Second Section

    // Third Section
    echo "<li>\n";
    echo "<div class=\"navhead\" onclick=\"IsOpen(2)\">Code Base</div>\n";
    echo "<ul class=\"navlist\" id=\"sm2\" style=\"display:none;\">\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">Java</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">C++</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">PHP</a></li>\n";
    echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">JavaScript</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Third Section

    // Fourth Section
    echo "<li>";
    echo "<div class=\"navhead\" onclick=\"IsOpen(3)\">General</div>\n";
    echo "<ul class=\"navlist\" id=\"sm3\" style=\"display:none;\">\n";
    echo "<li><a href=\"\" class=\"navlink\">About Us</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Don't Like the Look?</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Community</a></li>\n";
    echo "<li><a href=\"\" class=\"navlink\">Site Map</a></li>\n";
    echo "</ul>\n";
    echo "</li>\n";
    // End Fourth Section

        // End Section List
        echo "</ul>\n";

        // End navMenu
        echo "</div>\n";

    // Stats
    echo "<div class=\"navhead\" style=\"height:150px;\"><img src=\"images/stats.jpg\" alt=\"TempStats\" /></div>\n";

    // Scripts
    echo "<script type=\"text/javascript\" src=\"javascript/menuwork.js\"></script>\n";
    // echo "<script type=\"text/javascript\" src=\"javascript/LoadCss.js\"></script>\n";
}

?>




Note:
I apologize for only pasting the HTML, this is the HTML as seen by IE after scripts have been run. I would have put links but I am a new user and that appears to be restricted. Removed direct URL access to the javascripts, images, and doctypes, as a result of being a new user as well, in the actual source they are accessed by a URL to ensure that it is compatible no matter which directory the functions are called within. That being said, the javascript was never a problem, even with the display issue, the javascript functioned as expected.

Any help would be very appreciated 8-)

Hi again,

I have an issue which is only appearing in FF.

I am trying to create a footer, but it is appearing under my header and inside my content area, instead of at the bottom. I think it may be something to do with the margins. This is the code for the footer:

PHP Code:
#footer_wrapper{
width: 780px;
height: 21px;
margin: 0 auto;
background-image: url('img/footer_bg.png');
background-repeat:repeat-x;}

#footer_left{
float:left;
padding-left: 10px;}

#footer_right{
float: right;
padding-right: 10px;} 





Any ideas?

Hello, if you visit http://tombraiders.net/katie/alison/index2.html you'll see the site I'm working on. (User: letme Pass: in)

I want to put a background image within the container that all the body copy resides.

I've tried editing the CSS file, located at http://www.tombraiders.net/katie/al...tyle_screen.css under "container3" however nothing ever appears.

The image I'm trying to link right now is located under the img folder at the path img/image.jpg -- it's just a test image I want to use for now to see if I can get one working at all.

Any help would be great! Not sure why it's not showing up. Thanks

Hi all,

I'm adding drop down menus to my company's site and have it working as I'd like in Firefox and Safari but the drop downs do not appear at all on IE7/Win. I've tried a lot of different things to fix it but I think I am missing some fundamental understanding here so it's all been shots in the dark. Any tips would be greatly appreciated! Thanks in advance.

P.S. I realize the CSS might be a bit confusing at first glance - what it achieves is essentially just changing the positioning of the background image when hovered over to reveal the "hover state" of a particular menu choice.

The menu in question is the horizontal bar near the top (MBA Programs, Faculty & Research, etc.)

URL: http://rady.ucsd.edu/index-dev.html

Relevant HTML:

Code:

<ul id="nav-main" class="home">
			<li id="mba"><a href="/mba/">MBA Programs</a>
				<ul>
					<li class="first-item"><a href="/mba/fulltime/">Full-Time MBA</a></li>
					<li><a href="/mba/flex/">FlexMBA</a></li>
					<li><a href="/mba/admissions/">Admissions</a></li>
					<li><a href="/mba/careers/">MBA Career Connections</a></li>
					<li><a href="/mba/profiles/">Student & Alumni Profiles</a></li>
					<li><a href="/mba/organizations/">Student Organizations</a></li>
					<li><a href="/mba/seminars/">Professional Seminars</a></li>
					<li><a href="/mba/mentors/">Executive Mentors</a></li>
					<li class="last-item"><a href="/mba/speakers/">Executive Speakers</a></li>
				</ul>
			</li>
			<li id="faculty"><a href="/faculty/">Faculty & Research</a>
				<ul>
					<li class="first-item"><a href="/faculty/directory/">Faculty Directory</a></li>
					<li><a href="/faculty/research/">Research Areas</a></li>
					<li><a href="/faculty/seminars/">Research Seminars</a></li>
					<li><a href="/faculty/recruiting/">Faculty Recruiting</a></li>
					<li class="last-item"><a href="faculty/postdoctoral/">Postdoctoral Research</a></li>
				</ul>
			</li>
			<li id="exec"><a href="/exec/">Executive Development</a>
				<ul>
					<li class="first-item"><a href="/exec/custom/">Custom Programs</a></li>
					<li><a href="/exec/open/">Open Enrollment Programs</a></li>
					<li><a href="/exec/learn/">Learning Consortium</a></li>
					<li><a href="/exec/leadership/">Leadership Assessment</a></li>
					<li><a href="/exec/align/">Align Executive Series</a></li>
					<li class="last-item"><a href="/exec/faq/">Frequently Asked Questions</a></li>
				</ul>
			</li>
			<li id="corporate"><a href="/corporate/">Corporate Connections</a></li>
			<li id="news"><a href="/news/">News & Events</a>
				<ul>
					<li class="first-item"><a href="/news/releases/">News Releases</a></li>
					<li><a href="/news/media-coverage/">Media Coverage</a></li>
					<li><a href="/news/faculty-experts/">Faculty Experts</a></li>
					<li class="last-item"><a href="/news/newsletter/">Newsletter</a></li>
				</ul>
			</li>
			<li id="invest"><a href="/invest/">Invest in Rady</a>
				<ul>
					<li class="first-item"><a href="/invest/edge/">Corporate EDGE</a></li>
					<li><a href="/invest/venture-fund/">Dean's Venture Fund</a></li>
					<li><a href="/invest/fellowships/">Endowed Fellowships</a></li>
					<li class="last-item"><a href="/invest/chairs/">Endowed Chairs</a></li>
				</ul>
			</li>
			<li id="alumni"><a href="http://alumni.rady.ucsd.edu">Alumni Relations</a></li>
			<li id="undergrad"><a href="/undergrad/">Undergraduate</a>
				<ul>
					<li class="first-item"><a href="/undergrad/courses/">Courses</a></li>
					<li class="last-item"><a href="/undergrad/course-readers/">Course Readers</a></li>
				</ul>
			</li>
			<li id="about"><a href="/about/">About</a>
				<ul>
					<li class="first-item"><a href="/about/welcome/">Welcome</a></li>
					<li><a href="/about/staff/">Our Staff</a></li>
					<li><a href="/about/campus/">Our Campus</a></li>
					<li><a href="/about/sandiego/">Life in San Diego</a></li>
					<li><a href="/about/dean/">About the Dean</a></li>
					<li><a href="/about/athena/">Athena</a></li>
					<li class="last-item"><a href="/about/beyster/">Beyster Institute</a></li>
				</ul>
			</li>
		</ul>

Relevant CSS:

Code:

	#nav-main { width: 903px; clear: both; list-style: none; padding: 0 0 2em 0; float: left; position: relative; }
	#nav-main.home { padding-bottom: 0; }
	
		#nav-main li { float: left; padding: 0; margin: 0; text-indent: -9000px;}
		
		#nav-main li ul { position: absolute; list-style: none; }
		
		#nav-main li ul li { display: none; text-indent: 0px; }
		
		#nav-main li ul li a { font-size: 11px; line-height: 1.1; height: 20px; padding-left: 9px; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; }

		#nav-main li:hover ul li { display: block; }
		
		#nav-main ul li a { padding-left: 0px; padding-right: 12px; }
		
		#nav-main li ul li.first-item a { padding-top: 10px; }
		#nav-main li ul li.last-item a { padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; }
		
		#nav-main li ul a, #nav-main li ul a:hover { width: 150px; background: #fafafa; }
	
		#mba ul li a, #mba ul li a:hover { width: 155px; }
		#faculty ul li a, #faculty ul li a:hover { position: relative; left: 2px; width: 137px; }
		#exec ul li a, #exec ul li a:hover { position: relative; left: 4px; width: 172px; }
		#corporate ul li a, #corporate ul li a:hover { position: relative; left: 2px; width: 200px; }
		#news ul li a, #news ul li a:hover { position: relative; left: 3px; width: 117px; }
		#invest ul li a, #invest ul li a:hover { position: relative; left: 2px; width: 139px; }
		#undergrad ul li a, #undergrad ul li a:hover { position: relative; left: -1px; width: 117px; }
		#about ul li a, #about ul li a:hover { position: relative; left: -73px; width: 107px; text-align: right; }
	
		#mba a, #faculty a, #exec a, #corporate a, #news a, #invest a, #alumni a, #undergrad a, #about a { display: block; height: 34px; background: url(../images/nav.gif) no-repeat 0 0; }

		#mba a { width: 105px; }
		#mba a:hover, #mba.current a { background-position: 0px -34px; }
		#faculty a { width: 127px; background-position: -105px 0; }
		#faculty a:hover, #faculty.current a { background-position: -105px -34px; }
		#exec a { width: 152px; background-position: -232px 0; }
		#exec a:hover, #exec.current a { background-position: -232px -34px; }
		#corporate a { width: 150px; background-position: -384px 0; }
		#corporate a:hover, #corporate.current a { background-position: -384px -34px; }
		#news a { width: 107px; background-position: -534px 0; }
		#news a:hover, #news.current a { background-position: -534px -34px; }
		#invest a { width: 59px; background-position: -641px 0; }
		#invest a:hover, #invest.current a { background-position: -641px -34px; }
		#alumni a { width: 64px; background-position: -700px 0; }
		#alumni a:hover, #alumni.current a { background-position: -700px -34px; }
		#undergrad a { width: 82px; background-position: -764px 0; }
		#undergrad a:hover, #undergrad.current a { background-position: -764px -34px; }
		#about a { width: 57px; background-position: -846px 0; }
		#about a:hover, #about.current a {background-position: -846px -34px; }

Hi,
I want to make some text "appear" when hovering over a different set of text:

e.g.
The "Hover here" text is always apparent on the page. If you hover your mouse over it the "Text to appear" text...appears!

Hover here - Text to appear

How can I do this?

Thanks, Ian

Hi,

I have a drop down menu which is appearing under some flash. I have given my flash a div wrapper with a z-index of 1 and give the embed a wmode of transparent. I have given my <ul> and <li>'s a z-index of 1000, but still it appears under the flash in Chrome and IE,

Any ideas?

Thanks

I must be missing the obvious?

I have created an image that I want to tile vertically in the body of my document. So I have created a style for body in a linked css file with the following:

body {
background-image:url(image/background.gif);
background-repeat: repeat-y;
}

In Design view in Dreamweaver, the image has the desired effect and tiles no problems, however when I go to preview it in the browser, the image does not appear.

I have checked that the path of the image is correct in relation to the index.html page.

Everything is saved on the desktop just now because I am experimenting with the technique, so in desktop I have the index.html and the image file (with the background.gif) in it. Oh and the css file is on the desktop too. I have also tried embeddeding the style rule in the head of the index.html and it still wont work.

Would someone put me out of my misery please

dmlocke

Here is my code:

Code:

body { 
background-color: yellow; 
margin-left: 20%; 
margin-right: 20%; 
border: 1px dotted gray; 
padding: 10px 10px 10px 10px; font-family: sans-serif; 
}

None of the attributes such as background color, margins, border, padding are showing up when I test it out. Can someone help me?

Hey there \o/

Just joined the communitty :P seems like a really great place

well, here's the thing...
I'm currently finishing a website for my cousin and I'm having some problems with a dropdown menu.

Since I am a CSS newby I'm using a horizontal dropdown menu I found on the Internet. Until some time ago it was working perfectly but then made some changes on the site design, before there was only one "box" now I'm using 3 (one for the header and menu, one for the user area and one for the content).
When I changed the header, the submenus which are higher than the header div height (105 px) get cut.

What can I do to make the entire submenus appear?

Code:

.tabelasd {
	 position: relative;
	 height: 105px;
	 overflow: hidden;
	 background: #222222 url(http://allinstreet.com/templates/imagens/backsd.gif) repeat;
}

Here's the website: http://www.allinstreet.com
Here's the CSS file I'm using: http://www.allinstreet.com/templates/style.css
Didn't make any changes on the js code so probably that's not the problem.

Thanks in advance

Hello

I'm a newbie on this forum and have a CSS problem I could do with some help on. On this website www . glewstonecourt . com (please remove spaces as I can't post links just yet!) I've been told by the client that some website visitors are experiencing problems with the navigation..... the first few buttons are appearing fine, but then the subsequent ones aren't.... but I can't seem to replicate the problem!

Any suggestions anyone?

bren

Great forum been looking around but haven't seen anything that answers my question. I have a menu in wordpress witha drop down sub menu. The menu has a colored bar over the links that changes colors when a link is hovered or on the current page. Problem is this. The sub menu I want to be clean, but it is showing the bar over the link when one of those pages is current.

Here is the html for the sub menu: Code:

<ul class="sub-menu">
	<li id="menu-item-539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-539"><a href="http://gellyfish.com/led/portfolio/living-rooms-family-rooms/">living rooms + family rooms</a></li>
	<li id="menu-item-536" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-536"><a href="http://gellyfish.com/led/portfolio/kitchens-dining-rooms/">kitchens + dining rooms</a></li>
	<li id="menu-item-538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-538"><a href="http://gellyfish.com/led/portfolio/bedrooms/">bedrooms</a></li>
	<li id="menu-item-537" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-537"><a href="http://gellyfish.com/led/portfolio/bathrooms/">bathrooms</a></li>
	<li id="menu-item-535" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-535"><a href="http://gellyfish.com/led/portfolio/before-after/">before & after</a></li>

	<li id="menu-item-542" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-542"><a href="http://gellyfish.com/led/portfolio/commerical/">commerical</a></li>
</ul>

Here is the CSS that I cant get to stop placing the bar on it.... Code:

#access .current_page_item > a,
#access .current_page_ancestor > a {
color:#963300;
background-image:url("images/redbar.jpg");
background-position:top center;
background-repeat:repeat-x;
}

Here is the code I am trying to figure out how to stop the bar... Code:

#acess ul ul li.current-menu-item a{ background-image:none;}

I do want the red bar on the top menu, just not on the sub menu.
I messed with this a million ways and dont seem to be able to get rid of the bar on top.. Any help is greatly appreciated.