Top navbar shifts template position in browsers


Author Message
Chris

Posted: 8/4/2009
Quote message 

I've created a top navbar, with drop down menus for my page. When I click on some of the upper level navbar links and the color changes to show me that I'm on a given page, the entire Artisteer template shifts a few pixels on my screen in all browsers (safari, IE, firefox, etc.)

This is irritating, and looks unprofessional.

I think it might have something to do with the fact that individual upper level navbar items - "home", "about us", "contact us", etc. -- change the amount of padding after they've been clicked on.

And/or it could be that the upper navbar needs to be sized to an absolute size and/or put into an absolute, rather than relative position (sorry, I know enough about CSS to look at it, make some sense of some of it, but I'm no expert).

Any ideas on what I can/should do to stop my entire template from shifting after particular navbar items are clicked on?
 
chris

Posted: 8/4/2009
Quote message 

A quick follow-up to the above. I just updated to Artisteer 2.2 and it would appear the issue I'm describing here has altered a bit.

Now, the template shift ONLY occurs when I move from clicking on navbar menu items with drop down items to navbar menu items with no drop down items -- and vice versa.

Also, I neglected to mention that with 2.0, the words/links on the navbar themselves were shifting when I clicked on them and landed on a given page associated with that upper level menu item. With 2.2, this is not occurring.

Anyway, looks like one solution is to have drop-down items for every single primary navbar menu item -- or not to have any drop-down menus.

Finally, on a different note-->

Beware!!! If you've made changes to template.css outside of Artisteer while using 2.0, the designations/names for many CSS items appear to have been changed for 2.2. (e.g., .Post-body is now .art post-body).

I'd suggest saving your template.css, editor.css files that you've changed while using 2.0 somewhere BEFORE updating to 2.2. And especially BEFORE uploading a template.css file created by 2.2. to overwrite your "old" template.css created in 2.0.
 
chris

Posted: 8/4/2009
Quote message 

yet another follow-up. The menu titles in my upper navbar ARE shifting in IE 8 every single time I click on another menu title

However, they do not shift in Safari, Google Chrome, or Firefox -- except when I move from an upper navbar menu item that has a drop-down menu to one that doesn't, and vice versa.

So, creating a drop-down menu for all primary navbar menu items is ONLY a solution for Safari, Chrome, and Firefox, not for IE.

Bummer that IE still has about 2/3 of all web surfers (Firefox has about 1/4 and Safari about 1/12). I just downloaded Safari for Windows a few days ago so I could test my site in all 4 browsers.

It's so much better than IE!

 
chris

Posted: 8/12/2009
Quote message 

Guess no one's interested in menu shifting and template shifting -- as in the main sheet shifts a few pixels -- maybe 10 pixels -- on the browser's display page when you click from one menu item to another on the top navbar)

It's a minor, but irritating issue, and I continue to have it. I just noticed that someone else has it too -- they posted their URL to another thread, for another reason (rendering problems in different browsers).

Anyway, if you click around on this other person's site (my is not up and available yet), you get the same sheet-shifting/menu-shifting effect that I'm getting on my pages.


http://tqctestserver.com/wakeforestdowntown/

 
Garry

Posted: 8/13/2009
Quote message 

You should contact Artisteer support at: http://www.artisteer.com/Default.aspx?p=support
 
PaullB

Posted: 8/14/2009
Quote message 

As the menu positions for link / over /active / visited are controlled by the stlye sheet, it would appear that the padding and or margin values for each state are not the same...
 
Garry

Posted: 8/14/2009
Quote message 

I have tried to find out the issue but it doesn't seems to be in CSS, may be in JavaScript. Not all of the Artisteer generated themes have this issue as my theme is working well (I am using latest Artisteer)
 
Andy

Posted: 8/24/2009
Quote message 

I have the same shifting problem... ;-(
 
Noah

Posted: 12/2/2009
Quote message 

I'm having the same problem. Any solutions?

It seems to only occur on Internet Explorer where the top menu is centered. On the first mouseover of the menu, the entire menu shifts to the right.
 
Noah

Posted: 12/2/2009
Quote message 

For me, this issue is solved if I remove the Separators from the Menu. This does fix the problem, but I'd really like to include a separator in the menu!
 
Peter

Posted: 1/25/2010
Quote message 

Bit of a late responce but I was searching for the same problem and found a solution. For me the problem seems to work adding the following line to the css file of your template:

html { height: 101%;}


This somehow tricks the browser not to save space as they did before. Good luck.
 
Motorsheep

Posted: 6/15/2012
Quote message 

I'm having the same problem in Artisteer 3, and it's even visible in Artisteer itself:

All the parent items in the top menu are alright, but when I go to a subpage, the sheet shifts to the right by a few pixels.
 
Motorsheep

Posted: 6/15/2012
Quote message 

...and dhe solution one post above mine does not work for me.
 
Motorsheep

Posted: 6/15/2012
Quote message 

Ok, what I found out is that it has to do with the height of the sheet.

If one page is big enough that you have to scroll up and down to see it all, and another fits onto the screen, then the sheet will shift when you switch between those pages.
 
Motorsheep

Posted: 6/15/2012
Quote message 

Oh for $=(& sake, it was simply the scroll bar appearing in the window that shifted the page.
I can't believe I've just wasted over an hour on this :-D


 
123

Posted: 1/5/2013
Quote message 

Force scrollbar on short pages

http://www.itechwebdesign.co.uk/blog-web-design-north-wales/08/2011/force-scrollbar-on-short-pages/
 
john

Posted: 10/28/2014
Quote message 

Wow I can't believe such a simple piece of code is missing in Artiteer. I just copied the code from the previous link into the style sheet and it works. No more shifting pages. I am using version 4 so the problem is still not fixed. Wasted a fair about of time trying to figure out what I did wrong. Get off your duff Artisteer and fix your app!

/*Force scroll bar for short pages*/
HTML {
overflow-y:scroll;
overflow-x:auto;
}
 
john

Posted: 10/28/2014
Quote message 

Even thought the code snippet fixes the final product it does not fix the application the page still happily shifts back and forth. Very irritating.
 
john

Posted: 10/28/2014
Quote message 

Even thought the code snippet fixes the final product it does not fix the application the page still happily shifts back and forth. Very irritating.
 
john

Posted: 10/28/2014
Quote message 

Even thought the code snippet fixes the final product it does not fix the application the page still happily shifts back and forth. Very irritating.
 
Alex_Silva

Posted: 11/11/2014
Quote message 

Does anyone found a solution or an hack for this issue? :-(

I've tried all the suggestions and none of them worked for me. :-/ I'm facing a shifting problem in a horizontal top menu on the right side, in a full lenght header.

Regards
 
jrgweb

Posted: 11/12/2014
Quote message 

@Alex_Silva

Is this by chance with joomla? Give me some idea's of your setup.
Also, which browser?
 
Alex_Silva

Posted: 11/12/2014
Quote message 

Quote jrgweb:

@Alex_Silva

Is this by chance with joomla? Give me some idea's of your setup.
Also, which browser?


Hi jrgweb, thanks for reply!

Yes, i'm using Joomla 2.5 (latest 2.5 version), and i'm facing the shifting with Chrome (latest) and IE 11.

My template was made with Artisteer 4.1.

If you want, i could give you the website link...

thanks again
 
jrgweb

Posted: 11/12/2014
Quote message 

@Alex_Silva - A link would be helpful .

send to jrgweb @ gmail.com



 
Denia

Posted: 2/9/2018
Quote message 

The same problem here :-< http://caledonianway.es
 
Julie

Posted: 3/14/2018
Quote message 

I also have that problem but only on one website. I tried all the solutions. Nothing works