Learn VBA & Macros in 1 Week!

CSS - Css Layering Problem

Full Excel VBA Course - Beginner to Expert

Css Layering Problem	View Content

I am using two CSS/Javascript peices of software together and I am running into some problems.

Its best to take a look at the site first: http://hosted.forma3.com/olympia/ne...hp?a=Manila_Bay

When you mouse over one of the links in the block text to the left, the pop-up description displays under the block text. What I realy want to happen is have it display above the text (like this: http://hosted.forma3.com/olympia/ne...hp?a=Manila_Bay ). When I add the scroller is causes this error and I'm not sure how to sort out the layers, if thats even possible without recoding large parts of the two JS programs.

Full Excel VBA Course - Beginner to Expert

Layering Problem

Similar Tutorials

View Content

I have a CSS based page w/ a drop down menu (drop down incorporates a little javascript b/c page is being designed for IE6) but when the drop down is activated it appears behind the page content. I've tried giving the drop down ul a higher z-index then the content but it doesn't work. Any ideas?

Here is the HTML:
Code:

  	  <ul id="nav">
        <li><a href="../index.html">OpEx Home</a></li>
	    <li><a href="../teams.html" class="team">Teams</a>
            <ul>
              <li><a href="#">Change Management</a></li>
              <li><a href="#">Configuration Management</a></li>
              <li><a href="#">Continuous Service Improvement</a></li>
              <li><a href="#">Internal Controls Evaluation</a></li>
              <li><a href="#">Measurement and Analysis</a></li>
              <li><a href="#">Process and Performance Management</a></li>
              <li><a href="#">Quality Evaluations</a></li>
              <li><a href="#">Quality Review Boards</a></li>
              <li><a href="#">Release Management</a></li>
              <li><a href="#">Service Level Management</a></li>
              <li><a href="#">Solutions Delivery Methodology</a></li>
              <li><a href="#">Source Control Management</a></li>
            </ul>
        </li>
	    <li><a href="../reports.html">Reports</a></li>
	    <li><a href="../comm.html">Communications</a></li>
	    <li class="last"><a href="../contact.html">Contact</a></li>
    </ul>

and here is the relevant CSS:

Code:

#header {
	width:800px;
	height:75px;
	position:relative;;
	margin:0 auto 10px auto;
	padding:0;
}
#wrapper {
	margin:0 auto;
	text-align:center;
	padding: 10px;
	width: 780px;
	position: relative;
	z-index:100;
}
#header ul {
	margin:0px;
	padding:0px;
	list-style:none;
	float:left;
	position:absolute;
	bottom:8px;
	left:110px;
	width: 620px;
}
#header li {
	padding:0 .4em;
	float:left;
	border-right:solid 2px #FFF;
}
#header li a:link, #header li a:visited {
	display:block;
	padding:0 1em;
	color:#FFF;
	line-height:1.5em;
}
#header li a:hover, #header li a:active {
	background:#CCC;
	color:#333;
}
#header li.last {
	border:none;
}
#header li a.current:link, #header li a.current:visited, #header li a.current:hover {
	color:#333;
	cursor:default;
	background:#82D2E5;
}
#header a.team, #header a.team:visited {
	position:relative;
	padding-right:0 1.5em 0 1em;
	line-height:1.5em;
}
#header a.team:hover, #header a.team:active {
	color:#333;
	cursor:default;
	z-index:1;
}
#header ul ul {
	margin:0px;
	padding-top:10px;
	list-style:none;
	position:absolute;
	left: 135px;
	top: 20px;
	z-index:500;
	display: none;
}
#header ul ul li {
	margin:0px;
	padding:0px;
	border: none;
}
#header ul ul li a:link, #header ul ul li a:visited {
	display:block;
	width:250px;
	padding:0.4em .5em;
	line-height:1.5em;
	background:#CCC;
	color:#000;
}
#header ul ul li a:hover,#header ul ul li a:active {
	background:#82D2E5;
	color:#000;
}
#header li:hover ul, #header li.over ul  {
	display:block;
}

and lastly here is the little javascript function to let IE use hover pseudo-class w/ list items:

Code:

startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
				if (node.nodeName=="LI") {
					node.onmouseover=function() {
						this.className+=" over";
  					}
  					node.onmouseout=function() {
  						this.className=this.className.replace(" over", "");
   					}
   				}
  		}
 	}
}
window.onload=startList;

I know this is a rather long winded post. Any help would be greatly appreciated. Hopefully I will be able to post a link to an example later tonight.

Thanks in advance for any help,
Brian

Layering Problem

Similar Tutorials

View Content

I have a UL with the following rules:

Code:

#artSort_options { 
z-index: 50;	
background-color: #000000; 
display: none; 
position: absolute; 
list-style: none; 
width: 138px; 
padding: 0px; 
}

I use javascript to change the display of #artSort_options to block;

The UL is in a DIV floating right. The menu displays perfectly over the parentNodes, but hides behind all elements after - except in IE 7.

Any ideas?

Layering An Image

Similar Tutorials

View Content

im kind of a noob at css (altho ive been using it for a while now for simple things (margin, padding, color, etc....)) and im wondering if i can "layer" an image in an area. like what i mean is i want to display content behind that image but i want to layer it over everything else in the <td></td> tags. and i want it to appear only on the bottom right side. i know how to make it appear only once on the right side if it was a background but with this i have no clue, any help is much appreciated!

Picture Layering

Similar Tutorials

View Content

I have a picture of a city.. then i have transparent pictures of stores and stuff i want to layer ontop of the city.. but i was wondering if someone could go about showing me how to layer them? i found help on layering pictures, but they wont show through to the city.. =/

Background Layering Help !!

Similar Tutorials

View Content

First things first, I am a noob. I am attempting to make a background with a 200 x 200 repeating image with a 1 x 1000 white to transparent gradient overlay. I can get the 200x200 image to show up by itself but when I try to add the background_grad.png the background shows up as the background color. All help is greatly appreciated. Here is the source:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
	Pet ID Express - Tags for Cats and Dogs - Metallic, Glitter Enamel, Stainless, Brass, and Bling ! Free Shipping !
</title><meta name="keywords" content="Pet ID Express, Pet I.D Express, Metallic, Swarovski Crystal, Glitter Enamel, Stainless Steel Pet tags, pet ID tags, dog ID tags, dog ID tag, cat ID tags, cat ID tag, dog tags, cat tags, pet identification tags, pet id, discount pet tag, discount ID tags, discount pet tags, bling pet tags, cool pet tags, brass pet tags, stainless steel pet tags, designer pet tags, metal pet tags, bling dog tags, cute dog tags, stainless steel dog tags" /></title>
<style type="text/css">
body,td,th {
	color: #000;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 24px;
}
body {
	background-color: #81D3FC;
	background-image: url(background_grad.png),url(background.png);
	background-position: top left;
	background-repeat: repeat-x,repeat;}
a img {
}
a:link {
	color: #000;
}
a:visited {
	color: #000;
}
a:hover {
	color: #000;
}
a:active {
	color: #000;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('menubarhome.jpg')">
<p><img src="Pet ID Logo.png" width="284" height="124" /></p>
   </table>
<tr>
  <table width="600" border="0" align="center">
    <tr>
      <th scope="col"><table width="200" border="0" align="center">
          <tr>
            <td><div align="center"><img src="Blue Menu Bar/menu bar blue v2 copy.jpg" width="1220" height="100" border="0" align="middle" usemap="#Map2" /></div></td>
          </tr>
      </table></th>
    </tr>
  </table>
<tr>
     <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="metallic.html"><img src="metallic.jpg" alt="Metallic Tags" width="290" height="166" border="2" /></a>  </p>
<p><a href="swarovskicrystal.html"> <img src="swarovskicrystal.jpg" alt="Pet I.D. Express" width="290" height="166" border="2" /></a></p>
<p><a href="glitterenamel.html"><img src="glitterenamel.jpg" alt="Glitter Enamel Tags" width="290" height="166" border="2" /></a></p>
<p><a href="stainlesssteel.html"><img src="stainlesssteel.jpg" alt="Pet I.D. Express" width="290" height="166" border="2" /></a></p>
<p><a href="brass.html"><img src="brass.jpg" alt="Pet I.D. Express" width="290" height="166" border="2" /></a></p>
<tr>
<tr>
  <blockquote>
    <blockquote>
      <blockquote>
        <blockquote>
          <blockquote>&nbsp;</blockquote>
        </blockquote>
      </blockquote>
    </blockquote>
  </blockquote>
  <center>
  </center>

<map name="Map" id="Map">
  <area shape="circle" coords="61,57,45" href="index.html" alt="Home" />
  <area shape="circle" coords="177,60,39" href="aboutus.html" alt="About Us" />
  <area shape="rect" coords="255,29,347,84" href="contactus.html" alt="Contact Us" />
  <area shape="circle" coords="426,62,45" href="faq.html" alt="FAQ" />
</map>

<map name="Map2" id="Map2">
  <area shape="rect" coords="362,25,459,73" href="index.html" />
  <area shape="rect" coords="459,26,558,73" href="shop.html" />
  <area shape="rect" coords="557,26,656,73" href="faq.html" />
  <area shape="rect" coords="656,26,758,73" href="aboutus.html" />
  <area shape="rect" coords="758,26,867,72" href="contactus.html" />
</map>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=6007803; 
var sc_invisible=1; 
var sc_security="a2542b38"; 
</script>

<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript></noscript>
<!-- End of StatCounter Code -->
</body>
</html>

Thanks in Advance,
Matt

Pixel Perfect Layering

Similar Tutorials

View Content

Hi all,

I'm pretty anal about the layouts I make.. especially when it comes to my own site. This is the first time I have really attempted designing to validate within the strict doctype. The only thing is the layout I am trying to get to work requires A LOT of layers, and a lot of them need to line up with eachother. I am running in to problems because some layers are pushed down further than others on the page. The difference is noticeable (10 or 15 pixels) when I change from Firefox to Explorer. Is there anyway around this, am I missing something here? My page is uploaded at http://www.studioflow.net/display.html
and my css file is here http://www.studioflow.net/sfglobal.css
Do I need to just abandon my quest for pixel perfect alignment?

Thanks,

alan

Ie Stacking Divs Instead Of Layering. Also Width Issues

Similar Tutorials

View Content

Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems.

http:// www . sycwin . com / index2 . html

My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects

problems:
1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE
2. introduction not in position to the right of carousel/slideshow on IE
3. paints and wires divs are messed up in width, padding and margin on IE

here's the css:
Code:

body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}

emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}

a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}

img {
border:none;
}

/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}

#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}

/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}

#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}

#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}

/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}

#preview img{
width:300px;
height:300px;
} 
/*CAROUSEL*/
#carousel ul {
	list-style: none;
	width:3600px;
	margin: 0;
	padding: 0;
	position:relative;
	padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
	display:inline;
	float:left;
}
#carousel {
overflow:hidden;

I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this.

Css Newbie, Layering Images At The Bottom Of Screen

Similar Tutorials

View Content

I'm working on a site where I want to layer grass along the bottom of the page, but slightly over the bottom of an image that's being used as a footer for a table.
I'm new to CSS and any help would be greatly appreciated.

Here's the code I'm using:

<style type="text/css">

</style>
<script type="text/JavaScript">

</script>
</head>

<body onload="MM_preloadImages('images/cloud-head-tongue.png')">
<table width="850" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center"><img src="images/anchors.png" width="650" height="25" /></div></td>
</tr>
</table>

<div align="center"><img src="images/cloud-head-pink.png" name="Image1" width="1000" height="220" border="0" align="center" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="229,47,827,214" href="pages/spunkymonkey.htm" onmouseover="MM_swapImage('Image1','','images/cloud-head-tongue.png',1)" onmouseout="MM_swapImgRestore()" />
</map>

</div>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable">
<tr>
<td>
<table width="850" border="0" align="center" cellpadding="0" cellspacing="10">
<tr>
<td>
<div align="center">

<script language="php">include ("$Home_Path/$Inc_Dir/pagelist_horizontal.php");</script></div></td>
<td><script language="php">include ("$Home_Path/$Inc_Dir/search_catalog.php");</script></td>
</tr>
</table>
</td>
</tr>
</table>

<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable">
<tr>
<td>
<table width="850" border="0" align="center" cellspacing="10" bgcolor="#FFFFFF">
<tr>
<td width="636" valign="top">
<div align="center">
<script language="php">include ("$Home_Path/$Inc_Dir/title.php");</script>
</div>
<div align="left">
<script language="php">include("$Home_Path/$Inc_Dir/content.php");</script></div></td>
<td width="180" valign="top"><div align="left">Newsletter Signup, Coupon, Etc Here</div></td>
</tr>
</table>
</td>
</tr>
</table>
<img src="images/cloudbottom.png" width="1000" height="145" class="cloudfoot" />
<div id="Layer1"></div>
</body>
</html>

Stupid Css Problem (can't Find Problem Div/class In Stylesheet)

Similar Tutorials

View Content

Hey,
I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble.

my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css

Thanks.

<ul> Problem In Ff, Spacing Problem In Ie

Similar Tutorials

View Content

Hello. I am new at css and web design so if these are easy problems please excuse.

First of all, the website url

http://www.onlinecasinoboss.com

In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like.

And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like.

I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender.

Just beginner bitching.

Thanks for the help!

Problem Identifying Problem

Similar Tutorials

View Content

Hello everyone, I am hoping I could get some help on this.

I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that.

So, the issue lies within this example page:
tinyurl.com/rediculouswebsite

The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox.

I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue.

Thank you all very much.

Css Problem In Ie

Similar Tutorials

View Content

Hi all...I am simply trying to create a header (colored bar). Every thing is fine, even in IE 8 but when it comes to IE 6, the bar does not appears. The code is simple

CSS code is

Code:

#css
{
position:absolute;
top:0px;
height:30px;
right:0%;
left:0%;
background-color:#805670;
border-style:solid;
border-width:thin;
border-color:#805670;
padding-top:12px;
}

and I have just added this line in my .php page

Code:

<div id="mybio"></div>

What can be the problem??

Css Problem

Similar Tutorials

View Content

Hi, I am having an issue using my CSS code, I have a drop down section on my menu bar on my site.

I'm trying to firstly just set the background of the whole bar,

Code:

#nav-m {
  font: normal 12px Verdana;
  font-weight: bold;
  width: 100%;
}
  
	#nav-m ul {
	  float: left;
	  left: 0;
	  padding: 2px 0;
	  text-decoration: none;
	  text-indent: 5px;
	}
  
	  #nav-m a {
		  display: block;
		  width: 10em;
		  w\idth: 6em;
		  color: #012345;
		  text-decoration: none;
		  padding: 0.25em 2em;
	  }
  
	  #nav-m a.daddy {
	  }

	  #nav-m li {
		  float: left;
		  padding: 0;
		  background-image: url(http://taxbusters.eu.com/images/nav-bar1.jpg);
		  background-repeat: no-repeat;
	  }

	  #nav-m li ul {
		  position: absolute;
		  left: -999em;
		  height: auto;
		  width: 14.4em;
		  w\idth: 13.9em;
		  font-weight: normal;
		  border-width: 0.25em;
		  margin: 0;
	  }
  
	  #nav-m li li {
		  padding-right: 1em;
		  width: 13em
	  }

	  #nav-m li ul a {
		  width: 13em;
		  w\idth: 9em;
	  }

	  #nav-m li ul ul {
		  margin: -1.75em 0 0 14em;
	  }
	  
	  #nav-m li:hover ul ul, #nav-m li:hover ul ul ul, #nav-m li.sfhover ul ul, #nav-m li.sfhover ul ul ul {
	  left: -999em;
	  }
	  
	  #nav-m li:hover ul, #nav-m li li:hover ul, #nav-m li li li:hover ul, #nav-m li.sfhover ul, #nav-m li li.sfhover ul, #nav-m li li li.sfhover ul {
	  left: auto;
	  }

	  #nav-m li:hover, #nav-m li.sfhover {
	  background: #bdd7e6;
	  }

however the background doesnt show up, and the font alignment isnt right, - there are so many problems

http://alturl.com/nfkp

Ie6 Problem

Similar Tutorials

View Content

Hello everyone,

for our intranet I have developed new application tools with tabs to change icons. it is working fine on IE7+ but having problem with IE6.

there are two divs in this applications and on IE 7+ both divs starts in new line. for some reasons in IE6 it comes in one line. what cna I put in the second div that will make it appear on new line. I have tried putting <p> tag but doesn't make any different.

Any suggestions.

thank you.

<div id="mytabsmenu" class="tabsmenuclass">
<span style="cursorointer">
<ul>
<li><a rel="gotsubmenu[selected]">Trust Applications</a></li>
<li><a rel="gotsubmenu">General Applications</a></li>
</ul>
</span>
</div>

<div id="mysubmenuarea" title="Applications Toolbar" align="center" style=" background-image:url(/templates/default/IconImages/iconBkgrd.jpg); background-position:top; background-repeat:no-repeat; margin:2px; padding-top:12px; padding-left:30px; vertical-align:bottom; height:50px;">


<a href="/templates/default/js/submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>
</div>

Css <div> Problem

Similar Tutorials

View Content

I am currently trying to build a website for a church, and have run into a little css coding problem:

It seems as if the browser is not interpreting how I see the CSS code to lay out on the page (common mistake I'm sure). I know a lot of the problems I am having comes from the height of my id's. If you take a look at "sci.tamucc.edu/~ksnapka/Website/Home/index.php" , the blue-bordered box is my "bodyWrap" css id. I am wanting this to expand to 100% of its contents inside the div container. If you look under some of the pages under "Our Faith in Action", I believe these work fine because I am using text inside of the bodyWrap container instead of other div containers nested in bodyWrap. The display on the home page actually looks better on IE, so I'm also not sure why firefox sets the height of that contained to 0 (I assume for some reason it sees that the container is empty since it just has other divs located inside of it?)

The CSS code is on "sci.tamucc.edu/~ksnapka/Website/CSS/csTemplates.css"

Any help is greatly appreciated Thank you in advance.

960 Problem

Similar Tutorials

View Content

Hello all.

I've just started learning to code because I recently started a business and needed a website. I'm having a few issues.

I'm using the 960 Grid System plus a scroller found at queness.com

I can't post links here apparently, or I'd show you what I'm using.

The page renders fine in Firefox (Mac & PC) Safari (Mac & PC) IE 8 and Chrome.

IE 6 is screwed beyond understanding.

IE 7 Pushes me off the screen and links don't work.

And Opera squeezes my text together.

I have screen shots if necessary.

Here is a link to the site in question: ohmyyoga.com

I inserted a redirect script for IE 6-7. So you'll be redirected to my old site if you try the regular URL from either of those browsers. For the purposes of this, I've copied the site W/O the redirect.

The link is test2.ohmyyoga.com

The site validates CSS and XHTML. I'm sure it's something super simple. I'm just brand new to all of this. Any help would be appreciated.

Cheers

Css Nav Bar Using Ul Problem

Similar Tutorials

View Content

I have created a nav bar with css using the widely distributed '<ul>' coding. The problem I am having I think is with the anchor tags. The look of the nav bar is fine but depending on the float position the anchor tag immediately next to it won't follow the css.

Here is the css..
body {
margin:0;
padding:0;
}
div.container {
text-align:center;
}
div.center {
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:800;
text-align:left;
}
div.left {
float:left;
width:100;
height:500;
background-color:#007700;
}
div.right {
float:right;
width:130;
height:500;
background-color:#e8e8e8;
font-size:10pt;
}
div.header {
clear:both;
width:40%;
}
div.footer {
clear:both;
margin:0;
width:100%;
}
ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a.topmenu {
float:right;
width:5em;
height:2em;
text-decoration:none;
color:#005500;
background-color:#e8e8e8;
padding:0.2em 0.6em;
border-right:1px solid #005500;
}
a.topmenu:hover {
background-color:#005500;
color:#e8e8e8;
}
a.topmenu:visited {
float:right;
width:5em;
text-decoration:none;
color:#005500;
background-color:#e8e8e8;
padding:0.2em 0.6em;
border-right:1px solid #005500;
}
li {
display:inline;
}
a.leftmenu {
color:#ffffff;
text-decoration:none;
}
a.leftmenu:hover {
color:black;
}
a.leftmenu:visited {
color:#ffffff;
text-decoration:none;
}

and here is the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="newstyle.css"/>
</head>
<body>
<div class='container'>
<div class='center'>
<img src="fdat_logo_short.jpg" width=250 />
<ul>
<li><a class='topmenu' href="contact.php">Contact Us</a></li>
<li><a class='topmenu' href="about.php">About Us</a></li>
<li><a class='topmenu' href="services.php">Services</a></li>
<li><a class='topmenu' href="news.php">News</a></li>
<li><a class='topmenu' href="home.php">Home</a></li>
</ul>
</div>
</div>
</body>
</html>

Big Problem

Similar Tutorials

View Content

I have a big problem with css in both IE and FF I don't know what's going on i'm making a navigation menu with submenu from some elements when i display the submenu from the element the square bullets isn't displayed beside the list item from the submenu and it's required in firefox and even the hover effect isn't displayed correct in FF also and it's displayed in IE correctly and in some page the conetnt was wholy distroyed in IE and display correct in FF with it's bugs and in dream weaver the design is going ok and i'm using a strict DTD i don't know what's wrong and what's going on ???

Css Problem With Ie 6 & 7, All Ok With Ff

Similar Tutorials

View Content

Hello all,
Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help!

my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user)

ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage.

The custom div look like this:
#container {
background: #FFF url(../images/bkg_container.png) repeat-y;
min-height: 100%;
width: 1190px;
margin: 0 auto;
padding: 0 14px 0 14px;
}

#header {
background: url(../images/bkg_header.png);
height: 127px;
width: 1160px;
margin: 0;
padding: 15px 0 0 30px;
}

#menu-top-bkg {
background: url(../images/bkg_menu_top.png) no-repeat left top;
height: 128px;
width: 1190px;
margin: 0 0 -128px 0;
}

#wrapper {
overflow: auto;
background: url(../images/bkg_menu.png) repeat-y left;
min-height: 500px;
width: 1190px;
margin: 0;
padding: 0;
}

#menu {
float: left;
background: none;
min-height: 370px;
width: 159px;
margin: 0;
padding: 110px 0 0 0;
}

#content {
float: right;
background: url(../images/bkg_content.png) no-repeat right top;
min-height: 400px;
width: 763px;
margin: 0 0 0 25px;
padding: 15px 243px 10px 0;
}

#menu-bottom-bkg {
background: url(../images/bkg_menu_bottom.png) no-repeat;
height: 141px;
width: 1190px;
margin: -111px 0 0 0;
}

#footer {
background: url(../images/bkg_footer.png);
height: 100px;
width: 1190px;
margin: 0;
padding: 16px 0 0 0;
}

I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec.

I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly!
Many thanks to all,
doodlebug

Some Problem With Ul/li In Ff

Similar Tutorials

View Content

Hi i have built a navigation system with css controled list, with dropdown effects that works well in both IE6 and FF 1.5 but the problem is that in FF the menu bar is not taking all the space that it is given to him (750px) on the right end of the menu navigation bar there is a white space that i can't get ride of. The navigation bar background is orange!

In IE there is no problem the entire navigation bar is Orange, but in FF there is 6px white space on the right end!

here si the code, i have added background almost everywhere to make taht space the same color as the rest of the menu but it doesn't help!

CSS
Code:

/* Positionning & Structure of 1st Level Menu */
#navigation {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 750px;
	display: block;
	background-color: #DA5D09;
	}
/* Positionning & Structure for Sub-Menus */
#navigation ul{
    display:block;
    /*margin:0;*/
    padding:0;
    list-style: none;
    margin: 0;
    background-color: #DA5D09;
    border-style: solid;
    border-color: #fff;
    border: 1px;

    }
	
#navigation li ul {
	position: absolute;
	top: 173px;
	display: none;
	}

/* Structure for 1st level Menu Items */
#navigation li {
    list-style: none;
    width: 124px;
    height: auto;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    background-color: #DA5D09;
	}
/* Structure for Sub-Menu Items */
#navigation li li {
  display: block;
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 124px;
}


/* Styles for 1st level Menu Items */
#navigation li a{
    text-align: center;
    background: #DA5D09;
    border-width: 0 2px 0 0;
    border-color: #fff;
    border-style: solid;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    padding: 10px 0;
    margin: 0;
        }
/* Styles for Sub-Menu Items */
#navigation li li a{
    text-align:left;
    background: #DA5D09;
    border-width: 1px 0 0 0;
    border-color: #fff;
    border-style: solid;
    font-size: 10px;
    display: block;
    text-decoration: none;
    padding: 5px;
    margin: 0px;
        }
/* The magic */
#navigation li:hover ul, #navigation li.over ul { display: block; }

The XHTML
Code:

<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a>
      <ul>
        <li><a href="#">Muzik News</a></li>
        <li><a href="#">Interviews</a></li>
        <li><a href="#">Reviews</a></li>
      </ul>
    </li>
    <li><a href="#">Lifestyle</a>
      <ul>
        <li><a href="#">Urban reports</a></li>
        <li><a href="#">Style & Gear</a></li>
        <li><a href="#">Sports Corner</a></li>
      </ul>
    </li>
    <li><a href="#">Community</a>
      <ul>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Calendar</a></li>
      </ul>
    </li>
    <li><a href="#">Muzik</a>
      <ul>
        <li><a href="#">Muzik Lounge</a></li>
        <li><a href="#">Online Radios</a></li>
      </ul>
    </li>
    <li><a id="lastright"  href="#">Muzik Store</a></li>
  </ul>

The navigation UL is included in a global div (that contains the entire page) of 750 px as well!

I am a real newbie with css based design so you might notice my code is not very logic all the time and has a lot os redundancy but at least i am trying to convert to this new paradigm!

Thx in advance for the help!