paar pixel abstand nach grafiken

destroy90210 · #1 (**permalink**) 10.12.2006, 15:14

hi,

ich habe das problem das wenn ich grafiken untereinder andordne mittels div, li oder anderen elementen das immer ein paar pixel abstand sind... ich habe bischen rumgesucht und nun es mit dem trick versucht jedes element einfach left floaten zu lassen. ansich geht das bei meinem layout recht gut nur mein problem ist das ich beim menu im IE die menüpunkte nur teilweise oder gar nicht angezeigt bekomme was sehr eigenartig ist finde ich, im FF passt alles super...

hier mal der link Oldboys Alliance

hier der css code

PHP-Code:


			
/*allgemeine startformatierung*/

html * {

        margin: 0;

        padding: 0;

    }



body {

        font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

        font-size: 85%;

                background-color: #f7e9da;

                 background-image:url(images/bg.gif);

                 text-align: center;

        color: #000;

                 margin-bottom:20px;

    }



p, li, h1, h2, h3, h4, h5, h6 {

        font-weight: normal;

        font-size: 1em;

    }

img {



                float:left;

                }



/*haupt Boxen um saitenlayout zu erstellen*/

#mainBox {

                 margin:0 auto;

                 text-align:left;

             width:885px;

                height:1000px;

                 background-color:#ff0000;

        }

#headerBox {

               float:left;

                 width:885px;

                 height:252px;

        }

#leftSide{

               float:left;

                 width:223px;



        }

#content {

               float:left;

                 width:482px;

        }

#rightSide {

             float:left;

                 width:180px;

        }

#footer {

                 clear:left;

                 width:885px;

        }

/*menü links*/

#menu {



                list-style-type:none;

                background-image:url(../images/menu_bg.jpg);

    }

#menu li {

         clear:left;

}



#menu a {

        text-decoration:none;

             padding-left:95px;



    }

html

PHP-Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Oldboys Alliance</title>

<meta name="description" content="Home for the aged">

<meta name="author" content="destroy90210">

<meta name="keywords" content="wow, world of warcraft, gilde, alliance, burning crusade, bc">

<link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>

<div id="mainBox">

  <img id="band_left" src="images/band_left.jpg" width="89" height="41" border="0" alt="">

  <div id="headerBox">

  <img src="images/flash_bg.jpg" width="700" height="253" border="0" alt="flash Background"><img id="login" src="images/header_login.jpg" width="184" height="253" border="0" alt="login Background">

  </div>

  <div id="leftSide">

    <ul id="menu"><li><img src="images/menu_header.jpg" width="223" height="38" border="0" alt="menu Header"></li><li><img src="images/menu_news.jpg" width="223" height="32" border="0" alt=""></li><li><a href="">News Archiv</a></li>

      <li><img src="images/menu_oldBoys.jpg" width="223" height="28" border="0" alt=""></li>

      <li><a href="">Die Gilde</a></li>

      <li><a href="">Satzung</a></li>

      <li><a href="">Mitglieder</a></li>

      <li><a href="">DKP</a></li>

      <li><a href="">Raidplaner</a></li>

      <li><a href="">Bewerbung</a></li>

      <li><img src="images/menu_community.jpg" width="223" height="31" border="0" alt=""></li>

      <li><a href="">Forum</a></li>

      <li><a href="">Links</a></li>

      <li><a href="">Gästebuch</a></li>

      <li><a href="">Teamspeak</a></li>

      <li><img src="images/meun_media.jpg" width="223" height="33" border="0" alt=""></li>

      <li><a href="">Screenshots</a></li>

      <li><a href="">Videos</a></li>

      <li><img src="images/menu_downloads.jpg" width="223" height="30" border="0" alt=""></li>

      <li><a href="">Tools</a></li>

      <li><a href="">Addons</a></li>

      <li><img src="images/menu_ende.jpg" width="223" height="196" border="0" alt=""></li>

    </ul>

  </div>

  <div id="content"><img src="images/content_header.jpg" width="482" height="52" border="0" alt="content Header"></div>

  <div id="rightSide"><img src="images/shoutbox_header.jpg" width="180" height="52" border="0" alt="shoutbox Header"></div>

  <div id="footer"><img src="images/left_side_bottom.jpg" width="223" height="102" border="0" alt=""><img src="images/content_bottom.jpg" width="481" height="102" border="0" alt=""><img src="images/right_side_bottom.jpg" width="181" height="102" border="0" alt=""></div

</div>

</body>

</html>

hat wer eine lösung warum der ie das so anzeigt ?? bzw nen anderen vorschlag als jedes bild nach links floaten zu lassen ??

mfg,
destroy90210

destroy90210 · #2 (**permalink**) 12.12.2006, 00:35

keiner einer eine idee was da falsch ist ?

mazzo · #3 (**permalink**) 12.12.2006, 09:02

kannst Du das Problem mal auf einen heruntergedampften Fall reduzieren (nur das für dieses Problem wesentliche HTML und CSS als Online-Beispiel)?
Ich kann gar nicht erkennen, wo da "die paar Pixel Differenz" ein sollen und welche Grafiken genau betroffen sind.

PS: Im IE muss man manche Links erst hovern damit die Schrift lesbar wird.

destroy90210 · #4 (**permalink**) 12.12.2006, 11:13

das ist das problem

Zitat:

PS: Im IE muss man manche Links erst hovern damit die Schrift lesbar wird.

das mit den paar pixeln habe ich ja wegbekommen indem ich bei allen bildern ein float:left gemacht habe...

nur leider muss man dann im IE das menu hoovern um es zu sehn aber auch nur teilweise, weil mache menüpunkte seh ich gleich...
ohne das float left ist das menu ganz normal immer ganz sichtbar

deswegen war meine frage ob es noch andere alternativen gibt um diese paar pixel nach grafiken weg zu bekommen, was ich so gelesen habe hat das was mit white-space zu tun oder so...

habs anscheinend nicht gut genug erkärt was das eigentlich problem ist

hoffe ihr versteh das nun besser

mfg,
destroy90210

fricca · #5 (**permalink**) 12.12.2006, 11:17

Zitat:

noch andere alternativen gibt um diese paar pixel nach grafiken weg zu bekommen

DOCTYPE-Switch: Unerklärliche Lücken zwischen Elementen

destroy90210 · #6 (**permalink**) 12.12.2006, 13:56

thx werde mir das heute oder morgen mal ansehn

aber schaut ja recht gut aus das ich da ne passende lösung finden werde

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Große Grafiken sinnvoll einbringen	schneiderinho	Grafik, Design, Typografie	1	29.10.2010 08:30
Dynamische Navigationsleiste horizontal, vertikal	Faven	CSS	6	28.06.2010 15:06
horizontale navigation aus meheren grafiken??	celine@23	CSS	16	14.01.2007 15:03
Anfänger erbittet ein paar Tips.	Dr.Crow	(X)HTML	5	20.06.2006 11:47
2 Grafiken als Hintergrund ...	PiTi	CSS	3	07.09.2005 23:33