|
CSS - Opera Z-index & Overlapping
This layout I've created seems to be working in Firefox Mac & PC, Internet Explorer 6 and Safari, but on Opera for Mac (haven't tried it on Opera for PC yet) I'm having some trouble.
The div "footer" acts as a means to hold the copyright as well as the background for the very bottom of the blog section. This works correctly in all the browsers I listed, but in Opera the div covers up the blog section. This does happen in the other browsers if I place the footer div in the code after the blog div (where I originally had it), but moving it before the blog div doesn't resolve that problem in Opera. Anyone have any ideas? Similar TutorialsI am having a heck of a time dealing with IE7 and how it handles z-index tags on SELECT elements and DIV's. This problem only exists in IE7 and does not manifest in IE6, Firefox (Mac/Win) or Safari (Mac/Win). I've posted a concise example of my problem on one of my servers to better illustrate my problem: Sample Problem Page. Check it out using IE6 and then using IE7. Or if you don't have IE6, I've posted a screenshot of what it looks like. I would appreciate any help solving this problem for IE7. Feel free to copy the source code and play with it and even keep the combo-box drop down code for your own use (if you help me get it working of course, ha ha). Hi guys, Maybe some of you could shed some light on this little problem. I'm currently working on a site redesign, the page in question can be found HERE. When hovering over the ZOOM button in Opera the mouseover image is partially hidden, and in one particular case (2nd ZOOM button down) after rolling off the image the mouseover image partially remains. Works fine in Firefox and Safari (been unable to test in IE yet) I'm guessing the problem comes down to z-index but my understanding of it is pretty poor. Any insight would be much appreciated (yes the coding's messy... it's a work in progress ) 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> </div> <div>wish u happy and safe diwali</div> <div> </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 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 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? 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 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. 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'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> 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> 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. Hey there CSS folk, Well, I have what appears to be an overlapping issue in both Chrome and Internet Exploder: Please go he http://www.ultimatelandsale.com/ If you notice on the right side, just below where it says "Browse," the word "Contact" gets cut off. I've tried lengthening the middle div, but to no avail...it still gets cut off. Any ideas as to what's causing this? Much thanks in advance! 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 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'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.) 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 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 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! |
|||||||