CSS - Is There A Way To Prevent The 2 <div> Tags From Overlapping Each Other??

New construction of a website. I've had no issue with any css. As soon as I started to put in my blog (Wordpress), I realized that changing a would effect other tags that were no encased in this . I dismissed as a flaw in my code that wasn't working correctly with the Wordpress theme. However, now I'm have the same issue with an RSS reader. The code works perfectly in IE9 and Chrome v7. But, it doesn't work in Firefox.

http://www.imzac.com/truf.php
http://www.imzac.com/common/master.css

In the recent post section, you see my heading is larger and has a different weight. This is the only tag that code has allotted for these properties. However, it effects the "Continue Reading" and the link at the footer of my page. Again, no issues in IE9 and Chrome v7.

Here's the RSS feed script. What's you're looking for is about halfway down and then near the end. It's the <title> lines.

Code:

<?php
 
    <?php
 
    require_once("rsslib.php");
 
    echo RSS_Display("http://www.xul.fr/rss.xml", 15);
 
    ? >
*/
 
$RSS_Content = array();
 
function RSS_Tags($item, $type)
{
 
        $y = array();
        $tnl = $item->getElementsByTagName("title");
        $tnl = $tnl->item(0);
        $title = $tnl->firstChild->textContent;
 
        $tnl = $item->getElementsByTagName("link");
        $tnl = $tnl->item(0);
        $link = $tnl->firstChild->textContent;
        $tnl = $item->getElementsByTagName("pubDate");
        $tnl = $tnl->item(0);
        $date = $tnl->firstChild->textContent;        
 
 
        $tnl = $item->getElementsByTagName("description");
        $tnl = $tnl->item(0);
        $description = $tnl->firstChild->textContent;
        $y["title"] = $title;
        $y["link"] = $link;
        $y["date"] = $date;        
        $y["description"] = $description;
        $y["type"] = $type;
 
        return $y;
}
 
function RSS_Channel($channel)
{
    global $RSS_Content;
    $items = $channel->getElementsByTagName("item");
 
 
    // Processing channel
 
    $y = RSS_Tags($channel, 0);        // get description of channel, type 0
    array_push($RSS_Content, $y);
 
    // Processing articles
 
   foreach($items as $item)
    {
        $y = RSS_Tags($item, 1);    // get description of article, type 1
        array_push($RSS_Content, $y);
    }
}
 
function RSS_Retrieve($url)
{
    global $RSS_Content;
    $doc  = new DOMDocument();
    $doc->load($url);
    $channels = $doc->getElementsByTagName("channel");
 
    $RSS_Content = array();
    foreach($channels as $channel)
    {
         RSS_Channel($channel);
    }
}
 
function RSS_RetrieveLinks($url)
{
    global $RSS_Content;
    $doc  = new DOMDocument();
    $doc->load($url);
    $channels = $doc->getElementsByTagName("channel");
 
    $RSS_Content = array();
    foreach($channels as $channel)
 
    {
        $items = $channel->getElementsByTagName("item");
        foreach($items as $item)
        {
         $y = RSS_Tags($item, 1);    // get description of article, type 1
         array_push($RSS_Content, $y);
       }
    }
}
 
function RSS_Links($url, $size = 15)
 
{
    global $RSS_Content;
 
    $page = "<ul>";
  
    RSS_RetrieveLinks($url);
 
    if($size > 0)
 
        $recents = array_slice($RSS_Content, 0, $size + 1);

    foreach($recents as $article)
 
    {
        $type = $article["type"];
 
        if($type == <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> continue;
        $title = $article["title"]; 
        $link = $article["link"];

        $page .= "<span class=\"title\" style=\"font-color:469EB5;\"><a href=\"$link\">$title</a></span>\n";            
 
    }
 
    $page .="</ul>\n";
    return $page;
}
function RSS_Display($url, $size = 15, $site = 0, $withdate = 0)
{
    global $RSS_Content;
 
    $opened = false;
    $page = "";
    $site = (intval($site) == <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> ? 1 : 0;
 
    RSS_Retrieve($url);
    if($size > 0)
        $recents = array_slice($RSS_Content, $site, $size + 1 - $site);
 
    foreach($recents as $article)
    {
        $type = $article["type"];
        if($type == 0)
        {
            if($opened == true)
            {
                $page .="</ul>\n";
                $opened = false;
            }
            $page .="<b>";
        }
        else
        {
            if($opened == false) 
            {
                $page .= "<ul>\n";
                $opened = true;
            }
        }
        $title = $article["title"];
        $link = $article["link"];
 
        $page .= "<span class=\"title\" style=\"font-color:469EB5;\"><a href=\"$link\">$title</a></span>\n";            
        if($withdate)
        {
      $date = $article["date"];
      $page .=' <span class="rssdate">'.$date.'</span>';
    }
        $description = $article["description"];
        if($description != false) 
        { 
            $page .= "<br><span class='rssdesc'>$description</span>"; 
        } 
        $page .= "</li>\n";            

        if($type==0)
        {
            $page .="</b><br />";
        }
    }
    if($opened == true)
    {    
        $page .="</ul>\n";
    }
    return $page."\n";
}
?>

Any help will be greatly appreciated. Thanks.

been trying to get this to work for a while now , but have had no luck, this works fine in IE but firefox seems to overlap my footer div. http://www.urbandream.net/mms/common/layout/site.html

if anyone could help or point me in the right direction I owuld be greatful.

Also if anyone is on a mac, I owuld be greatful of a screen shot to see how it looks.

scott

My problem can be viewed here
http://emediastudios.com.au/emma/photography/babies.html

My problem is i want the image on mouse over to be on top of the stack.

CSS
Code:

#imgmenu {position:relative; top:0px; left:0px; width: auto; background-color: #FFFFFF;  border:solid 1px #FFFFFF} 
#imgmenu .p1 {display:block; width: auto; height: auto; text-decoration:none; background: #FFFFFF; top:0; left:0; border:0;} 
#imgmenu .p1:hover {text-decoration:none; background-color: #FFFFFF; color:#000;} 
#imgmenu .large {
	display:block;
	position:absolute;
	width:0;
	height:0;
	border:0;
	top:0;
	left:0;
	z-index: 601;
	visibility: visible;
} 
#imgmenu .p1:hover .large {display:block; position:absolute; top:-85px; left:50px; width: auto; height: auto; border:3px solid #FFFFFF;} 
#info {z-index:500; height:22em;} 

HTML
Code:

<td><div id="imgmenu"> 
<a class="p1" href="#nogo" title="thumbnail image"><img src="/emma/photography/babies/Ralph3.jpg" alt="Thumbnail image" border="0" title="Thumbnail image" / ><img src="babies/big/Ralph3.jpg" alt="Enlarged view of image" name="info" class="large" id="info" title="Enlarged view of image" /></a> 
</div> </td>

Please Help

I am new to css, and i have a div that is overlapping another div if the page gets too long. It looks fine in IE, but not in Firefox.. here is what I have:

style.css
Code:

body 
{  
font-family: Verdana, Arial, Helvetica, sans-serif; 
background-attachment: fixed; 
font-size: 11px; 
color: #FFFFFF;
background-color: #000000; 
background-image: url(images/page_bg.jpg); 
margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; 
padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; 
background-repeat: repeat-x;
}

td
{
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px;
color: #FFCC00;
}


#mainarea 
{  
background-color: #000000; 
width: 756px;
align: center;
text-align: center
}

#logo 
{  
float: right; 
width: 221px;
border: #CCCCCC; border-style:solid;
border-top-width: 2px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 2px;
}

#quote 
{  
padding-top: 5px; 
padding-left: 5px;
text-align: left;
border: #CCCCCC; border-style:solid;
border-top-width: 2px; border-bottom-width: 0px; border-left-width: 2px; border-right-width: 0px;
}

#mainimage
{  
float: left; 
width: 756px
}

#footer
{  
background-color: #000066;
padding-bottom: 5px;
text-align: left;
padding-left: 5px;
vertical-align: top;
border: #CCCCCC; border-style:solid;
border-bottom-width: 2px; border-top-width: 0px; border-left-width: 2px; border-right-width: 2px;
}

#middlearea
{
background-color: #000000; 
background-image: url(images/bg-mainarea.jpg); 
text-align: left;
height: 415px;
vertical-align: top;
background-repeat: no-repeat;
background-align: left;
border: #CCCCCC; border-style:solid;
border-bottom-width: 2px; border-top-width: 0px; border-left-width: 2px; border-right-width: 2px;
}

#leftnav 
{  
float: left;
width: 198px;
vertical-align: top
}

#content
{
color: #999999; 
float: right; 
width: 527px; 
padding-left: 7px; 
padding-right: 7px; 
padding-bottom: 7px; 
padding-top: 15px; 
line-height: 18px;
vertical-align: top
}

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

a:hover 
{  
color: #6699CC; 
text-decoration: underline
}

main.html
Code:

<html>
	<head>
		<title>Title Here</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
<body>

<div align="center">

<div id="mainarea">

<div class="style1" id="logo">
	<img src="images/logo.gif">
</div>

<div id="quote">
	Put some kind of a quote/saying/slogan here?<br><br><br>
</div>

<div id="mainimage">
	<img src="images/image-home.jpg">
</div>

<div style="clear:both">
</div>


<div id="middlearea">

<div id="content">
blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
</div>

<div id="leftnav">
Navigation Links Here
</div>
</div>
<div id="footer">
	Footer text here
</div>
</div>
</div>
</body>
</html>

Hey guys,

I have a user list page with the different page numbers at the top and bottom. The problem is when their is two rows of numbers they over lap. This can be seen here; http://www.scriptscribes.net/projects/us/beta_1/user_system.php?module=user_list.

Heres the CSS for that section

Code:

ul.pagination { margin-bottom: 10px;margin-top:10px; }
ul.pagination li
{
 display: inline;
 padding: 5px;
 border: 1px solid #fff;
} 
  
ul.pagination li a { color: #fff; }
ul.pagination li.selected { background-color: #fff; }ul.pagination li.selected a { color: #333; } 
  
ul.pagination li:hover { background-color: #666;border: 1px solid #fff; }
ul.pagination li:hover a { color: #fff; }

Any suggestions?

Thanks,
Corey

Hi...

I am not a coder, Im new at this. Im not even really sure how to explain my problem either, so bear with me, please.

I am working on a theme for a site that allows you to edit the css style applied to the page, like myspace.com. Unfortunately there are limitations to this, like how many section IDs there are and such. In order to make a custom page, I am using ordered lists in BBcode.

In forefox, I was able to move the ordered lists outside of their section by using positioning, but unfortunately in IE, it would not allow this. Basically the lists would be hidden/invisible outside of the section element parameters. So, again in order to work around this, I made the section the ordered lists were in cover the entire page.

Firefox handled this fine, and the elements on the page worked together so long as text was not right on top of links etc.

IE, no such luck. The links in another section do not activate even though they are not visually overlapping. This creates a problem for me, as I will now need to make another ordered list to create links which will activate. Is there a way I can get around this?

Because I have a section which covers the entire page in IE, and overlaps onto other sections, I'm looking for code which will allow the sections in IE to overlap without causing one section or the other to behave incorectly.

Anyway, here is the link to my page so you can see what I mean. The links in question are the little glowy circles. They work in firefox, but they only appear in IE and will not act as links. Any help would be appreciated. I dont mind re-doing the code and the lists in order to avoid adding more code to create links which work.

http://www.gaiaonline.com/profile/index.php?view=profile.ShowProfile&item=305091

Thanks

Kim

I'm new with CSS and have been trying to find an answer to an issue with overlapping divs in my layout.

It's a two-column type layout -- the left side should stay static width and the right should resize with the window. Right now, if you close the window enough, the two divs overlap. What am I doing wrong here? I prefer that they not overlap and that the right side (#maincontent) just resize vertically/scroll. Any help would be greatly appreciated.

Here's some of the CSS:

Code:

#content { margin-top: 24px; position: relative; width: 100%; overflow: auto }

#maincontent { position: relative; right: 8%; width: 56%; float: right }

#sidebar { position: absolute; width: 404px; float: left }

whats is wrong with my code???? why is css-drop-down overlapping my
category text??? can u figure it out????

Code:-
http://aquaciti.com/tools/index.htm


thnx for your help

I'm trying to overlap two divs -- currently works fine in FF, but not IE 6 or 7. I need the left column to overlap the right column. Here's a sample of what I have:

CSS
Code:

body {
   background-color:#e4ebf7;
   height:100%;
}

#outer  {
   position:relative;
   margin:0 auto;
   width:1000px;
   padding:0px;
   overflow:visible;
   height:100%;
   z-index:1;
}

#header {
   position:relative;
   height:28px;
   border:1px solid #5e5e5e;
   margin-bottom:5px;
   z-index:2;
}

#left_column {
   position:relative;
   height:100%;
   float:left;
   width:277px;
   overflow:visible;
   z-index:4;
}

html #right_column {
   height:768px;
}

#right_column {
   position:relative;
   background-color:#FFFFFF;
   border:1px solid #5e5e5e;
   border-left:none;
   margin-left:5px;
   min-height:768px; 
   height:auto;
   z-index:3;
}

#footer {
   clear:both;
   height:35px;
   background-color:#FFFFFF;
   border:1px solid #5e5e5e;
   margin:0;
   margin-top:15px;
   z-index:2;
}

HTML
Code:

<body>
<div id="outer">
  <div id="header">stuff here</div>
  <div id="left_column">bunch of other divs here</div>
  <div id="right_column">bunch of other divs here</div>
  <div id="footer">footer stuff here</div>
</div>
</body>

Hey, I'm new both here, and to CSS, but I hope to learn. I just dove into it headfirst today, and I'm having some trouble.


Here's the whole source code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

        <title>WFSE- American College Radio</title>
<style type="text/css">
img{border:none;}
#ban{height:160px; background-image: url(bg13.jpg); margin:0px; padding:0px;}
#menu{height:40px; background-color:#462529; margin-left: auto; margin-right: auto; text-align: center; padding:0px;margin:0px;}
#main{height:100%; background-image: url(bg14.png); margin:0px; padding:0px;}
#break{height:13px; width: 21%; background-color:#462529; text-align: center; padding: 0px; filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70;font-family:Verdana, Arial, Helvetica;font-size: 13px; line-height:13px; font-style:bold; font-color:#000000; float: right; clear: right;}
#content{width:69%; height:100%; margin-left: 25px;padding: 0px; background:white; float:left; filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;font-family:Verdana, Arial, Helvetica;font-size: 14px;line-height:26px;text-align:center;}
#sidebar {width:21%;margin-right:0px;padding:0px;background:white;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;font-family:Verdana, Arial, Helvetica;font-size: 14px;line-height:26px;text-align:right;float: right; clear: right;}
</style>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

<div id="banner">
<p id="ban">
<img src="ban1.jpg" border="0" alt="WFSE American College Radio" align="left">
</p>
</div>

<div id="menuuu">
<p id="menu">

<img src="mainbutton.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />

<img src="djprofiles2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />

<img src="music2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />

<img src="sports2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />


<img src="links2.jpg" style="opacity:0.7;filter:alpha(opacity=70)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" />

</p>
</div>



<div id="main">


<div id="sidebar">
    <b>request line</b>:<br>
814-732-2889
</div>
<div id="break">
<b>weather:</b>
</div>


<div id="content">
hey
</div>

</div>

</body>
</html>

Is my website, and I want the content section, floating to the left, to not be interferred with by the content floating on the right. The div should be lined up with the menu at the top. And I'm not entirely sure why there's that blank space where the page ends.

Can anyone help me? I know the source is a mess.


EDIT: Fixed this problem with a "position:absolute", but I'm not sure if this was the best way to solve it or not, or if I'll run into this problem again soon

I was coding some CSS for a tumblr theme i did and i am having a bit of an issue with some( i think overlapping divs) the problem is i have the main body of the theme where all the posts happen and i have a sidebar. Now when the browser is not in full screen the sidebar is fine but when i change it to full screen the side bar overlaps the main body of the theme and sits ontop of it.

sourstripe.tumblr.com link to the place

EDIT:

i fixed the overlapping for now. what happens is if i make the sidebar fixed using position: fixed; then it starts to overlap. and i want the side bar to stay fixed and move down when the user scrolls

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

I am having two problems:

Both involve this page http://oharenoise.org/new/


1. The Contact Us, found on the left-hand side of the page (in grey column) butts up right against the navy blue box above it. This does not occur in all browsers, ie Firefox.

2. The buttons on to the right of the flash animation overlaps the navigation.

Any help with these are much appreciated.

Hi,

I am wondering if someone could tell me why the div "leftcolumn" and a graphic in the div "topright" appear to overlap the div "navigation" when viewed in Firefox on a Mac.

The website is viewed he http://www.oharenoise.org/new/index2.htm

Thanks.