CSS Forum

**nmallare** · 07-26-2008, 02:14 PM

Hi:

I seem to be having issues with my new site rendering in Opera
9.24 on Windows and Safari 3.1.2 on Windows. In Firefox 2.0.0.16 on Windows, it renders fine. Below you will find the screenshots, the XHTML code, and the CSS.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    
    <head>
        <title>Home | Jockstocks.com - Trade your favorite MLB, NASCAR, NBA, NFL, NHL and PGA players.</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="author" content="Nick Mallare" />
        <style type="text/css" media="screen"> @import "/jockstocks.css"; </style>        
        <!--[if lte IE 6]>
        <style type="text/css" media="screen">
            body { text-align: center; }
        </style>
        <![endif]-->
        <!--[if gt IE 6]>
        <style type="text/css" media="screen">
        </style>
        <![endif]-->     </head>
    <body>
        <!-- Begin siteContainer -->
        <div id="siteContainer">
            <!-- Begin leftContainer -->
            <div id="leftContainer">
                <!-- Begin headerDiv -->
                <div id="headerDiv">
                    <!-- Begin loginDiv -->                     <div id="loginDiv">[----username----] [----password----] <strong>login</strong> | <strong>sign-up</strong></div>
                    <!--  End loginDiv  -->
                    <!-- Begin logoDiv -->
                    <div id="logoDiv"><img src="/images/logo_blue.gif" alt="Home | Jockstocks.com - Trade your favorite MLB, NASCAR, NBA, NFL, NHL and PGA players." title="Home | Jockstocks.com - Trade your favorite MLB, NASCAR, NBA, NFL, NHL and PGA players." longdesc="logodesc.html" id="logoImg" /></div>
                    <!--  End logoDiv  -->
                </div>
                <!--  End headerDiv  -->
                                
                <!-- Begin contentDiv -->
                <div id="contentDiv">

                    <!-- Begin navigationDiv -->
                    <div id="navigationDiv">
                        <ul>
                            <li><a href="/" class="selected"><strong>Home</strong></a></li>
                            <li><a href="#">My Account</a>
                                <ul>
                                    <li><a href="#">Portfolios</a></li>
                                    <li><a href="#">Competitions</a></li>
                                    <li><a href="#">Settings</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Jock$tocks</a>
                                <ul>
                                    <li><a href="/market/">The Market</a></li>
                                    <li><a href="#">Pick 10</a></li>
                                    <li><a href="#">Pick'em</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Leaderboard</a></li>
                            <li><a href="#">Community</a></li>
                        </ul>
                    </div>
                    <!--  End navigationDiv  -->

                    <!-- Begin marketSnapshot -->
                    <div id="marketSnapshot">
                        <ul id="header"><li class="name"><strong>Name</strong></li><li><strong>Symbol</strong></li><li><strong>Buy</strong></li><li><strong>Sell</strong></li><li><strong>Last</strong></li><li title="Percentage change of stock price since last divi."><strong>Change</strong></li></ul><ul><li class="name">Kasey Kahne</li><li>kahka</li><li>48894</li><li>0</li><li class="right">$2,776.98</li><li class="right">0.20%</li></ul><ul><li class="name">Ryan Newman</li><li>newry</li><li>30513</li><li>0</li><li class="right">$2,157.81</li><li class="right">0.12%</li></ul><ul><li class="name">Mark Martin</li><li>marma</li><li>30195</li><li>0</li><li class="right">$1,819.66</li><li class="right">0.12%</li></ul>                    
                    </div>
                    <!--  End marketSnapshot  -->

                </div>
                <!--  End contentDiv  -->
                <!-- Begin footerDiv -->
                <div id="footerDiv"></div>
                <!--  End footerDiv  -->                
            </div>
            <!--  End leftContainer  -->
            <!-- Begin rightAdvertDiv -->             <div id="rightAdvertDiv">
                <script type="text/javascript">
                <!--
                    google_ad_client = "pub-3379852142048453";
                    google_ad_slot = "3497123528";
                    google_ad_width = 160;
                    google_ad_height = 600;
                //-->
                </script>
                <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
            </div>
            <!--  End rightAdvertDiv  -->
        </div>
        <!--  End siteContainer  -->
    </body>
</html>

Code:

body { height: 100%; margin: 0; font-size: 14px; font-family: verdana, arial, sans-arial; background: url('/images/content_background.gif'); }
h1 { width: 100%; margin: 0; padding: 0.4em 0; color: #FFF; font-size: 1.6em; font-family: Verdana; text-align: center; background: #000 url(/images/header_background3.gif) repeat-x; }
h3 { width: 54%; height: 30px; margin: 0 auto; padding: 0.3em 0; color: #FFF; font-size: 1.0em; font-family: Verdana; text-align: center; background: url(images/learn_button.gif) no-repeat; }
p { width: 90%; margin: 0.6em auto; font-size: 0.86em; line-height: 1.4em; font-family: Verdana; text-align: center; }
/* Sitewide links */
a:link,
a:active,
a:visited { color: #CCC; text-decoration: none; }
a:hover { color: #FFF; }
/* Sitewide styles */
div#siteContainer { width: 990px; height: auto; margin: 0 auto; overflow: hidden; }
div#leftContainer { width: 800px; height: auto; margin: 0; padding: 0; float: left; overflow: hidden; }
div#contentDiv { width: 800px; min-height: 400px; margin: 0; padding: 0; background-color: #FFF; border-top: 3px solid #069; }
div#rightAdvertDiv { width: 190px; height: auto; margin: 0; padding: 1.0em 0; text-align: center; background-color: #069; float: right; /*overflow: hidden;*/ }
div#footerDiv { width: 100%; height: 20px; margin: 0; padding: 0; color: #FFF; font-size: 1.8em; font-family: Verdana; text-align: center; background-color: #069; }
/* Header styles */
div#headerDiv { width: 800px; }
div#headerDiv div#loginDiv { width: 800px; padding: 0.45em 0; color: #FFF; font-family: Verdana; font-size: 0.8em; text-align: right; background-color: #069; }
div#headerDiv div#logoDiv { width: 100%; height: 105px; padding-top: 5px; text-align: left; background-color: #09C; }
div#headerDiv div#logoDiv img { padding-left: 2px; }
/* Navigation styles */
div#navigationDiv { width: 800px; height: auto; margin: 0; padding: 0; color: #FFF; font-size: 1.6em; text-align: center; background-color: #069; overflow: hidden; }
div#navigationDiv ul { height: auto; margin: 0; padding: 0; list-style-type: none; overflow: hidden; }
div#navigationDiv li { width: 20%; display: block; float: left; }
div#navigationDiv li a { width: 100%; padding: 0.4em 0; display: block; }
div#navigationDiv li ul { display: none; }
/* Front page styles */
div#marketSnapshot { width: 554px; height: auto; margin: 0.6em auto; padding: 0; overflow: hidden; border: 3px solid #069; }
div#marketSnapshot ul { width: 100%; height: auto; margin: 0; padding: 0; font-size: 0.9em; list-style-type: none; overflow: hidden; }
div#marketSnapshot ul#header { margin-bottom: 0.4em; border-bottom: 2px solid #069; }
div#marketSnapshot ul li { width: 14%; height: auto; margin: 0; padding: 1%; display: block; float: left; }
div#marketSnapshot ul li.name { width: 18%; }
div#marketSnapshot ul li.right { text-align: right; }

Thanks!

Nick

**LadynRed** · 07-26-2008, 05:18 PM

Forgive me.. but I don't really see a difference between the 3 screenshots. Where, specifically, is the problem ?

**vangogh** · 07-26-2008, 05:22 PM

Took me a minute, but I think I see the issue. Is it the space between the content and footer?

If the page is online could you post a link to it? It'll be much easier to troubleshoot.

**nmallare** · 07-27-2008, 08:01 PM

Quote:

Originally Posted by vangogh

Took me a minute, but I think I see the issue. Is it the space between the content and footer?

If the page is online could you post a link to it? It'll be much easier to troubleshoot.

Yes, that is the issue. Well, I did not solve the issue; however, the div within the content div has been moved inside of another div, and the issue has corrected itself. I would have posted the link; however, the development site is behind an htaccess password.

Nick

**vangogh** · 07-28-2008, 07:30 PM

Understandable why you couldn't post a link. Glad the issue sorted itself out.

**nmallare** · 07-29-2008, 12:05 PM

Quote:

Originally Posted by vangogh

Understandable why you couldn't post a link. Glad the issue sorted itself out.

Thought you might. Thanks for taking the time to respond.

Nick

**darrenfox** · 07-29-2008, 06:47 PM

I've had that problem before in IE. It is one of those strange IE problems but to fix it, remove the extra blank spaces around the closing/starting div. That may have been what happened when you stated it fixed itself. It does not seem like it would cause a problem but it does. I stared at the code for hours when it happened to me.