SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Header contents get shifted up or down between IE and FF

    Ok,

    So I've got a header div and everything in it is shifting slightly higher in IE (or lower in Firefox, however you look at it). ~3-4 pixels.

    The three main elements are the top 2 upper right links (in a "p" tag), the login form fields and button (in a "div" tag), and the horizontal navigation in a "ul" tag.

    How is this shifting? I have each one positioned relatively inside the "header div" using top="Y" and left="X".

    Here are two screenshots. You can see the difference in the nav, login, and top links...

    Firefox (how I want it to look)


    IE7 (also happens in Opera)



    Here is the html...

    Code HTML4Strict:
    <div id="header_container">
    	<div id="header">
    		<ul class="navlist">
    			<li><a class="navlistlink" href="testing/index.html">Testing</a></li><li class="mainnavseparator">|</li>
    			<li><a class="navlistlink" href="services/index.html">Services</a></li><li class="mainnavseparator">|</li>
    			<li><a class="navlistlink" href="pricing/index.html">Pricing</a></li><li class="mainnavseparator">|</li>
    			<li><a class="navlistlink" href="qa/index.html">Quality Assurance</a></li>
    		</ul>
    		<p class="headerlinks">
    			<span><a class="header" href="directory/index.html">&raquo; Search Test Directory</a><br />
    			<a class="header" href="contact/index.html">&raquo; Contact</a></span>
    		</p>
    		<div id="login_container">
    			<form id="login" action='https://www.xxxxxxxxx.com/validate.cgi' target='new' method='post'>
    				<label for="user">Username</label><input name="Username" type="text" class="login" value="" maxlength="30"/>
    				<label for="password">Password</label><input name="Password" type="password" class="login" value="" maxlength="30"/>
    				<input name="Submit" type="image" value="Submit" src="images/login_go.gif" alt="Go" align="middle"/>
    			</form>
    		</div>	
    	</div>
    </div>


    Here's the CSS for the Navigation bar...

    Code CSS:
    ul.navlist {
    	position:relative;
    	top:131px;
    	left:32px;
    	width:515px;
    	height:auto;
    	text-align:left;
    	}
     
     
    .navlist li {
        display:inline;
    	list-style-type:none;
    	color:#DFECFF;
    	font-size:12px;
    	}
     
     
    li.mainnavseparator {
    	color:#DFECFF;
    	font-size:12px;
    	padding:0 30px 0 35px;
    	}	
     
    a.navlistlink {font-size:13px; color:#fff; text-decoration:none;}
    a.navlistlink:hover {font-size:13px; color:#fff; border-bottom:dotted 1px #fff;}
    a.navlistlink:visited {font-size:13px; color:#fff;}
    a.navlistlink:active {font-size:13px; color:#fff; border-bottom:dotted 1px #fff;}


    It's almost like Firefox's top pixel starts lower than in IE.
    I know this code isn't perfect but this is only the second site I've ever done. I'm trying to learn things the right way. I sometimes abuse selectors but I'm getting better. I plan on cleaning up this code.

    ALSO, see in the black where it says "Search Tests" in the screenshot? That whole header is one big background image. How can I make that black tab a clickable link? Or rather, what is a good way? I can't do image map. I thought of a tranparent div but there has to be a better way.

    Something funny is going on with that Go button after the login too. Hmm...

    Thank you SitePoint masters. This board is great!

  2. #2
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh! and One more thing that is important!!!

    See in the CSS where the a:hover state is border-bottom:dotted 1px??

    The dotted line shows up in Firefox and Opera, but not IE. HOWEVER, I have another footer nav list that does the same 'border-bottom' exactly and that one shows up just fine in IE and all other browsers and it's on the same page! Also, :active states never work for me. I don't know what the deal is.

    Why is that?

    Sorry for so many questions. Thought I'd try to bang em out in one thread.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bump

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2007
    Location
    Atlanta, GA
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone have any ideas or hints? I'm losing my mind here.


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
  •