SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Gaps in ie6 and some other stuff

    Hi, still trying to get my head around css! I'm now working on my home page but have encountered some problems:

    (In firefox it appears fine but ie6 is having a problem displaying it)

    1. Gaps are appearing in unwanted places - between the side nav links and the main content top and bottom.
    2. Content padding aint working (both browsers should be set to 10px)
    3. Cant seem to get the spacing correct/consistant for the top of the page (compared to the other detail pages)
    4. Maybe most importantly - I cant seem to get my side nav links to vertically center over their backgroung image.

    As I'm new to this, I could be going about everythis in a incorrect manner. Any help would be great!

    Page is at: http://www.enhance.ie/2005
    CSS is at: http://www.enhance.ie/2005/css/enhance_home.css

    Thanks ,
    Cliff.

  2. #2
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone? any ideas? thanks

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

    You need to set the images to display bloxk to make them snug. This is because they are treated like text and room is allowed for descenders.

    You have missed the px of the 10 which is why you are getting no padding.

    Set the line-height to the same size as your height and the links will center vertically. Alternatively set the correct amount of padding top to move into place.

    You've used an id more than once which is not allowed. An id is unique to the page and can only be used once. Use a class for repeating styles.

    Heres the code tidied up a little.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Enhance.ie</title>
    <style type="text/css">
    body {
     text-align: left;
     width: 749px;
     margin-left: auto;
     margin-right: auto;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1em;
     color: #333333;
     font-style: normal;
     text-decoration: none;
     background-image: url(http://www.enhance.ie/2005/images/background.jpg);
     height: 375px;
     }
     
      h1 {
     font-size: 1.2em;
     font-style: italic;
     letter-spacing: 5px;
     }
     
     h2 {
     font-size: 1.1em;
     }
     
     p {
     font-size: 0.7em;
     text-align: left;
     line-height: 1.4em;
    }
     
    #top {
     background-image: url(http://www.enhance.ie/2005/images/home_top.jpg);
     background-repeat: no-repeat;
     margin-top: 18px;
     }
    #content_all{
     width: 503px;
     margin-top: 11px;
    }
    #content{
     padding: 10px;
     border-right-color: #333333;
     border-right-style: solid;
     border-right-width: 1px;
     border-left-color: #333333;
     border-left-style: solid;
     border-left-width: 1px;
     background-color: #FFFFFF;
     height: 350px;
    }
    #navlist {
     width: 234px;
     float: right;
     margin-top: 11px;
    }
    #navlist p {
     font-size: .8em;
    }
    #navlist ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
     font-size: 0.9em;
    }
    #navlist li {
     margin: 0;
    }
    #navlist a {
     display: block;
     padding: 2px 2px 2px 24px;
     background-color: #999999;
     background-image:  url(http://www.enhance.ie/2005/images/home_side_1.jpg);
     background-repeat: no-repeat;
     background-position: 0% 50%;
     height: 40px;
     line-height:40px;
    }
    #navlist a:link, #navlist a:visited {
     color: #000066;
     text-decoration: none;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
    }
    #navlist a:hover, #navlist a:active {
     background-color: #9F6F9F;
     background-image:  url(http://www.enhance.ie/2005/images/home_side_2.jpg);
     background-repeat: no-repeat;
     background-position: 0% 50%;
     color: #0099CC;
    }
     .bott_links_all{
     width: 750px;
     margin-top: 11px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: normal;
     color: #333333;
     text-decoration: none;
    }
     .bott_links_all a:hover {
      color: #0066CC;
     }
    #content_all img, #navlist img {display:block}
    </style>
    <!--[if IE 5]>
    <style>
    #navlist a {
    height: 40px;
    float: left;
    clear: both;
    width: 100%;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="top"> <a href="index.htm"><img src="http://www.enhance.ie/2005/images/logo.gif" alt="Enhance Logo - Home" width="192" height="60" border="0"></a></div>
    <div id="navlist"> <img src="http://www.enhance.ie/2005/images/home_side_top.gif"> 
      <ul>
    	<li><a href="usability.htm">USABILITY</a></li>
    	<li><a href="function.htm">FUNCTIONALITY</a></li>
    	<li><a href="design.htm">DESIGN</a></li>
    	<li><a href="promotion.htm">PROMOTION</a></li>
    	<li><a href="leg_comp.htm">LEGAL &amp; COMPLIANCE</a></li>
    	<li><a href="web_serv.htm">WEB SERVICES</a></li>
      </ul>
      <img src="http://www.enhance.ie/2005/images/home_side_bott.gif"> </div>
    <div id="content_all"><img src="http://www.enhance.ie/2005/images/home_cont_top.gif"> 
      <div id="content"> 
    	<h1>Welcome to enhance.ie </h1>
    	<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah ee blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah blah ee 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  ee blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah ee blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah blah ee blah blah</p>
    	<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah ee blah blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah ee blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah blah blah blah blah blah blah blah blah blah blah blah blah blah ee 
    	  blah blah</p>
    	<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	  blah blah blah blah blah blah blah blah blah blah blah ee blah blah</p>
      </div>
      <img src="http://www.enhance.ie/2005/images/home_cont_bott.gif"> </div>
    <div class="bott_links_all"><a href="contact.htm" class="bott_links_all">CONTACT 
      US</a> | <a href="profile.htm">PROFILE</a> | <a href="manage.htm">MANAGEMENT</a> 
      | <a href="portfol.htm" >PORTFOLIO</a> | <a href="pub_link.htm" >PUBLICATIONS/LINKS</a> 
      | <a href="legal.htm">LEGAL</a> | <a href="site_standards.htm" >STANDARDS</a> 
      | <a href="sitemap.htm">SITE MAP</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;enhance.ie 
      &copy; 2004</div>
    </body>
    </html>
    You shouldn't need all those non breaking spaces use css to position instead.

    Also those top and bottom images for your layout would be better off in the background of the container. In your navlist you could put the top one in the div and the bottom one in the bottom of the ul.

    Hope that helps.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Ireland
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thanks a million for your help! I now see where I was going wrong, and really appreciate the time you spent replying to my questions.

    Cliff


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
  •