Im having some infuriating browser testing issues!
My site is almost finished and not yet online, so I’m actually testing both locally and from Dropbox.
The problem is with Internet Explorer only (surprise surprise!).
My site has 4 main pages using a main nav bar horizontally along the top with 4 list items.
OK so when I test in ie8 in Browserstack, 2 of the pages initially load the main nav incorrectly, like they are ignoring the “float:right” property-value. BUT, as soon as I refresh the page, it loads correctly. If I then go to another page and then go back to the page in question again, it does the same thing…the nav is not floated right, until I refresh again.
The same thing happens with the image in the footer p (“tristanbristow-small.png”).
Here is the HTML…
<!doctype html>
<html>
<head>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<title>About Tristan Bristow</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
<!-- Google Web Fonts -->
<!-- Raleway: h1,nav,footer p-->
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
<body id="about">
<div class="wrapper">
<header>
<h1 class="title">Tristan Bristow</h1>
<nav class="main_nav">
<ul class="tabs">
<li><a href="index.html">Home</a></li>
<li><a class="active" href="about.html">About</a></li>
<li><a href="gallery.html">Galleries</a>
<ul>
<li><a href="gallery.html">Current Paintings</a></li>
<li><a href="ink-work.html">Ink Work</a></li>
<li><a href="misc.html">Miscellaneous</a></li>
<li><a href="uv-backdrops.html">UV-Backdrops</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav><!-- .main_nav -->
</header>
<hr>
<section class="main_content">
<blockquote>
<img class="open-quote" src="img/big-quotes1.png"><br>
<p>My work as a realist painter sets out to capture the bittersweet touch of sentiment. A gentle longing of times gone by, where in the present moment we find ourselves alone.</p>
<p>With the sights, sounds and pleasures of seemingly better times now behind us, we are left to witness the crumbling, fading relics of what used to be.</p>
<p>And yet with the subtlety of colour and beauty in its embrace, this emotion offers us a gift; that the warmth of its memory is ours to keep, forever etched into the fabric of time</p><br><span><img class="close-quote" src="img/big-quotes2.png"></span>
</blockquote>
<div class="text_box">
<p>Tristan has had an extensive and varied career within the arts. He started out as a realist painter until his Fine Art degree where he discovered underground dance culture and the art that went with the scene. For the duration of his degree and for some years after, Tristan produced large-scale UV reactive backdrops which took the club and party world by storm and earned him ‘International Décor Artist of the Year’ in 2006.</p>
<p>After exhausting the club scene Tristan developed his style further through the use of Indian inks. Complex patterning and imagery enabled him to freely follow a purer creativity whilst still maintaining composition and structure.</p>
<p>More recently after a period spent overseas, Tristan returned to his realist painting roots. The architecture, culture and scenery he witnessed whilst travelling inspired him to explore his first love further. Tristan now paints highly detailed realist scenes, concentrating on tone and form with a subtle, yet beautiful use of colour.</p>
<p>Paintings with the price displayed are available to purchase. Signed prints of his work are also available. Please enquire via the contact section of this site.</p>
</div>
</section><!-- .main_content-->
<hr>
<footer>
<div class="social_links">
<a href="http://www.facebook.com/TristanBristowArtist" title="Visit my Facebook Page"><img src="img/fb.png" width="32" height="32" alt="Facebook Link"></a>
<a href="http://www.flickr.com/photos/52042077@N08/" title="Visit my Flickr Page"><img src="img/flickr.png" width="32" height="32" alt="Flickr Link"></a>
</div>
<p>©<img src="img/tristanbristow-small.png"></p>
</footer><!-- footer -->
</div><!-- .wrapper-->
</body>
</html>
and the css…
/**
*
**/
/**
* Table Of Sections
*
* 1. Reset
* 2. Basic Elements
* 3. Typography
* 4. Layout
* 5. Header & Main Navigation
* 6. Main Content
* 7. Footer
**/
/* =============================================================================
1. Reset - Adapted from Eric Meyer's Reset CSS
========================================================================== */
/**
* http://meyerweb.com/eric/tools/css/reset/
* v2.0 | 20110126
* License: none (public domain)
**/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* -- HTML5 display-role reset for older browsers -- */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.4;
}
ol, ul {
list-style: none;
}
/* =============================================================================
2. Basic Elements
========================================================================== */
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /*Only without Google Web Font*/
font-size: 1em;
color: #666;
padding:20px 0;
}
/* =============================================================================
3. Typography
========================================================================== */
p, nav {
font-family: 'Numans', sans-serif; /*Google Web Font*/
}
nav {
font-weight: lighter;
font-size: 1.1em;
}
h2, blockquote p {
font-size: 1.2em;
color:#a7a6a4;
}
blockquote p {
font-size:1.1em;
}
p {
margin:10px 0;
font-weight: lighter;
}
hr {
display: block;
border:0;
border-top: 1px solid #ccc;
margin: 0.3em 0;
clear:both;
}
/* -- Links --*/
a {
color: #666666;
text-decoration: none;
}
a:visited {
color: #666666;
}
a:hover {
color: #a0acdc;
}
a:focus {
outline: thin dotted;
}
.contact a, #thumbs p a {
text-decoration: underline;
}
/* =============================================================================
4. Layout - Wrapper & main container divs.
========================================================================== */
/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.wrapper {
width:960px;
margin:0 auto;
}
/* -- Main Content - All Pages: contains all content other than header/footer -- */
.main_content {
height:730px;
margin:50px 0 0 0;
}
#contact .main_content {
padding:50px 0 0 0;
}
/* -- Main Content - Gallery pages only -- */
/* -- See galleriffic.css for most gallery styles -- */
#gallery .main_content, #ink-work .main_content, #uv .main_content, #misc .main_content {
}
/* =============================================================================
5. Header & Main Navigation
========================================================================== */
/* -- Header -- */
/* Using image replacement for greater accesibility. See here: http://css-tricks.com/css-image-replacement */
h1.title {
margin-bottom:0;
width:320px;
height:56px;
text-indent: -9999px;
background: url("../img/tristanbristow.png");
float:left;
}
/* -- Main Navigation -- */
.main_nav {
float:right;
margin:30px 0 0 0;
}
.main_nav li {
float:left;
margin:0 0 0 20px;
position: relative;/* Necessary for sub nav positioning */
}
.main_nav a {
padding:3px;
}
.main_nav a:hover, .main_nav .active {
text-decoration: underline;
color:#a0acdc;
}
/** SUB NAV styling starts here. Vertical list, appears on hover **/
.tabs ul {
float:none;
font-size: 0.9em;
margin:0;
padding:0;
position: absolute;
background: #fff;
left: -9999px;
text-align: center;
line-height: 0.9;
}
.tabs ul li{
padding-top:6px; /* Introducing a padding between the li and the a give the illusion spaced items */
float: none;
}
.tabs ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
.tabs li:hover ul{ /* Display the dropdown on hover */
left:-45px; /* Bring back on-screen when needed */
}
/* =============================================================================
6. Main Content
========================================================================== */
/* -- Reusable Object */
.text_box {
padding:7px;
width:45%;
float:right;
}
#about .text_box {
margin-top:30px;
}
#contact .text_box {
float:none;
width:500px;
}
/* -- About Page: Blockquote -- */
blockquote {
width: 400px;
float:left;
}
blockquote {
margin-top:17px;
}
blockquote p {
width: 450px;
text-align: center;
}
/* Quotation mark images */
.open-quote {
position: relative;
right: 5px;
top:10px;
}
.close-quote {
position:relative;
left:440px;
bottom:50px;
}
/* -- Gallery Page: See galleriffic.css for main image gallery styles --*/
.gallery_intro {
width:350px;
display:inline-block;
line-height:1.2;
}
.next {
margin-left:30px;
}
#thumbs p {
clear: both;
font-size: 0.9em;
}
/* -- Gallery Page - NO Javascript Styles - for users with JS turned off -- */
#gallery_div { /*Turns off JS gallery by default. See here: http://tinyurl.com/d29z6dx*/
display:none;
}
ul.no_js_gallery {
width:321px;
margin: 30px auto;
padding:0;
}
ul.no_js_gallery img {
border:0;
}
.no_js_gallery li{
display: inline-block;
list-style: none;
margin:2px;
}
.js_warning {
color:red;
width:530px;
margin:0 auto;
}
/* =============================================================================
7. Footer
========================================================================== */
.social_links {
display:inline-block;
float:left;
}
footer p img {
margin:-2px 0 0 0;
float:right;
}
footer {
clear:both;
padding-top:5px;
}
footer p {
float:right;
margin-top:0;
}
…Im still quite new to coding so Im aware of the shoddiness of some of my work! 
ANy ideas? Thanks
