strange refresh issue....(IE and FF)

konnor5092 · #1 (**permalink**) Mar 30th, 2007, 12:13

I have this problem which I can't pinpoint that the content on the left on my web page sometimes shift down the page when refreshing. Then when you refresh again it reverts back up.

link..

http://www.themissingpeace.co.uk/HomeF2.php

To get this problem to replicate, you may need to click on the 'forums' link -> will then navigate to a dead page -> click back -> content will show as shifted down.

weird...

Ta,

Daniel · #2 (**permalink**) Mar 30th, 2007, 13:05

in IE6 the content starts down the bottom

so no change for me - ill test it in IE7 tonight on my laptop for you

//---> Saying that it looks like it could be a css error with your <div> tags but without seeing your css coding I can't say

<---\\

konnor5092 · #3 (**permalink**) Mar 30th, 2007, 13:13

Quote:

//---> Saying that it looks like it could be a css error with your <div> tags but without seeing your css coding I can't say

<---\\

Cheers Dan.

CSS code is at

http://www.themissingpeace.co.uk/styleF2.css

Daniel · #4 (**permalink**) Mar 30th, 2007, 13:14

access denied...

konnor5092 · #5 (**permalink**) Mar 30th, 2007, 13:16

meh....

Code: Select all

* {margin:0;padding:0}

body {
  height: 849px;
  font-family: verdana, Arial, Georgia, Palatino, serif;
  background-color: #767676;
}

.middleDrop { background: transparent url(Images3/dropshadowborder.jpg) repeat-y; width: 719px; height: auto; margin:0 auto;}

h1 {
  text-indent: -5000px;
  padding-left: 5px;
  color: #B9CADD;
}

h2 {
  font-size: 20px;
  padding-left: 5px;
}

#wrapper {
  width: 608px;
  background-color: #525252;
  border: 2px solid #FFFFFF;
  margin: 0 auto;
}

#banner {
  width: 608px;
  height: 130px;
  background: url(Images3/banner.jpg) no-repeat center top;
}

#navigation {
  width: 608px;
  height: 36px;
  background: url(Images3/NavBar.jpg) no-repeat center top;
  border-top: 2px solid #FFFFFF;
}

#navigation ul {
  padding-top: 1px;
  list-style: none;
  width: 608px;
  height: 35px;
}

#navigation ul li {
  float: left; 
}

#navigation ul a {
  float: left;
  padding-left: 28px;
  padding-right: 28px;
  padding-top: 1px;
  height: 20px;
  background: url(Images3/divider.jpg) repeat-y left top;
  text-decoration: none;
  font-size: 13px;
  color: #fff;
}

#navigation ul.first a {
  background: none;
}

#navigation ul a:hover {
  color: #9BB5DB;
}

#maincontent {
  display: table;
  width: 608px;
  background: #293F57 url(Images3/FauxColumn.jpg) repeat-y left top;
  
}

#leftcontent {
  width: 421px;
  float: left;
  font: 9pt/14pt verdana;
  color: #D6E7FC;
}

#rightcontent {
  width: 187px;
  float: right;
  font: 9pt/12pt verdana;
}

#rightcontent h2 {
  color: #98B6D8;
}

#welcome h2 {
   text-indent: -5000px;
   background-image: url(Images3/Welcome.jpg);
   background-repeat: no-repeat;
   background-position: left;
   width: 220px;
   height: 22px;
}

#female h2 {
   text-indent: -5000px;
   background-image: url(Images3/Female.jpg);
   background-repeat: no-repeat;
   background-position: left;
   width: 220px;
   height: 22px;
}

#welcome {
  float: none;
}

#welcome .p1, #news .p2, #female .p3 {
  padding-top: 8px;
  padding-left: 8px;
  padding-right: 20px;
  padding-bottom: 8px;
} 

#welcome img {
  padding-top: 8px;
  padding-left: 3px;
  padding-right: 20px;
  padding-bottom: 8px;
} 

#news h2 {
   text-indent: -5000px;
   background-image: url(Images3/News.jpg);
   background-repeat: no-repeat;
   background-position: left;
   width: 220px;
   height: 22px;
}

#news .p1 {
  padding-top: 8px;
  padding-left: 4px;
  padding-right: 20px;
  padding-bottom: 8px;
} 

#google{}
#table{padding-top:8px;}
#resources{padding-top:8px;}

#google table {
  padding-left: 5px;
  padding-top: 5px;
}

#table table {
  margin-top: 8px;
  margin-left: 8px;
  font-size: 0.8em;
  color: #FFFFFF;
  width: 170px;
}

#table table tr {
  height: 16px;
}

#table table tr td.center {
  text-align: center; 
}

#table table tr td.team {
  width: 80px;
}

#table table tr td {
  background-color: #59728E;
  height: 20px;
}
#table table tr.odd td {
  background-color: #6A8AAC;
}

#table h2{
   text-indent: -5000px;
   background-image: url(Images3/East2.jpg);
   background-repeat: no-repeat;
   background-position: left;
   width: 187px;
   height: 30px;
}

#resources h2{
   text-indent: -5000px;
   background-image: url(Images3/Resources.jpg);
   background-repeat: no-repeat;
   background-position: left;
   width: 187px;
   height: 30px;
} 

#google h2 {
  text-indent: -5000px;
  background-image: url(Images3/google.jpg);
  background-repeat: no-repeat;
  background-position: left;
  width: 187px;
  height: 30px;
}

#resources ul {
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 5px;
  list-style: none;
}

#resources ul li {
  padding-top: 5px;
  font-size: 10px;
  color: #9DBCE4;
}

#resources ul li a{
  text-decoration: none;
  font-size: 13px;
  color: #D6E7FC;
}

#google form {
  padding-top: 10px;
  padding-left: 10px;
}

#footer    {
  margin: 0 auto;
  background: url(Images3/footerpic2.jpg);
  background-repeat: no-repeat;
  background-position: left;
  width: 719px;
  height: 46px;
}

#footer .p1 {
  font-size: 11px;
  color: #BABABA;
  padding-top: 5px;
  padding-left: 205px;
}

#footer .p1 a {
  text-decoration: none;
  color: #EEEEEE;
}

#footer .p1 a:hover {
  color: #9BCADB;
}

Daniel · #6 (**permalink**) Mar 30th, 2007, 13:16

thanks

when i have time ill have a look at the css and see if i can spot the error

Daniel · #7 (**permalink**) Mar 30th, 2007, 13:17

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 <link rel="stylesheet" href="styleF2.css" type="text/css" media="screen" />
 <title>My Blog</title>
</head>
<body>
 <div class="middleDrop">
  <div id="wrapper">
   <div id="banner"><h1>East Coast Lacrosse</h1></div>
   <div id="navigation"><ul>
     <li><a href='#'>Home</a></li>
     <li><a href='http://www.eastcoastlacrosse.co.uk/eastcoastbaby/forum/'>Forums</a></li>
     <li><a href='#'>Mens</a></li>
     <li><a href='#'>Womans</a></li>
     <li><a href='#'>Roster</a></li>
     <li><a href='#'>Contact</a></li>
    </ul></div>
   <div id="maincontent">
    <div id="rightcontent">
     <div id="google">
      <h2>Google</h2>
      <table>
       <tr><td>
       <input type="text"   name="q" size="22"
        maxlength="256" value="" />
       <input type="submit" value="Google Search" /></td></tr>
       <tr><td align="center" style="font-size:75%">
       </td></tr>
      </table>
     </div>
     <div id="table">
      <h2>East 2 Division</h2>
      <table cellspacing="0" cellpadding="0">
       <tr class="odd">
        <td class="center">Pos</td>
        <td class="team">Team</td>
        <td class="center">Pld</td>
        <td class="center">Pts</td>
       </tr>
       <tr>
        <td class="center">1</td>
        <td class="team">Hitchin A</td>
        <td class="center">12</td>
        <td class="center">30</td>
       </tr>
       <tr class="odd">
        <td class="center">2</td>
        <td class="team">Herts Comets</td>
        <td class="center">12</td>
        <td class="center">29</td>
       </tr>
       <tr>
        <td class="center">3</td>
        <td class="team">Northampton</td>
        <td class="center">11</td>
        <td class="center">25</td>
       </tr>
       <tr class="odd">
        <td class="center">4</td>
        <td class="team">East Grinstead 2</td>
        <td class="center">10</td>
        <td class="center">24</td>
       </tr>
       <tr>
        <td class="center">5</td>
        <td class="team">East Coast</td>
        <td class="center">10</td>
        <td class="center">23</td>
       </tr>
       <tr class="odd">
        <td class="center">6</td>
        <td class="team">Royal Holloway</td>
        <td class="center">9</td>
        <td class="center">14</td>
       </tr>
       <tr>
        <td class="center">7</td>
        <td class="team">Canterbury</td>
        <td class="center">12</td>
        <td class="center">14</td>
       </tr>
       <tr class="odd">
        <td class="center">8</td>
        <td class="team">RMAS</td>
        <td class="center">12</td>
        <td class="center">7</td>
       </tr>
      </table>
     </div>      
     <div id="resources">
      <h2>Resources</h2>
      <ul>
       <li><a href="">SEMLA</a><br />South Of England Mens lacrosse Association</li>
       <li><a href="">ELA</a><br /> /English Lacrosse Association</li>
       <li><a href="">Lax Forums</a><br />Official UK Lacrosse Forums</li>
       <li><a href="">Download Rules</a><br />Lacrosse PDF rules</li>
       <li><a href="">ELF</a><br />European Lacrosse Federation</li>
       <li><a href="">ILF</a><br />International Lacrosse Federation</li>
       <li><a href="">Lacrosse Forums</a><br />Offical US Lacrosse Forums</li>
      </ul>
     </div>    
    </div>    
    <div id="leftcontent"><div id="welcome"><h2>Welcome</h2>
       <p class="p1">
       Welcome to <b>East Coast lacrosse!</b>
       <br />
       We are now in the latter stages of our first season and an impressive record of 6 wins, 1 draw, and 3 losses in the league has not proved good enough for us to take the title at the first time of asking. However a thrilling extra time win over the league leaders in the Flags competition means that we are still currently on the road to national recognition and glory and this is our main focus as the last few weeks of the season approach!
       </p>
     </div>
     <div id="news">
      <h2>News</h2>
       <p class="p2">Since we started we have been contacted by a number of people asking about womens lacrosse and looking to get involved in the game. <br /><br />As a result of this we are now actively recruiting players to form a womens team to play in freindlies initially, and eventuatally in competition. So if youre an experienced player looking for a new club or completely new to the game and just fancy trying something new        
       </p>       
     </div>
     <div id="female">
      <h2>Female Players</h2>
       <p class="p3">
       Since we started we have been contacted by a number of people asking about womens lacrosse and looking to get involved in the game. As a result of this we are now actively recruiting players to form a womens team to play in freindlies initially, and eventuatally in competition. So if you're an experienced player looking for a new club or completely new to the game and just fancy trying something new and expanding your social circle; don't hessitate to get in touch. You can contact us at info@eastcoastbaby.co.uk or better still logon to our forums and register your interest.      
       </p>
     </div>       
    </div>    
   </div>
  </div>
 </div>
 <div id="footer">
  <p class="p1">
   <a href="<A href="http://validator.w3.org/check?uri=referer">XHTML">http://validator.w3.org/check?uri=referer">XHTML strict</a> and <a href="<A href="http://jigsaw.w3.org/css-validator/">CSS</a">http://jigsaw.w3.org/css-validator/">CSS</a> | © eastcoastbaby 2007  |  Web design by <a href="<A href="http://www.mattoconnor.co.uk/">Matt">http://www.mattoconnor.co.uk/">Matt O'Connor</a>
  </p>
  
 </div>
</body>
</html>

karinne · #8 (**permalink**) Mar 30th, 2007, 13:17

Wow ... that is funky!

Remove the #welcome { }. The float: none in there is causing the glitch.

Actually ... I'm not sure why you have all those divs in there? #welcome, #news and #female? Instead, change them to classes and assign them to the <h2> So ... h2.welcome.

And the <p class="p1"> and p2 and p3 are all the same so why not just create 1 class like .thesepeas { ... }.

Ryan Fait · #9 (**permalink**) Mar 31st, 2007, 02:15

Yeah, "none" is not a valid CSS value. Use clear or restructure the tag naming.

karinne · #10 (**permalink**) Apr 1st, 2007, 02:36

Ryan: float: none; is a valid value

http://www.w3.org/TR/CSS21/visuren.html#propdef-float

Quote:

'float'
Value: left | right | none | inherit
Initial: none

Ryan Fait · #11 (**permalink**) Apr 1st, 2007, 10:48

Oh dear. I wonder why I thought otherwise... It seems to me that I remember a validation failing because of that, but it must have been something else. I need to update one of my articles.

Thanks for pointing that out!

Edit:

Got my article updated. Man, I feel embarrassed that I had incorrect CSS advice on my site... Ah well, 'tis all fixed now.

karinne · #12 (**permalink**) Apr 2nd, 2007, 13:20

Been there done that!

At least you fixed it!

konnor5092 · #13 (**permalink**) Apr 2nd, 2007, 16:25

Well I thought that would have fixed it but it appears to be happening again (if you click forums then back).......

I'll be glad to see the back on this site....

http://www.themissingpeace.co.uk/HomeF2.php

similar sort of code, few additions to the style sheet and changes made to the h2's as advised by Karinne

Code: Select all

* {
  margin:0;
  padding:0;
}

body {
  font-family: verdana, Arial, Georgia, Palatino, serif;
  background-color: #767676;
}

.middleDrop { background: transparent url(Images3/dropshadowborder.jpg) repeat-y; width: 719px; height: auto; margin:0 auto;}

h1 {
  color: #B9CADD;
}

h2 {
  font-size: 20px;
}

span {
  display: none;
}

img {
  padding-top: 4px;
  padding-bottom: 3px;
}

#wrapper {
  margin: 0 auto;
  width: 608px;
  background-color: #525252;
  border: 2px solid #FFFFFF;
}

h1.banner {
  width: 608px;
  height: 130px;
  background: url(Images3/banner.jpg) no-repeat center top;
}

#navigation {
  width: 608px;
  height: 36px;
  background: url(Images3/NavBar.jpg) no-repeat center top;
  border-top: 2px solid #FFFFFF;
}

#navigation ul {
  padding-top: 1px;
  list-style: none;
  width: 608px;
  height: 35px;
}

#navigation ul li {
  float: left; 
}

#navigation ul a {
  float: left;
  padding-left: 28px;
  padding-right: 28px;
  padding-top: 1px;
  height: 20px;
  background: url(Images3/divider.jpg) repeat-y left top;
  text-decoration: none;
  font-size: 13px;
  color: #fff;
}


#navigation ul.first a {
  background: none;
}

#navigation ul a:hover {
  color: #9BB5DB;
}

#maincontent {
  display: table;
  width: 608px;
  background: #293F57 url(Images3/FauxColumn.jpg) repeat-y left top;
}

#leftcontent {
  width: 421px;
  float: left;
  font: 9pt/14pt verdana;
  color: #D6E7FC;
}

#rightcontent {
  width: 187px;
  float: right;
  font: 9pt/12pt verdana;
}

#rightcontent h2 {
  color: #98B6D8;
}

h2.welcome {
   background-image: url(Images3/Welcome.jpg);
   background-repeat: no-repeat;
   background-position: left;
   width: 220px;
   height: 22px;
}

h2.female {
   background-image: url(Images3/Female.jpg);
   background-repeat: no-repeat;
   background-position: left;
   width: 220px;
   height: 22px;
}

.p1 {
  padding-top: 8px;
  padding-left: 8px;
  padding-right: 20px;
  padding-bottom: 8px;
} 

h2.news {
   background-image: url(Images3/News.jpg);
   background-repeat: no-repeat;
   background-position: left;
   width: 220px;
   height: 22px;
}

#table, #resources {
   padding-top:8px;
}

#table table {
  margin-top: 8px;
  margin-left: 8px;
  font-size: 0.8em;
  color: #FFFFFF;
  width: 170px;
}

#table table tr {
  height: 16px;
}

#table table tr td.center {
  text-align: center; 
}

#table table tr td.team {
  width: 80px;
}

#table table tr td {
  background-color: #59728E;
  height: 20px;
}
#table table tr.odd td {
  background-color: #6A8AAC;
}

#table h2{
   background: url(Images3/East2.jpg) no-repeat left top;
   width: 187px;
   height: 30px;
}

#resources h2{
   background: url(Images3/Resources.jpg) no-repeat left top;
   width: 187px;
   height: 30px;
} 

#google h2 {
  background: url(Images3/google.jpg) no-repeat left top;
  width: 187px;
  height: 30px;
}

#resources ul {
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 5px;
  list-style: none;
}

#resources ul li {
  padding-top: 5px;
  font-size: 10px;
  color: #9DBCE4;
}

#resources ul li a{
  text-decoration: none;
  font-size: 13px;
  color: #D6E7FC;
}

#google form {
  padding-top: 10px;
  padding-left: 10px;
}

#footer    {
  margin: 0 auto;
  background: url(Images3/footerpic2.jpg);
  background-repeat: no-repeat;
  background-position: left;
  width: 719px;
  height: 46px;
}

#footer .p2 {
  font-size: 11px;
  color: #BABABA;
  padding-top: 5px;
  padding-left: 205px;
}

#footer .p2 a {
  text-decoration: none;
  color: #EEEEEE;
}

#footer .p2 a:hover {
  color: #9BCADB;
}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Strange table cell height issue	niko79	Web Page Design	16	Jun 5th, 2008 10:14
How to stop the browser refresh on clicking the webbrowser's refresh button ?	camarun20	JavaScript Forum	3	Mar 18th, 2008 23:04
When Refresh go 1 again	gncreditcards	Web Page Design	2	Jan 30th, 2008 18:24
refresh using javascript	SirChinjin	JavaScript Forum	0	May 19th, 2007 19:41
prevent refresh in asp	simonneaves	Classic ASP	2	Oct 10th, 2005 09:04

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
strange refresh issue....(IE and FF)