SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 not showing search bar and H2 image replacement

    Hi All,

    Can't seem to figure out why IE6 isn't showing the search bar and H2 img replacement in the header. I believe they are just sitting behind? Any thoughts or suggestions?

    Live Demo
    Code:
    <div id="header">
                <h1 id="logo">Company</h1>
                <h2 id="headerPromo"><a href="#" title="Titlef">Title</a></h2>
                    <ul id="header_nav">
                        <li><a href="#" title="Home">Home</a></li>
                        <li><a href="#" title="Contact">Contact</a></li>
                        <li><a href="#" title="Frequently Asked Questions">F.A.Q</a></li>
                    </ul>
                    <div id="globalsearch">
                        <form action="#" method="POST">
                            <label><span id="clearsearch">Search:</span><input type="text" id="fancysearch" name="q" accesskey="s"></label><span id="fancycap">&nbsp;</span>
                        </form>
                    </div>
                <div class="clear"></div>
    	    </div>
    Code:
    #headerPromo {
    	position:absolute;
    	top:16px;
    	left:140px;
     	height: 69px;
      	width: 458px; 
      	margin: 0;
    	padding: 0;
      	text-indent: -9000px;
      	background: url(../layout/promo-solar-ssr.jpg) no-repeat;}
    
    #headerPromo a {
    	position:relative;
    	display:block;
    	left:60px;
     	height: 69px;
      	width: 350px;}
    #globalsearch { 
    	margin: 0;
    	padding: 0;
    	width: 229px; 
    	height: 23px; 
    	position: absolute; 
    	z-index:10;
    	right:15px; 
    	top:30px;
    	background: url(../layout/searchfield-capleft.gif) top left no-repeat; }
    
    #clearsearch {
    	position: relative;
    	float: left;
    	margin: 0;
    	padding: 0;
    	width: 0px;
    	height: 0px;
    	text-indent: -9000px;
    }
    
    #fancysearch {
    	margin: 0 0 0 21px;
    	padding: 5px 0 0 0;
    	float: left;
    	font-size: .6em;
    	position: relative;
    	width: 196px;
    	height: 23px;
    	/*left: -23px;*/
    	border: 0;
    	background: url(../layout/searchfield-label-bg.gif) repeat-x;
    }
    
    #fancycap {
    	position: relative;
    	float: right;
    	margin: 0;
    	padding: 0;
    	width: 12px;
    	height: 23px;
    	background: url(../layout/searchfield-capright.gif) right no-repeat; 
    }

  2. #2
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To start with I'm not sure the <input> field should be inside the <label tag> Might be whats confusing IE6 for the search field.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In IE Dev Bar I tested if IE would get it right if, in html the clear-div is removed from header, and in css the header is cleared by overflow:hidden.

    Seems like it does.

    I'm not quite sure why though, have not time to take a closer look either.
    Happy ADD/ADHD with Asperger's

  4. #4
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    In IE Dev Bar I tested if IE would get it right if, in html the clear-div is removed from header, and in css the header is cleared by overflow:hidden.

    Seems like it does.

    I'm not quite sure why though, have not time to take a closer look either.
    Perfect! That is odd

    Instead of clearing the div with overflow:hidden, I gave the header a height and removed the clearing div.


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
  •