Navigation bar alignment issues!

[cameronbrown]

I am trying to get my navigation bar to align properly in my blog. Everytime I click to open my blog from any other page on my site, the navigation bar appears to shift slightly.

I think it is being pushed by a style sheet or something, but for the life of me I can't figure out what is doing it.

Any help would be greatly appreciated

www.cameronbrown.ca/blog/

 

[leroy30]

The first time I tried to go to it I got the loading gif and it never went away even after the page finished loading - to make things worse it was 'modal' so I couldn't do anything!

I assume you are using internet explorer? The reason for the 'jump' is because the page isn't long enough for IE to put a vertical scroll bar in the window. This makes the window width aproximately 20 pixels wider and thus the center of the window becomes a greater value. Since your page is centered it moves to this new center.

I think you can use javascript to force a scroll bar always or set the height of the body element to 101%

... google it anyway that's just from memory

 

[cameronbrown]

The first time I tried to go to it I got the loading gif and it never went away even after the page finished loading - to make things worse it was 'modal' so I couldn't do anything!

I assume you are using internet explorer? The reason for the 'jump' is because the page isn't long enough for IE to put a vertical scroll bar in the window. This makes the window width aproximately 20 pixels wider and thus the center of the window becomes a greater value. Since your page is centered it moves to this new center.

I think you can use javascript to force a scroll bar always or set the height of the body element to 101%

... google it anyway that's just from memory

Thanks mate, I've tried it in IE, Firefox, Safari and Chrome, and I get a similar action each time. I'm not sure what you mean about the loading gif, but I think I tried the vertical scrollbar workaround a few weeks back and it didn't work

Thanks for the help though

 

[rickidoo]

Looks like a fairly simple fix. I downloaded a blog page, and a regular page. I noticed that the regular pages had a body tag that included a class="index", and the blog did not. When I placed that class in the body tag of the blog, the menu stayed in the same place.

Not sure if class=index has anything in it that will affect anything else - you'd have to check that. But I think the answer rests with that.

Cameron - would it be ok for me to use this issue (using screenshots of your site, with a link to your site) in my own website, in a tutorial, on www.ProfessionalWebsiteReview.com?

 

[cameronbrown]

Looks like a fairly simple fix. I downloaded a blog page, and a regular page. I noticed that the regular pages had a body tag that included a class="index", and the blog did not. When I placed that class in the body tag of the blog, the menu stayed in the same place.

Not sure if class=index has anything in it that will affect anything else - you'd have to check that. But I think the answer rests with that.

Cameron - would it be ok for me to use this issue (using screenshots of your site, with a link to your site) in my own website, in a tutorial, on www.ProfessionalWebsiteReview.com?

I'll check out your solution. In the meantime, sure go for it!

 

[cameronbrown]

Looks like a fairly simple fix. I downloaded a blog page, and a regular page. I noticed that the regular pages had a body tag that included a class="index", and the blog did not. When I placed that class in the body tag of the blog, the menu stayed in the same place.

Not sure if class=index has anything in it that will affect anything else - you'd have to check that. But I think the answer rests with that.

Cameron - would it be ok for me to use this issue (using screenshots of your site, with a link to your site) in my own website, in a tutorial, on www.ProfessionalWebsiteReview.com?

I re-tried that with no luck
This is the full content of the index style:

.index {
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
color: #000;
background-color: #FFF;
text-align: center;
padding:0;
margin:0;
}

 

[cameronbrown]

I re-tried that with no luck
This is the full content of the index style:

.index {
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
color: #000;
background-color: #FFF;
text-align: center;
padding:0;
margin:0;
}

Basicly all it did was change my font and align it to the center

 

[rickidoo]

Not sure why it made a difference in my tests. I do notice however in the css you typed in above that there are no units for padding and margin, that would cause them to fail.

 

[ronaldroe]

Not sure why it made a difference in my tests. I do notice however in the css you typed in above that there are no units for padding and margin, that would cause them to fail.

Units aren't required when setting the value to 0.

If I understand your issue correctly, you want the nav items to line up with the left edge of the blog?

If that's the case, the div for the index page is 1002px wide, while in the blog, it's 911px wide. Set #container to the same width as #indexpage, and it should line up.

If you're talking about the little "jump" that the header on the right side does, you could try adding a little more breathing room in the height for the header. I noticed you're using a sprite for that. Another option would be, if you have the rights for the font, to just load the font from your server using @font-face, and just change the text color on hover. That would be more search engine friendly anyway.