Web Analytics Made Easy -
StatCounter 2 problems - CodingForum

Announcement

Collapse
No announcement yet.

2 problems

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 2 problems

    I am currently having two problems that I don't really understand why. The thing that sucks even more about those problems are that they seem to be different problems, though similar.. still different in IE and firefox.

    Problem 1:
    the navigation.. the tabs should be in the black bar (navhold) and should be 2 pixel from the bottom and 15 pixels from the right. It seems to be be a problem in both IE and firefox, though the tabs sit in different spots on both browsers..

    Problem 2:
    Scroll down and look at the content.. it just keeps going and the content div just stops. Problem is on both IE and firefox. (I think they are different, not sure.. dont really wana open IE atm.)


    the location: http://www.carbenco.com/uy/


    Files:

    index.php
    PHP 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">
    <
    head>
    <
    title>Uniquely Yours Log Furniture</title>
    <
    link href="misc/stylesheet.css" rel="stylesheet" type="text/css" title="default" />
    </
    head>
    <
    body>

    <
    div id="base">
    <
    div id="top"><img src="top.jpg" /></div>
    <
    div id="navhold">
    <
    div id="navigation">
      <
    class="tab">HOME</a>
      <
    class="tab">ABOUT</a>
      <
    class="tab">GALLERY</a>
      <
    class="tab">CONTACT</a>
    </
    div>
    </
    div>
    <
    div id="content">

    content here

    </div>
    </
    div>

    </
    body>
    </
    html

    stylesheet.css
    Code:
    html {
      height: 100%;
    }
    
    body {
    height:100%;
            text-align: center;
    	margin: 0px;
    	padding: 0px;
    	background-image: url(http://www.carbenco.com/uy/bg.jpg);
     	font-size: 10px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    #base {
            text-align: left;
            margin-left: auto;
            margin-right: auto;
            width: 629px; height:100%;
            background-color: #FFFFFF;
    }
    
    #top {
            position: relative; top: 0px;
            width: 629px; height: 176px;
            background-color: #FFFFFF;
    }
    
    #navhold {
            position: relative; top: 0px;
            width: 629px; height: 38px;
            background-color: #000000;
    }
    
    #content {
            position: relative; top: 0px;
            width: 629px; height:100%;
            background-color: #FFFFFF;
    }
    
    
    #navigation {
            position: absolute; bottom: 2px; right: 15px;
            background-color: #000000;
    }
    
    a.tab {
      color: #8c8a8c;
      background-color: #ffffff;
      border: 0px solid #000000;
      border-bottom-width: 0px;
      padding-left: 17px;
      padding-right: 17px;
      padding-top: 11px;
      padding-bottom: 11px;
      text-decoration: none;
    }
    
    a.tab, a.tab:visited {
      color: #8c8a8c;
    }
    
    a.tab:hover {
      background-color: #97ac64;
      color: #ffffff;
    }

  • #2
    Try this for your CSS
    Code:
    html {
      height: 100%;
    }
    
    body {
    height:100%;
            text-align: center;
    	margin: 0px;
    	padding: 0px;
    	background-image: url(http://www.carbenco.com/uy/bg.jpg);
     	font-size: 10px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    #base {
            text-align: left;
            margin-left: auto;
            margin-right: auto;
            width: 629px; min-height:100%;
            background-color: #FFFFFF;
    }
    
    * html #base {
    height:100%;
    }
    #top {
            position: relative; top: 0px;
            width: 629px; height: 176px;
            background-color: #FFFFFF;
    }
    
    #navhold {
            position: relative; top: 0px;
            width: 629px; height: 38px;
            background-color: #000000;
    }
    
    #content {
            position: relative; top: 0px;
            width: 629px; height:100%;
            background-color: #FFFFFF;
    }
    
    
    #navigation {
            position: absolute; bottom: 2px; right: 15px;
            background-color: #000000;
    }
    
    a.tab {
      color: #8c8a8c;
      background-color: #ffffff;
      border: 0px solid #000000;
      border-bottom-width: 0px;
      padding-left: 17px;
      padding-right: 17px;
      padding-top: 11px;
      padding-bottom: 11px;
      text-decoration: none;
    display:block;
    float:left;
    }
    
    a.tab, a.tab:visited {
      color: #8c8a8c;
    }
    
    a.tab:hover {
      background-color: #97ac64;
      color: #ffffff;
    }
    look at the changes I made to #base. You needed to use min-height. Search for ways on how to fake min-height in IE6 and you'll understand the * html thing. I also made your links display:block; without that a padding couldn't be applied to them.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      ///////////// Thanks for the help so far!
      Last edited by aebstract; Oct 5, 2006, 10:10 PM.

      Comment


      • #4
        edit:

        Changed over to using lists for the tab navigation. Everything seems to be fine at the moment except for one thing, which is a firefox/IE issue. The active tab works correctly in firefox, as it should be white and hover should keep it white. In IE it is white, but the over changes it green like the rest.. Any solutions?

        Code:
        #navigation {
                position: absolute; bottom: 0px; right: 15px;
                background-color: #000000;
        }
        
        #navigation ul {
          padding-left: 17px;
          padding-right: 17px;
          padding-top: 8px;
          padding-bottom: 8px;
        	margin: 0;
        	list-style-type: none;
        	text-align: center;
        	}
        
        #navigation ul li {
        	display: inline;
        	}
        
        #navigation ul li a {
          padding-left: 17px;
          padding-right: 17px;
          padding-top: 8px;
          padding-bottom: 8px;
        	text-decoration: none;
        	color: #8c8a8c;
        
        	background-color: #ffffff;
        	display: block;
        	float: left;
        	border-bottom: 2px solid #000000;
        	border-right: 2px solid #000000;
        	}
        
        #navigation ul li a:hover {
          padding-left: 17px;
          padding-right: 17px;
          padding-top: 8px;
          padding-bottom: 8px;
        	color: #ffffff;
          background-color: #97ac64;
        	}
        
        #navigation ul li a:active {
          padding-left: 17px;
          padding-right: 17px;
          padding-top: 8px;
          padding-bottom: 8px;
        	color: #8c8a8c;
        	background-color: #ffffff;
          border-bottom-color: #ffffff;
        	}
        
        #navigation ul li.active a {
          padding-left: 17px;
          padding-right: 17px;
          padding-top: 8px;
          padding-bottom: 8px;
        	color: #8c8a8c;
        	background-color: #ffffff;
          border-bottom-color: #ffffff;
        	}
        Last edited by aebstract; Oct 5, 2006, 10:12 PM.

        Comment


        • #5
          ^^^^^

          Comment


          • #6
            Do some research. The bump wasn't necessary. You aren't the only person that needs help on the forums either.

            Link psuedo classes need to be in a certain order.
            LoVe HAte

            :link
            :visited
            :hover
            :active

            IE needs all of them to play the way you want.

            Good luck.
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              that is the order its in? O.o
              Last edited by aebstract; Oct 9, 2006, 08:50 PM.

              Comment

              Working...
              X