PDA

Click to See Complete Forum and Search --> : This no longer works in Firefox...

dirt lover
11-14-2007, 11:10 PM
<head>
<title>PB media > News</title>
<style type="text/css" media="screen">

h1 {border-bottom:dotted 1px #000000;margin-bottom:0px;}
h2 {margin-bottom:0px;}
h2#archives {font-family: Verdana; font-size: 15pt; }
h3 {padding-top:30px;color:#555555;padding-bottom:0px;margin-bottom:0px;}
#navbar-iframe{height:0px; display:none;}
div.blogPost
{
position: relative;
top: px;
left: 0px;
text-align: left;
width: 665px;
background-color: #787878;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
}

div.byline {color: Black;font-family: Verdana; font-size: 6pt;}


p#bloggerBug {padding-top:20px;}
.blogComments {text-align: center; padding-top:30px;color:;padding-bottom:0px;margin-bottom:0px;font-weight:bold}
.blogComments .byline {font-size:1em;font-weight:normal;color:;display:inline}
.blogComment {font-size:1em;margin:;color:;font-weight:normal}
.deleted-comment {font-style:italic;color:gray;}
#blogfeeds {font-family: Verdana; font-size: 6pt;}
#postfeeds { }

a:link {color: Black; text-decoration: underline;}
a:visited {color: Black; text-decoration: underline;}
a:hover {color: Red; text-decoration: underline;}
a:active {color: Red; text-decoration: underline;}

body
{
background-image: url('http://mediabypb.smugmug.com/photos/204727292-O.jpg');
background-repeat: repeat-x repeat-y;
text-align: center;
}

#myWrapper
{
margin-left: auto;
margin-right: auto;
position: relative;
top: 8px;
height: 566.5px;
width: 900px;
z-index: -1;
background-color: #555;
border-left: 3px solid #333;
border-right: 3px solid #282828;
border-top: 2.5px solid #333;
border-bottom: 2.5px solid #282828;
}

#postsWrapper
{
position: relative;
top: 10px;
left: 0px;
_left: -94px;
width: 703px;
height: 345px;
overflow-x: hidden;
overflow-y: scroll;
border-top: 1.2px solid #333;
border-bottom: 1.2px solid #333;
scrollbar-base-color: #555;
scrollbar-arrow-color: #555;
scrollbar-DarkShadow-Color: #222;
}

#headerBanner
{
text-align: center;
width: 900px;
height: 134px;
position: relative;
top: 0px;
}
#page-title
{
z-index: 1;
position: relative;
top: 13px;
}
#page-title_bar
{
margin-left: auto;
margin-right: auto;
width: 900px;
background-color: #333;
z-index: 1;
border-bottom: 1px solid Black;
}
#p-title
{
text-align: center;
font-size: 18px;
font-family: Arial, Verdana, sans-serif;
letter-spacing: 3pt;
color: White;
}


a.main-navigation-l
{
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
color: White;
}
a.main-navigation-l:visited
{
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
color: White;
}
a.main-navigation-l:hover
{
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
color: Red;
}

#main-links
{
width: 900px;
height: 25px;
z-index: 1;
position: relative;
top: 13px;
}
#main-links_bar
{
width: 900px;
background-color: #222;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#footer
{
width: 900px;
height: 25px;
z-index: 1;
position: relative;
top: 12px;
text-align: center;
margin-left: 0 auto;
margin-right: 0 auto;
}
#footer_bar
{
width: 900px;
background-color: #222;
}

#blog-footer
{
text-align: center;
width: 900px;
}

#rightColumn
{
position: relative;
top: -357px;
left: 709.5px;
width: 180px;
height: 325px;
border: 1px dotted Black;
index: 20;
padding-top: 15px;
}

#searchBox

#archivesBox

#bloggerBox
{position: relative; top: 10px;}



</style>
<$BlogMetaData$>
</head>
<body>
<div id="myWrapper">




<!-- start Header -->

<div id="headerBanner">
<img src="http://mediabypb.smugmug.com/photos/201780611-O.jpg" alt="" /></div>

<div id="page-title">
<table id="page-title_bar">
<tr>
<td align="center" width="900px"><a id="p-title">PB media > News</a></td>
</tr>
</table>
</div>

<div id="main-links">
<table id="main-links_bar">
<tr>
<td width="180px"><a class="main-navigation-l"href="http://www.mediabypb.com/index.html">Index</a></td>
<td width="180px"><a class="main-navigation-l"href="http://www.mediabypb.com/n.html">News</a></td>
<td width="180px"><a class="main-navigation-l"href="p.html">Photography</a></td>
<td width="180px"><a class="main-navigation-l"href="http://www.mediabypb.com/pb.html">Patrick Branch</a></td>
<td width="180px"><a class="main-navigation-l"href="http://www.mediabypb.com/ci.html">Contact Info.</a></td>
</tr>
</table>
</div>

<!-- end Header -->

<!-- Blog Posts -->
<div id="postsWrapper">

<Blogger>
<a name="<$BlogItemNumber$>">&nbsp;</a>
<BlogItemTitle><h2><BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$><BlogItemURL></a></BlogItemURL></h2></BlogItemTitle>

<div class="blogPost">
<$BlogItemBody$><br />
<div class="byline"><a href="<$BlogItemPermalinkURL$>" title="permanent link"><$BlogItemDateTime$></a><MainOrArchivePage><BlogItemCommentsEnabled>&nbsp;<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a></BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$> </div>
</div>
<ItemPage>
<div class="blogComments">

<BlogItemCommentsEnabled><a name="comments"></a>
<$I18NComments$>:
<BlogItemComments>
<div class="blogComment">
<a name="<$BlogCommentNumber$>"></a> <$BlogCommentBody$><br />
<div class="byline"><a href="<$BlogCommentPermalinkURL$>" title="permanent link">#</a> : <$BlogCommentDateTime$></div>

<$BlogCommentDeleteIcon$>
</div>
</BlogItemComments>
<$BlogItemCreate$>
<p id="postfeeds"><$BlogItemFeedLinks$></p>
</BlogItemCommentsEnabled>
<br /> <br />
<BlogItemBacklinksEnabled>
<a name="links"></a>
<$I18NLinksToThisPost$>:
<BlogItemBacklinks>
<div class="blogComment">
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a>
<$BlogBacklinkDeleteIcon$>
<br />
<$BlogBacklinkSnippet$><br />
<div class="byline">
<span class="comment-poster">
<em> @ <$BlogBacklinkDateTime$></em>
</span>
</div>
</div>
</BlogItemBacklinks>
<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>

<br /> <br />
<a href="<$BlogURL$>">&lt;&lt; <$I18NHome$></a>
</div>

</ItemPage>
</Blogger>

</div>
<!-- start Footer -->
<div id="footer">
<table id="footer_bar">
<tr>
<td width="300px"><a class="main-navigation-l" href="http://www.mediabypb.com/m.html">Misc.</a></td>
<td>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-3011358-2";
urchinTracker();
</script>
</td>
<td width="300px"><a class="main-navigation-l" href="http://www.mediabypb.com/l.html">Links</a></td>
</tr>
</table>
</div>
<!-- end Footer -->

<div id="rightColumn">

<div id="searchBox">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input type=hidden name="bl_url" value="<$BlogURL$>"><label for="search" accesskey="4" />
<input id="search" name="as_q" size="17" type="text" size="10"><input value="Search" name="submit" type="submit"></form>
</div>


<div id="archivesBox"
<h2 id="archives"><$I18NArchives$></h2>
<p><BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>&nbsp;&nbsp;</BloggerArchives>
<script type="text/javascript" language="Javascript">if (location.href.indexOf("archive")!=-1) document.write("<strong><a href=\"<$BlogURL$>\">Current Posts</a></strong>");</script></p>
</div>

<div id="bloggerBox"><p id="bloggerBug"><a href="http://www.blogger.com"><img width="88" height="31" src="http://buttons.blogger.com/bloggerbutton1.gif" border="0" alt="This page is powered by Blogger. Isn't yours?" /></a></p>
<p id="blogfeeds"><$BlogFeedsHorizontal$></p>
</div>
</div>

</div>
</body>
</html>

news.mediabypb.com (http://www.graphicdesignforum.com/forum/news.mediabypb.com)

Any ideas why only the background shows up Firefox, but everything works in IE?
hewligan
11-14-2007, 11:29 PM
#mywrapper has a z-index of -1, which is sending the whole page contents behind the background image.
dirt lover
11-15-2007, 03:01 AM
Thanks so much! I thought the background would always be behind the z-index.
tZ
11-15-2007, 03:40 AM
???

The z-index is a stacking order not a visible object in itself.
hewligan
11-15-2007, 03:51 AM
You're right, but it was a stacking order issue. The z-index on the wrapper div was set so that everything was appearing behind the page background.
dirt lover
11-15-2007, 04:07 AM
Rephrased: I thought the background would always be behind even the lowest z-index level/number.
dirt lover
11-15-2007, 09:53 AM
I need help hacking this for IE....

Right now, I'm trying to get the Wrapper the same size as in Firefox. The height of the wrapper in IE is about twice the size it should be.

The underscore hack isn't doing anything.

height: 566.5px;
_height: 400px;