By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,700 Members | 1,451 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,700 IT Pros & Developers. It's quick & easy.

Header elements wont reset after page has been resized in Safari

P: 1
Iíve got this header made up of a nav element and a heading element containing an inline image and words. I chose to place the words into spans in order to target them individually with media queries. Here is a link to the header. http://noahenart.com/header/

When I resize my browser to test the responsiveness everything works according to plan, the problem occurs when I resize it back (From smaller to larger). Elements don't go back to their former positions (unless I refresh the page). This becomes a problem especially when using a mobile device and changing orientation.

Iíve tried different things including having the image on a separate heading, the lot enclosed in an hgroup but that didnít work out either. Any ideas how I can fix this?

Expand|Select|Wrap|Line Numbers
  1. <header class="top">
  2. <div class="mast">  
  3.  
  4.     <h1 title="Hawaii Media Grant">
  5.         <a href="#">
  6.             <img id="logoi" src="img/logo_h.png" alt="Hawaii Media Grant logo">
  7.             <span id="logos">HAWAII</span>
  8.             <span id="logob">MEDIA</span>
  9.             <span id="logom">GRANT</span>
  10.         </a>
  11.     </h1>
  12.  
  13.     <nav>
  14.         <ul>
  15.             <li><a href="#" title="About">About</a></li>
  16.             <li><a href="#" title="Work">Work</a></li>
  17.             <li><a href="#" title="Blog">Blog</a></li>
  18.             <li><a href="#" title="Contact">Contact</a></li>
  19.         </ul>
  20.     </nav>
  21.  
  22. </div>
  23. </header>
Expand|Select|Wrap|Line Numbers
  1. header h1 { 
  2. font-size: 1em; 
  3. text-transform: uppercase; 
  4. line-height: 1.1875em; 
  5. font-weight: normal; 
  6. font-style: normal;
  7. float: left; 
  8. margin: 0 0 0 1%; 
  9. position: relative;}
  10.  
  11. header h1 img { 
  12. float: left; 
  13. position: relative; 
  14. bottom:30px; right: 10px;} 
  15.  
  16. header h1 a { 
  17. color: #000; 
  18. font-family: "nevisBold","nevis", "Helvetica neue", Arial,sans-serif; 
  19. font-size: 2.2em; 
  20. padding: 0;}
  21.  
  22. header h1 a span#logos,
  23. header h1 a span#logob,
  24. header h1 a span#logom { 
  25. display: inline;}
  26.  
  27. a {
  28. background: transparent; 
  29. color: #bababa;
  30. font-size: 100%; 
  31. margin: 0; padding: 0;
  32. text-decoration: none;
  33. vertical-align: baseline; 
  34. -moz-outline: none;}
  35.  
  36. a:focus, 
  37. a:hover, 
  38. a:active {
  39. outline: 0;}
  40.  
  41. ul, ol { 
  42. margin-left: 0; 
  43. padding: 0;  
  44. list-style: none;}
  45.  
  46. header ul {
  47. float: right;
  48. margin: 0;
  49. clear: none;}
  50.  
  51. header li {
  52. display: inline;
  53. margin: 0 0 0 1.5em;}
  54.  
  55. header a {
  56. color: #333;
  57. padding: 0 0 5px 0;}
  58.  
  59. header a:hover {
  60. border-bottom: 6px solid #bababa;
  61. color: #8cc4f5;}
  62.  
  63. header.top {
  64. background: #fff; 
  65. width: 100%;}
  66.  
  67. .mast {
  68. margin: 0 auto;   
  69. overflow: auto;
  70. padding: 5em 0 1.25em 0;
  71. width: 71.830985915492958%; max-width: 1020px;} 
  72.  
  73. @media screen and (max-width: 1195px){
  74. .mast { padding:52px 0 20px 0;}
  75. header h1 { float:none; text-align:center; margin-top:-30px; margin-bottom:; padding-top:; padding-bottom:;}
  76. header h1 img { float:none; bottom:-30px; right: 10px}
  77. header ul { float:none; margin:0.7em auto 1.15em; text-align:center;}}
  78.  
  79. @media screen and (max-width: 769px) {
  80. header h1 { font-size: 0.8em;}
  81. header h1 a img#logoi { bottom: 0; right: 0; margin: 0 0 0.5em 0; width: 8%;}
  82. header h1 a span#logos { display: block !important; margin: 0 0 0.5em 0;}
  83. header ul { margin: 0.7em auto 0;}
  84. header li { margin: 0 0 0 .5em;}}
  85.  
  86. @media screen and (max-width: 480px){
  87. header h1 a { padding-bottom: 0; font-size: 2em;}
  88. header h1 a img#logoi {width: 15%;}
  89. header li { margin: 0 0 0 .4em;}}
  90.  
Apr 27 '12 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.