locked
Page Control and CSS positioning

    Question

  • I have a windows 8 app written in HTML and JavaScript. My home page consists of many link buttons that allow a user to navigate to other sections in the app. These links are grouped with the grid system and I use CSS to position them in the center of the page. After I click on a link to navigate to a new section, I can use the winjs back button to return to the home page but the icons are no longer centered. Any idea why the icons on the page shift to the far left and how this might be fixed? See images below for example:

     

    tanner cypret

    Saturday, August 10, 2013 8:05 PM

Answers

  • Offhand it sounds like there are styles in page 2's CSS that overwrite page 1's. It's easy to think that each page's CSS gets loaded and unloaded as you navigate, but each page's CSS gets added to the global stylesheet and is not unloaded when you navigate away. So you either need to be sure to scope rules for each page, use different rules on each page, or use the technique of replacing <link> elements the page header to load/unload CSS on a per-page basis. But there could be more going on, so it's helpful to see the HTML and CSS as Rob suggests.
    • Marked as answer by Some Dude 1 Sunday, August 11, 2013 8:20 PM
    Sunday, August 11, 2013 3:11 AM

All replies

  • What does the code and mark-up to generate these look like? It's hard to tell why something occurs if we don't know what the app is doing.

    --Rob

    Sunday, August 11, 2013 1:43 AM
    Owner
  • Offhand it sounds like there are styles in page 2's CSS that overwrite page 1's. It's easy to think that each page's CSS gets loaded and unloaded as you navigate, but each page's CSS gets added to the global stylesheet and is not unloaded when you navigate away. So you either need to be sure to scope rules for each page, use different rules on each page, or use the technique of replacing <link> elements the page header to load/unload CSS on a per-page basis. But there could be more going on, so it's helpful to see the HTML and CSS as Rob suggests.
    • Marked as answer by Some Dude 1 Sunday, August 11, 2013 8:20 PM
    Sunday, August 11, 2013 3:11 AM
  • Thanks, that was the issue. Page 2's CSS was overriding the CSS for my home page. I made some simple changes that fixed it.

    tanner cypret

    Sunday, August 11, 2013 8:23 PM