424,303 Members | 1,356 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,303 IT Pros & Developers. It's quick & easy.

Can anyone solve this IE7 display issue?

P: 3
I've failed miserably to correct the display issues in IE7 though for a site i built for a friend of mine. http://www.danielburtonimagery.com. Tried pretty much every trick I can think of to give it layout. It seems to be the div "leftColumn" that is the problem. The whole thing just jumps up about 50 pixels from where it should be! Is there anything obvious that I have overlooked? Any suggestions greatly appreciated, as I'm tearing my hair out!!!

Thanks
Tim

Here is my style sheet.

Expand|Select|Wrap|Line Numbers
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. body {
  5.     background-color: #000000;
  6.     text-align: center;
  7.     margin: 0px;
  8.     padding: 0px;
  9.     font-family: Verdana, Arial, Helvetica, sans-serif;
  10.     font-size: 11px;
  11.     line-height: 1.7em;
  12.     color: #FFFFFF;
  13. }
  14. h1 {
  15.     font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  16.     font-weight: bold;
  17.     font-size: 13px;
  18. }
  19. h2 {
  20.     font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  21.     font-weight: bold;
  22.     font-size: 13px;
  23.     color: #CCCCCC;
  24. }
  25. h3 {
  26.     font-size: 14px;
  27.     text-transform: uppercase;
  28.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  29. }
  30. img {
  31.     border-top-style: none;
  32.     border-right-style: none;
  33.     border-bottom-style: none;
  34.     border-left-style: none;
  35. }
  36. textarea {
  37.     background-color: #000000;
  38.     border: 1px solid #D90000;
  39.     color: #FFFFFF;
  40.     font-family: Verdana, Arial, Helvetica, sans-serif;
  41.     font-size: small;
  42.     scrollbar-base-color: #000000;    
  43. }
  44. input {
  45.     border: 1px solid #D90000;
  46.     background-color: #000000;
  47.     color: #FFFFFF;
  48.     font-family: Verdana, Arial, Helvetica, sans-serif;
  49.     font-size: small;
  50. }
  51. .floatright {
  52.     float: right;
  53.     margin-top: 10px;
  54.     margin-right: 10px;
  55.     border: 1px solid #CCCCCC;
  56.     margin-left: 10px;
  57. }
  58. #wrapper {
  59.     text-align: left;
  60.     width: 1123px;
  61.     margin-top: 100px;
  62.     margin-right: auto;
  63.     margin-bottom: 100px;
  64.     margin-left: auto;
  65. }
  66. #navigation {
  67.     width: 450px;
  68.     font-family: Arial, Helvetica, sans-serif;
  69.     font-size: 12px;
  70.     float: left;
  71.     border-bottom-width: 1px;
  72.     border-bottom-style: solid;
  73.     border-bottom-color: #FFFFFF;
  74.     padding-top: 30px;
  75. }
  76. #logo {
  77.     background-image: url(assets/dbi_logo.gif);
  78.     background-repeat: no-repeat;
  79.     height: 50px;
  80.     float: right;
  81.     width: 1123px;
  82.     background-position: right;
  83.     border-bottom-width: 1px;
  84.     border-bottom-style: solid;
  85.     border-bottom-color: #FFFFFF;
  86. }
  87. #leftColumn {
  88.     width: 300px;
  89.     padding-left: 10px;
  90.     color: #787878;
  91.     height: 400px;
  92.     border-left-width: 1px;
  93.     border-left-style: solid;
  94.     border-left-color: #FFFFFF;
  95.     background-repeat: no-repeat;
  96.     padding-right: 10px;
  97.     float: left;
  98.     clear: both;
  99.     background-color: #FFFFFF;
  100.  
  101. }
  102. #leftColumn a {
  103.     color: #666666;
  104. }
  105. #rightColumn {
  106.     float: right;
  107.     width: 800px;
  108.     border-left-width: 1px;
  109.     border-left-style: solid;
  110.     border-left-color: #CCCCCC;
  111.     border-right-width: 1px;
  112.     border-right-style: solid;
  113.     border-right-color: #FFFFFF;
  114.     clear: right;
  115.     height: 400px;
  116. }
  117. #rightColumn p {
  118.     padding-left: 10px;
  119. }
  120. #partnersContent {
  121.     padding: 10px;
  122.     color: #FFFFFF;
  123. }
  124. #partnersContent a {
  125.     color: #D90000;
  126. }
  127. #contactBox1 {
  128.     float: left;
  129.     width: 510px;
  130.     padding-left: 10px;
  131. }
  132. #contactBox2 {
  133.     float: right;
  134.     width: 240px;
  135.     background-image: url(assets/contactBox_border.jpg);
  136.     background-repeat: no-repeat;
  137.     background-position: left;
  138.     height: 400px;
  139.     padding-left: 30px;
  140.     font-size: 11px;
  141.     padding-right: 10px;
  142. }
  143. #contactBox2 h1 {
  144.     font-size: 11px;
  145.     font-weight: bold;
  146. }
  147. #content {
  148.     font-family: Verdana, Arial, Helvetica, sans-serif;
  149.     font-size: small;
  150.     line-height: 1.5em;
  151.     color: #000000;
  152. }
  153. #footer {
  154.     border-top-width: 1px;
  155.     border-top-style: solid;
  156.     border-top-color: #FFFFFF;
  157.     color: #666666;
  158.     font-size: 9px;
  159.     font-family: Verdana, Arial, Helvetica, sans-serif;
  160.     text-align: right;
  161.     padding-right: 10px;
  162.     clear: both;
  163. }
  164. #footer a {
  165.     text-decoration: underline;
  166.     color: #666666;
  167. }
  168. #rightColumn a {
  169.     color: #D90000;
  170. }
Aug 3 '10 #1

✓ answered by JKing

Try removing float:right from #logo.

I tested this locally with IE7, IE8 and FF.

Share this Question
Share on Google+
5 Replies


JKing
Expert 100+
P: 1,206
I think the problem may be with your menu. You have a javascript error that should be corrected. I think you are missing a reference to your spry javascript file.
Something like this
Expand|Select|Wrap|Line Numbers
  1. <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> 
  2.  
Not sure that will fix the error but it is a start.
Aug 3 '10 #2

P: 3
Hi, thanks for taking a look. There is no js file for the menu bar just a separate css file that I've linked to. The nav bar works fine in other browsers. You just can't see it in IE7 cos the damn div box below blocks it out.

Thanks again

Tim
Aug 3 '10 #3

JKing
Expert 100+
P: 1,206
Then what is the point of this?
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.     var mb1 = new Spry.Widget.MenuBar("menubar1", {imgDown:"spryAssets/SpryMenuBarDownHover.gif", imgRight:"spryAssets/SpryMenuBarRightHover.gif"});
  3.         </script>
  4.  
  5.  
Aug 3 '10 #4

JKing
Expert 100+
P: 1,206
Try removing float:right from #logo.

I tested this locally with IE7, IE8 and FF.
Aug 3 '10 #5

P: 3
You are my hero! If I didn't live over 3000 miles away i'd buy you a beer. Thanks a lot buddy.

P.S. yeah you're right the text you mentioned before is unnecessary, should have stripped it out.
Aug 3 '10 #6

Post your reply

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