CSS - Referencing Css Elements

I'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page.

The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows:

Code:

.w3type{color: black; background-color: #FFCE6B;}

Code:

.w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}

I add this class to a <td> tag:

Code:

<td class="w3type">

and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it.

The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code?

If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges).

Thanks for any help

I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. If you view the below pages side by side on Firefox and IE, the following occur (in order of importance):
- the top main box is pushed below where the left boxes end
- the upper-right drop-down stuff is totally off in the weeds (Chrome also looks like IE)
- "Recipes" tab isn't borderless on the bottom edge
- left boxes are the wrong size and push "Clear List" out of bounds
- search button is off in relation to search box

mcrackan.com/recipes/csstest.htm
mcrackan.com/recipes/css/default.css
(Sorry about the non-links. I'm apparently not allowed to post click-able links yet.)

Can anyone point me in the right direction for whatever I'm doing wrong?

- Dinah

Hi guys,

could you help me out with following issue:


See this Picture for better understanding:
http:// picasaweb. google.se/lh/photo/e446yLNWr_eTqkiwPK0-CA?feat=directlink


WHat i have is a div container (mainContent)
In which i have some text in a Paragraph <P>
and in the middle of this <P> i am trying to make a box
which will contain a list of links.

Have no clue how to achieve this.

My idea would be:

<div id: mainContent>
//text//<div style="???">
//Link//<div style="float:right; DONT Know how to lower vertically??">

Good ideas for where i can find a solution?

I'm currently customizing a theme for a Drupal site and am having a bit of an issue with background images on some content.

I have 1 class and an HTML element that I'm trying to apply the style to. I have a non-repeating background applied to the title class which is positioned to the left of the area. The second is a background I'm attempting to tile across the x-axis of the h2 element. This second background does not show while the first one is showing.

Is there a way around this? I'm assuming that because it's the same element, I won't be able to get away with this and will have to find another solution.

Here is my HTML
Code:

<h2 class="title"><a href="/drupal/node/1">Welcome to the Caustic Guild!</a></h2> 

CSS
Code:

#mcol .title {
  background: url(/drupal/themes/caustic/images/icon_post.gif) no-repeat 0px 2px;
}

#mcol h2{
  background: url(/drupal/themes/caustic/images/mcol_head.jpg) repeat-x;
  margin: 0px 0px 0px 0px;
  padding:  2px 0px 6px 35px;
  font-size: 180%;
  letter-spacing: -1px;
  text-align: left;
  border: 3px solid #78788a;
}

I am new to css and just had a quick question. (please forgive me for any invalid lingo... hopefully you can make sense of my question)

I am creating a dynamic calendar of events page, the calendar will be built using a table. If I put "table.calendar" in my style sheet to format the overall table, and I have th.calendar, td.calendar, do I have to add the "class" property to th or td, or will they automatically be in the calendar class because they are part of the table.

For example...
Do I do this?
Code:

<table class="calendar">
<tr><th></th></tr>
<tr><td></td></tr>
</table>

Or this?
Code:

<table class="calendar">
<tr><th class="calendar"></th></tr>
<tr><td class="calendar"></td></tr>
</table>

Hello,
I have the following css
css Code:
Original - css Code ul#menulist{ position:relative; top:0px; list-style-type:none; margin:0; padding:0; } ul#menulist li{ background-color:#717100; display:inline; margin:0; padding:0 10px; border:0; height:30px; } ul#menulist li a{ text-decoration:none; margin:0; padding:0; border:0; }

  

  


 ul#menulist{


     position:relative;


     top:0px;


     list-style-type:none;


     margin:0;


     padding:0;


 }


  


 ul#menulist li{


     background-color:#717100;


     display:inline;


     margin:0;


     padding:0 10px;


     border:0;


     height:30px;


 }


  


 ul#menulist li a{


     text-decoration:none;


     margin:0;


     padding:0;


     border:0;


 } 

A gap is appearing between <li> elements in Opera and FF but not in IE. You can check it here
Which is the correct behaviour? How do I remove the gaps between <li> elements in a valid way.
Thank you.

Hi guys, I don't know if this is possible..

I have a table with position: fixed and width: 100% height: 100% so it covers the entire screen. There is text behind it, you can see through the table and there is text back there. My problem is you can't click on anything in the background, behind the table. You can't select the text and you can't click the links because the table is blocking them.

So my question is it possible to click through the table element on the links in the background and stuff?

http://perfbase.com/beta/tablesector/v7/

I tried setting the middle td to visibility: hidden and display: none but that didn't work.

I tried javascript events but click, mousedown, mouseover, none of them work for the text in the background.

Thanks a lot!

Hi everyone -- first post here in the forums. I hope I can get some pointers on how to get my page to display correctly in IE.

I have 2 div tags at the top of my page that are built sorta like this:

Code:

<div>
   <ul>
     <li>
       some thing (images in my case, and a search bar)
     </li>
   </ul>
</div>

My css for these elements has "list-style:none;" -- and this works great in modern browsers like firefox, chrome, safari, opera... but the old dinosaur which 30% of my visitors still use doesn't handle this all right. See, I am displaying these list elements in a single horizontal row, but IE wants them in a single vertical column. UGH.

I have a post with a screen shot from firefox and IE at this link:

http://corneveaux.com/blog/new-animated-banner-and-internet-explorer-sucks

So, I am sure its something I have done wrong -- but I cannot get my arms around the problem with firebug or IE developer tool bar. I am a total CSS newb here, so any tips much appreciated. Oh, and I checked and indeed my CSS validates.

Thanks everyone!

I'm trying to align an image, header, and some text that is right aligned all on the same row. I've been reading so much about inline and block elements that my head feels like it's going to explode. It would look like this:

Code:

Picture - Header                                         Text over here

I'm not sure if everything should be span inside one class or what. I'm very confused. Please help a noob.

I have a header set up as a div. Inside the header are three elements: #logo, #picture and #contact_info. #logo and #picture are images (image tags in the "html") and #contact_info is a div.

I want #logo to float to the left (no problem), #picture to float to the right (problem), and #contact_info to be flush against #picture's left side. How might I accomplish this? Nothing is positioning correctly except #logo.

the (pertinent) css is:
Code:

#main {
	width: 875px;
	background-color: #FFCC77;
	border-style: inset;
	border: 2px solid #008080;
	margin-left: auto;
	margin-right: auto;
	
	}

#header {
width: 875px;
height: 177px;
margin-left: auto;
margin-right: auto;
background:url("gradient2.jpg") repeat-x;
border: 2px solid #008080;

}

#logo { 
	width:300px;
	height:155px;
	float: left;
	} 

#contact_info { 
		color: #800080;
		font-variant: small-caps;
		font-family: sans-serif;
		font-weight: 500;
		font-size: 14px;
		padding-top:0px;
		padding-right:10px;
		float: right;
		}

#picture {
	width: 160px;
	height: 139;
	margin: 10 10 10 10px;
	}

The html is:
Code:

<body>

<div id="header">
			
			<img src="Styles/redonelogo.jpg">
			
			<img src="Styles/picture.jpg">
			
			<div id="contact_info">
			<p>Casa Grande Acclaim Realty<br/>
			11283 N. Henness Road<br />
			Casa Grande, Arizona 85194 <br />
			Phone: (520) 560-8366 <br />
			Fax: (520) 421-1444
			</p>
			</div>
			
			
			
			<div id="slogan">
			Serving All of Pinal County
			</div>			
			
			<ul id="nav">
			<li><a href="About" target="_self">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
			<li><a href="index">Home</a></li>
			</ul>
	
</div>
 
<div id="main">

	<div id="border"></div>
	
		<div id="innerloop">

		
		
		<div id="equal"></div>	
		<div id="mls"></div>		
		
		<div id="secondinnerloop">
		<h2><strong>Welcome to Casa Grande Acclaim Realty</strong></h2>
				<div id="PicBackground">
  				<img alt="slide show" src="Graphics/One.jpg" width="540" height="405" id="FirstPicture">
		</div>
												
			<script type="text/javascript">
			RunSlideShow("FirstPicture","PicBackground","Graphics/One.jpg;Graphics/Two.jpg;Graphics/Three.jpg;Graphics/Four.jpg;Graphics/Five.jpg;Graphics/Six.jpg;Graphics/Seven.jpg;Graphics/Eight.jpg;Graphics/Nine.jpg;Graphics/Ten.jpg;Graphics/Eleven.jpg;Graphics/Twelve.jpg;Graphics/Thirteen.jpg;Graphics/Fourteen.jpg",14);
			</script>	
					
		</div>
		
		</div>
		
</div>		





</body>
</html>

I am definitely a novice in web design and CSS, so I hope I can tap into the collective knowledge of the more seasoned individuals on this board. Essentially, the website I created (http://www.wacwineclub.com) looks fine in Firefox, but some of the elements are shifted to the left in IE (Such as the menu and horizontal rule). For the life of me, I cannot figure out what is wrong. Any ideas? My code for the index and CSS files are as follows:

INDEX.PHP<?
Code:

session_start();
?>
<meta name="description" content="Washington Athletic Club - Wine Club">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
<!--
.style5 {color: #FFFFFF}
.style7 {
	font-size: 12px;
	color: #FFFFFF;
}
.style8 {
	font-size: 12px;
	color: #ADADAD;
}
-->
</style>
<script src="/Scripts/swfobject_modified.js" type="text/javascript"></script>
<HEAD><TITLE>WAC Wine Club</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="Shaun Lewis" name=author>
<link rel="shortcut icon" href="Images/favicon.ico">
<LINK 
href="wacwineclub.css" type=text/css 
rel=stylesheet>
<META content="MSHTML 6.00.5730.11" name=GENERATOR><style type="text/css">
<!--
body {
	background-color: #666666;
	padding-bottom: 150px;
	padding-top: 100px;
	margin-left: 0px;
	text-align:center;
}
#Slideshow {
	padding-top: 4px;
}
#header {
	height: 125px;
	width: 800px;
}
#awmAnchor-menu {
	background-color: #000000;
	height: 30px;
	padding-top: 0px;
}
#Layer1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 493px;
	top: 1187px;
	background-color: #FF00FF;
}
#Layer2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
	left: 380px;
	top: 1187px;
}
#Layer3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 200px;
	top: 1187px;
}
#Layer4 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:0;
	left: -208px;
	top: 171px;
	visibility: visible;
}
#xawmMenuPathImg-menu {
}
a:link {
	color: #ADADAD;
	text-decoration: none;
}
#Layer5 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
#Layer6 {
	position:absolute;
	width:200px;
	height:190px;
	z-index:1;
	margin-left: 50px;
	margin-top: 40px;
	border-bottom: #000000 2px solid;
	border-left: #000000 2px solid;
	border-right: #000000 2px solid;
	border-top: #000000 2px solid;
	background-color: #E5E5E5;
	float: left;
}
#Layer7 {
	position:absolute;
	width:180px;
	height:160px;
	z-index:1;
	margin-left: 10px;
	border-right: #000000 1px solid;
	border-bottom: #000000 1px solid;
	border-top: #000000 1px solid;
	border-left: #000000 1px solid;
	margin-top: 5px;
}
#Layer8 {
	position:absolute;
	width:500px;
	height:300px;
	z-index:1;
	margin-left: 275px;
	margin-top: 15px;
	left: -127px;
	top: 347px;
}
#Layer9 {
	position:absolute;
	width:160px;
	height:69px;
	z-index:1;
	margin-left: 50px;
}
.style4 {
	font-size: 16px;
	color: #ADADAD;
}
.style6 {color: #ADADAD}
.style9 {font-size: 14px}
-->
</style>
<script type="text/JavaScript">
<!--
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_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_controlSound(x, _sndObj, sndFile) { //v3.0
  var i, method = "", sndObj = eval(_sndObj);
  if (sndObj != null) {
    if (navigator.appName == 'Netscape') method = "play";
    else {
      if (window.MM_WMP == null) {
        window.MM_WMP = false;
        for(i in sndObj) if (i == "ActiveMovie") {
          window.MM_WMP = true; break;
      } }
      if (window.MM_WMP) method = "play";
      else if (sndObj.FileName) method = "run";
  } }
  if (method) eval(_sndObj+"."+method+"()");
  else window.location = sndFile;
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1035787-2']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</HEAD>
<BODY>
<? if($_SESSION['userid']>0) {?>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu2",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="menu2.js" type="text/javascript"></script>
<? } else {?>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="menu.js" type="text/javascript"></script>
<? }?>
<script type="text/javascript">awmBuildMenu();</script>
<DIV id=container>
  <DIV id=header><img src="Images/WWC-logo.jpg" width="258" height="125" align="left">
<table class="metroLog" border="0" cellspacing="0" cellpadding="0" align="right">
    <tbody>
    <? if($_SESSION['userid']>0){?>
    
      <tr>
            <td></td>
            <td></td>
            <td><span class="advLogRemoveChk style6 style9"><label for="masterPageUC_ctl00_ctl00_chkRM">Welcome WAC Wine Club Member</label></span>
            </span></td>
            <td></td></td>
            <td></td>
        </tr>
      <tr>
            <td></td>
            <td></td>
            <td><span class="advLogRemoveChk style6 style9"><a href="logout.php" class="logTxt style8">Logout </a></span>
            </span></td>
            <td></td></td>
            <td></td>
        </tr>
        
    
    <?
    } else {?>
<form action="logincheck.php" method="post">
        <tr>
            <td><span class="memLog style6 style9">Member Login</span></td>
            <td width="8"></td>
            <td class="unpwField" width="118"><input name="uname" type="text" class="unpwField" id="uname" style="#unpwField" tabindex="1" onFocus="tbFocus(this);" onBlur="tbBlur(this);" value="USERNAME" maxlength="50" /></td>
            <td width="8"></td>
            <td class="unpwField" width="118"><input name="upass" type="password" value="PASSWORD" maxlength="50" id="upass" tabindex="2" class="unpwField" onFocus="tbFocus(this);" onBlur="tbBlur(this);" onKeyPress="pwKeypress(this);" style="" /></td>
            <td class="metroBorder"><input type="image" name="masterPageUC$ctl00$ctl00$btnLogin" id="btnLogin" tabindex="3" src="Images/btn_Login.jpg" alt="Click to Login" style="border-width:0px;" /></td>
        </tr>


        <tr>
            <td height="5" colspan="6"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td><span class="advLogRemoveChk style6 style9"><input id="rememberme" type="checkbox" name="rememberme" value="1" />
            <label for="masterPageUC_ctl00_ctl00_chkRM">Remember Me </label>
            </span></td>
            <td></td>

            <td><a href="Login-Help.html" class="logTxt style8">LOGIN INSTRUCTIONS </a></td>
            <td></td>
        </tr>
        </form>
<? }?>
                <tr>
            <td colspan="6"></td>
        </tr>
    </tbody>
</table>

  </div>
  <hr align="center">
		<div id="awmAnchor-menu"> &nbsp;</div>  
		<div id="Slideshow">
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="250">
            <param name="movie" value="/slideshow.swf">
            <param name="quality" value="high">
            <param name="wmode" value="opaque">
            <param name="swfversion" value="6.0.65.0">
            <param name="expressinstall" value="/Scripts/expressInstall.swf">
<object type="application/x-shockwave-flash" data="/slideshow.swf" width="800" height="250">
  <!--<![endif]-->
  <param name="quality" value="high">
  <param name="wmode" value="opaque">
  <param name="swfversion" value="6.0.65.0">
  <param name="expressinstall" value="/Scripts/expressInstall.swf">
<div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
</object>
            <!--<![endif]-->
          </object>
</div>
		<?php
require 'footer.inc';
?>
</DIV>
  </DIV>
</DIV> 
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="Development">
  <tr>
    <td><div align="right" class="style7">Website Development by  <a href="mailto:shaun@wacwineclub.com">Shaun Lewis</a></div></td>
  </tr>
</table>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
</script>
</BODY></HTML>

WACWINECLUB.CSS
Code:

#container {
	BORDER-RIGHT: #000000 15px solid;





	div align='center'
	PADDING-RIGHT: 0px;
	BORDER-TOP: #000000 5px solid;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	BORDER-LEFT: #000000 15px solid;





	MARGIN:0 auto
	WIDTH: 800px;
	PADDING-TOP: 5px;
	BORDER-BOTTOM: #000000 5px solid;
	POSITION: relative;
	BACKGROUND-COLOR: #000000;
	TEXT-ALIGN: center;
	margin-top: 20px;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	font: Garamond;
	font-family: Garamond, Georgia, Serif;
}
#content {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 10px 0px 10px 120px;
	WIDTH: 663px;
	PADDING-TOP: 0px;
	height: 811px;
	border-bottom: #000000 2px solid;
	border-top: #000000 2px solid;
	border-left: #000000 2px solid;
	border-right: #000000 2px solid;
	background-color: 000000;
}
#footer {
	PADDING-RIGHT: 0px;
	BORDER-TOP: #000000 1px solid;
	PADDING-LEFT: 10px;
	PADDING-BOTTOM: 0px;
	MARGIN: 25px 0px 0px;
	COLOR: #ADADAD;
	PADDING-TOP: 0px;
	HEIGHT: 1.5em;
	background-color: #000000;
	text-align: right;
	width: 800px;
	font-family: Garamond, Georgia, Serif;
}
#masthead {
	MARGIN: 0px;
	BORDER-BOTTOM: #000000 1px solid;
	HEIGHT: 250px;
	background-color: #000000;
}
#navigation {
	BORDER-RIGHT: #7c70da 1px solid; LEFT: 4px; WIDTH: 170px; POSITION: absolute; TOP: 230px
}
#upper {
	width: 400px;
}
#upper #Upper2 {
	background-position: right;
	width: 400px;
	right: auto;
	float: right;
}
DIV.menu A:link {
	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #3e31a2; PADDING-TOP: 2px
}
DIV.menu A:visited {
	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #3e31a2; PADDING-TOP: 2px
}
DIV.menu A:hover {
	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) #7c70da no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #ffffff; PADDING-TOP: 2px
}

@media Print    
{
#container {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0 auto; WIDTH: 100%; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
#footer {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 10px 0px 0px; WIDTH: 800px; COLOR: #000000; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent; BORDER-RIGHT-WIDTH: 0px
}

}
#container #awmAnchor-menu {
	background-color: #000000;
	width: 800px;
}
#Developer {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: right;
	margin-top: -15px;
}
#Development {
	font-family: Garamond, Georgia, serif;
	font-size: 14px;
	color: #FFFFFF;
	left: auto;
	right: auto;
}
.unpwField {
	font-family: Garamond, Georgia, serif;
	font-size: 12px;
}
#metroLog {
	font-family: Garamond, Georgia, serif;
	font-size: 12px;
}

Hi All,

Still working on a site for a friend.

www dot helenstow-cpsychol.co.uk/faqs dot html

On this page, I want the scrolling '#content1' box to be about 200-250 pixels longer, but in making it longer it overlaps vertically with other elements on the page ('#nav1' etc) and displaces them.

The way elements are placed relative to each other was designed by someone very kind on another forum. I find it quite confusing to be honest (Im a total newb.) and was wondering if this is the best way to do this or if there is a way of aligning elements by just specifying where on the page they should be without necessarily affecting the position of other elements? (Is this possible using z-index?)

If this is possible, how might I go about it and is it a good or bad idea? (the guy who helped me previously appeared to be pretty smart, so I'm guessing there's a reason he laid things out the way he did)

Here is my CSS:

Code:

* {
    padding:0;
    margin:0;
    list-style-type:none;
 }
.link1 a:link,.link1 a:visited,.link1 a:active { 
    color:#000000;
    font-family:arial,helvetica,sans-serif;
    font-weight:bold;
 }
.link1 a:hover { 
    background-color:#000000;
    text-decoration:none;
 }
.link2 a:link,.link2 a:visited,.link2 a:active { 
    color:#00def5;
    font-family:arial,helvetica,sans-serif;
    font-size:16px;
    font-weight:bold;
 }
.link2 a:hover { 
    color:#fff;
    background-color:#286d8c;
    text-decoration: none;
 }
.link3 a:link, { 
    color:#FFFFFF;
    font-family:arial,helvetica,sans-serif;
    font-size:24px;
    font-weight:bold;
 }
.link3 a:visited,.link3 a:active { 
    color:#42daf5;
    font-family:arial,helvetica,sans-serif;
    font-size:24px;
    font-weight:bold;
 }
.link3 a:hover { 
    color:#FFFFFF;
    text-decoration: none;
 }
body {
    background-color:#000;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:100%;
    text-align: center;
 }
h1 {
    font:bold 20px tahoma,helvetica,arial,sans-serif;
    color:#ffa507;
    text-shadow:0 1px 1px #000;
    text-align:center;
    text-decoration:underline;
 }
h2 {
    font:bold 18px tahoma,helvetica,arial,sans-serif;
    color:#ffff01;
    text-shadow:0 1px 1px #000;
    text-align:center;
    text-decoration:underline;
 }
h3 {
    font:italic 16px tahoma,helvetica,arial,sans-serif;
    color:#fff;
    text-shadow: 0 1px 1px #000;
    text-align: center;
 }
h4 {
    font:bold 16px tahoma,helvetica,arial,sans-serif;
    color:#000;
    text-shadow: 0 1px 1px #ffa507;
    text-align:center;
    text-decoration:underline;
 }
h5 {
    font:bold 16px tahoma,helvetica,arial,sans-serif;
    color:#000;
    text-align:center;
 }
#container1 {
    width:1008px;
    height:1168px;
    margin:auto;
    background-image:url(../images/Alt-Pages-BG.jpg);
 }
#content1 {
    width:515px;
    height:448px;
    padding-top:20px;
    padding-bottom:0px;
    padding-right:5px;
    padding-left:5px;
    border:3px solid transparent;
    margin-top:0px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:55px;
    text-align:center;
    overflow:auto;
 }
#content2 {
    width:900px;
    height:20px;
    border:3px solid transparent;
    padding:0px 0px 0px 0px;
    margin:185px 54px 0px 54px;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:14px;
    color:#fff;
    text-align:center;
    overflow:auto;
 }
 #content3 {
    width:260px;
    height:100px;
	padding-top:0px;
    padding-bottom:0px;
    padding-right:15px;
    padding-left:15px;
    margin-top:20px;
    margin-bottom:0px;
    margin-right:110px;
    margin-left:110px;
    border:3px solid #000;
    background-color:#fff;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:14px;
    color:#000;
    text-align:center;
    overflow:auto;
 }
	#content4 {
    width:400px;
    height:180px;
	padding-top:0px;
    padding-bottom:0px;
    padding-right:15px;
    padding-left:15px;
    margin-top:20px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:42px;
    border:3px solid #000;
    background-color:#fff;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:14px;
    color:#000;
    text-align:center;
    overflow:auto;
 }
#nav1 {
    margin-bottom:36px;
    overflow:hidden;
 }
#nav1 li {
    margin-bottom:40px;
    position:relative;
 }
#li1a {margin-left:835px;}
#li1 {margin-left:761px;}
#li2 {margin-left:687px;}
#li3 {margin-left:613px;}
#li4 {margin-left:539px;}
#li5 {margin-left:465px;}
#li6 {margin-left:391px;}
#li7 {margin-left:28px;}
#li8 {margin-left:96px;}
#li9 {margin-left:90px;}
#li10 {margin-left:92px;}
#li11 {margin-left:332px;}
 }
#nav1 a,#nav2 a { 
    position:relative; 
    display:block;
    height:30px;  
    background-image:url(../images/Icons.jpg);
 } 
#nav1 span,#nav2 span { 
    position:absolute;
    top:0;
    left:0;
    height:30px; 
    z-index:1;
    background-image:url(../images/Icons.jpg);
    cursor:pointer;
 }
#home,#home span {
    width:149px;
    background-position:-835px -584px;
 }
#about,#about span {
    width:223px;
    background-position:-761px -644px;
 }
#appts,#appts span {
    width:297px;
    background-position:-687px -704px;
 }
#fees,#fees span {
    width:371px;
    background-position:-613px -764px;
 }
#faq,#faq span {
    width:445px;
    background-position:-539px -824px;
 }
#links,#links span {
    width:519px;
    background-position:-465px -884px;
 }
#blog,#blog span {
    width:593px;
    background-position:-391px -944px;
 }
#home:hover span {
    width:149px;
    background-position:-835px -3px;
	background-image:url(../images/Icons.jpg);
 }
#about:hover span {
    width:223px;
    background-position:-761px -63px;
    background-image:url(../images/Icons.jpg);
 }
#appts:hover span {
    width:297px;
    background-position:-687px -123px;
    background-image:url(../images/Icons.jpg);
 }
#fees:hover span {
    width:371px;
    background-position:-613px -183px;
    background-image:url(../images/Icons.jpg);
 }
#faq:hover span {
    width:445px;
    background-position:-539px -243px;
    background-image:url(../images/Icons.jpg);
 }
#links:hover span {
    width:519px;
    background-position:-465px -303px;
    background-image:url(../images/Icons.jpg);
 }
#blog:hover span {
    width:593px;
    background-position:-391px -363px;
    background-image:url(../images/Icons.jpg);
 }
#nav2 li {
    float:left;
    display:inline;
    position:relative;
 }
#nav2 a {
    height:124px;
 }
#nav2 span { 
    height:124px; 
 }
#bps,#bps span {
    width:131px;
    background-position:-28px -1041px;
 }
#hps,#hps span {
    width:131px;
    background-position:-180px -1041px;
 }
#scp,#scp span {
    width:131px;
    background-position:-332px -1041px;
 }
#pay,#pay span {
    width:131px;
    background-position:-484px -1041px;
 }
#email,#email span {
    width:131px;
    background-position:-849px -1041px;
 }
#bps:hover span {
    width:131px;
    background-position:-28px -460px;
    background-image:url(../images/Icons.jpg);
 }
#hps:hover span {
    width:131px;
    background-position:-180px -460px;
    background-image:url(../images/Icons.jpg);
 }
#scp:hover span {
    width:131px;
    background-position:-332px -460px;
    background-image:url(../images/Icons.jpg);
 }
#pay:hover span {
    width:131px;
    background-position:-484px -460px;
    background-image:url(../images/Icons.jpg);
 }
#email:hover span {
    width:131px;
    background-position:-849px -460px;
    background-image:url(../images/Icons.jpg);
 }

I'd also like to be able to move '#content1' down about 10 pixels from the top of the page (but when I add 10 pixels to the 'margin-top' it moves the background image for '#container1' down with it!?

I would be incredibly grateful for any and all help.

My very best wishes,

Tom

Firstly, I'd like to say that I've been browsing this forum for a while now, as well as sites such as w3schools, and I've found it all to be very helpful. But now I have a situation that I haven't been able to solve on my own.

Essentially, I want to make a clear and simple CSS-based layout that will work across browsers and platforms. I use a Mac myself, and it's difficult for me to check for problems with Internet Explorer. The problem I'm currently having concerns layout and positioning.

Here's a link to the splash page I'm working on for a student organization: http://individual.utoronto.ca/ghp/fasu2006/

Before I make the full site I want to work out layout troubles I've been having.

I got on a PC and the text when viewed with IE did not seem to properly align within the opaque white box I made for it. I've been feeling a little overwhelmed with concepts of absolute vs. relative positioning, unit values such as percents, px, em, and making use of things like padding, margins etc. and I'm hoping I can get some advice.

So in one sentence, here is my question: How can I position elements (text, divs, images, anything) on the screen using CSS in an efficient way that will produce a similar result in different browsers?

Here is the code that I think is relevant:

Code:

p {font-size: .75em; font-weight: bold; margin-left: 12em;
		margin-top: 8em;}

	#content {margin-top: 10px; margin-bottom: 10px;
		margin-right: auto; margin-left: 3em;
		width: 800px; padding: 20px;
		background: transparent;}

	#overlayback {position: absolute; top: 8em;
		left: 15em; width: 250px; height: 250px;
		z-index: 0;
		filter: alpha(opacity=80); opacity: .80;
		background: #FFF;}

	#overlaytext {position: absolute; top: 3em;
		left: 15em; z-index: 1;}
		
	h1 {font-size: 6em; margin-left: .1em;
		margin-top: .75em;}

	h2 {font-size: 1em; font-weight: normal;
		margin-left: 9em; margin-top: -4.5em}
</style>
</head>
<body>
	<div id="content"><img src="images/tower.gif" width="297" height="422" alt="tower">
		<div id="overlayback"></div>
		<div id="overlaytext"><h1>fasu</h1>
		<h2>2006-2007</h2>
		<p>coming soon</p></div>
	</div>

I hope I've been clear and thanks in advance for any advice. It's very much appreciated.

Hi,

q)I have a horizontal menu of 4 text buttons on top on screen and another bit of text on the left of it . I have a text element on far left and 4 text elements on far right . The whole section is in a div tag which displays it in a horizontal bar of 10% height.

To place the text elements of far right I use float but this displays it on line below where i want it. I want text on far left and menu on far right (no spaces between each link) all in the same line.

Code:

#t1 a {font-size:10px;
	font-family:verdana;
	font-weight:bold;
	border:1px outset aqua;
	background-color:aqua;
	color:#000000;
	text-decoration:none;
	display:inline;
	width:15%
	word-spacing: 0;



}
...
<div id="t1">


 This is the 
place where the logo goes

 <a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>      
  <a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>  
</div>