| Autor |
Nachricht |
house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht: 
|
Verfasst Fr 06.03.2009 16:03
Titel Problem mit dem IE-Boxmodell-Bug |
  |
|
huhu,
ich hab ein problem mit dem internet explorer(7). ich arbeite grad am css/html für die homepage eines kunden von uns. nach dem layout muss die navigation der seite auf schwarzen hintergrund stehen, und eine weiße outline von 1px haben. (siehe bsp. unten)
jeder kack browser zeigt mir die outline auch an, außer der ie, der nur links und rechts weiße linien darstellt und oben und unten nicht. 
ich denke grund dafür ist der bekannte boxmodell-bug. allerdings will ich die hacks die es so gibt nicht anwenden, und ich bin auch sonst am ende mit meinem latein (weil noch anfänger im thema css/html).
deswegen poste ich hier einfach mal den vereinfachten code. fügt euch einfach mal ein hintergrund-bild ein (bei #area_21, mein bild ist 900x300px groß) und wenn ihr mir helfen könnt oder wisst, wie man in dem fall den bug übergehen kann, wär das echt super. 
(für alle diejenige die irgendetwas abfälliges über meinen kenntniss-stand bzgl css loswerden wollen, können das gern für sich behalten, ich brauch einfach nur n neuen denkanstoß. aber falls ihr eurem drang mich zu beleidigen doch nachgehen müsst, dann tut das lieber per pn, da passt es ja auch besser)
_______________ vereinfachter code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mein Navigationsproblem</title>
<style type="text/css">
/* CSS Document */
/* Tags */
* {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:left;
line-height: 20px;
}
#area_21 {
position:relative;
height:280px;
background-repeat:no-repeat;
background-image:url(DSCN0598.JPG);
}
#area_31 {
position:relative;
margin-top:60px;
width:910px;
height:220px;
float:right;
}
#area_31 A {
font:Verdana, Geneva, sans-serif;
font-size:12px;
text-decoration:none;
border-width:1px;
border-style:solid;
border-color:#ffffff;
background-color:#000;
color:#ffffff;
padding-right:7px;
padding-left:7px;
padding-top:1px;
padding-bottom:1px;
margin-right:6px;
}
</style>
</head>
<body>
<div id="area_21">
<div id="area_31">
<a href="#1">navi</a> <a href="#2">navi</a> <a href="#3">navi</a> <a href="#4">navi</a>
<a href="#5">navi</a> <a href="#6">navi</a> <a href="#7">navi</a>
</div>
</div>
</body>
</html>
_______________
vielen dank schon im voraus!
housebaby ^^
Zuletzt bearbeitet von house baby am Fr 06.03.2009 18:49, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
|
| |
|
|
|
Anzeige
|
|
|
house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht:
|
Verfasst Fr 06.03.2009 16:28
Titel
|
|
|
lass es doch einfach stecken -.-"
---->für alle diejenige die irgendetwas abfälliges über meinen kenntniss-stand bzgl css loswerden wollen, können das gern für sich behalten, ich brauch einfach nur n neuen denkanstoß. aber falls ihr eurem drang mich zu beleidigen doch nachgehen müsst, dann tut das lieber per pn, da passt es ja auch besser
Zuletzt bearbeitet von house baby am Fr 06.03.2009 16:30, insgesamt 1-mal bearbeitet
|
|
| |
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 06.03.2009 16:51
Titel
|
|
|
Es musste einfach 'raus, sorry 
|
|
| |
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 09.03.2009 11:16
Titel
|
|
|
Ergänz für #area_31 A den Eintrag line-height: mit zum Beispiel 25px.
Nachtrag: Dann macht auch der IE was er soll. Das Problem beim IE ist an dieser Stelle, dass dieser ohne eigene Angaben eine automatische Höhe für die Links verwendet. Wenn durch Paddings und Margins und Borders diese Höhe überschritten wird, dann werden wie in deinem Fall, sichtbare Bereich (der obere und untere Rand) nicht mehr dargestellt weil sie für den IE nicht in den sichtbaren Bereich passen.
Zuletzt bearbeitet von DesignKater am Mo 09.03.2009 11:19, insgesamt 2-mal bearbeitet
|
|
| |
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 09.03.2009 11:27
Titel
|
|
|
oder einfach ein
#area_31 A {
display:inline-block;
}
dazu.
|
|
| |
|
|
house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht:
|
Verfasst Di 10.03.2009 14:05
Titel
|
|
|
danke an zweitaccount und DesignKater für die 2 tipps. beide haben funktioniert. weiß nicht, warum ich selbst nicht drauf gekommen bin. aber gott sei dank gibts ja so dinger namens foren, wo man weiter geholfen wird 
jetzt kann ich mich wenigsten endlich an die nächsten unlösbaren probleme machen 
lg house baby
|
|
| |
|
|
house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht:
|
Verfasst Mi 11.03.2009 11:30
Titel
|
|
|
Also wie gestern schon geschrieben, wurde ja das Rahmen-Problem gelöst (thx nochma ^^)
Nun für alle CSS-Rätsel-Fans hier eine neue Frage:
ich hab es geschafft, mir mit hilfe einer liste eine subnavi zu bauen. diese erscheint bei mouse-over und die art und weise, wie sie angezeigt wird passt auch. (zumindest im firefox, chrome und safari).
der internet explorer zeigt die subnavi aber über der hauptnavi und links neber den navigationspunkten. die subnavi sollte aber eigentlich genau drunter stehen, (wie in den andern browsern)
wie schaff ich es, das die subnavi auch im IE unter der Hauptnavi steht?
Vielen Dank schon im Voraus!
PS:
falls ihr irgendwelche andern fehler im code findet, oder irgendetwas anders machen würde, raus damit
________________________________________________________
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Subnavi problematik</title>
<style type="text/css">
/* CSS Document */
* {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:left;
line-height: 20px;
}
#area_21 {
position:relative;
height:280px;
background-repeat:no-repeat;
background-image:url(DSCN0598.JPG);
}
/* Anfang Navigation */
#area_31 {
position:relative;
margin-top:60px;
width:910px;
height:220px;
float:right;
}
#area_31 A {
font:Verdana, Geneva, sans-serif;
font-size:12px;
text-decoration:none;
border-width:1px;
border-style:solid;
border-color:#ffffff;
display:inline-block;
color:#ffffff;
padding-right:3px;
padding-left:3px;
padding-top:1px;
padding-bottom:1px;
}
#area_31 A:link { /* noch nicht besuchte Ziele */
background-color:#000;
}
#area_31 A:visited { /* besuchte Ziele */
background-color:#000;
}
#area_31 A:hover { /* Verweise bei "MouseOver" */
background-color:#02c615;
color:#000;
}
#area_31 A:active { /* Angeklickte Verweise */
background-color:#02c615;
color:#000
}
#area_31 A:focus { /* Verweise, die Fokus erhalten */
background-color:#02c615;
color:#000
}
/* subnavi */
ul {
margin: 0;
padding: 0;
list-style: none;
text-align:center;
}
.navigation_1 {
text-align:center;
}
.navigation_2 {
text-algin:left;
}
ul li {
float: left;
padding-right:7px;
padding-left:7px;
padding-top:1px;
padding-bottom:1px;
margin-right:3px;
width:inherit;
}
ul li a {
height: 100%;
width: 100%;
text-align:center;
height: 100%;
width: 100%;
margin:0;
display: block;
border:none;
}
ul li ul {
text-align:left;
position: absolute;
white-space: nowrap;
margin: 0;
visibility: hidden;
}
li:hover ul {
visibility: visible;
}
li ul li {
width: 100%;
margin: 5px 0px 0px 0px;
padding: 0;
float: none;
}
li ul li a{
text-align:left;
border-style:none;
border:none;
}
/* subnavi */
/* Ende Navigation */
</style>
</head>
<body>
<div id="area_21">
<div id="area_31">
<ul class="navigation_1">
<li><a href="home.html">Home</a>
<ul class="navigation_2">
<li><a href="#">aktuell</a></li>
<li><a href="#">news</a></li>
<li><a href="#">archiv</a></li>
</ul>
</li>
<li><a href="#">life</a>
<ul class="navigation_2">
<li><a href="#">uebersicht</a></li>
<li><a href="#">entstehung</a></li>
<li><a href="#">geschichten</a></li>
<li><a href="#">fotos</a></li>
<li><a href="#">videos</a></li>
</ul>
</li>
<li><a href="#">portfolio</a>
<ul class="navigation_2">
<li><a href="#">dings</a></li>
<li><a href="#">bums</a></li>
<li><a href="#">trarie</a></li>
<li><a href="#">trara</a></li>
<li><a href="#">bumsfallera</a></li>
</ul>
</li>
<li><a href="#">studio</a>
<ul class="navigation_2">
<li><a href="#">blindtext</a></li>
<li><a href="#">blinde texte</a></li>
<li><a href="#">textende blinde</a></li>
<li><a href="#">blinde textende</a></li>
</ul>
</li>
<li><a href="#">netzwerk</a>
<ul class="navigation_2">
<li><a href="#">ring</a></li>
<li><a href="#">bus</a></li>
<li><a href="#">stern</a></li>
</ul>
</li>
<li><a href="#">kaufrausch</a>
<ul class="navigation_2">
<li><a href="#">platten</a></li>
<li><a href="#">fan-shirts</a></li>
</ul>
</li>
<li><a href="#">kontakt</a>
<ul class="navigation_2">
<li><a href="#">impressum</a></li>
<li><a href="#">disclaimer</a></li>
<li><a href="#">uebelkeit</a></li>
<li><a href="#">unwohlsein</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
|
________________________________
vielen dank , house baby
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
div-margin-Boxmodell Problem
Wie Boxmodell/Layout am besten lösen?
Formmailer-Problem-neues problem
PHP Problem
CSS-Problem im IE7
CSS Problem
|
|
Willkommen auf dem Portal für Mediengestalter
