CSS - Click-through Elements?

Hi Guys,

I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet.

Like this (. is the li):
.
Here is My Div Content

I want it to be like this:
. Here is My Div Content

Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure).

Here is my markup.

<ul>
<li>
<div class="dragHandle">
</div>
</li>
</ul>

DragHandle class is as follows
.dragHandle
{
width: 20px;
height: 25px;
background-image: url(/styles/icons/selectarrow.JPG);
background-position: center;
background-repeat: no-repeat;
cursor: move;
}

Interesting situation i have.

In my css i have this declared
Code:
css

a:link, a:visited { color: #c97c0f; text-decoration: none; font-weight: bold; } 

a:active, a:hover { color: #82581d; text-decoration: underline; }
div#buenprov_content a:link, a:visited { color: #644e14; text-decoration: none; font-weight: bold; } 

div#buenprov_content a:hover { color: #35290a; text-decoration: underline; }

For a change, IE displays the link colors correctly, the ones inside the div with the id buenprov_content have the color i want them to, and the rest of the page has the ones that are global.

However, in firefox, they all inherit the traits from the #buenprov_content

Even links not inside divs with that ID....
as shown: Here ( The ones in the fading content should be a different color )

Im building that site for a restaurant...but anyways, im a bit stumped as to why FF is doing this...any help?

Thanks.

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;
}

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 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 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

hello everyone, 'tis my frist post... Just had'a quick question

I'm working on a page, and l'm trying to create a text input with a background image, that has NO border, so that it nests inside of a table cell with no excess fluff.

However the input has a 1 pixel high "line" that spans across the top of the element, and a 1 pixel high "line" across the bottom as well. I can't seem to get rid of it, is it possible?

here's the code, l was trying to get to work with this:

Code:

<HTML>
<HEAD>
<style>

/*Left searchBar Cap*/
td.leftCap{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_1x1.gif');
	background-position: 0px 0px;
	width: 28;
	height: 50;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}
/*right searchBar Cap*/
td.rightCap{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_1x3.gif');
	background-position: 0px 0px;
	width: 34;
	height: 50;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}


/*searchBar Top bar*/
td.searchTop{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_1x2.gif');
	background-repeat: repeat-x;
	background-position: 0px 0px;
	width: 425;
	height: 16;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}

/*searchBar Bottom*/
td.searchBottom{
	background-color: #c0c0c0;
	background-image: url('images/searchBar_3x1.gif');
	background-repeat: repeat-x;
	background-position: 0px 0px;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
	width: 425;
	height: 15;
}


/*center of searchBar*/
td.searchCen{
	background-color: limegreen;
	background-position: 0px 0px;
	width: 425;
	height: 19;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}

BODY {
	background-color: #c0c0c0;
	background-attachment: scroll;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
	margin-left: 0;
}

/*input*/
.input {
	background-image: url('images/searchBar_2x1.gif');
	color: #191919
	border-width: 0px;
padding: 0px;
border-style: hidden;
border: 0;
border-top-width: 0px;
border-bottom-width: 0px;
	font-family: Comic Sans MS (cursive);
	font-weight: extra-bold;
	font-size: 10pt;
	width: 425; 
	height: 19;
}


</style>
</HEAD>
<BODY>
<center>
<form>
<table cellpadding="0" cellspacing="0">
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="leftCap">
</table>
<td>
<table bgcolor="#c0c0c0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchTop">
<tr>

<td class="searchCen">
<input type="text" size="40" class="input" value="search google ... ">


<tr><td class="searchBottom">
</table>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightCap">
</table>
<td>

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a onClick="javascript:searchGoogle();" href="#">
<img border="0" src="images/searchBar_1x4.gif" width="113" height="50"></a>
</table></table>
</form>
<script>
query = document.forms[0].elements[0].value;
function searchGoogle(){
if(query){
url = "http://www.google.com/search?hl=en&lr=&q="+query+"&btnG=Search";
window.open(url);
}}
</script>

</BODY>
</HTML>

Thanks for your help!
Samantha G.

Hi everyone

Hoping someone can help with a niggly problem. My site is working great in Mozilla but I'm getting a gap between two divs in IE6 and Opera 7. Compare the following in IE6, Opera 7 and Mozilla and see the gap below both the 'welcome' and 'latest' graphics:

http://www.crashingbydesign.com.au/newsite/

The relevant code is as follows:

Code:

<div id="content_container">
  <div id="belowbg">
    <div id="left"> 
       <div id="h3lft"> 
          <h3>Welcome</h3>
       </div>
       <div id="contentlft">
	<p>Lorem ipsum ...</p>
       </div>
       <div id="footlft"></div>
     </div>
     <div id="right"> 
       <div id="h3rght"> 
          <h3>Latest</h3>
        </div>
	<div id="contentrght">
				<p>Lorem ipsum ...</p>
	</div>
	<div id="footrght"></div>
     </div>
   </div>
   <div id="footer"> 
      <p>text</p>
    </div>
</div>

The relevant CSS is as follows:

Code:

#content_container {
	position: absolute;
	top: 406px;
	left: 50%;
	margin: 0 0 0 -372px;
	width: 742px;
	height: auto;
	z-index: 10;
}

#belowbg {
	padding: 0 11px 11px 11px;
	width: 720px;
	height: auto;
	background-color: #313131;
}

/*hack to ensure that Mozilla encloses the floats with the #belowbg div*/
#belowbg:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#left {
	float: left;
	width: 481px;
	height: auto;
	padding: 0;
	margin: -25px 0 0 0;
}

#h3lft {
	width: 481px;
	height: 25px;
	background: url(images/welcomehd.gif) no-repeat;
	text-indent: -9000px;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

#contentlft {
	width: 459px;
	height: auto;
	background-color: #293942;
	border: 1px solid #636B73;
	margin: -1px 0 0 0;
	padding: 10px 10px 0 10px;
	font-size: 1.2em;
	line-height: 1.6;
	display: block; 
}

#footlft {
	width: 481px;
	height: 20px;
	margin: -1px 0 0 0;
	background: url(images/welcomeft.gif) no-repeat;
	display: block;
}

#right {
	float: right;
	width: 230px;
	height: auto;
	padding: 0;
	margin: -25px 0 0 0;
}

#h3rght {
	width: 230px;
	height: 25px;
	background: url(images/latesthd.gif) no-repeat;
	text-indent: -9000px;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

#contentrght {
	width: 208px;
	height: auto;
	background-color: #525252;
	border: 1px solid #636B73;
	margin: -1px 0 0 0;
	padding: 10px 10px 0 10px;
	font-size: 1.2em;
	line-height: 1.6;
	display: block;
}

#footrght {
	width: 230px;
	height: 20px;
	margin: -1px 0 0 0;
	background: url(images/latestft.gif) no-repeat;
	display: block;
}

#footer {
	position: relative;
	top: 0;
	left: 0;
	width: 720px;
	height: 188px;
	padding: 20px 10px;
	margin: 0;
	background: url(images/btmhatlines.gif) right no-repeat;
	font-size: 1.1em;
	line-height: 1.6;
	text-align: center;
}

Can anyone see my mistake?

Cheers

Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary.
I should go with the flow.
So I copied a basic page structure and twiddled a little.

Here is the result so far
html link

css link

A couple of questions.
1. Would you say I'm on the right track, or should I be looking at a different style structure?
2. The page appears in ie to have gaps around the elements.
In Mozilla it looks like I hoped it would look.
How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix.
No luck so far. Any help, advice appreciated.
Thanks Solar..

Hi,
here's what i'm looking to do;
i have a css style set for <ul> and <li> elements. Is there a way to bypass the styles for certain lists?

Thank you in advance.

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.