SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot Noodle7's Avatar
    Join Date
    Apr 2005
    Location
    Cape Town - South Africa
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    oh my bullet images are diappearing and reappearing in ie6

    Please help ..
    HTML Code:
    li { background:url(images/shim_vertical.gif) no-repeat;
    margin: -3px 10px 0px 0px;
    padding-left:20px;
    
    }
    when I click refresh my page the bullets keep changing positions up and down www.africanmob.com/indexnewa.htm...

    how does that work ? How can i fix it ? works perfect in firefox
    First stop - Earth!

  2. #2
    SitePoint Zealot Noodle7's Avatar
    Join Date
    Apr 2005
    Location
    Cape Town - South Africa
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry , I sorted it out , added in position : relative and it worked !
    First stop - Earth!

  3. #3
    SitePoint Zealot Noodle7's Avatar
    Join Date
    Apr 2005
    Location
    Cape Town - South Africa
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But now how do I move the nav bar up slightly? just to be in line with the text on the right
    First stop - Earth!

  4. #4
    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)
    You know, since I not only helped you with this site earlier, but also offered to help in the future, you could have just PM'd me .

    Your HTML has seven errors in it (all related to the Flash object), however, they are not interfering with the rendering of your site, which I must say is looking very impressive so far. This is definately one that should go in your portfolio if possible.

    As for the CSS, you have the following errors you will want to fix:
    URI : http://www.africanmob.com/style2a.css
    • Line: 4 Parse error - Unrecognized : { margin: 0; padding: 0; }
    • Line: 7 Context : body Invalid number : background Too many values or values are not recognized : url(images/greybckgrnd.jpg) no repeat
    • Line: 69 Context : #bottomleft ul a:hover Invalid number : font-style bold is not a font-style value : bold
    • Line: 125 Context : #submit Invalid number : font-style bold is not a font-style value : bold
    Your first problem is a parse error. If you want to remove the margins and padding from (virtually) everything, you have to use the universal selector.
    Code:
        * {
        	margin: 0;
        	padding: 0;
        }
    Your second problem is being caused by no repeat. Replacing the space with a hyphen will fix that. So no repeat would become no-repeat instead.

    Your other two problems are being caused by the use of font-style being sent to bold. It's not a valid value. You need to use font-weight instead.

    After making those changes, your stylesheet would now look like this:
    Code:
        * {
        	   margin: 0;
        	   padding: 0;
           }
           
           body {
        	   background: url(images/greybckgrnd.jpg) no-repeat;
        	   
           }
           
           /* the following style rule is an IE-specific hack that will make the page center */
           
           * html body {
        	   text-align: center;
           }
           
     /* Internet Explorer is the ONLY browser that needs the #container style rule and its corresponding DIV element. If IE could render pages properly, these styles could be applied to the BODY instead. Note that yours is a... shall I say... unique situation. */
        
        ul { list-style-type:none;
        
        }
        	/*padding-left: -10px;	
        	padding-right: 10px;}*/
        
        li { background:url(images/shim_vertical.gif) no-repeat;
        margin: 0px 10px 0px 0px;
        padding-left:20px;
        position: relative;
        }
        
           #container {
        	   height: 604px;
        	   margin: 0 auto;
        	   width: 780px;
           }
           
           #topleft {
        	   background: url(images/slice1.gif) no-repeat;
        	   float: left;
        	   width: 364px;
        	   height: 370px;
        	position: relative;
           }
        
        
        #topright {
        	   background: url(images/slice2.gif) no-repeat;
        	   float: right;
           width: 416px;
        	   height: 370px;
           }
        
        #bottomleft li a {
        text-decoration: none;
        }
        /*#bottomleft ul {
        background: url(images/vertical_shim.gif)}*/
        
        #bottomleft ul a:link, a:visited {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #ffffff;
        }
        
        #bottomleft ul a:hover{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #33ccff;
        font-weight: bold;
        } 
           
        #bottomleft {
        background: url(images/slice3.gif) no-repeat;
        /*clear: both;*/
        float: left;
        width: 281px;
        height: 234px;
        position: relative;
        text-align: left;
         }
        
        html>body #bottomleft .textblock{ position: absolute; text-align: left;}
        
        #bottomleft .textblock {
        padding-top: 5px;
        position: relative;
        width: 0px;
        height: auto;
        /*top: 70px;*/
        left: 5px;
        /*opacity: 0.5
        filter: alpha(opacity=50);
        -moz-opacity: 0.50;
        -khtml-opacity: 0.5;
        background: white;*/
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #000000;
        font-weight: bold;
        letter-spacing: 2px;
        line-height: 22px;
        
        
        }
           #bottommiddle 
        		{
        	background: url(images/slice4.gif) no-repeat;
        	float: left;
        	width: 249px;
        	height: 234px; 
        	color: #ffffff;
        	font-family: Arial, Helvetica, sans-serif;
        	font-size: 12px;
        	text-align: justify;
        line-height: 20px;
        	
        }
           #bottomright {
        	   background: url(images/slice5.gif) no-repeat;
        	float: right;
        	   width: 250px;
        	   height: 234px;
           }
          
        #submit {color: #33ccff; background-color: #4c4c4c; font-size: 10px; font-weight: bold ; width: 100px; height: 20px;}
        .styleblue {font-family: Arial, Helvetica, sans-serif;
        	font-size: 12px;
        	font-style: normal;
        	color: #33ccff;}
    However, your stylesheet can take advantage of shorthand style rules as well. Mainly to the font and background properties. I went ahead and took the liberty of doing that for you. In the process, I also moved the text-align: center; solution for IE and put that in the main body rule as well. Browsers checked for this stylesheet were IE6, IE7, FireFox 1.0.3 and Opera 9.
    Code:
      * {
      	border: none;
      	margin: 0;
      	padding: 0;
      }
      
      body {
      	background: #000 url(images/greybckgrnd.jpg) no-repeat;
      	color: #FFF;
      	text-align: center; /* This is a Win-IE only fix to make the document center down the page. */
      }
      
      #container {
      	height: 604px;
      	margin: 0 auto;
      	width: 780px;
      }
      	#topleft {
      		background: url(images/slice1.gif) no-repeat;
      		float: left;
      		width: 364px;
      		height: 370px;
      		position: relative;
      	}
      		html>body #bottomleft .textblock {
      			position: absolute;
      			text-align: left;
      		}
      	
      	#topright {
      		background: url(images/slice2.gif) no-repeat;
      		float: right;
      		height: 370px;
      		width: 416px;
      	}
      	
      	#bottomleft {
      		background: url(images/slice3.gif) no-repeat;
      		float: left;
      		height: 234px;
      		position: relative;
      		text-align: left;
      		width: 281px;
      	}
      		#bottomleft .textblock {
      			background: transparent;
      			color: #000;
      			height: auto;
      			font: bold 13px/22px Arial, Helvetica, sans-serif;
      			letter-spacing: 2px;
      			padding-top: 5px;
      			position: relative;
      				/*top: 70px;*/
      				left: 5px;
      			width: 0;
      				/*
     					opacity: 0.5
     					filter: alpha(opacity=50);
     					-moz-opacity: 0.50;
     					-khtml-opacity: 0.5;
     					background: white;
      				*/
      		}
      	
      		#bottomleft ul {
      			list-style-type: none;
      			padding-left: 20px;
      		}
      			#bottomleft li {
      				background:url(images/shim_vertical.gif) no-repeat;
      				margin-right: 10px;
      				padding-left: 20px;
      				position: relative;
      			}
      				#bottomleft li a {
     					text-decoration: none;
      				}
      		
     				#bottomleft li a:link, #bottomleft li a:visited {
     					background-color: transparent;
     					color: #FFF;
     		 		font: 13px/1em Arial, Helvetica, sans-serif;
      				}
      				
      				#bottomleft li a:hover {
     					background-color: transparent;
     					color: #3CF;
     		 		font: bold 13px/1em Arial, Helvetica, sans-serif;
      				}
      	#bottommiddle {
      		background: transparent url(images/slice4.gif) no-repeat;
      		color: #FFF;
      		float: left;
      		font: 12px/20px Arial, Helvetica, sans-serif;
      		height: 234px;
      		text-align: justify;
      		width: 249px;
      	}
      	
      	#bottomright {
      		background: url(images/slice5.gif) no-repeat;
      		float: right;
      		height: 234px;
      		width: 250px;
      	}
      
      #submit {
      	background-color: #4c4c4c;
      	color: #3CF;
      	font: bold 10px/1em Arial, Helvetica, sans-serif;
      	height: 20px;
      	width: 100px;
      }
      
      .styleblue {
      	background-color: transparent;
      	color: #3CF;
      	font: normal 12px/1em Arial, Helvetica, sans-serif;
      }
    Finally, you also have some presentational HTML in your page that needs to be removed. I removed the depreciated background attribute from your <body> element, but other than that, I didn't touch anything.


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
  •