Fixed header

HTML & CSS
1

Here is my code: ( this is part of a page)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
   .box2 {
	position:relative;
	width: 370px;
	height:300px;
	float:left;
	margin:10px 0 1px 10px;
	overflow:auto;
	background-color: #F9F9F9;
	border: 3px solid rgba(153, 153, 153, 0.746094);
	border-radius: 5px;
	color: #333;
	}
  </style>
 </HEAD>

 <BODY>
  <div class="box2">
  
   <h3 style="margin-left:15px">HEADERINFO</h3>
   <ul>
   
	<li>hjjl</li>
	<li>fhcshch,sdchjkdfjdhfh</li>
	<li>fhcshch,sdchjkdfjdhfh</li>
	<li>fhcshch,sdchjkdfjdhfh</li>
	<li>fhcshch,sdchjkdfjdhfh</li>
	<li>fhcshch,sdchjkdfjdhfh</li>
	<li>fhcshch,sdchjkdfjdhfh</li>

	<li>fhcshch,sdchjkdfjdhfh</li>
    <li>fhcshch,sdchjkdfjdhfh</li>
    <li>fhcshch,sdchjkdfjdhfh fhcshch,sdchjkdfjdhfh</li>
    <li>fhcshch,sdchjkdfjdhfh</li>
    <li>fhcshch,sdchjkdfjdhfh</li>
    <li>fhcshch,sdchjkdfjdhfh</li>
	<li>fhcshch,sdchjkdfjdhfh</li>
	<li>fhcshch,sdchjkdfjdhfh</li>
	<li>fhcshch,sdchjkdfjdhfh</li>
    
	</ul>
	
   </div>
 </BODY>
</HTML>

I get output

I want a fixed header. Please see the output where I have explained what I’m looking for.

what changes required in my code ?

2

Hi,

You need a full doctype for a start or no version of IE will work with this.

You can use position:fixed to keep the element in place but there are drawbacks, not least that IE6 doesn’t support position:fixed.

Here is an example.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.box2 {
    position:relative;
    width: 370px;
    height:300px;
    float:left;
    margin:10px 0 1px 10px;
    overflow:auto;
    background-color: #F9F9F9;
    border: 3px solid rgba(153, 153, 153, 0.746094);
    border-radius: 5px;
    color: #333;
}
.box2 h3{
    position:fixed;
    padding:10px;
    margin:0;
    background:#fffccc;
    width:332px;
}
.box2 ul{padding:50px 0 0 25px;margin:0}
</style>
</head>
<body>
<div class="box2">
    <h3>HEADERINFO</h3>
    <ul>
        <li>hjjl</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
    </ul>
</div>
</body>
</html>

An easier alternative would have been to just place the header above the scrollbox instead but I guess that’s not what you wanted.

3

I am sorry to hijack this post.

but I thought position:fixed was ALWAYS relative to the view port…

4

Oops brain f@rt. i forgot what happens when you FIXP or AP something w/o coordinates.

This is my alternate solution: its based on AP rather than fixed so it should work in IE 5 and 6, it also scrolls from the inside of the UL… seemed to make more sense that way.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.box2 {
    position:relative;
    width: 370px;
    height:300px;
    float:left;
    margin:10px 0 1px 10px;
    background-color: #F9F9F9;
    border: 3px solid rgba(153, 153, 153, 0.746094);
    border-radius: 5px;
    color: #333;
}
.box2 h3{
    position:absolute;
    width:350px;
    padding:10px;
    height:40px;/*semi-optional*/
    margin:0;
    background:#fffccc;
}
.box2 ul{padding:0 0 10px 1.5em; margin:60px 0 0 0 ;     overflow:auto; height:230px;}
</style>
</head>
<body>
<div class="box2">
    <h3>HEADERINFO<br>ddd</h3>
    <ul>
        <li>hjjl</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh fhcshch,sdchjkdfjdhfh nice copy</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
    </ul>
</div>
</body>
</html>

Both my and Paul’s idea have have the drawback that they assume you have a fixed height h3. Paul used padding at the top of the UL to push down, but if you H3 started to grown vertically it would cover up the list…) In either case the only way around this is to use css3… in which case a lot more than just IE6 would go out the window…

5

you code works but I need some changes.

Here is what I want

6

Yes the idea is not to use co-ordinates so the element becomes fixed at the position that it finds itself in the flow of the document.

This is my alternate solution: its based on AP rather than fixed so it should work in IE 5 and 6, it also scrolls from the inside of the UL… seemed to make more sense that way.

Yes, I mentioned that an easier alternative would have been to just place the header above the scrollbox instead :slight_smile:

you code works but I need some changes.

Here is what I want

Neither mine nor Dresdens code produce the display shown in your example picture. In my example the scrollbar would be full width and there would be no gap at the bottom. The height of the top element can be controlled with the padding on the heading element used there.

In dresdens example there is no gap at the bottom but the scrollbar is only related to the ul so won’t stretch to the full height of the box. he already told you how to adjust the height of the header element as required.


 height:40px;/*semi-optional*/

You have all the information to create the effect you want in two different ways now and the matter of spacing is just minor adjustments etc. If you are still stuck then post all the html and css that you are using because your code is different to the code that we supplied and we would need to see where you went wrong:).

7

under which browser you are testing ? . I run the code in IE 6 and got that output!

Of course, in Chrome the display is fine but in IE this sucks.

whats the IE solution ?

Please check with IE6 , you will get the display as similar to example picture.

If you are still stuck then post all the html and css that you are using because your code is different to the code that we supplied

I’ have run your code only !

8

Its not working in IE6. It works fine in Chrome for sure. What changes required in your code so that it works in IE 5 and 6 also?

9

Agree …but look will be different . I wanted the Header inside the box. Everything inside the container box.
I’ll be fine if you could make the solution IE compatible.

10

I already mentioned that for my code the fixed header would not work in IE6 but it would degrade gracefully and just scroll away which is acceptable for such an old browser.

It still does not give the display shown in your image though even in IE6.:slight_smile:

I assume you added a doctype to dresdens solution?

Here is an amended version that works in Ie6.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.box2 {
    position:relative;
    width: 370px;
    float:left;
    margin:10px 0 1px 10px;
    background-color: #F9F9F9;
    border: 3px solid #000;
    color: #333;
}
.box2 h3 {
    position:absolute;
    width:334px;
    padding:10px;
    height:30px;/*semi-optional*/
    margin:0;
    background:#fffccc;
}
.box2 ul {
    padding:50px 20px 10px 1.5em;
    margin:0;
    overflow:auto;
    height:240px;
}
</style>
</head>
<body>
<div class="box2">
    <h3>HEADERINFO</h3>
    <ul>
        <li>hjjl</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh fhcshch,sdchjkdfjdhfh nice copy</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
        <li>fhcshch,sdchjkdfjdhfh</li>
    </ul>
</div>
</body>
</html>
11

This breaks in Chrome :frowning:

12

What breaks in Chrome :frowning:

13

Are u using my code, or Pauls?

If you are using mine, the scroller should be UNDER the yellow.

I dont understand what you are calling a “gap” at the top ( in yellow) that is the height of the header… you need SOME space to contain your header. The gap bellow… comes from either the padding or margin of the UL…

IE puts the scroll bars OUTSIDE the element (in this case the UL )… which may cause a problem; one that is easily fix with a * htlm hack to readjust the size for IE. However I dont see why this would even happen, as we gave no width to the UL.

can you copy paste the code you are using?

14

The last code I posted works in chrome with no problems and is based on the method in Dresden’s code but tidied up to make the scrollbar appear full height of the whole box.

I see no real issues in any browser.

15

when I plugged your code in my web page , it works fine in CHROME but does not work in IE6 properly.

Here is the full code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.borderTable {
	padding: 2px 4px 2px 4px;
	border: 1px solid #660000;
	background-color: #e8eefa;
}


.box3 {
	width: 370px;
	height:300px;
	border:2px solid #660000;
	float:right;
	margin-top:10px;
	margin-right:10px;
 }
.box2 {
    position:relative;
    width: 370px;
    float:left;
    margin:10px 0 1px 10px;
    background-color: #F9F9F9;
    border: 3px solid #000;
    color: #333;
}
.box2 h3 {
    position:absolute;
    width:350px;
    padding:10px;
    height:30px;/*semi-optional*/
    margin:0;
   background:#c2c2c2;
}
.box2 ul {
    padding:50px 20px 10px 1.5em;
    margin:0;
    overflow:auto;
    height:240px;
}

 




.container{
/*border:2px solid #0000ff;*/

}

.footer{


padding: 2px 4px 2px 4px;
	border: 1px solid #660000;
	background-color: #e8eefa;
	height:100px;
}

.boxwrap{
    float:left;
    width:370px;
}
ul.hoz {
    clear:both;
    list-style:none;
    margin:0 0 10px 15px;
    padding:0;
    clear:both;
}
.hoz li {
    display:inline
}
.footer {
    clear:both
}






.borderTable tr td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
}




</style>
</head>

<body>
<form>
  <table width="100%" height="130"  class="borderTable" >
    <tr>
      <td width="103">&nbsp;</td>
      <td width="147">&nbsp;</td>
      <td width="94">&nbsp;</td>
      <td width="113">&nbsp;</td>
      <td width="128">&nbsp;</td>
      <td width="142">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>About us </td>
      <td>Feedback</td>
      <td>Blog</td>
      <td>Subscriptions</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  
  
 
  <table width="100%">
  <tr>
    <td>Search</td>
    <td><input type="text" name="textfield"></td>
    <td>Go</td>
    <td>User Name</td>
    <td><input type="text" name="textfield2"></td>
    <td>Password</td>
    <td><input type="text" name="textfield3"></td>
    <td>Login</td>
    <td>Sign Up</td>
  </tr>
</table>

 

  <div class="container">
  <div class="boxwrap">
  <div class="box2">
  
   <h3>Morbi in sem</h3>
   <ul>
   
	<li>Lorem ipsum dolor sit amet</li>
	<li>Aliquam tincidunt mauris eu risus</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>

	<li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Lorem ipsum dolor sit amet</li>
    
	</ul>
	
   </div>
   <ul class="hoz">
                <li><a href="#">Lorem|</a></li>
                <li><a href="#">Lorem|</a></li>
                <li><a href="#">Lorem|</a></li>
                <li><a href="#">Lorem|</a></li>
				<li><a href="#">Lorem|</a></li>
            </ul>
        
   </div>



   <div class="box3">
    <object width="370" height="300">
<param name="movie" value="http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1">
</param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src=http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1 
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="370" height="300">
</embed></object>    
   </div>
 
  
  
  
  </div>

 
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  
   <div class="footer">
   This is my footer
  </div>
</form>
</body>
</html>

Here is the CHROME output. This output is fine

In IE6 output breaks . Here is the IE6 output:

see the IE6 output is suffering problems which was not present in Chrome.

16

I can’t see a single difference between those two images and I can’t see a difference in the browsers when I test locally either as far as the element we have been talking about goes.

What exactly are the problems?

You need to be more verbose and please explain exactly what the problem is. I will not reply to any more one line replies such as “This breaks in Chrome :frowning:” as that does not tell me what you are seeing and indeed gives no indication of what you expected to happen.

The only thing I notice that is wrong and its wrong in all browsers is that you have made the h3 too wide and the background sits on top of the vertical scrollbar. You need to reduce the width of the h3 by about 16px.


.box2 h3 {
    position:absolute;
   [B] width:334px;[/B]
    padding:10px;
    height:30px;/*semi-optional*/
    margin:0;
    background:#c2c2c2;
}

The h3 needs a background colour otherwise you will see the text scroll underneath. You could use a white background if you didn’t want the h3 coloured.

17

Please see the two images again ! I have marked in red
IE view is not showing youtube video. Chrome view is showing youtube video.

same html is showing different display in two different browser.This is the problem.

18 
 		 		when  I  plugged your code in my web page , it works fine in CHROME  but  does not work in IE6  properly.

The youtube video has nothing to do with the code that I have provided and the elements that we have previously been talking about. We’ve been talking and discussing the scrollbox on the left all the way through this thread so it’s not surprising that I misunderstood your problem :confused:

You said to me “Your code doesn’t work” but what you should have said was that you have added a new element with a youtube video embedded in the page and that this new element isn’t working in IE6 so please can you have a look at it.

Communication is important:)

As I said it has nothing to do with the scrollbox code and indeed in my version of IE6 the video is displaying as shown by the screenshot attached.

I assume the video you have embedded is for testing anyway so I suggest you go to youtube and find anther video to test with as that one was giving me problems in Firefox and crashing the browser.

As to why your video isn’t showing in your version of IEtester then I suggest that first you make sure you are running the latest version of IEtester and that cookie support is enabled. That video seems to link to a utube helper which could be the problem as it changes settings on the computer.

However embedding video is not my area and something I never do so you may need to ask questions in the flash forum for a better answer.

19

Thanks for the post. Thanks for those information. You are very much helpful .Thanks for your time.