i solved the other problem, but now IE says there is an error with scroll bars??

sushi4664 · #1 (**permalink**) 05-04-07, 09:21 PM

So I fixed my overlapping issue, which is really cool! And I would like to thank everyone who helped because it helped!

Now there are some other problems. If you open napkinz.com in IE (i did it in IE 7, I don't have IE 6, but if someone does, I would like to know what happens). But if you open it and then click the horizontal bar, IE says there is an error. I am totally confused?

Also if you open napkinz.com in Firefox, and use the horizontal scroll to scroll all the way to right, you will notice there is a lot of empty space. How would I go about making that disappear?

Any help would be very helpful!

Vicious · #2 (**permalink**) 05-05-07, 03:07 AM

body: min-width = 1050px
main: min-width = 750px
right: min-width = 210px

750+210 = 960px

1050-960 = 90px

And 90px seems to be the amount of empty space on the right

(Give or take a few because of margins/paddings/borders)

I also happen to have IE 6, and there is indeed an error when you mousedown the scrollbar. The error is on line 15 of your index.js file.

javascript Code:

hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;

It said "object required", so I guess "hotDog" isn't set.

edit: If you want to read more about events: http://www.quirksmode.org/js/introevents.html and http://www.quirksmode.org/js/events_access.html
Very interesting

sushi4664 · #3 (**permalink**) 05-05-07, 01:01 PM

This is what I have done so far:

I removed the JavaScript pop-up that was causing the problem in IE and I fixed my CSS code to the following:

CSS Code:

html{
 min-width:1030px;
}
body{
 margin: 0px; padding: 0px;
 background:#FE7A3C;
 } 
 
#header, #main, #right {
border:2px solid #333333;
float:none;
margin:0px;padding:0px;
}
 
#right {
background:#FFF428 none repeat scroll 0%;
color:#333333;
margin:0px;
margin-left:20px;
padding:0px;
position:absolute;
right:20px;
top:10px;
width:210px;
z-index:3;
}
 
#main {
background:#FFFFFF none repeat scroll 0%;
color:#333333;
margin:10px 240px 10px 10px;
min-width:730px;
padding:20px;
width:auto;
z-index:1;
}
 
#header {
background:#FFFFFF none repeat scroll 0%;
color:#333333;
margin:10px 240px 10px 10px;
padding:0px 0px 0px 40px;
min-width:730px;
z-index:2;
}
 
#authCom{
margin:10px;
text-align:left;
}
 
div#footer{
clear: both;
padding: 0px;
margin: 0px;
width: 100%;
background: #FFCC33;
height: 20px;
}
 .style2{
 color: #333333;
 font-weight: bold;
 font-size: 11px
 }
 .style3 {
    color: #333333;
    font-weight: bold;
    font-size: 12px;
}
.style1{
    color: #333333;
    font-weight:normal;
    font-size: 14px;
    text-align:justify;
    
}
 
.f1{
 height:18px; width:178px;
}
 
a:link    { color: #333333 }
a:visited { color: #333333 }
a:hover   { color: #FF6600 }
a:active  { color: #FF6600 }
 
#dashed {
    width:80%;
    height:80%;
    padding:10px;
    margin:9.5px;
    border:1px dashed #000000;
} 
 
/*Nifty Corners Cube CSS by Alessandro Fulciniti
The following classes are added dinamically by javascript,
and their use should be avoided in the markup */
 
b.niftycorners,b.niftyfill{display:block}
b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
    overflow:hidden;border-style:solid;border-width: 0 1px}
/*normal*/
b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}
/*transparent inside*/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}

I also added a doctype declaration. The page works in Firefox and Netscape with one glich, the bottom scroll bars don't work. In IE and Opera the #right <div> is again overlapping others. I don't know how it is working with Safari because I don't own a Mac. The reason for the big empty space was that the "pop-up" (which I have deleted) was an invisible div with a width that was huge. And therefore the browser resized to that causing a huge gap between my #right div and my left end of the browser.

So any help would be really nice!

Thanks

jfulton · #4 (**permalink**) 05-06-07, 01:43 PM

The right bar still overlaps everything if you resize the browser because you are using absolute positioning and there is no "container" div. If you wrap the #main and #right divs in a container with relative positioning and a width, it should work.

(I've only checked in Safari and Camino on my mac.)

sushi4664 · #5 (**permalink**) 05-06-07, 02:09 PM

The reasons I didn't switch over the the relative positioning and setup a container div is because the right div would fall down....

Like if you would go to napkinz.com right now, you would notice that the right div is not aligned right.

The CSS Code is following:

CSS Code:

body{
 margin: 0px; padding: 0px;
 background:#FE7A3C;
 min-width:1035px;
 } 
 
#contain{
position: relative;
min-width: 1035x;
border: none;
margin: 0 auto; padding: 0;
}
 
#header, #main, #right {
border:2px solid #333333;
position:relative;
float:none;
margin:0px;padding:0px;
}
 
#right {
background:#FFF428 none repeat scroll 0%;
color:#333333;
margin:0px;
margin-left:20px;
padding:0px;
float:right;
right:10px;
width:210px;
z-index:3;
}
 
#main {
background:#FFFFFF none repeat scroll 0%;
color:#333333;
margin:10px 240px 10px 10px;
min-width:730px;
padding:20px;
width:auto;
z-index:1;
}
 
#header {
background:#FFFFFF none repeat scroll 0%;
color:#333333;
margin:10px 240px 10px 10px;
padding:0px 0px 0px 40px;
min-width:730px;
z-index:2;
}
 
#authCom{
margin:10px;
text-align:left;
}
 
div#footer{
clear: both;
padding: 0px;
margin: 0px;
width: 100%;
background: #FFCC33;
height: 20px;
}
 .style2{
 color: #333333;
 font-weight: bold;
 font-size: 11px
 }
 .style3 {
    color: #333333;
    font-weight: bold;
    font-size: 12px;
}
.style1{
    color: #333333;
    font-weight:normal;
    font-size: 14px;
    text-align:justify;
    
}
 
.f1{
 height:18px; width:178px;
}
 
a:link    { color: #333333 }
a:visited { color: #333333 }
a:hover   { color: #FF6600 }
a:active  { color: #FF6600 }
 
#dashed {
    width:80%;
    height:80%;
    padding:10px;
    margin:9.5px;
    border:1px dashed #000000;
} 
 
/*Nifty Corners Cube CSS by Alessandro Fulciniti
The following classes are added dinamically by javascript,
and their use should be avoided in the markup */
 
b.niftycorners,b.niftyfill{display:block}
b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
    overflow:hidden;border-style:solid;border-width: 0 1px}
/*normal*/
b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}
/*transparent inside*/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}

And if you need the HTML/PHP (its a dynamic page) code it is the following:

PHP/HTML Code:

<? include("../newsConfig.php");include("../comicConfig.php");$sid="956821";include("/home/napkinzc/public_html/stats/write_logs.php");?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>NAPKINZ - HOME - Update Every Sunday</title><meta name="verify-v1" content="oiYH+uqjBdcLpcIDoYAWIRwWkiKf/naNgQjlT6rFvkg="><meta name="resource-type" content="document"><meta name="Generator" content="napkinzc Tag Generator"><meta name="revisit-after" content="5"><meta name="classification" content="Entertainment"><meta name="description" content="A funny web comic created by Yanni Davros"><meta name="keywords" content="napkinz, napkins, napkin, cartoon, comic, funny, yanni, davros, yanni davros, art"><meta name="rating" content="General"><meta name="copyright" content="2007"><meta name="author" content="Ayush Sood"><meta http-equiv="reply-to" content="napkinz@napkinz.com"><meta http-equiv="Content-Language" content="English"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link rel="alternate" type="application/rss+xml" title="The Official Napkinz Feed" href="http://napkinz.com/rss.php"><link rel="stylesheet" type="text/css" href="style.css"><script language="JavaScript" type="text/javascript" src="index.js"></script><script type="text/javascript" src="niftycube.js"></script><script type="text/javascript">    window.onload=function()    {        Nifty("div#footer","normal fixed-height");    }</script></head><?require('/home/napkinzc/unhide.php');require('/home/napkinzc/unhideComment.php');unhide();unhideComment();?><body><div id="contain"><!-- START OF ACTUAL BODY //--><div id="header" align="right">    <img src="images/top.gif" alt="header" width="50%">    <p align="center" class="style3"><a href="index.php">HOME</a> | <a href="products.php">PRODUCTS</a> | <a href="archive.php">ARCHIVE</a> | <a href="napkinz.php">ABOUT NAPKINZ</a> | <a href="cartoonist.php">ABOUT THE CARTOONIST</a> | <a href="contact.php">EMAIL US</a></p></div><!--HEADER ENDS START OF MAIN CONTENT //--><div id="main" class = "style3">    <div align="center">        <? if($strip_id != 0) {print("<a href=\"?strip_id=0\">First Comic</a>");} ?>&nbsp;&nbsp;&nbsp;<? if($strip_id > 0) {$x = $strip_id-1; print("<a href=\"?strip_id=$x\">Previous Comic</a>");} ?>&nbsp;&nbsp;&nbsp;<? if( (($strip_id+1) < sizeof($comic)) && validDate($comic[($strip_id+1)])) {$x = $strip_id+1; print("<a href=\"?strip_id=$x\">Next Comic</a>");} ?>&nbsp;&nbsp;&nbsp;<? if( (validDate($comic[($strip_id+1)])) && ($strip_id != sizeof($comic)-1)) {print("<a href=\"?\">Today's Comic</a>");} ?><p align = "left"><br /><br /><? print("$titleStrip[$strip_id]");?>&nbsp;</p><img src=<? print("\"{$directoryComics}{$comic[$strip_id]}\""); ?> width="95%" border="0" alt="Comic">    </div>    <br />    <div align="center">        <script type="text/javascript"><!--        google_ad_client = "pub-1198548217340900";        google_ad_width = 728;        google_ad_height = 90;        google_ad_format = "728x90_as";        google_ad_type = "text";        //2007-04-30: NapkinzBottom        google_ad_channel = "0048481088";        google_color_border = "FE7A3C";        google_color_bg = "FFFFFF";        google_color_link = "000000";        google_color_text = "000000";        google_color_url = "000000";        //-->        </script>        <script type="text/javascript"          src="http://pagead2.googlesyndication.com/pagead/show_ads.js">        </script>    </div>    <br />    <!--FOOTER //-->    <div id = "footer">        <p class = "style3" align="center"><a href="napkinz.php">About Napkinz </a> | <a href="cartoonist.php">About The Cartoonist </a>| <a href="policy.php">Privacy Policy </a>| <a href="contact.php">Email Us  </a>| &copy;2007 NAPKINZ.COM </p>    </div></div><!--RIGHT FRAME //--><div id="right"><br />    <div align="center">        <script type="text/javascript"><!--        google_ad_client = "pub-1198548217340900";        google_ad_width = 200;        google_ad_height = 200;        google_ad_format = "200x200_as";        google_ad_type = "image";        //2007-04-30: NapkinzRightTop        google_ad_channel = "2987546058";        google_color_border = "FE7A3C";        google_color_bg = "FFFF66";        google_color_link = "000000";        google_color_text = "000000";        google_color_url = "000000";        //-->        </script>        <script type="text/javascript"          src="http://pagead2.googlesyndication.com/pagead/show_ads.js">        </script>    </div>    <?                // News parser        for($i = 0; $i <= sizeof($news); $i++) // Will display new posts at the bottom        // for($i = sizeof($news)-1; $i >= 0; $i--) // Will display new posts at the top        // Choose one of the two above and "document out" the other one (put // in front of it)        {            if(dateSerial($news[$i]) >= dateSerial($comic[$strip_id]))            if(dateSerial($news[$i]) < dateSerial($comic[$strip_id+1]) or dateSerial($comic[$strip_id+1]) == "19991130")            {                include("{$directoryNews}{$news[$i]}");                $postTime = timeLong($news[$i]);                $postDate = dateLong($news[$i]);                $postAuthor = postInfo($news[$i], "modeAuthor");                $postE_Mail = postInfo($news[$i], "modeE_Mail");            ?>    <div id="authCom" class="style3">        <? print("$postTitle"); ?>        <br /><br />        &nbsp;&nbsp;&nbsp;&nbsp;<? print("$postText"); ?>       <? }} ?>    </div>    <br /><div align="center" style="margin-left:8px;">                                         <table width="100%" border="0" cellspacing="0" cellpadding="0">        <tr>            <td align="left"><span class="style2">Sign Up for Newsletter:</span></td>        </tr>        <form id="newsletter" name="newsletter" action="newsletter.php" method="POST">        <tr>            <td width="76%" align="left" valign="top"><input id="EmailFrom" name="EmailFrom" class="f1"></td>            <td width="24%" align="center" valign="middle"><a href="#"><img src="images/subscribe.gif" alt="go" height="17" width="17" border="0" onclick="newsletter.submit();"></a></td>        </tr>        </form>        </table>        <br />        <!-- start of ohnorobot search code -->          <table width="100%" border="0" cellspacing="0" cellpadding="0">        <tr>            <td align="left"><span class="style2">Search Napkinz:</span></td>        </tr>        <form name="search" action="http://www.ohnorobot.com/index.pl">        <tr>            <td width="76%" align="left" valign="top"><input type="hidden" name="comic" value="723"><input name="s" class="f1"></td>            <td width="24%" align="center" valign="middle"><a href="#"><img src="images/subscribe.gif" alt="go" height="17" width="17" border="0" onclick="search.submit();"></a></td>        </tr>        </form>        </table>        <div align="center">          <span class="style2">Powered by <a href="http://www.ohnorobot.com">OhNoRobot.com</a></span>        </div>    <!-- End Ohnorobot.com code -->    </div>    <br />    <div align="center">        <table width="100%" border="0">          <tr>          <td class="style2">Napkinz RSS Feed:</td>          </tr>          <tr>            <td align="center"><a href="http://napkinz.com/rss.php"><img align="middle" src="images/rss20.gif" border="0" width="80" height="15" alt="RSS" /></a></td>          </tr>          <tr>            <td align="center"><a href="http://napkinz.com/atom.php"><img align="middle" src="images/atom10.gif" border = "0" width = "80" height = "15" alt="ATOM" /></a></td>          </tr>          <tr align="center">          <td><a href="http://fusion.google.com/add?feedurl=http%3A//www.napkinz.com/rss.php"><img src="http://buttons.googlesyndication.com/fusion/add.gif" width="80" height="14" border="0" alt="Add to Google"></a></td>          </tr>          <tr>          <td align="center"><a href="http://us.rd.yahoo.com/my/atm/Napkinz/The%20Official%20Napkinz%20Feed/*http://add.my.yahoo.com/rss?url=http%3A//napkinz.com/rss.php"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" width="80" height="15" border="0" align="middle" alt="Add to My Yahoo!"></a></td>          </tr>          <tr>            <td align="center"><a href="http://english-87605547845.spampoison.com"><img align="middle" src="http://pics3.inxhost.com/images/sticker.gif" border="0" width="80" height="15" alt="Stop Spam" /></a></td>          </tr>          <tr>            <td align="center"><a href='http://host-tracker.com/' onmouseover='this.href="http://host-tracker.com/website-uptime-statistics/328667/lvuc/";'><img width=80 height=15 border=0 alt='tracker' src="http://ext.host-tracker.com/uptime-img/?s=15&amp;t=328667&amp;m=00.59&amp;p=Total&amp;src=lvuc"></a><noscript><a href='http://host-tracker.com/' >web site monitoring</a></noscript></td>                         </tr>        </table>    </div>    <br />    <div align="center">        <script type="text/javascript"><!--        google_ad_client = "pub-1198548217340900";        google_ad_width = 180;        google_ad_height = 60;        google_ad_format = "180x60_as_rimg";        google_cpa_choice = "CAAQ24Oy0QEaCH9Si1cjMAnSKMu293MwAA";        google_ad_channel = "3113579803";        //-->        </script>        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">        </script>    </div>    <br /></div><!-- end of right column --></div></body></html>

Any ideas how to make the right div higher???

sushi4664 · #6 (**permalink**) 05-06-07, 02:57 PM

Great its always like this: I solve one problem and then another problem appears...

Ok so I got the right div to go where it is supposed to go (yay!!). All I had to do was in the HTML code declare the right div before the main and the header. Now there are some problems with different browsers:

IE7 (someone with IE6 tell me what is going on) - The right div starts by overlapping the main, but as soon as you resize the window it fixes itself? Very weird.

Netscape and Firefox - The right div is a bit to down, needs to be moved up a bit... It fixes itself when I remove the top:10px; from the right div...but then IE and Opera don't work right.

Opera - working beautifully...

Anyone with Safari...let me know what is going on.

Any ideas on how to fix this? I know I could use the "<!--[if IE]>" statements but I am trying to avoid that.

Thanks

sushi4664 · #7 (**permalink**) 05-06-07, 04:45 PM

Never mind I solved it!!!

The solution was as follows:

I just added padding to the container div that I setup!!! You can view the changes at napkinz.com !! The IE is still overlapping a little when you goto the page...I would still like to know how it is with IE6 and Safari.

Thanks a bunch!!

sushi4664 · #8 (**permalink**) 05-06-07, 09:43 PM

I fixed the IE problem, I just had to remove the position:relative; from the container....

Though if anyone has IE6 or Safari...let me know how it looks....

job0107 · #9 (**permalink**) 05-06-07, 11:46 PM

If I click on "Today's Comic" everything looks good.
But if I then click on "First Comic" the orange background takes over on the top and right and the advertisement buttons on the right-bottom end up in the orange area at the top-center-lower-right.
It also happens most of the time whenever I click on "Previous Comic" or "Next Comic".
I am using FireFox & IE6.
Whatever you are doing, it changes the effect you are trying to get with a Header on top, the comic in the body and advertisements on the right side.
But when it does look right, it looks good.
Maybe you should try re-writing your layout without CSS. Get it looking pretty good and then fine tune it with CSS.
Also it would be easier to manage the javascript code you have embeded in the body of your document, if you put them in functions in the head of your document, then call the functions in the body.
This layout you have which seems to be pretty strait forward would be easier to manage if you laid it all out in tables.
Also you wouldn't have a problem with different browsers.

CSS can be fun to achieve different effects, but sometimes just using the old fashioned methods like tables for your layout works better.

sushi4664 · #10 (**permalink**) 05-07-07, 05:09 PM

Yea, though I have had really bad experiences with tables...thanks for pointing out the problem with archive...that is because of the the newly installed news script...since it cant find news for a specific date, its messing things up...ill fix that as soon as I get time.