SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member overkill's Avatar
    Join Date
    Feb 2004
    Location
    U.S.
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Centered fixed width layout, 2 columns, header and footer.

    Hello again,

    IE is not rendering the top boarder of my footer div.
    Code:
    #footer {
    	clear: both;
    	font-size: 75%;
    	color: #333333;
    	padding: 0px;
    	background: #FFFFCC;
    	margin: 0px;
    	border-top: 1px solid #000000;
    	position: relative;
    	text-align: center;
    }
    Moz is displaying correctly at this time.

    Here's the xhtml/css.

    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>
    <title>template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    body {
    	text-align: center;
    	margin: 0px auto;
    	padding: 20px;
    	font-family: Georgia, "Times New Roman", Times, serif;
    }
    #page {
    	text-align: left;
    	border: 1px solid #000000;
    	width: 750px;
    	background: #FFFFFF;
    	margin: 0px auto;
    }
    #header {
    	height: 100px;
    	text-align: left;
    }
    #banner {
    	background: #FFFFFF url(/new/img/bg.gif) repeat-x left top;
    	margin: 0px;
    	padding: 0px;
    	height: auto;
    }
    #tabnavs {
    	float:left;
    	width:750px;
    	background: url(/new/img/tab_bg.gif) repeat-x left bottom;
    }
    #tabnavs ul {
          margin:0px;
          padding:0px 20px 0px 0px;
          list-style:none;
    }
    #tabnavs li {
          display:inline;
          margin:0;
          padding:0;
    }
    #tabnavs a {
          float:right;
          background:url("/new/img/left_both.gif") no-repeat left top;
          margin:0;
          padding:0 0 0 9px;
          border-bottom:1px solid #765;
          text-decoration:none;
    }
    #tabnavs a span {
    	float:right;
    	display:block;
    	background:url("/new/img/right_both.gif") no-repeat right top;
    	padding:5px 15px 4px 6px;
    	color:#006699;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	margin: 0px;
    }
        /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabnavs a span {float:none;}
        /* End IE5-Mac hack */
    #tabnavs a:hover span {
          color:#333;
    }
    #tabnavs #current a {
          background-position:0 -150px;
          border-width:0;
    }
    #tabnavs #current a span {
          background-position:100% -150px;
          padding-bottom:5px;
          color:#333;
    }
    #tabnavs a:hover {
          background-position:0% -150px;
    }
    #tabnavs a:hover span {
          background-position:100% -150px;
    }
    #crumbs {
    	font-size: 80%;
    	padding: 5px 0px 5px 10px;
    	margin-right: 300px;
    }
    #contents {
    	float:right;
    	width: 580px;
    	margin: 0;
    	padding: 0 10px 0 0;
    	clear: right;
    	border-left: 1px solid #000000;
    }
    .features {
    	padding: 0px 0px 10px 10px;
    	font-size: 80%;
    }
    
    .features h3 {
    	padding: 10px 0px 5px;
    	text-align: center;
    	margin: 0px;
    }
    
    .features img {
    	float: left;
    	padding: 0px 10px 0px 0px;
    	margin: 0 5px 5px 0;
    }
    #navbar {
    	margin: 0;
    	padding: 10px 0px 0px;
    	background: #FFFFCC;
    	float: left;
    	width: 159px;
    	position: relative;
    	border-bottom: 1px solid #000000;
    	clear: left;
    }
    #footer {
    	clear: both;
    	font-size: 75%;
    	color: #333333;
    	padding: 0px;
    	background: #FFFFCC;
    	margin: 0px;
    	border-top: 1px solid #000000;
    	position: relative;
    	text-align: center;
    }
    a:link {
    	color: #006699;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #006699;
    }
    a:hover {
    	text-decoration: underline;
    	color: #000066;
    }
    a:active {
    	text-decoration: none;
    	color: #ECE9D8;
    }
    -->
    </style>
    </head>
    <body> 
    <div id="page"> 
      <div id="header"> 
        <div id="banner"><a href="#"><img src="/new/img/logo.gif" alt="Company Logo" name="logo" hspace="0" vspace="0" border="0" id="logo" /></a></div> 
        <div id="tabnavs"> 
          <ul> 
            <li><a href="#"><span>Contact Us</span></a></li> 
            <li><a href="#"><span>News</span></a></li> 
            <li><a href="#"><span>Services</span></a></li> 
            <li><a href="#"><span>About Us</span></a></li> 
            <li id="current"><a href="#"><span>Home</span></a></li> 
          </ul> 
        </div> 
      </div> 
      <div id="contents"> 
        <div id="crumbs">Home /</div> 
        <div class="features"> 
          <h3>Template</h3> 
          <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p> 
        </div> 
      </div> 
      <div id="navbar"> 
        <ul> 
          <li><a href="#">local link</a></li> 
          <li><a href="#">local link</a></li> 
          <li><a href="#">local link</a></li> 
          <li><a href="#">local link</a></li> 
          <li><a href="#">local link</a></li> 
          <li><a href="#">local link</a></li> 
        </ul> 
      </div> 
      <div id="footer">Copyright &copy; 2004 Joe Wheaton All Rights Reserved</div> 
    </div> 
    </body>
    </html>
    Thanks for all your help.
    Last edited by overkill; Mar 5, 2004 at 19:28.

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dunno about the padding issue below your tabs, but to center your content in Moz use:

    Code:
      margin: 0px auto;
    Instead of margin: 0;

    Use that in all your DIVs that need to be centered.

  3. #3
    SitePoint Member overkill's Avatar
    Join Date
    Feb 2004
    Location
    U.S.
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    You're referring to the margin of the body tag correct. Changing it had no effect. Any other ideas, appologize for the sloppy CSS.

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page, not body

    If I read it correctly, your "page" div needs said margin declaration, not the body; that should center the whole page div inside the body for compliant browsers, while the text-align: center hack on the body fixes IE.
    By the way, since everything is fixed-width anyway, I fail to see the need for percentage widths on the left nav and content area, but that's another story.
    Regards,
    Ronald.

  5. #5
    SitePoint Member overkill's Avatar
    Join Date
    Feb 2004
    Location
    U.S.
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Box Model Newb Needs Help

    I started over and updated my original post to include this version of the design. To help clarify what my problems are.

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

    If your using the code above the you've missed out a semi-colan which will stop the layout from centring in mozilla etc.
    Code:
    #page {
     text-align: left;
     border: 1px solid #000000;
     width: 750px;
     background: #FFFFFF;/*here*/
     margin: 0px  auto;
    }
    Paul

  7. #7
    SitePoint Member overkill's Avatar
    Join Date
    Feb 2004
    Location
    U.S.
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    If your using the code above the you've missed out a semi-colan which will stop the layout from centring in mozilla etc.
    Code:
    #page {
     text-align: left;
     border: 1px solid #000000;
     width: 750px;
     background: #FFFFFF;/*here*/
     margin: 0px  auto;
    }
    Paul
    Thanks Paul, it's now centered in Moz and IE. Can you help me figure out why I can't get my floated tabs to position where I want them?
    Last edited by overkill; Mar 5, 2004 at 17:38.

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

    Have you got a link to the page so I can see what's happening. I don't know what its supposed to look like without the images so its hard to see the problem. Floated elements should have a defined width so I don't know if this is part of the problem or not until I cann see the images etc.

    If you haven't got a link then zip up the page and images and attach them and I'll take a look

    You footer need an extra clear:both for ie .
    Code:
     [b/ <div style="clear:both"></div>[/b]
      <div id="footer">Copyright &copy; 2004 Joe Wheaton All Rights Reserved</div>
    The footer will display its top border now.

    Hope that helps.

    Paul

  9. #9
    SitePoint Member overkill's Avatar
    Join Date
    Feb 2004
    Location
    U.S.
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    My current revision does have my footer div's clear property set to both. See it here:

    Code:
    #footer {
    	clear: both;
    	font-size: 75%;
    	color: #333333;
    	padding: 0px;
    	background: #FFFFCC;
    	margin: 0px;
    	border-top: 1px solid #000000;
    	position: relative;
    	text-align: center;
    	float: none;
    }
    If you can please take a look at http://www.retirementresources-mi.com/new to see what's going on. In IE the top boarder of the footer div is not showing up, there is also a problem with Moz rendering the page on some refreshes as the navbar div looks like it's padded up cutting off the bg image on my tabnavs div.

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

    I think the border not showing up is a bug in ie and the fix is as I gave you before. Sometimes an extra clear:both is necessary ( I don't know why but it works ).

    Moz rendering the page on some refreshes as the navbar div looks like it's padded up cutting off the bg image on my tabnavs div
    I looked using mozilla and firebird and couldn't see what you meant. I tried refreshing a number of times but I may be looking in the wrong place

    Paul

  11. #11
    SitePoint Member overkill's Avatar
    Join Date
    Feb 2004
    Location
    U.S.
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Thanks, I read your previous post with out paying attention to:

    Code:
    <div style="clear: both;"></div>
    IE is showing the top boarder now. Thanks a bunch!


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
  •