CODEWITHSUNDEEP
phphtmlcsswordpresshtml-parsing
Chella
Chella

Reputation: 1562

webpage content is moving a bit while navigating in wordpress site

I have developed a website using wordpress, the problem is that while navigating between the pages, It seems like it is moving a bit(the navigation bar, and the content etc). i.e, if the content is at one place it is moved a bit in another page.

I tried to dig out the problem. Finally I found the problem but not the solution.

The problem is, I am using pagelines theme for wordpress. In that it using droid sans which is from http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold while it is loading It is using the browser default font or alternate font that I mentioned. Here is the problem. different fonts have different styles and spaces etc. it is the reason why the webpage seems moving a bit.

can any body Please explain me how could i solve the problem.

about screen shots: As, We can not show that content moving in screen shot I have not attached. could anybody tell me what would be the problem and how to fix it

All this is my assumption, like as it happened for smaller page contents, If is there any other problem that make it move then please let me know.

thanks in advance

edit:(css code -> dynamic.css)

/* Import Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold);

/* Set Type */
h1, h2, h3, h4, h5, h6, .site-title{font-family:"Droid Sans", "Lucida Grande", Tahoma, sans-serif;letter-spacing:0.05em;text-transform:uppercase;font-weight:normal;font-variant:normal;font-style:normal;}

body, .font1, .font-primary, .commentlist{font-family:"Droid Sans", "Lucida Grande", Tahoma, sans-serif;letter-spacing:-0.05em;text-transform:none;font-weight:normal;font-variant:normal;font-style:normal;}

.font2, .font-sub, ul.main-nav li a, #secondnav li a, .metabar, .subtext, .subhead, .widget-title, .post-comments, .reply a, .editpage, #pagination .wp-pagenavi, .post-edit-link, #wp-calendar caption, #wp-calendar thead th, .soapbox-links a, .fancybox, .standard-form .admin-links, #featurenav a, .pagelines-blink, .ftitle small{font-family:"Droid Sans", "Lucida Grande", Tahoma, sans-serif;letter-spacing:-0.05em;text-transform:uppercase;font-weight:normal;font-variant:normal;font-style:normal;}

Upvotes: 0

Views: 109

Answers (1)

MarmiK
MarmiK

Reputation: 5785

"Thank you for posting code,

Things are fine with this code you have posted,

fiddle http://jsfiddle.net/MarmeeK/HPu7X/

Please refer the fiddle and change the code you want to check then update and send it back.

I am not able to find any changes yet.

==== Edit

if the problem comes with specific tab, see the tab style with :hover style that will lead you to the problem source .. :)"

=== Edit after the site audit,

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:           0;
    top:            34px; /* match top ul list item height */
    z-index:        99;
}

Now, the problem is in the OTHER CSS file which contains the Rule of Menu.

and this works with vierd alignment instead of relative position. the top: 34px is a vierd step that should not be there...

you should separate each li:hover from this type of code as this is the only reason that makes the TAB move..

/*** ESSENTIAL STYLES ***/

and Demo skin are not stable... please correct them step by step that will do :)

Uppdated fillde : http://jsfiddle.net/MarmeeK/HPu7X/1/

I have tried to update it, but too many unnecessary CSS, please hire one professional to help in that

I will not be replying much as this took a lot of my time. thank you

Upvotes: 1

Related Questions