Crossbrowser Issues (FF - IE)

[DDragon]

As some of you may or maynot know ive been developing a site now i have it running perfectly in FF and have tested in IE and seemed to be running fine untill i put it online. then i got strange and weird things happening in IE (NOTE: Under Windows 7's new version of IE it seems to be fixed but as not many people are going to be using this new version of IE as yet it needs to be fixed for the older versions of the browser). Here is a link to the site so you can see what i mean: Totally Fun Amusements Australia

Here is the CSS code as you can view the HTML by viewing the source of the pages:

Code: Select all

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
   margin: 0;
   padding: 0;
   background: #0F5B96 url(../images/img01.gif) repeat-x;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #A4E4F5;
}

input, textarea {
   background: #A4E4F5;
   border: 1px solid #FFFFFF;
   font: bold 13px Arial, Helvetica, sans-serif;
   color: #0F5B96;
}

/*h1, h2, h3, p, ol, ul {
   margin-top: 0;
}*/

h1, h2, h3 {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1, h2 {
   text-transform: lowercase;
   font-weight: normal;
}

h1 {
   letter-spacing: -2px;
   font-size: 2.4em;
}

h2 {
   letter-spacing: -1px;
   font-size: 1.8em;
}

p, ol, ul {
   margin-bottom: 1.5em;
   line-height: 150%;
}

a {
   color: #A4E4F5;
}

a:hover {
   text-decoration: none;
   color: #FFFFFF;
}

img.left {
   float: left;
   margin: 4px 20px 0 0;
}

img.thumb {
   float: left;
   margin: 40px 10px 0 10px;
}

img.right {
   float: left;
   margin: 4px 0 0 20px;
}

.price
   {
      color: #000000;
   }

td
   {
      text-align: center;
      align: center;
   }

/* Header */

#header {
   height: 150px;
   background: url(../images/img02.jpg) no-repeat center top;
   text-transform: lowercase;
}

#logo {
   float: left;
}

#logo h1, #logo p {
   float: left;
   margin: 0;
   line-height: normal;
}

#logo h1 {
   float: right;
   padding: 25px 320px 0 0;
   font-size: 3em;
   color: #62D6F5;
}

#logo p {
   float: right;
   padding: 20px 500px 0 0;
   letter-spacing: -1px;
   font-size: 1.4em;
   color: #199DD2;
}

#logo a {
   text-decoration: none;
   color: #62D6F5;
}

/* Menu */

#menu {
   float: right;
}

#menu ul {
   margin: 0;
   padding: 30px 320px 0 0;
   list-style: none;
}

#menu li {
   display: inline;
}

#menu a {
   float: left;
   width: 120px;
   height: 56px;
   margin: 0 0 0 2px;
   padding: 9px 0 0 0;
   background: #1B97CE url(../images/img03.gif) no-repeat;
   text-decoration: none;
   text-align: center;
   letter-spacing: -1px;
   font-size: 1.1em;
   font-weight: bold;
   color: #000000;
}

#menu a:hover, #menu .current_page_item a {
   background: #26BADF url(../images/img04.gif) no-repeat;
}

/* Page */

#page {
   width: 784px;
   margin: 0 auto;
}

/* Content */

#content {
   float: left;
   width: 530px;
   padding: 0 0 0 25px;
}

.post {
   margin-bottom: 15px;
   background: #1EB5DD url(../images/img05.gif) no-repeat;
   color: #0A416B;
}

.post a {
   color: #A4E4F5;
}

.post a:hover {
   color: #FFFFFF;
}

.post .title {
   margin: 0;
   padding: 30px 30px 0 30px;
}

.post .title a {
   text-decoration: none;
   color: #0A416B;
}

.post .byline {
   margin: 0;
   padding: 0 30px;
}

.post .entry {
   padding: 20px 30px 10px 30px;
}

.post .entry2
   {
      padding: 0px 0px 0px 0px;
   }

.post .content
   {
      padding: 0px 30px 10px 30px;
   }

.post .links {
   margin: 0;
   padding: 10px 30px 35px 30px;
   background: url(../images/img06.gif) repeat-x left bottom;
   border-top: 1px solid #2872A6;
}

.post .links a {
   padding-left: 10px;
   background: url(../images/img08.gif) no-repeat left center;
   text-decoration: none;
   font-weight: bold;
   color: #0A416B;
}

.post .links a:hover {
   color: #FFFFFF;
}

/* Sidebars */

.sidebar {
   float: left;
   width: 100px;
}

.sidebar ul {
   margin: 0;
   padding: 0;
   list-style: none;
   line-height: normal;
}

.sidebar li {
}

.sidebar li ul {
}

.sidebar li li {
   padding: 6px 0 6px 10px;
   background: url(images/img08.gif) no-repeat 0 12px;
   border-bottom: 1px solid #2872A6;
}

.sidebar li li a {
   text-decoration: none;
   color: #C9ECF5;
}

.sidebar li li a:hover {
   color: #FFFFFF;
}

.sidebar li h2 {
   padding-top: 20px;
   color: #FFFFFF;
}

/* Left Sidebar */

#leftbar {
}

/* Right Sidebar */

#rightbar {
   padding: 0 0 0 25px;
}

/* Search */

#searchform {
   padding-top: 20px;
   text-align: right;
}

#searchform br {
   display: none;
}

#searchform input {
   margin-bottom: 5px;
}

#searchform #s {
   width: 190px;
}

/* Footer */

#footer {
   clear: both;
   padding: 40px 0;
   background: #083253;
}

#footer p {
   text-align: center;
   font-size: smaller;
   color: #0F5B96;
}

#footer a {
   color: #0F5B96;
}

/*Start Pop up hint box */

#hintbox
   {
      position:absolute;
      top: 0;
      color: #C9ECF5;
      background-color: #0F5B96;
      width: 150px; /*Default width of hint.*/
      padding: 3px;
      border:1px solid black;
      font:normal 11px Verdana;
      line-height:18px;
      z-index:100;
      border-right: 3px solid black;
      border-bottom: 3px solid black;
      visibility: hidden;
   }

.hintanchor
   {
      font-weight: bold;
      /*color: red;*/
      margin: 3px 8px;
   }
/*End Pop up hint box*/


[Johnathan]

What's the problem in IE? Screenshot?

[DDragon]

Here we go:

[flabbyrabbit]

Sorry this isn't going to help you fix this problem, but I found another one. Try resizing your browser window:



Flabby Rabbit

[DDragon]

yeah i know about that one im going to be going through the css to fix that up (not sure what to change it to..... (under #page { width: 784px; margin: 0 auto; <------ } )) any ideas on what to put there.

[flabbyrabbit]

If you change the width of your browser window, the menu items move around and don't stay in the right place.

Flabby Rabbit