SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: CSS Issue 2

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Issue 2

    Hello,
    I am currently in the process of going through my entire website recding parts of it to bring it up to date and tidy up the code, basically a major overhaul but I have come accross a problem.

    My site is made up of a fixed width centred division called #container. Within that div I have 3 other divs:

    #header - full width div which houses 1 image
    #navbar - a div 150px wide and floated left
    #content - width to fill rest of page width and not floated.

    I have put content in my navbar div which is rather full of stuff now tbh and If I add a small amount of content into the #content div then each browser seems to do something different to it.

    Some cut the bottom of the navbar content off.
    Some stretch the #container around the bottom of navbar - (This is what I would like it to do)
    Some show the navbar content but without the #container be strecthed around it so it just flows onto the background out of #container

    I have heard of this issue before and just got around it by making sure that there was more content in #content than there was in #navbar but this is no longer possible for certain reasons therefore I would like to know if there are ways of sorting this out.

    Any solutions would be excellent

    Regards,
    Neil

  2. #2
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any help guys?

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neil, what does your code look like?

  4. #4
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Code

    Heres the code you requested:

    Template Top:

    Code HTML4Strict:
    <?php
    //Starts a session
    session_start();
     
    //Adds a prefix to link paths if a gallery page is displayed
    global $gallery;
    if ($gallery == '1') {
    $linkprefix = '../';
    }else{
    $linkprefix = NULL;
    }
     
    //Requires the Database Connection Code
    include ($linkprefix."includes/db.inc.php");
     
    //Tells the page to wait 2 seconds before loading
    //sleep(2);
     
    // Report all PHP errors
    error_reporting(E_ALL);
     
    //Website Version
    $version = '3.1 alpha';
     
    //Sets the current year in the $year variable
    global $year;
    $year = date('Y');
     
    //Sets the whole sites main title in $sitetitle
    $sitetitle = hgthghg! :: ';
     
    ?>
     
     
    <!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>
     
    <!--Favicon Link-->
    <link rel="shortcut icon" href="favicon.ico" >
     
    <?php include ($linkprefix."includes/meta.inc.php"); ?>
     
    <!--Stylesheet Links-->
    <link href="<?php echo ($linkprefix."stylesheets/reset_styles.css"); ?>" rel="stylesheet" type="text/css" />
    <link href="<?php echo ($linkprefix."stylesheets/layout.css"); ?>" rel="stylesheet" type="text/css" />
    <link href="<?php echo ($linkprefix."stylesheets/misc.css"); ?>" rel="stylesheet" type="text/css" />
    <link href="<?php echo ($linkprefix."stylesheets/navigation.css"); ?>" rel="stylesheet" type="text/css" />
    <link href="<?php echo ($linkprefix."stylesheets/tab.webfx.css"); ?>" rel="StyleSheet"  type="text/css" />
    <link rel="stylesheet" href="<?php echo ($linkprefix."stylesheets/mktree.css"); ?>">
     
    <!--[if IE]>
    <link href="<?php echo ($linkprefix."stylesheets/ie.css"); ?>" rel="StyleSheet"  type="text/css" />
    <![endif]-->
     
     
    <!--Block of Javascript for drop down parts-->
    <script type="text/javascript">
    function toggle( targetId ){
    if (document.getElementById){
    target = document.getElementById( targetId );
    if (target.style.display == "none"){
    target.style.display = "";
    } else {
    target.style.display = "none";
    }
    }
    }
    </script>
     
     
    <script type="text/javascript" src="<?php echo ($linkprefix."js/tabpane.js"); ?>"></script>
    <script src="mktree.js" language="JavaScript"></script>
     
    <!--Set the page title-->
    <?php
    echo '<title>'.$sitetitle.$pagetitle.'</title>';
    ?>
    <!--End Set the page title-->
     
    </head>
    <body>
     
    <div id="bigwrapper">
    <div id="container">
    <div id="header"><a href="<?php echo ($linkprefix."index.php"); ?>"><img src="<?php echo ($linkprefix."img/site_graphics/header/header.jpg"); ?>" alt="ghdhgf" /></a>
    </div>
     
    <div id="date">
    <?php echo date('jS F Y'); ?>
    </div>
     
    <div id="navigation">
    <?php  include ($linkprefix."includes/navigation.inc.php"); ?>
    </div>
     
    <div id="content">

    Template Bottom:

    Code HTML4Strict:
    <div id="footer">
    	<hr />
    	<p><a href="#top">Top of Page</a> | Version <?php echo $version ; ?></p>
     
    <!--Code to remove the dotted line around ActiveX controls-->
    <script type="text/javascript" src="removeline.js"></script>
     
    <div id="footerspacer">&nbsp;</div>
     
     
     
    </div><!--End Footer-->
     
    </div><!--End Content-->
     
    </div><!--End Container-->
     
    </div><!--End Bigwrapper-->
     
    </body>
    </html>

    CSS:

    Code CSS:
    *
    {
    font-family: Arial, Verdana, Geneva, sans-serif;
    font-size: 10pt;
    line-height: 1.2;
    }
     
    html, body, div, ul, ol, li, p, h1, h2, h3, h4, h5, h6, img
    {
    text-align: justify;
    }
     
    html
    {
    padding-top: 15px;
    padding-bottom: 15px;
    }
     
    #date
    {
    position: absolute;
    height: auto;
    width: auto;
    margin-top: -25px;
    margin-right: 6px;
    margin-left: 480px;
    border: black solid 0px;
    }
     
    body
    {
    background: #2a97dc;
    background-image: url(../img/site_graphics/site_background.jpg);
    background-repeat: repeat-x;
    }
     
    /*
    #bigwrapper 
    {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff url(../img/site_graphics/shadowbg.jpg);
    background-repeat: repeat-y;
    margin-top: 0px;
    border: 0px solid red;
    padding-top: 15px;
    z-index: 0;
    }
     
    #topbg
    {
    width: 900px;
    background: #ffffff url(../img/site_graphics/shadowfull.jpg);
    background-repeat: no-repeat;
    }
    */
     
    #container
    {
    margin-right: auto;
    margin-left: auto;
    width: 770px;
    border: 1px solid black;
    background: #ffffff url(../img/site_graphics/main_background.jpg) repeat-y;
    z-index: 10;
    /*
    overflow-x: hidden;
    overflow-y:	auto;
    */
    }
     
    #navigation
    {
    float: left;
    width: 140px;
    padding-left: 5px;
    height: 100%;
    overflow: hidden;
    }
     
    #content 
    {
    margin-left: 165px;
    margin-right: 15px;
    background-color: #ffffff;
    margin-top: 0px;
    margin-bottom: 0px;
    border: 1px solid red;
    }
     
    #footerspacer
    {
    min-height: 300px;
    border: 1px solid red;
    }

    I hope this helpes you to help me!

    Regards,
    Neil

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Neil,

    It would have been better if you ran the code locally and then copied the code from view source so that we just get html and not a mixture of php et which is hard for us to work with.

    Looking at the code its hard to get a working version but I can see a couple of issues.

    First when dealing with 2 columns in a fixed width layout then you should simply float both columns and avoid all the ie 3 pixel and haslayout bugs on the static content alongside floats (see faq on floats).

    This means you simply float the column to the left and the content to the right. Remember that floats are removed from the flow so you will need to clear the floats if you want the background of the parent container to extend with the floats.

    This can be done using one of the clearing methods mentioned in the faq on floats. If you have a footer outside of the columns but inside the main container then you can use that as a clearer instead.

    Never place heights on elements that you want to expand. You have used 100&#37; height on #navigation and that would limit you to a fixed height at all times and won't do what you think it will do

    In reality you can't use 100% at all except when the parent has a fixed known height. If the parent is a min-height or height :auto (content height) then you cannot base a percentage on it and it collapses to auto. In effect you can never really use 100% height in a fluid height container.

    Read the faq on 100% height for an understanding of this as it is a slighltly complicated subject.

    Suffice to say don't give heights to your elements in a fluid height scenario. You cannot match column heights like this as CSS doesn't work like that (see the 3 col sticky thread for examples of equal column techniques).

    I'm not sure how your page was supposed to look but here is the basics of a 2 column layout using some of your code to show how it should be done.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    html,body{margin:0;padding:0}
    p{margin:0 0 1em 0;}
    body    {
        background:#2a97dc ;
        font-family: Arial, Verdana, Geneva, sans-serif;
        font-size: 13px;
        line-height: 1.2;
        padding:15px;
    }
    #container{
        margin: auto;
        width: 770px;
        border: 1px solid black;
        background: #fff;
        z-index: 10;
        position:relative;
    }
    #navigation{
        float: left;
        width: 140px;
        padding-left: 5px;
        border: 1px solid red;
    }
    #content
    {
        width:588px;
        margin:0 15px 0 0;
        background:#fff;
        border: 1px solid red;
        float:right;
        display:inline;/*IE double margin bug fix*/
    }
    #footer{
        clear:both;
        border: 1px solid red;
    
    }
    
    </style>
    </head>
    <body>
    <div id="container">
        <div id="navigation">
            <ul>
                <li><a href="#">nav link</a></li>
                <li><a href="#">nav link</a></li>
                <li><a href="#">nav link</a></li>
                <li><a href="#">nav link</a></li>
                <li><a href="#">nav link</a></li>
            </ul>
        </div>
        <div id="content">
            <p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p>
        </div>
        <div id="footer">
            <p>Footer content</p>
        </div>
    </div>
    </body>
    </html>
    Hope that helps

  6. #6
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wheres the float faq?

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rctneil View Post
    Wheres the float faq?
    http://www.sitepoint.com/forums/show...5&postcount=15
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, I ahve read the float faq whcih will come in handy in the future i am sure and have added this:

    .clearer {
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }

    and this:

    <div class="clearer"></div>

    Just before ending my #content div and the content div is for some reason not stretching around the bottom of the floated items?


    UPDATE: Forget about the above. I was being silly and put the clearer div before the end of the content and it should be after that but before the end of #container.

    My prob now is that my #content div is right up to the right edge of container. Do I need to add a right hand margin to #content to push it back into alignment?

  9. #9
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    UPDATE 2: Fixed the above issues. Just added a right margin of 15pixels to #content and gave #content display: inline to sort the double margin in IE6. Without display: inline, the double margin bug does not seem to affect IE7. Is it only IE6 with this bug?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Is it only IE6 with this bug?
    Its ie6 and under only. The display:inline will be ignored by all other browsers because floats are hard coded as display:block and cannot be changed by css.

    You don't need the clearer if you have existing elements in the parent div such as a footer because you can simply apply clear:both to the footer in that case. If the footer is outside the container on in one of the columns then you will need the extra clearer (or use one of the mark-up free methods (e.g. overflow or :after as mentioned in the faq on floats)).

    I also forget to mention that you would rarely ever use a container like your #footerspacer as that makes little sense to add extra elements just to make space

  11. #11
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, About #footerspacer. I added that to get around that problem it was just to make the content stuff longer than navbar temporarily until i had my questions answered and a fix established. I am just recoding the footer areas now and I had just deleted that div just before I got an email to say you had replied!

    Thanks Again

    Neil

  12. #12
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have set in my css the follwoing:

    html
    {
    padding-top: 15px;
    padding-bottom: 15px;
    }

    It works in all browsers apart from IE8 (I'm sure it worked in there a while ago). Any ideas?

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It works in all browsers apart from IE8
    IE8 !!

    You shouldn't be adjusting code for IE8 yet as its not been released for public consumption. There's no point in trying to second guess a moving target.

    As a rule of thumb you don't need to apply anything to the html element except to remove any margins and padding.

    Apply your padding to the body element instead and it will work all the way back to ie5.

  14. #14
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great, Another thig I ahve noticed is that In 1 browser I get a horizontal scrollbar which is greyed out. Can this be removed?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Which browser do you get a horizontal scrollbar and what code is triggering it.

    You won't get a horizontal scrollbar unless your content is too wide and then it won't be grayed out anyway so I'm a little confused.

    Did you mean the vertical scrollbar which IE places there by default. You can get rid of it by using overflow:auto in the body but most people like it in place anyway as it stops the page from jumping over when the height of the page exceeds the viewport.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •