CSS - Overlapping Issue?

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

Hi folks,

Can anyone possibly help me with this layout, the blue slideshow box is overlapping the login box ?

~url removed~

Also, I am viewing this at 1440x900 screen res. Is anyone having probs with the view / layout?

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.

I am building a mail account (Inbox) which is using css.now there is a specific mail which contains some css elements like

[code]

<div>Dear all,</div> <div>&nbsp;</div> <div>wish u happy and safe diwali</div> <div>&nbsp;</div> <div>luv</div> <div>Vinoth<BR><BR><B><I>Palanivel_J@Dell.com</I></B> wrote:</div> <BLOCKQUOTE class=replbq style="PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #1010ff 2px solid"> <META content="MSHTML 6.00.2900.2963" name=GENERATOR> <STYLE>v\:* { BEHAVIOR: url(#default#VML) } o\:* { BEHAVIOR: url(#default#VML) } w\:* { BEHAVIOR: url(#default#VML) } .shape { BEHAVIOR: url(#default#VML) } </STYLE> <STYLE>@page Section1 {size: 8.5in 11.0in; margin: 1.0in 1.25in 1.0in 1.25in; } P.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } LI.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } DIV.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } A:link { COLOR: blue; TEXT-DECORATION: underline } SPAN.MsoHyperlink { COLOR: blue; TEXT-DECORATION:
underline } A:visited { COLOR: purple; TEXT-DECORATION: underline } SPAN.MsoHyperlinkFollowed {


when this mail is opened, its css interferes with the css of the page.
as a result links all over the page are colored in blue.
what is the method to avoid or ignore any css of the mail.
Regards
Rupam

http://www.mrossana.com/eesdvr/

The main thing that I am worried about here is in the header. The header looks exactly the way I want it to in Firefox (Mac and PC) and Safari (Mac), but, in Internet Explorer, the "headerborder" div overlaps the ul menu in the "header" div. The "header" ul comes before the "headerborder" div in the code, so, with the negative top marging, the "headerborder" div should be behind the ul menu. Any ideas on how to fix this in IE? Do I have to add some z-index values? Or is there a better way to do this layout? Any suggestions greatly appreciated.

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

Could you take a look at www.tscweb.co.uk/contact.php?

I do not want the bottom slogan DIV to overlap the form on the right.

TIA,
Terry

I'm attempting to create three layers, each containing a selection list form item, only one of which will be visible at any one time, based on the selection of another selection list (not shown in the code below).
The layers must be centered within a Table cell:

Code:

<table style="width:90%">
  <tr>
    <td style="text-align:center;">
      <div id="layer1" style="width:100%;">
        <select id="select1">
          <option selected>Option 1</option>
          <option>Option 2</option>
        </select>
      </div>

      <div id="layer2" style="width:100%;">
        <select id="select2">
          <option selected>Option A</option>
          <option>Option B</option>
        </select>
      </div>

      <div id="layer3" style="width:100%;">
        <select id="select3">
          <option selected>Option 1A</option>
          <option>Option 2B</option>
        </select>
      </div>
    </td>
  </tr>
</table>
.
.

This alone renders each layer sequentially, one on top of the other, vertically on the page, which is not what I want.

I have tried using z-index values, but I think the problem stems more from the position value.
I have tried using: Code:

position:relative; left:0px; top:0px;

on each layer, but nothing changes.
I then tried using: Code:

position:absolute; left:0px; top:0px;

on each layer, and the layers *did* overlap each other, but were placed at the top of the page.

So before I tear out all of my hair, does anyone have a suggestion for how to place these layers within a table cell so that they are a) centered horizontally within the cell, and b) overlap each other?

Any help would be greatly appreciated.

Thanks!

- coredumped.

hi there

trying to create a overlapping div
but this wouldn't work
Code:

#overlapBar {
	position:absolute;
	width: 250px;
	height: 270px;
	z-index: 2;
	top: 10px;
	left: 600px;
}

but with a layer it does work
Code:

<div id="overlapBar" style="position:absolute; left:600px; top:5px; width:250px; height:270px; z-index:1 ">

I like to have all my css in one file, so how can I overlap and position with <div>

thnks in advance

I am having trouble overlapping these two layers, they need to be relative.

here is the code

Code:

 <div id="layer1" style="position: relative; width: 99%; height: 100px; z-index: 1; border: 0px solid gray; color: #CC0066;">
<table width="80%" cellspacing="2" cellpadding="2" border="0" align="center">
<tr>
<td style="filter: Alpha (Opacity=50); -moz-opacity: .5;" bgcolor="#EBAAA5" width="50%" height="40"></td>
<td style="filter: Alpha (Opacity=50); -moz-opacity: .5;" bgcolor="#EBAAA5"></td>
</tr>
</table>
</div>
<div id="layer2" style="position: relative; width: 99%; height: 100px; z-index: 2; border: 0px solid black;">
<table width="80%" cellspacing="2" cellpadding="2" border="0" align="center">
<tr>
<td width="50%" height="40"><font face="verdana" size="2"><b>Oh, this is fantastic!</b></font></td>
<td><center><font face="verdana" size="2"><b>This works for Firefox and IE.</b></font></center></td>
</tr>
</table>
</div>

any ideas?
thanks!

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>

Hi, I'm a bit confused with the relative/absolute positioning issue. I thought that relative would carry the normal flow of things, but as you can see with the code below, all of the DIV items that should follow each other are overlapping even though positioning is set to relative. Can anyone help me out as to what I am doing wrong?

Thanx


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
padding : 0;
margin-top:10px;
margin-bottom:0px;
background:#FFF;
height: 0px;
width: 0px;
margin-right: 0px;
margin-left: 0px;
}

.titleBlue{
font-family: Arial;
font-size:18px;
color : #003896;
}

.darkBlue{
font-family: Verdena;
font-size:11px;
color : #003896;
font-weight : bold;
}


.smallStyle{
font-family: verdana;
font-size:10px;
color : #000000;
text-decoration : none;
}

#content{
position : relative;
left:50%;
width:730px;
margin-left:-365px;
}

#hrColumn{
position : absolute;
top : 0;
left : 0;
width : 149px;
border-right: 1px dotted #5D89D1;
margin-right : 5px;
}

#hrLogo{
position : relative;
top : 0;
margin-bottom:5px;
}

#linkSection{
position : relative;
margin-bottom:10px;
}

#columnLink{
position : relative;
}

#linkArrowItem{
position : absolute;
top : 3px;
}

#linkItem{
position : absolute;
left : 12px;
}
</style>
</head>

<body>
<div id="content">
<div id="hrColumn">
<div id="hrLogo" class="titleBlue">Blablabla</div>
<div id="linkSection" class="smallStyle">
<div id="columnLink">
<div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div>
<div id="linkItem"><a href="#">Programs and Forms</a></div>
</div>
<div id="columnLink">
<div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div>
<div id="linkItem"><a href="#">Development and Training</a></div>
</div>
<div id="columnLink" class="smallStyle">
<div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div>
<div id="linkItem"><a href="#">Careers</a></div>
</div>
<div id="columnLink" class="smallStyle">
<div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div>
<div id="linkItem"><a href="#">More...</a></div>
</div>
</div>
</div>
</div>

</body>
</html>

Hi,

I'm creating a website for a new local buisness (Hat Hire Shop).
I'm having some trouble with IE and getting images to overlap two <div>'s.

If you look at this page using Firefox: http://209.123.229.141/hatz/index.html
User: hatz Pword: hatz
Then you can see the correct layout.
If you view it in IE, then you will see that the images are in the top <div> only and will not overlap.

CSS He http://209.123.229.141/hatz/css/

(Images used are only examples found on the Internet. Client will be providing images of their actual hats.)

The problem I'm referring to can be seen he

http://www.bertelsen.ca/microeconomics/micro-class-2

If you scroll down to the bottom it seems as though there is a white border overlapping some of the text. I really don't know how to explain it past that.

Any suggestions?