Erledigt: CSS IE7 Positions Problem

Webentwicklung XHTML / CSS
 
Hallo werte Codekenner,
mache gerade (nach trial and error) für eine Bekannte nebenbei eine Homepage (das Grundgerüst erstmal). Nun will der IE7 aber nicht so recht, dieser setzt alles in die Mitte und haut den Content tiefer. brain
Da ich, was das ganze Webzeug angeht, wie mit Stricknadeln vor einem Ball Wolle sitze, wollte ich mal fragen, ob jemand von Euch spontan sagen kann, was ich wie schrauben muss, dass das ganze richtig sitzt. (im Safari und FF kein Problem... valide isses eigentlich auch) planlos

  1. <?php
  2.  
  3.  
  4. if(!defined('WB_URL')) {
  5. header('Location: ../index.php');
  6. exit(0);
  7. }
  8.  
  9. ?>
  10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  11. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  12. <head>
  13. <title><?php page_title(); ?></title>
  14. <meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
  15. <meta name="description" content="<?php page_description(); ?>" />
  16. <meta name="keywords" content="<?php page_keywords(); ?>" />
  17. <link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet" type="text/css" media="screen" />
  18. <link href="<?php echo TEMPLATE_DIR; ?>/print.css" rel="stylesheet" type="text/css" media="print" />
  19.  
  20.  
  21.  
  22.  
  23.  
  24. <?php
  25. // this allows to include the optional module files (frontend.css, frontend.js) into the head section
  26. if(function_exists('register_frontend_modfiles')) {
  27. register_frontend_modfiles('css');
  28. register_frontend_modfiles('js');
  29. } ?>
  30. <?php
  31. // this allows to add custom information to the head section of your template (WB-->Settings-->Website Header)
  32. echo WEBSITE_HEADER;
  33. ?>
  34. </head>
  35. <body>
  36.  
  37. <div class="main">
  38.  
  39.  
  40.  
  41.  
  42.  
  43. <?php
  44. // Only show menu items if we are supposed to
  45. if(SHOW_MENU) {
  46. ?>
  47.  
  48. <div class="menu">
  49. <?php show_menu(1, 1);
  50.  
  51. if(FRONTEND_LOGIN == 'enabled' AND VISIBILITY != 'private' AND $wb->get_session('USER_ID') == '') {
  52. ?>
  53. <form name="login" action="<?php echo LOGIN_URL; ?>" method="post" class="login_table">
  54. <h1><?php echo $TEXT['LOGIN']; ?></h1>
  55. <?php echo $TEXT['USERNAME']; ?>:
  56. <input type="text" name="username" style="text-transform: lowercase;" />
  57. <?php echo $TEXT['PASSWORD']; ?>:
  58. <input type="password" name="password" />
  59. <input type="submit" name="submit" value="<?php echo $TEXT['LOGIN']; ?>" style="margin-top: 3px; text-transform: uppercase;" />
  60. <a href="<?php echo FORGOT_URL; ?>"><?php echo $TEXT['FORGOT_DETAILS']; ?></a>
  61. <?php if(is_numeric(FRONTEND_SIGNUP)) { ?>
  62. <a href="<?php echo SIGNUP_URL; ?>"><?php echo $TEXT['SIGNUP']; ?></a>
  63. <?php } ?>
  64. </form>
  65. <?php
  66. } elseif(FRONTEND_LOGIN == 'enabled' AND is_numeric($wb->get_session('USER_ID'))) {
  67. ?>
  68. <form name="logout" action="<?php echo LOGOUT_URL; ?>" method="post" class="login_table">
  69. <h1><?php echo $TEXT['LOGGED_IN']; ?></h1>
  70. <?php echo $TEXT['WELCOME_BACK']; ?>, <?php echo $wb->get_display_name(); ?>
  71.  
  72. <input type="submit" name="submit" value="<?php echo $MENU['LOGOUT']; ?>" />
  73.  
  74. <a href="<?php echo PREFERENCES_URL; ?>"><?php echo $MENU['PREFERENCES']; ?></a>
  75. <a href="<?php echo ADMIN_URL; ?>/index.php"><?php echo $TEXT['ADMINISTRATION']; ?></a>
  76. </form>
  77. <?php
  78. }
  79. ?>
  80. </div>
  81.  
  82. <div id="sprachauswahl"><?php show_menu(1, 0, 1, true, "[a][menu_title][/a]", '', '', '', false, '', 0);?></div>
  83.  
  84. <div class="search_box">
  85. <?php if(SHOW_SEARCH) { ?>
  86. <form name="search" action="<?php echo WB_URL.'/search/index.php'; ?>" method="get">
  87. <input type="text" name="string" class="search_string" />
  88. <input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?>" class="search_submit" />
  89. </form>
  90. <?php } ?>
  91. </div>
  92.  
  93.  
  94.  
  95. <?php } ?>
  96.  
  97. <div class="content">
  98. <?php page_content(); ?>
  99. </div>
  100.  
  101. <div class="footer">
  102. <?php page_footer(); ?>
  103. </div>
  104.  
  105.  
  106.  
  107. <div class="powered_by">
  108. </div>
  109. </div>
  110.  
  111. </body>
  112. </html>
Quelltext in Zwischenablage kopieren




und CSS
  1. body,td,th {
  2. font-family: Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 11px;
  4. color: #7b7b7b;
  5. line-height:15px;
  6.  
  7. }
  8. body {
  9. float: left;
  10. background-color:;
  11. background-image:;
  12. margin: 0;
  13. }
  14. a:link, a:visited, a:active {
  15. color: #0098d4;
  16. text-decoration: none;
  17. }
  18. a:hover {
  19. color: #7b7b7b;
  20. text-decoration: none;
  21. }
  22.  
  23. h1 {
  24. font-size: 11px;
  25. color: #7b7b7b;
  26. }
  27. form {
  28. margin: 0;
  29. }
  30. .main {
  31. width: 750px;
  32. margin: auto;
  33. padding: 0;
  34. background-color:;
  35. }
  36.  
  37.  
  38. .search_box {
  39. float: right;
  40. clear: right;
  41. width: 200px;
  42. }
  43. .search_string {
  44. width: 100px;
  45. height: 16px;
  46. font-size: 10px;
  47. vertical-align: middle;
  48. }
  49. .search_submit {
  50. width: 50px;
  51. height: 22px;
  52. font-size: 10px;
  53. vertical-align: middle;
  54. }
  55. .highlight {
  56. background-color:;
  57. }
  58. .banner a {
  59. color: #FFFFFF;
  60. }
  61.  
  62.  
  63. #sprachauswahl {
  64. position: fixed;
  65. margin-top:10px;
  66. margin-left:100px;
  67. display: inline;
  68. }
  69.  
  70.  
  71.  
  72. .menu {
  73. line-height:10px;
  74. position: fixed;
  75. float: left;
  76. width: 200px;
  77. margin-left: 100px;
  78. margin-top: 152px;
  79. }
  80. .menu ul, .menu li {
  81. margin: 0;
  82. padding: 0;
  83. list-style: none;
  84. margin-bottom: 5px;
  85. }
  86. .menu ul ul {
  87. padding-left: 0px;
  88. }
  89. .menu a:link, .menu a:visited, .menu a:active, .menu a:hover {
  90. display: block;
  91. padding: 2px;
  92. }
  93.  
  94.  
  95. .menu_current {
  96. font-weight: bold;
  97. }
  98. .highlight {
  99. background-color: #D0D0D0;
  100. }
  101.  
  102. .login_table {
  103. border: 1px solid #D0D0D0;
  104. margin-top: 20px;
  105. margin-bottom: 5px;
  106. text-align: center;
  107. padding-bottom: 3px;
  108. }
  109. .login_table h1 {
  110. color: #660033;
  111. font-size: 12px;
  112. text-transform: uppercase;
  113. font-weight: bold;
  114. text-align: center;
  115. margin: 5px 0px 5px 0px;
  116. }
  117. .login_table input {
  118. text-transform: uppercase;
  119. font-size: 10px;
  120. margin: 5px 0px 1px 0px;
  121. width: 100px;
  122. }
  123.  
  124.  
  125. .content {
  126. padding: 140px 0px 0px 300px;
  127. background-attachment: fixed;
  128. text-align:left;
  129. clear: right;
  130. }
  131.  
  132. .footer {
  133. background-color:;
  134. clear:;
  135. height:;
  136. background-image:;
  137. background-repeat:;
  138. font-size:;
  139. color:;
  140. text-align:;
  141. line-height:;
  142. }
  143. .powered_by {
  144. text-align:;
  145. font-size:;
  146. padding-top:;
  147. }
Quelltext in Zwischenablage kopieren


und darum gehts
Link zu diesem Beitrag in die Zwischenablage kopieren
Mister Ad
Werbung
Schon mal bei Amazon geguckt? Vielleicht wirst du dort fuendig.

 
das sollten 2 kleine margin-Probleme sein.

richtig:

.main {
margin:0;
padding:0;
width:750px;
}

und dann hast du vermutlich, zumindest im IE6 noch nen doubleMargin-Bug, der immer dann entsteht, wenn ein Element float:left; und margin:irgendwas hat. dann dupliziert der IE6 die margin werte. ergo:

.menu{
.
.
display:inline;
}

sollte damit schon mal besser aussehen.
Link zu diesem Beitrag in die Zwischenablage kopieren
hi Dirk,
Danke für Deine schnellen Tipps, selbst habe ich keinen IE7 sondern schaue über den Netrenderer (), der zeigt aber nach wie vor den Content versetzt... so wie es aber scheint ist das ganze nichtmehr mittig...
Noch ne Idee, wie ich den Content hoch bekomme (ich bekomme meinen Content nicht mehr hoch gumbo)
Link zu diesem Beitrag in die Zwischenablage kopieren
ich hab hier auch nur den IE6. aber so wie ich das im moment sehe, waere es vll geschickt, die elemente mit position:absolute zu fixieren. Die Sprachauswahl steht im IE auch falsch, was auf die fixed-position der navi zurueckzufuehren ist. Die Elemente schieben sich da quasi gegenseitig durch die Gegend.
Link zu diesem Beitrag in die Zwischenablage kopieren
hmmm??? sobald ich position:absolut mache, scrollt die Navi auch aus dem Fenster. Wie bekomme ich die fixiert?
Link zu diesem Beitrag in die Zwischenablage kopieren
im IE6 scheinbar garnicht. IE6 unterstützt position:fixed nicht. Stu () hat das was, was dir helfen könnte.
Link zu diesem Beitrag in die Zwischenablage kopieren
hi Dirk, vielen Dank,
habe das ganze noch mal mit einer anderen Grundlage (Code) versucht, nun passt die Navi, nur die Sprachauswahl muss ich noch anpassen...aber das wird bestimmt mit Deinem Tip gehen... suuuupa -D
Link zu diesem Beitrag in die Zwischenablage kopieren
five
Link zu diesem Beitrag in die Zwischenablage kopieren
#