problema CSS -IE

Salut. Am o problema cu IE, nu vrea sa afiseze deloc cum trebuie si nu stiu ce sa ii mai fac.

Asa ar trebui sa afiseze:

 mozzila.JPG   37.67K   23 downloads


Si asa afiseaza:

 ie_problem.JPG   34.6K   22 downloads


Asta e codul:

HTML:

<div id="categ_box">
                 <div class="box_header">
                     <div class="box_header_left"></div>
                        <div class="box_header_center">Anunturi pe categorii:</div>
                        <div class="box_header_right"></div>
                    </div><!-- /#box_header -->
                    <div class="categ_box_main">
                     <div class="Category1">
                         <div class="CategoryHeader">
                                <div class="Category_left"></div>
                                <div class="Category_right"></div>
                                <div class="Category1Head">
                                 <img src="images/auto.gif" alt="Anunturi Auto, Moto" title="Anunturi Auto, Moto" />
                                    <h3 style="display: inline; margin-left:10px;"><a href="#" title="Anunturi Auto, Moto">Auto, Moto</a></h3>
                                </div>
                            </div>
                            <ul>
                                 <li><a href="#">Text</a>, </li>
                                    <li><a href="#">Text</a>, </li>
                                    <li><a href="#">Text</a></li>
                       </ul>
                        </div> <!-- /.Category1 -->
                        <div class="Category1">
                         <div class="CategoryHeader">
                                <div class="Category_left"></div>
                                <div class="Category_right"></div>
                             <div class="Category1Head">
                                 <img src="images/imobiliare.gif" alt="Anunturi Imobiliare" title="Anunturi Imobiliare" />
                                    <h3 style="display: inline; margin-left:10px;"><a href="#" title="Anunturi Imobiliare">Imobiliare</a></h3></div>
                            </div>
                        </div> <!-- /.Category1 -->
                        <div class="Category2">
                         <div class="CategoryHeader">
                                <div class="Category_left"></div>
                                <div class="Category_right"></div>
                         <div class="Category2Head">
                                 <img src="images/jobs.gif" alt="Anunturi Joburi" title="Anunturi Joburi" />
                                    <h3><a href="#" title="Anunturi Joburi">Joburi</a></h3>
                                </div>
                            </div>
                        </div> <!-- /.Category2 --><br /><br /><br /><br />
..................................
    </div><!-- /#categ_box_main -->
</div> <!-- /#categ_box -->


CSS:

#categ_box
{
width: 640px;
height: 440px;
margin:10px;
}

.categ_box_main
{
padding:13.5px;
margin: 5px 0px 0px 0px;
background-color:#CCCCCC;
height:380px;
}

.categ_box_main li
{
list-style:none;
float:left;
}

/*Aici sunt 3 divuri pt conturile rotunjite*/

.CategoryHeader
{
font-size: 18px;
background:transparent url(../images/categoryHead_bg.jpg);
width: 195px;
height: 31px;
margin:0px;
padding:0px;
float:left;
}

.Category_left
{
margin:0px;
padding:0px;
float:left;
background:transparent url(../images/categoryHead_bg_left.gif) no-repeat left;
width:10px;
height:29px;
}

.Category_right
{
margin:0px;
padding:0px;
float:right;
background:transparent url(../images/categoryHead_bg_right.gif) no-repeat right;
width:10px;
height:29px;
}

/******************************/

/*Category1 - Pt  auto si imobiliare */

.Category1
{
margin-bottom:0px;
padding:0px;
margin-right:10px;
max-width:220px;
float:left;
}

.Category1Head
{
text-align:center;
font-size: 18px;
margin:0px 0px 3px 5px;
padding:2px;
float:left;
}

.Category1 img
{
padding:0px;
width:35px;
float:left;
margin-left: 0px;
margin-top:-10px;
}

.Category1Head a
{
text-decoration:none;
color:black;
}

.Category1 li a:hover
{
text-decoration:none;
color:red;
}

/*Category2 -   pt JOBURI*/
.Category2
{
margin-bottom:0px;
float:left;
max-width:230px;
}

.Category2Head
{
margin:0px 0px 3px;
padding:2px;
text-align:center;
font-size: 18px;
}

.Category2 img
{
padding:0px;
width:35px;
float:left;
margin-left: 10px;
margin-top:-10px;
}

.Category2Head a
{
text-decoration:none;
color:black;
}

.Category2 li a:hover
{
text-decoration:none;
color:red;
}

/******************************/
/***********THE END***********/



Problema asta apare dupa ce am adaugat:

<ul>
   <li><a href="#">Text</a>, </li>
   <li><a href="#">Text</a>, </li>
   <li><a href="#">Text</a></li>
</ul>

Edited by cnnbs, 30 December 2009 - 00:51.

ai incercat sa micsorezi putin casutele alea - butoanele adica ?

si sa te asiguri ca nu exista nici o margine setata aiurea sau vreun padding ?!

poti incerca sa configurezi la toate margin si padding ( pe 0 ) .

si nu stiu , acum banuiesc ca poate ai motivele tale , dar de ce atat de complicat codul ?

de ce nu apelezi la niste png'uri standard pentru orice alt browser si niste gif'uri pentru ie5/6 ?! ( vizavi de backgroundul butoanelor ) .

si apoi sa folosesti pur si simplu unordered list ( ul ) si display inline ...

Edited by omudelacolt, 30 December 2009 - 01:37.

omudelacolt, on 30th December 2009, 01:31, said:

am *{margin: 0; padding:0} la inceputul fisierului.

Repet, apare asa doar cand scriu:

<ul>
<li><a href="#">Text</a>, </li>
<li><a href="#">Text</a>, </li>
<li><a href="#">Text</a></li>
</ul>

atunci inseamna ca are legatura cu a:

cauta sa configurezi si a:link/visited/hover . tu in ce ie ai problemele astea ?

( de ce virgulele alea )

au , scuze , acum am vazut linkurile alea 3 de jos ...

dar de ce ai nevoie de ele acolo ?

Edited by omudelacolt, 30 December 2009 - 01:55.

omudelacolt, on 30th December 2009, 01:42, said:

Linkurile alea sunt niste subcategorii.

Vad ca problema nu e de la "a" pt ca am sters toata lista si am pus un paragraf in loc de asta si tot asa face.

Cred ca e o problema cu float-ul...

Daca scriu in paragraf doar un caracter, categoria aia JOBURI e pozitionata corect, insa caracterul pe care il scriu e scris in dreptul categoriei AUTO,MOTO( nu sub el, cum ar trebui).


EDIT:  Am observat ca daca micsorez padding-ul la divul principal categoria JOBURI e pozitionata bine, dar problema e ca apare o margine intre categoria AUTO si categoria Imobiliare atunci cand pun paragraful acela (subategoria).

 untitled.JPG   35.16K   6 downloads

Edited by cnnbs, 30 December 2009 - 02:22.

pai incearca sa il bagi in acelasi div cu butonul .

am vazut ca e bagat in afara divului de buton .

omudelacolt, on 30th December 2009, 02:16, said:

Esti un geniu   

Nu stiu de ce credeam ca am incercat asta deja

ehh iti mai scapa chestiile astea uneori .

eu am stat o data o ora sa fac ceva pe un continut si de-abia dupa o ora am vazut ca era setat in css cu content-wrapper iar in html cu contentwrapper )=))