Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old August 4th, 2005, 12:14 AM
Registered User
 
Join Date: Aug 2005
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default relative/absolute positioning whacked

Hi - I'm using Richard York's CSS book, in particular Ch 14, to do some cool css stuff with "positioning". For the life of me, I can't figure out why what I've done looks fine in Firefox, IE, and NS7.1+ but not in Netscape 7.0 (and 6.2 and 6.0).

I am trying to put one gif on top of another:

<div id="sub_pg_banner">
  <img src="images/masthead.gif" width="850" height="65" />
  <div id="sm_logo">
     <img src="images/logo_int.gif" width="129" height="127" />
   </div>
</div>

Here is the pertinent styles from my linked CSS file:
div#sub_pg_banner {
    position: relative;
}
div#sm_logo {
    position: absolute;
    width: 129px;
    height: 127px;
    z-index: 2;
    top: 6px;
    right: 0px;
}
Here is the web page that whacked in NS6.0-7.0 but fine with other modern browsers: http://www.kacp.cc/draft/sub_template.php

What do I need to do to get this be work more "cross-browser"?
Thanks, Amy
Reply With Quote
  #2 (permalink)  
Old August 4th, 2005, 10:06 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

I don't know if I'd worry about those browsers. They are *really* buggy. And statistically speaking, they're pretty much dead. You might get *four* visits from NS 6 and 7.0 in a year.

That said this is the best I can do:
Code:
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-image:  url("../images/bg.gif");
    background-repeat: repeat;
    text-align: center; /* This is for Explorer 5.5, 5 and 6 quirks mode*/
}
table.main {
    border: 1px solid #221E1F;
}
ul {
    list-style: none;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
}
li {
    padding: 2px;
    margin: 2px;
}
li a {
    padding: 5px;
    color: #FFFFFF;
    font-size: 18px;
    text-decoration: none;
}
li a:link {
    color: #FFFFFF;
}
li a:visited {
    color: #FFFFFF;
}
li a:hover {
    color: #FFFFFF;
    background-color: #9C8549;
    border: thin solid #221E1F;
}
li a:active {
    color: #FFFFFF;
    background-color: #9C8549;
}
td.top {
    background-color: #9C8549;
    border: 2px solid #221E1F;
}
td.nav {
    border: 2px solid #221E1F;
    background-color: #0053A1;
}
td.sub_content {
    background-color: #FFFFFF;
    border: 2px solid #221E1F;
    padding: 10px;
}
td.index_content {
    background-image: url(../images/logo_home.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-color: #FFFFFF;
    border: 2px solid #221E1F;
    padding: 10px;
}
div.content_title {
    font-size: 18px;
    margin: 0px;
}
div#container {
    width: 850px;
    position: relative;
    margin: auto;       /* Center in standards browsers */
    text-align: left;   /* Reset Explorer's inheritance of text-align */
}
div#sm_logo {
    position: absolute;
    width: 129px;
    height: 127px;
    z-index: 2;
    top: 8px;          /* This still isn't pixel perfect for NS 7.0 */
    right: 6px;
}

td.sub_table {
    text-align: left;
    vertical-align: top;    
}
span.sub_hdrs {
    font-size: 14px;
    font-weight: bold;
    color: #0053A1;
}
#r1, #r2, #r3, #r4, #r5, #r6 {
    display: none;
}
You may have to do some server-side browser-sniffing and output some NS 7.0-specific styles to make it pixel-perfect.

Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Kansas Association of Chiefs of Police: Page Name</title>

<link href="sub_template.php_files/KACPstyle.css" rel="stylesheet" type="text/css"></head>

<body onload="preloadImages();"><br>
<div id='container'>
    <table width="850" class="main" align="center" cellpadding="0" cellspacing="0">
        <tbody><tr>
            <td class="top" colspan="2" valign="top">
                <div id="sub_pg_banner">
                    <img src="sub_template.php_files/masthead.gif" width="850" height="65">
                </div>
            </td>
        </tr>
        <tr>
            <td class="nav" width="260" valign="top">
                [list]        
                    <li>
                        <a href="http://www.kacp.cc/draft/index.php">Home</a></li>
                    <li>
                        <a href="http://www.kacp.cc/draft/index.php">About Us</a></li>
                    <li>
                        <a href="http://www.kacp.cc/draft/regions_reps.php">Regions &amp; Representatives</a></li>
                    <li>
                        <a href="http://www.kacp.cc/draft/index.php">Supplies &amp; Merchandise</a></li>
                    <li>
                        <a href="http://www.kacp.cc/draft/index.php">Job Opportunities</a></li>
                    <li>
                        <a href="http://www.kacp.cc/draft/index.php">Special Activities</a></li>
                    <li>
                        <a href="http://www.kacp.cc/draft/index.php">Training &amp; Conferences</a></li>
                    <li>
                        <a href="http://www.kacp.cc/draft/index.php">Sponsor Information</a></li>
                    <li>
                        <a href="http://www.kacp.cc/draft/index.php">Important LInks  </a></li>
                </ul>
                <p> </p>
                <p> </p>
                <p> </p>
            </td>
    <td width="570" valign="top" class="sub_content">

        <div class="content_title">Page Title </div><br>
        Page content begins ...

        <!--<table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td bgcolor="#00FFFF">
                    <img src="images/spacer.gif" width="570" height="273" border="0" alt="">
                </td>
            </tr>
        </table>-->

    </td>
    </tr>
    </tbody></table>
    <div id="sm_logo">
        <img src="sub_template.php_files/logo_int.gif" width="129" height="127">
    </div>
</div>
</body></html>
Also, just so you know, this page is not valid XHTML Transitional, as it follows none of the XHTML syntax rules. It looks closer to HTML 4.01 Transitional. Use the W3 validation service at http://validator.w3.org.

Anyway, so my solution is to cheat a bit. We can't get Netscape 7.0 to stop expanding the container of a relatively positioned element that contains an absolutely positioned element, so I move that element to the end of the document in an invisible container that we can position relative to and not notice the size change. You may find this botched up in Explorer. I didn't look at it in Explorer. If it is, you might try some conditional comment style sheets to target Explorer directly without affecting other browsers.

More about that here:
http://msdn.microsoft.com/workshop/a...omment_ovw.asp

I noticed you're using PHP, it just so happens I have a browser sniffing script already written in PHP. Feel free to use it.

Code:
    function browser()
    {
        if (!defined('BROWSER'))
        {
            if (isset($_SERVER['HTTP_USER_AGENT']))
            {
                // The order that these are called is important!
                // Many user agents try to fudge their identity.
                $browsers = array(
                    'opera'    => '!Opera[/ ]?((\d*)(\.)?(\d*))!',    // Opera
                    'ie'       => '!MSIE[/ ]?((\d*)(\.)?(\d*))!',     // Explorer
                    'safari'   => '!Safari[/ ]?((\d*)(\.)?(\d*))!',   // Safari
                    'khtml'    => '!KHTML!',                          // Konquorer (untested)
                    'gecko'    => '!Gecko[/ ]?(\d*)!',                // Netscape, Mozilla, Mozilla Firefox, AOL Mac, etc.
                    'netscape' => '!Mozilla[/ ]?((\d*)(\.)?(\d*))!'   // Old Netscape version 4 and less.
                );

                foreach ($browsers as $browser => $pattern)
                {
                    if (preg_match($pattern, $_SERVER['HTTP_USER_AGENT'], $matches))
                    {
                        if (!empty($matches[1]))
                        {
                             define('BROWSER_VERSION', $matches[1]);
                        }

                        define('BROWSER', $browser);
                        break;
                    }
                }

                if (!defined('BROWSER'))
                {
                     define('BROWSER', null);   
                }
            }
            else
            {
                 define('BROWSER', null);
            }
        }
        else
        {
            return FALSE;
        }
    }
The correct way to use this function is as follows:

Code:
browser();

if (defined('BROWSER') && defined('BROWSER_VERSION'))
{
    // Do some stuff based on the browser and browser version
    if (BROWSER == 'gecko' && BROWSER_VERSION <= 20020823)
    {
        // This is Mozilla, Netscape and any Gecko browser made on or before the
        // Netscape '7.0' build date.
        // You can output a style sheet with Netscape 7.0 adjustments here.
    }
}
HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
Reply With Quote
  #3 (permalink)  
Old August 4th, 2005, 11:59 AM
Registered User
 
Join Date: Aug 2005
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Richard - This is amazing. Thank you for taking the time and trouble to give me such a prompt, thorough and educational response.

The old/existing site's stats indicate that the vast number of visitors use IE. Doesn't it just figure that fixing this to suit NS 7.0 and older whacks it for IE! I should just stop worrying so much about supporting older browsers.

Still, I am going to try your browser sniffing solution, which will be new ground for me but also allows me to continue forging ahead with CSS.

thanks again ... and good work on this book, I hope you're selling a lot. -A
Reply With Quote
  #4 (permalink)  
Old August 4th, 2005, 01:06 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

No problem! Glad to help out.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
chapter 11 figure 11-7 relative positioning pelopito BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 2 November 29th, 2007 06:11 AM
relative positioning in Firefox mackknife BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 3 July 12th, 2007 03:02 AM
Relative Control Positioning rodmcleay C# 2005 0 January 24th, 2007 12:25 AM
Relative and Absolute Path question Johnger Pro Visual Basic 2005 1 September 8th, 2006 11:45 AM
position:absolute nerssi CSS Cascading Style Sheets 3 February 21st, 2005 10:17 AM



All times are GMT -4. The time now is 06:49 PM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.