SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed Top Navigation like Frames

    I want to know if you know of any sites that have a top navigation that is always at the top even when you scroll down the page, using full CSS, which kinda works like frames but its not... I would like to see a few examples on out there that are currently on the web. I am trying to achieve this and I want to maybe mimic some current stuff that is out there..

  2. #2

  3. #3
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool i will check it out...

    Thanks

  4. #4
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I have learned alot from the above post. Now the only issues on hacks that I have to make this site work is all in Internet Explorer.

    Internet Explorer 5 for PC has no scroll bar ?

    Internet Explorer 6.0 for PC has a absolute postion problem. I position an image like so.. <style="position:absolute; margin-top:10px; right:0;">

    This works great in all other browsers except for IE6 for PC, the actuall image covers up the scroll bar. Is there an easy fix or hack to fix this problem?

    I really appreciate all the help that you all have to offer.

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by PenGwnFistOfFury

    Internet Explorer 6.0 for PC has a absolute postion problem. I position an image like so.. <style="position:absolute; margin-top:10px; right:0;">
    How about:

    Code:
    <style="position:absolute; top:10px; right:0;">

  6. #6
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not the height that is the problem, its the right that is the problem.

  7. #7
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the CSS

    HTML Code:
    /* CSS Document */
    
    body
    {
    	margin:0;/* for ie mac*/
    }
    
    /* commented backslash hack v2 \*/ 
    html, body
    {	
    	height:100%;
    	padding:0;
    } 
    
    * html, * html body{
    	overflow:hidden;
    	padding:50px 0;
    	margin:-50px 0;
    	padd\ing:0;
    	ma\rgin:0;
    }
    
    * html #outer
    { 
    	overflow:auto;
    	height:99.9%;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    }
    
    * html #contain-all
    {
    	position:absolute;
    	overflow:auto;
    	width:100%;
    	height:100%;
    	z-index:1;
    }
    /* end hack */ 
    
    #top-bar
    {
    	position:absolute;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
    	top:0px;
    	left:0px;
    	width:100%;
    	margin:0;
    	padding:0;
    	z-index:999;
    	overflow:hidden;
    }
    
    /*#topbar-inner, #footer-inner
    {
    	height:50px;
    	background:transparent;
    }*/
    
    
    /* mac hide - reduce page to allow the scrollbar to remain visible \*/
    * html #topbar-inner,* html #footer-inner
    {
    	margin-right:17px;
    }
    /* end hide*/
    
    #footer
    {
    	position:absolute;
    	bottom:0;
    	width:100%;
    	height:57px;
    	z-index:999;
    }
    
    .spacer 
    {
    	height:50px;/* same height as footer/header to preserve space*/
    }
    
    p
    {
    	margin-top:0;
    }
    
    html > body #top-bar, html > body #footer
    {
    	position:fixed;/* for moz/opera and others*/
    }
    :VISITED {
    	font : bold 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #ffffff;
    	text-decoration: none;
    	line-height:17px;
    }
    
    A:HOVER  {
    	font : bold 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #cc9933;
    	text-decoration: none;
    	line-height:17px;
    }
    
    A:LINK {
    	font : bold 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #ffffff;
    	text-decoration: none;
    	line-height:17px;
    }
    
    A.b:VISITED {
    	font : 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #996600;
    	text-decoration: none;
    }
    
    A.b:HOVER  {
    	font : 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #ffffff;
    	text-decoration: none;
    }
    
    A.b:LINK {
    	font : 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #996600;
    	text-decoration: none;
    }
    
    BLOCKQUOTE {
    	font : normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    BODY {
    	font : normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    H1 {
    	font : bold 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #cc9900;
    }
    
    H2 {
    	font : bold 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #996600;
    }
    
    P {
    	font : normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	background-color:transparent;
    	padding-right:12px;
    }
    
    .txt-tiny {
    	font : normal 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    .b {
    	font : bold 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    .i {
    	font : normal italic 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    .redi {
    	font : normal italic 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #ff0000;
    }
    
    .bi {
    	font : bold italic 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    .ScrollBars {
    	scrollbar-base-color: #FFFFCC;
    	scrollbar-face-color: #333300;
    	scrollbar-shadow-color: #333300;
    	scrollbar-highlight-color: #3333009;
    	scrollbar-3dlight-color: #FFFFCC;
    	scrollbar-darkshadow-color: #333300;
    	scrollbar-track-color: #FFFFCC;
    	scrollbar-arrow-color: #ffffff;
    }
    
    SPAN {
    	font : bold 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #cc9900;
    }
    
    .txt-yellow {
    	font : bold 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #cc9933;
    	text-decoration: none;
    }
    
    .txt-bottom {
    	font : 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #333300;
    	text-decoration: none;
    }
    
    .txt-little {
    	font : normal 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #996600;
    }
    
    TD {
    	font : normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #996600;
    }
    
    UL {
    	font : normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    OL {
    	font : normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    SELECT {
    	font : normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #996600;
    }
    .txt-bread
    {
    	color:#000000;
    	font-weight:normal;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    }
    A.txt-trail:VISITED {
    	font : 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	text-decoration: underline;
    }
    
    A.txt-trail:HOVER  {
    	font : 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	text-decoration: none;
    }
    
    A.txt-trail:LINK {
    	font : 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000000;
    	text-decoration: underline;
    }
    .txt-navigation
    {
    	color:#996600;
    	font-size:11px;
    	font-weight:normal;
    }

  8. #8
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the code

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    	<title>Snyder's Antique Auto Parts</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	
    	<link href="includes/font-hack.css" rel="stylesheet" type="text/css">
    </head>
    <body bgcolor="#CCCC99" style="background-image:url(images/inside-left.gif); background-repeat:repeat-y;">
    
    <div id="outer"> 
    	<div id="contain-all"> 
    		<div class="spacer"></div>
    		<div style="width:auto; padding:0 15px 10px 0; margin:106px 0 0 200px; background-image:url(images/right-main.gif); background-repeat:repeat-y; background-position:right; height:100%;">
    			<h1>Sheet Metal - Rear Quarter Panels</h1>
    			<p>This is the first line...</p>
    			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kldjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklj jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsddjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljssdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklj sdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfv djljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj klsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsfjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf djk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsfdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>jsdjljk klsdjf <a href="#">jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kldjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklj jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsddjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljssdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklj sdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfv djljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf</a> dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj klsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsfjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf djk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsfdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kldjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklj jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsddjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljssdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklj sdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfv djljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj klsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsfjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf djk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsfdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kldjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklj jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsddjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljssdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklj sdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfv djljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj klsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljfsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dklsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsfjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf djk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd jsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsfdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsdjsdjljk klsdjf jsdfjsdf klsdfkl jsdklfj kljsf dkljf lsd</p>
    			
    			<p>This is the last line...</p>
    		</div>
    <!-- (Start) Footer -->
    		<div style="float:right; padding-right:100px; background-image:url(images/right-main.gif); background-position:right; background-repeat:repeat-y; padding-bottom:18px;" align="left" class="txt-tiny"><br><br>Model A Parts | Model T Parts | AA Truck Parts | V8 Parts | Books | Gift Ideas<br>Scratch & Dent | Quick Order | Catalog Request<br>Our History | FAQ | Our Location | Contact Us</div>
    			<div style="background-image:url(images/payment-block.gif); background-repeat:no-repeat; padding-top:21px;">
    				<img src="images/blank.gif" width="8" height="1"><img src="images/i-cc-logos.gif" width="49" height="28" align="top" alt="Now Accepting: Visa, Mastercard and Discover"><img src="images/blank.gif" width="10" height="52"><a href="javascript:popUp('https://digitalid.verisign.com/as2/bb70e54b330aa5b02c414a03c0bfefc7')"><img src="images/i-verisign.gif" width="69" height="34" border="0" align="top" alt="VeriSign Secure"></a>
    			</div>
    		<div style="clear:both; background-image:url(images/i-bg-bottom.gif);">
    			<div style="background-image:url(images/i-bg-bottomleft.gif); background-repeat:no-repeat; padding-left:30px;">
    				<div style="height:57px; background-image:url(images/i-bg-bottomright.gif); background-position:right; background-repeat:no-repeat; padding-right:30px;">
    					<img src="images/bottom-bump.gif" width="11" height="6"><br>
    					<span class="txt-bottom"><b>Snyder's Antique Auto Parts, Inc.</b> &nbsp;12925 Woodworth Rd., New Springfield, Ohio 44443<br>
    					<b>Toll Free</b> (888) 262-5712 &nbsp;<b>Local</b> (330) 549-5313 &nbsp;<b>Fax</b> (330) 549-2211 &nbsp;<b>Email</b> <a href="/contact.php"><span class="txt-bottom">Send us your comments</span></a></span>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    <!-- (End) Footer -->
    
    <div id="top-bar"> 
    	<div id="topbar-inner">
    <!-- Absolute Images -->
    		<img src="images/inside-bg.jpg" width="191" height="215" border="0" alt="snyders" style="position:absolute;">
    		<a href="#"><img src="images/technical-question.gif" width="99" height="116" border="0" alt="Have a Technical Question? Click Here" style="position:absolute; margin-left:179px; margin-top:38px;"></a>
    		<img src="images/top-bump.gif" width="9" height="4" style="position:absolute; margin-left:290px; margin-top:12px;">
    		<img src="images/main-bg-bump.gif" width="14" height="17" style="position:absolute; margin-left:290px; margin-top:98px;">
    		<div style="position:absolute; right:31px;"><a href="#"><img src="images/view-shopping-cart.gif" width="176" height="29" border="0" alt="View Shopping Cart"></a></div>
    
    <!-- (Start) Right Side Images-->
    		<!-- <div style="float:right; background-image:url(images/right-main.gif); background-repeat:repeat-y;">
    			<div><img src="images/inside-top-right.gif" width="30" height="37"></div>
    			<div><img src="images/right-dark-brown.gif" width="30" height="17"></div>
    			<div><img src="images/right-light-brown.gif" width="30" height="22"></div>
    			<div><img src="images/right-light-tan.gif" width="30" height="22"></div>
    			<div><img src="images/right-main-top.gif" width="30" height="16"></div>
    			<div><img src="images/right-main.gif" width="30" height="42"></div>
    		</div> -->
    		
    		
    		<!-- <div style="position:absolute; right:0;"><img src="images/inside-top-right.gif" width="30" height="37"></div>
    		<div style="position:absolute; right:0; margin-top:37px;"><img src="images/right-dark-brown.gif" width="30" height="17"></div>
    		<div style="position:absolute; right:0; margin-top:54px;"><img src="images/right-light-brown.gif" width="30" height="22"></div>
    		<div style="position:absolute; right:0; margin-top:76px;"><img src="images/right-light-tan.gif" width="30" height="22"></div>
    		<div style="position:absolute; right:0; margin-top:98px;"><img src="images/right-main-top" width="30" height="16"></div>
    		<div style="position:absolute; right:0; margin-top:114px;"><img src="images/right-main.gif" width="30" height="42"></div> -->
    		
    <!-- (End) Right Side Images-->
    
    <!-- (Start) Top Navigation -->
    		<img src="images/top-bg.gif" width="21" height="156" style="position:absolute; right:0;">
    		<div style="background-image:url(images/bg.gif); background-repeat:repeat-x; padding-left:290px; padding-top:20px; padding-bottom:20px;">
    			<div><a href="#">Catalog</a><br></div>
    			<div><span class="txt-navigation"><a href="./modelaparts" style="font-weight:normal;">Model A Parts</a> | <a href="./modeltparts" style="font-weight:normal;">Model T Parts</a> | <a href="./aatruckparts" style="font-weight:normal;">AA Truck Parts</a> | <a href="./v8parts" style="font-weight:normal;">V8 Parts</a> | <a href="./books" style="font-weight:normal;">Books</a> | <a href="./giftideas" style="font-weight:normal;">Gift Ideas</a></span><br /></div>
    			<div style="padding-top:2px;"><span class="txt-navigation"><a href="./ScratchNDentSales">Scratch & Dent</a> | <a href="order.htm">Quick Order</a> | <a href="catalog2.htm">Catalog Request</a></span><br></div>
    			<div style="padding-top:4px;"><span class="txt-navigation"><a href="history.htm">Our History</a> | <a href="faq/index.htm">FAQ</a> | <a href="location.htm">Our Location</a> | <a href="correspondence.htm">Contact Us</a></span><br></div>
    			<div style="padding-top:20px;"><span class="txt-bread">You are here:<br /><a href="#" class="txt-trail">Model A Parts</a>  Sheet Metal - Rear Quarter Panels</span></div>
    		</div>
    <!-- (End) Top Navigation -->
    
    <!-- (Start) Left Side Product Search-->
    		<div style="float:left; width:180px; padding-top:60px;">
    			<div style="background-image:url(images/product-search-block.gif); background-repeat:no-repeat;">
    				<form method="get" action="/search.asp" id="Form1">
    				<input type="text" style="width:140px; margin:16px 2px 2px 10px; border:1px solid #999966; color:#CC9933;" />
    				<div align="right" style="padding-right:29px;">
    					<input type="image" src="images/product-search-button.gif" style="cursor:hand;" id="Image1" name="Image1" />
    				</div>
    				</form>
    				<div style="font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:9px; margin-left:18px;">Search by Product Name, Description or Part Number.</div>
    				<br><br>
    			</div>
    		</div>
    	</div>
    </div>
    <!-- (End) Left Side Product Search-->
    
    </body>
    </html>

  9. #9
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <!-- (Start) Top Navigation -->
    <img src="images/top-bg.gif" width="21" height="156" style="position:absolute; right:0;">



    This is the area of problem for IE6 for PC

  10. #10
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Ahh right. Just hack it:

    Code:
    * html #idname {
    position: absolute;
    top: 10px;
    right: 25px;
    }

  11. #11
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the hack works fine for IE but then screws up all the other browsers that it was working in before.

  12. #12
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

  13. #13
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont understand? Can you shine some light on it.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,527
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you just want to separate ie6 from ie5 and 5.5. then do it like this:

    Code:
    * html #idname {
    position: absolute;
    top: 10px;
    right:0;/* for ie5 and 5.5.*/
    r\ight:17px;/* for ie6*/
    }

  15. #15
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats fine, that works in IE, but when i fix the IE stuff mozilla and opera and other browser then get messed up as well. Its like im fighting a losing battle.

  16. #16
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I have noticed that with this style sheet that i lose the scroll bar in IE 5 for PC. Anyone every run into anything like this ?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,527
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Do you have updated code for us to look at (or a link) ?

    Tricking IE into fixed positioning is not without problems although you can get reasonable results (as with my examples above) there are some drawbacks and you need to be very careful as it can all come crashing down

  18. #18
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  19. #19
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The above link works great on the latest versions of Opera, Mozilla, Firefox and Netscape for PC. In Internet Explorer 5 for PC there is no scroll bar. In Internet Explorer 5.2 for Mac it is all messed up as well. If anyone has any ideas on how to get the scrollbar back ? Has anyone had a problem like that before when the scroll bar is gone?

  20. #20
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    If you just want to separate ie6 from ie5 and 5.5. then do it like this:

    Code:
    * html #idname {
    position: absolute;
    top: 10px;
    right:0;/* for ie5 and 5.5.*/
    r\ight:17px;/* for ie6*/
    }

    How do you you hack for mozilla and opera and others like that ?

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

    In ie5 the content is in top of the scroll bar so you need to move it away by about 17px as follows. The order of the styles is important as it targets ie5 only using the voice family hack which jumps the whole next style block thus allowing us to separate ie5 from 5.5. and 6.

    Code:
    /* mac hide - reduce page to allow the scrollbar to remain visible \*/
    * html #footer-inner{margin-right:17px;}
    * html #topbar-inner{
    margin-right:0;
    voice-family: "\"}\"";
    voice-family:inherit;
    }
    * html #topbar-inner{margin-right:17px;}
    * html #top-bar{
    margin-right:17px;
    voice-family: "\"}\"";
    voice-family:inherit;
    }
    * html #top-bar{margin-right:0;}
    /* end hide*/

    I didn't have time to look at ie5 mac but as it does understand fixed positioning then you should really hide all the ie only styles from mac also.

    Remember that when you use the mac hiding comments that you can't have any other comments in-between as that kills the hack.

    e.g.

    Code:
    /* mac hide \*/
    body{etc.......}/* this comment will break the hack and allow mac to see the next style
    #outer{etc.....}
    /* supposed end hide */
    In the above code the first time mac sees any comments afetr the initial hack it will quit the hide and resume with the outer style. I notice you have done this in your code.

    Hope that helps (tested in ie5, 5.5 and ie6 working ok)

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,527
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    How do you you hack for mozilla and opera and others like that
    Well usually you don't need to as they more or less get it right. Of the 2 its more likely opera that wil need something different but the latest versions of opera are better.

    There is an opera hack but I avoid it as its unlikely to be foolproof as opera gets updated quite often.

    Usually you just need to spearet ie from everyone else. Other browsers such as mozilla can usually be made to work with valid code anyway.

  23. #23
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay well thanks for the help that you all have supplied on this thread.


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
  •