Web Analytics Made Easy -
StatCounter Sidebar is misaligned in FF only, & only after a search? - CodingForum

Announcement

Collapse
No announcement yet.

Sidebar is misaligned in FF only, & only after a search?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Sidebar is misaligned in FF only, & only after a search?

    Hi all.

    At http://www.bartlett-family.net/chrisbartlett/blog2/ everything is perfectly fine.

    However, do a BLOG search, and look at the sidebar below the HTML Writer's Guild logo. Why does it move about 10 or so pixels to the right on the search page?

    This only happens in FF.

    How do I fix this without screwing up the rest of the blog pages that are ok?

    Thanks!

    Chris
    My Site | My Blog

  • #2
    Your code isn't consistant on your search page as it is on your other pages. Your centerinline images are in a list on all of your pages BUT the search page. In the search page you use divs and a class in eac div with an image.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      HUH? I have the same code on the search page as I do on index (and others)...

      I don't get it.

      It's the same in the php file, and the same in the outputted source. Could you show me a difference because I don't see it.

      Blindly,

      Chris
      My Site | My Blog

      Comment


      • #4
        It appears we were looking at two different search pages. I used the search down at the bottom, and I got this for those images.
        Code:
        		 <img width="1" height="1" class="spacer" src="../../pix/spacer.png" alt="Just a spacer image" title="Just a spacer image"/>
        		 <div class="centerinline"><a onclick="this.target='_blank';" onkeypress="this.target='_blank';" href="http://validator.w3.org/check/referer" title="Check 'em. They validate!"><img width="80" height="15" src="../../pix/valid_html401_80x15_2.png" alt="This page is 100% VALID XHTML 1.0 Strict!"/></a>
        		</div>
        		<img width="1" height="1" class="spacer" src="../../pix/spacer.png" alt="Just a spacer image" title="Just a spacer image"/>
        		<div class="centerinline"><a onclick="this.target='_blank';" onkeypress="this.target='_blank';" href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.bartlett-family.net/chrisbartlett/main.css
        "><img width="80" height="15" src="../../pix/w3c-valid-css.png" alt="This entire site is powered by 100% VALID CSS code!" /></a>
        
        		</div>
        		<img width="1" height="1" class="spacer" src="../../pix/spacer.png" alt="Just a spacer image" title="Just a spacer image"/>
        		<div class="centerinline"><a onkeypress="this.target='_blank';" href="http://www.anybrowser.org/campaign/" title="This site works with ANY modern browser" onclick="this.target='_blank';"><img width="80" height="15" src="../../pix/w3cab.gif" alt="This site works with ANY modern browser!"/></a></div>
        		<img width="1" height="1" class="spacer" src="../../pix/spacer.png" alt="Just a spacer image" title="Just a spacer image"/>
        		<div class="centerinline"><a onclick="this.target='_blank';" onkeypress="this.target='_blank';" href="http://webxact.watchfire.com/submit.aspx?SCANURL=http%3A%2F%2Fhttp://www.bartlett-family.net/chrisbartlett/about/&amp;GL=wcag1-aaa&amp;FR=1&amp;CL=1&amp;AR=1&amp;RS=1&amp;SA=0&amp;complete=1&amp;tzo=240" title="Explanation of Level Triple-A Conformance"><img width="80" height="15" src="../../pix/w3c-wai.png" alt="Level Triple-A conformance icon, This page meets the guidelines for W3C-WAI Web Content Accessibility Guidelines 1.0 Level THREE!"/></a></div>
        		<img width="1" height="1" class="spacer" src="../../pix/spacer.png" alt="Just a spacer image" title="Just a spacer image"/>
        		<div class="centerinline"><a onkeypress="this.target='_blank';" href="http://www.spreadfirefox.com/?q=affiliates&amp;id=111360&amp;t=82" title="WHY are you still using IE?!" onclick="this.target='_blank';"><img width="80" height="15" src="../../pix/GetFF.gif" alt="WHY are you still using IE?!"/></a></div>
        				<img width="1" height="1" class="spacer" src="../../pix/spacer.png" alt="Just a spacer image" title="Just a spacer image"/>
        		<div class="centerinline"><a onkeypress="this.target='_blank';" href="http://w3csites.com/profile.asp?username=WorldBuilder" title="I am a W3C-listed Site" onclick="this.target='_blank';"><img width="80" height="28" src="../../pix/w3clisted.gif" alt="I am a W3C-listed Site"/></a></div>
        
        		<img width="1" height="1" class="spacer" src="../../pix/spacer.png" alt="Just a spacer image" title="Just a spacer image"/>
        		<div class="centerinline"><a onkeypress="this.target='_blank';" href="http://www.gawds.org" title="I am a member of the Guild of Accessible Web Designers" onclick="this.target='_blank';"><img width="80" height="28" src="../../pix/GAWDS.gif" alt="I am a member of the Guild of Accessible Web Designers"/></a></div>
        		<img width="1" height="1" class="spacer" src="../../pix/spacer.png" alt="Just a spacer image" title="Just a spacer image"/>
        		<div class="centerinline"><a onkeypress="this.target='_blank';" href="http://www.hwg.org" title="I am a Member of the HTML Writer's Guild" onclick="this.target='_blank';"><img width="64" height="90" src="../../pix/Htmlguild.gif" alt="I am a Member of the HTML Writer's Guild"/></a></div>
            	</div>
        		<br class="clear" />
        <div id="footer">
        Now using the search in the sidebar, I get the code for the lists. Using Firefox's web developer extension. I outlined block level elements. It appears that the narrow div is going 10px into the sidebar. This could be due to margins or padding on the header text or the actual form which by default has a margin.
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          Originally posted by _Aerospace_Eng_
          It appears we were looking at two different search pages. I used the search down at the bottom, and I got this for those images.
          AH HA! That's a different problem altogether I forgot about. I can fix that easy.

          Yes, we were using different searches.
          Originally posted by _Aerospace_Eng_
          Now using the search in the sidebar, I get the code for the lists. Using Firefox's web developer extension. I outlined block level elements. It appears that the narrow div is going 10px into the sidebar. This could be due to margins or padding on the header text or the actual form which by default has a margin.
          Narrow div? I love that toolbar, too! Bless whoever made that thing...

          Something's weird here, because I see the same outlines on the index page as I do on the search results pages... Yet the sidebar moves. wtf... Argh...

          Wait... NOT true. The "contentright" ID shifts to the right about 10px or so on the search results page. Why, though?

          Chris
          Last edited by cjwsb; Jul 30, 2005, 12:00 AM.
          My Site | My Blog

          Comment


          • #6
            Hmm, try this for the contentright CSS
            Code:
            #contentright {
                         width : 150px;
                         float : left;
                         padding : 10px 0 20px 0;
                         color: #000000;
            	     font-size: 0.8em;
            }
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              That worked like a charm.

              What I'd really like to know os how that's possible, for learning sake. How did that change only the search pages, while not affecting the rest?

              Thanks!

              Chris
              My Site | My Blog

              Comment


              • #8
                I'm not quite sure why, I'm thinking some how the contentright div was pushed as far to the left as it goes. Floating it left made sure it did the same on all of the pages. I must say your site has a lot of CSS. I don't think its all necessary but thats just me.
                ||||If you are getting paid to do a job, don't ask for help on it!||||

                Comment


                • #9
                  I agree, and will gut some of it out soon, as well as clean it up. Some of it is not necessary, rather remnants of past life...

                  Thanks for your help.

                  Chris
                  My Site | My Blog

                  Comment

                  Working...
                  X