Weird scroll down, scroll up issue...

sabian1982 Notable Member

Messages:: 2,028

Likes Received:: 161

Best Answers:: 0

Trophy Points:: 210

#1

When i scroll down the page and then scroll back up the page a strange gap appears just under the main header navigation...

http://www.michaelthorn.co.uk/

You might need to scroll up and down twice for the error to occur, im also unsure if it is just an IE related issue or not.

Any suggestions???

sabian1982, Aug 23, 2007 IP

VimF Well-Known Member

Messages:: 307

Likes Received:: 27

Best Answers:: 0

Trophy Points:: 118

#2

In which browser?

I see no problem in Firefox and IE...

VimF, Aug 23, 2007 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#3

I see what you mean - in IE6. IE7, Opera, Saffy and FF appear to be fine.

I THINK the problem is tied to http://www.michaelthorn.co.uk/images/box-bottom.jpg - but I cannot be 100% sure... It is worth noting when the gap appears only that one image shows up properly - this COULD be a haslayout issue, but it could also be a position:relative rendering bug... Notice that in FF, Opera and Saffy (at least here) the bottom of the cardboard box in the header hangs over into the first content .box class.

What I CAN be sure of is the use of WAY too many separate images from what should most likley only take five or six total for the whole page... about twice the DIV's that should be needed, a use of breaks and spacer .gif's in a completely unnecessary manner, absolute positioning of elements that breaks your layout as the resolution changes (at least, in terms of google advertising placement), use of multiple H1's being bad grammar, inlining of content images, and a whole host of other 'issues'.

It's 23 separate files for what should probably be 8 or 9 total. Might I ask what posessed you to slice up the images that way? Was it something some automated program like Dreamweaver or Fireworks did you you?

Also, if you are still in the development/debugging phase, you might want to consider leaving your formatting in - hell, I leave it in on my deployment copies these days. 300 bytes isn't going to kill your bandwidth. (assuming you even code with formatting - in which case where's the Nun with a ruler when you need one)

I would probably code the HTML for that page thus: (you AT&T folks excuse the Wirth style indenting)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="freelance web designer, michael thorn, michael alan thorn, michael, thorn, google adsense, using google adsense, online money, google adsense blog, web design, seo, web development">
<meta name="description" content="With a degree in Multimedia Technology and Design, Michael Thorn is a designer with a creative flair that allows him to think 'Outside the Box'. This personal blog contains information on web design, SEO, google adsense and much, much more!">
<meta name="revisit-after" content="7 days">
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">

<title>Michael Thorn - Freelance Web Designer</title>

<link href="screen.css" rel="stylesheet" type="text/css" media="screen, projector" />

</head><body>

<div id="container">

  <div id="header">
    
    <h1><strong>Micheal Thorn</strong> Home Page<span></span></h1>

    <ul id="main_menu">
      <li class="current"><a href="#">Home<span></span></a></li>
      <li><a href="#">About<span></span></a></li>
      <li><a hfef="#">Articles<span></span></a></li>
      <li><a href="#">Contact<span></span></a></li>
    </ul>

    <div id="google_adsense">
      <script type="text/javascript">
        google_ad_client="pub-7839432661877751";
        google_ad_width=234;
        google_ad_height=60;
        google_ad_format="234x60_as";
        google_ad_type="text";
        //2006-10-23: header
        google_ad_channel="3341609130";
        google_color_border="A69171";
        google_color_bg="F2F2F2";
        google_color_link="A69171";
        google_color_text="C9B78F";
        google_color_url="A69171";
      </script>
      <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
      ></script>
    </div>
    
  </div>
  
  
  <div id="content">

    <div class="box">
      <h2>Michael Thorn - Web Design, SEO and Adsense Blog</h2>
       <p>
         Hi, my name is Mike and i'm a 25 year old university graduate 
         with a passion for front end web design and development. I 
         recently decided to apply my newly learnt knowledge of pure
         <a href="http://www.w3.org/Style/CSS/" target="_blank">CSS</a>
         design by redesigning (this) my 
         <a href="http://www.michaelthorn.co.uk">personal website</a>.
         Having applied my new (and growing) skill in 
         <a href="http://www.w3.org/Style/CSS/" target="_blank">CSS</a>, 
         i suddenly realised that I hadn't actually thought much about
         the actual content of what I was going to put on these pages.
         Should I go for a site that basically just talked about me, 
         something that the majority of people would find, to be honest,
         probably rather boring? Or should I think 'outside the box'. 
         I think it's rather obvious to see from the design of my site...
      </p>
    </div>

    <div class="box">
      <h2>One of my Goals...</h2>
      <p>
        As well as being interested in website design and SEO related 
        issues, I've always been interested by various forum posts and
        personal blog websites where people claim to be living off the
        earnings of 
        <a href="http://www.google.co.uk/adsense" target="_blank">Google
        Adsense</a>. People who 'apparently' know of some inventive 
        method to earn huge wads of cash from using and publising using
        Google Adsense. That in a nutshell is my mission! This is 
        where I will post my results or lack there of. Every step I take
        and everything I do to complete 'the mission' will be documented 
        here. From what I do, to the results I do or do not achieve. 
      </p><p>
        <strong>In the simplest of terms - Is it possible to get rich using 
        <a href="http://www.google.co.uk" target="_blank">Google 
        Adsense</a>?</strong>
      </p>
    </div>
    
    <div class="google_adsense">
      <script type="text/javascript">
        google_ad_client="pub-7839432661877751";
        google_ad_width=468;
        google_ad_height=60;
        google_ad_format="468x60_as_rimg";
        google_cpa_choice="CAAQ8ZvuiwIaCCz2-HnZQa3oKMXC93M";
        google_ad_channel="5962018434";
      </script>
      <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
      ></script>
    </div>

    <div class="box">
      <h2>Most Recent Article - Newsletter Advertising - 
        Does Your Directory Deserve It?
      </h2>
      <p>
        Is it really worth advertising your directory in a newsletter?
        I invested some money to find out if newsletter advertising 
        could bring more clicks and sales to my niche webmaster directory.
      </p><p>
        <a href="070307.php">Read more... </a>
      </p>
    </div>
    
    <div class="box">
      <h2>Site Progress...</h2>
      <p>
        Indexed and currently with a PR4! Its 1st August and the next 
        PR update is just around the corner. Will I retain my current 
        PR???
      </p><p>
        In other site news the contact page form has been disabled due
        to blasted spammers - I'll reactivate soonish with an integrated
        captcha/code system.
      </p>
    </div>

   </div>

  <div id="footer">
    <ul>
      <li><a href="index.php">Home</a> -</li>
      <li><a href="about.php">About</a> -</li>
      <li><a href="articles.php">Articles</a> -</li>
      <li><a href="contact.php">Contact</a> -</li>
      <li><a href="http://validator.w3.org/check?uri=referer" >Validate</a> -</li>
      <li><a href="sitemap.php">Sitemap</a></li>
    </ul>
  </div>

</div>

</body></html>
Code (markup):
Which even with formatting ends up 330 bytes smaller - stripped of formatting it's 770 bytes smaller. Let's go through this section by section to explain my choices.

First off, the header. Single image background on #header would eliminate a slew of code and work consistantly cross-browser.

Every page really should only have a single H1 - if you follow the proper grammar for headers. Usually I like to give it any text that's in the header, PLUS the name of the current page the user is on. You'll notice I also appended the current page into the TITLE tag - this makes tabbed browsing a bit simpler on the user.

The empty span is a image replacement technique - when we get to the CSS we'll put parts of the header image over the text to hide it.

The menu does NOT need extra DIV's around it, and should likely also not be inlined images but instead presentational images - that way the user has something to look at with images off, as well as for search engines to have something meaningful to read. (since the content of images means **** **** to them - AND since alt is a attribute, and most search engines ignore attributes too)

The google advert appears last in our code, despite being first on the page. We will likely use some negative margins or absolute positioining INSIDE the header (instead of across the whole page as you did) to position it. This way your actual HEADER is closer to where we want it.

Close the header, open #content

This part in your original wasn't too bad, excepting the use of H1's where there really should be H2's. Header1 says what the page is, Header2 says what each category is. You had a few double BReaks that really should have been </p><p>, and breaks between each DIV which is just pointless (just add margin-bottom to your .box class)

You'll notice I used the same class on the advert as in the header - both being ads from the same place you might want them to share some properties - at the same time each is inside a container with an ID, so we can access them individually as "#header .google_adsense" and "#content .google_adsense"

The footer REALLY should be a list - I left in the dashes since as that will be changed to display:inline we can't actually implement them as bullets, and it's just not worth wasting an image on.

TECHNICALLY we could get rid of that containing DIV around the UL, but being a footer I was uncertain if you were going to add copyright or other notices below the list, so it stayed for now.

If I have some time later I'll toss together how I'd do the CSS with similar section by section descriptions.

deathshadow, Aug 23, 2007 IP

sabian1982 likes this.

GWiz Peon

Messages:: 359

Likes Received:: 17

Best Answers:: 0

Trophy Points:: 0

#4

Simplest solution I could find was this:
#content {
	background-image: url(../images/backgroundcontainer.gif);
	padding-left: 70px; 
	padding-right: 78px; 
	[B]padding-top: 30px; [/B]
	padding-bottom: 20px;
	z-index: 4;
}
Code (markup):
All I did was move the content down 10 pixels, which allowed the background to retain itself. If you don't mind the content being pushed down 10 pixels (which doesn't look that bad) then I would stick with it. I tried a few other things, but they would require a bunch of code changes (due to the fact of having so many images)

I suggest when you work in Photoshop, when slicing, my suggestion is to create as little slices as possible. For example, the whole header can be a slice, and then the links themselves can be sliced aswell, (it's not a problem that theyre overlapping, becuase when you code it, you'll have them overlap anyway, since they're clickable while the large header will act as the background so you can apply the link images on it.

Let me know if this helps, otherwise you're facing a lot of code changes.

GWiz, Aug 24, 2007 IP

Log in or Sign up

Advertising (learn more)

Weird scroll down, scroll up issue...

sabian1982 Notable Member

VimF Well-Known Member

deathshadow Acclaimed Member

GWiz Peon

Log in or Sign up

Advertising (learn more)

Weird scroll down, scroll up issue...

sabian1982 Notable Member

VimF Well-Known Member

deathshadow Acclaimed Member

GWiz Peon

Useful Searches