[CSS] FF <--> IE border probleem

[imp4ct]

Ik heb nu bijna een uur lopen zoeken om m'n design zowel in IE als in FF 't zelfde te maken en met FF had ik al eerst moeilijkheden, maar in IE wilt het maar niet lukken.

Het probleem...



Nu als je even op de afbeelding klikt, dan zie je aan de rechterkant dat bij IE hij altijd een "kleine" spatie laat. Waarom, weet ik niet, want de CSS code van links & rechts zijn eigenlijk identiek, buiten het feit gewoon dat links en rechts zijn omgedraaid.

CSS-code

code:

//css voor een linkse hoofding
.main_leftbutton_header {
 background-color: #666699;
 color: #F5F5F5;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 11px;
 text-align: left;
 vertical-align: middle;
 padding-top: 3px;
 padding-bottom: 3px;
 padding-left: 2px;
 padding-right: 2px;
 border-right: 1px solid;
 border-bottom: 1px solid;
 border-top: 1px solid;
 border-color: #6D6D6D;
}

//css voor een link die in de linkse balk staat
//en niet de allerlaaste link is
.main_leftbutton_link {
 background-color: #EFEFEF;
 color: #000000;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 11px;
 text-align: left;
 vertical-align: middle;
 padding-left: 2px;
 padding-right: 2px;
 padding-top: 2px;
 padding-bottom: 3px;
 border-right: 1px solid;
 border-bottom: 1px solid;
 border-right-color: #6D6D6D;
 border-bottom-color: #DFDFDF;
}

//css voor allerlaatste link die zich
//in de linkse balk bevind
.main_leftbutton_lastlink {
 background-color: #EFEFEF;
 color: #000000;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 11px;
 text-align: left;
 vertical-align: middle;
 padding-left: 2px;
 padding-right: 2px;
 padding-top: 2px;
 padding-bottom: 3px;
 border-right: 1px solid;
 border-bottom: 1px solid;
 border-right: 1px solid;
 border-color: #6D6D6D;
}

//css voor een rechtse hoofding
.main_rightbutton_header {
 background-color: #666699;
 color: #F5F5F5;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 11px;
 text-align: right;
 vertical-align: middle;
 padding-top: 3px;
 padding-bottom: 3px;
 padding-left: 2px;
 padding-right: 2px;
 border-left: 1px solid;
 border-bottom: 1px solid;
 border-top: 1px solid;
 border-color: #6D6D6D;
}

//css voor een link die in de rechtse balk staat
//en niet de allerlaaste link is
.main_rightbutton_link {
 background-color: #EFEFEF;
 color: #000000;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 11px;
 text-align: right;
 vertical-align: middle;
 padding-left: 2px;
 padding-right: 2px;
 padding-top: 2px;
 padding-bottom: 3px;
 border-left: 1px solid;
 border-bottom: 1px solid;
 border-left-color: #6D6D6D;
 border-bottom-color: #DFDFDF;
}

//css voor allerlaatste link die zich
//in de rechtse balk bevind
.main_rightbutton_lastlink {
 background-color: #EFEFEF;
 color: #000000;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 11px;
 text-align: right;
 vertical-align: middle;
 padding-left: 2px;
 padding-right: 2px;
 padding-top: 2px;
 padding-bottom: 3px;
 border-left: 1px solid;
 border-bottom: 1px solid;
 border-color: #6D6D6D;
}

Ik weet niet hoe'k dit zou moeten oplossen, persoonlijk HAAT ik die rommel van een IE, maar jah, 'k vind dat je website zowel in FF als in IE hetzelfde eruit moet zien... anywayzz, als iemand hier een oplossing voor weet, many thx in advance.

[ Voor 9% gewijzigd door imp4ct op 27-06-2005 02:37 ]

[crisp]

Dat 'puntje' is in IE nog gewoon een stukje van je border-bottom. Je kan het beste die borders links en rechts op een containing element zetten.

[imp4ct]

crisp schreef op maandag 27 juni 2005 @ 08:32:
Dat 'puntje' is in IE nog gewoon een stukje van je border-bottom. Je kan het beste die borders links en rechts op een containing element zetten.

En wat is een "containing element", als ik mag vragen en hoe zet ik dit erop ??
'k Heb ook nog een extra vraagje, in FF werkt dit wel, in IE niet. 'k Heb dit al zelf eens opgelost door met id's enz te gaan werken, redelijk omslachtig, kan het ook makkelijker ?

code:

.main_leftbutton_link:hover {
 text-decoration: none;
 background-color: #FFFFFF;
}

[ Voor 33% gewijzigd door imp4ct op 27-06-2005 09:25 ]

[Zoefff]

Je menu is waarschijnlijk een lijst, ul met li erin? Dan is de ul het containing element. Geef die een linker- en rechter-border, en geef de li items een top- en bottom-border

:hover werkt in IE alleen voor het a element, in FF werkt het op alle elementen (zoals bedoeld).

Overigens, je CSS zit wel wat omslachtig en véél te uitgebreid in elkaar. Je definieert steeds weer de font-family, font-size, text-align en vertical-align, terwijl dat voor het hele menu hetzelfde is. Definieer die dingen (wederom) voor het containing element, dan hoef je ze voor de sub-items niet steeds weer te definieren. Scheelt dataverkeer, maar maakt vooral je CSS overzichtelijker

[ Voor 61% gewijzigd door Zoefff op 27-06-2005 09:31 ]

[imp4ct]

Zoefff schreef op maandag 27 juni 2005 @ 09:27:
Je menu is waarschijnlijk een lijst, ul met li erin? Dan is de ul het containing element. Geef die een linker- en rechter-border, en geef de li items een top- en bottom-border

:hover werkt in IE alleen voor het a element, in FF werkt het op alle elementen (zoals bedoeld).

Overigens, je CSS zit wel wat omslachtig en véél te uitgebreid in elkaar. Je definieert steeds weer de font-family, font-size, text-align en vertical-align, terwijl dat voor het hele menu hetzelfde is. Definieer die dingen (wederom) voor het containing element, dan hoef je ze voor de sub-items niet steeds weer te definieren. Scheelt dataverkeer, maar maakt vooral je CSS overzichtelijker

Neen ik werk eigenlijk nog met het "oude" systeem.

code:

<tr>
  <td class=""></td>
<tr>

Dat laatste dat weet ik maar ik heb soms gemerkt dat wanneer je dus die elementen zo langs elkaar zet en dan je CSS uitvoert, het niet altijd werkt. Je hebt natuurlijk gelijk en 'k ga dit nog wel aanpassen , thx for the tip.

'k Ga eens proberen het op te lossen via <ul> & <li>

[ Voor 50% gewijzigd door imp4ct op 27-06-2005 09:43 ]

[Zoefff]

Maar ook dan werkt het natuurlijk. Geef de table of tr (volgens mij werkt dat niet) de left- en right-border, en de td de top- en bottom-border

[Zoefff]

HTML:

<ul id='menu_links'>
    <li class='kop'>Kop</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

Cascading Stylesheet:

body {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    background-color:#BBBBBB;
}
#menu_links {
    text-align: left;
    vertical-align: middle;
    border-left:1px solid #6D6D6D;
    border-right:1px solid #6D6D6D;
    padding:0px;
    margin-left:0px;
    background-color:#EFEFEF;
    width:150px;
}
#menu_links li {
    list-style-type:none;
    border-top:1px solid #DFDFDF;
    border-bottom:1px solid #DFDFDF;
    padding:3px 2px 3px 15px;
}
#menu_links .kop {
    background-color: #666699;
    color: #F5F5F5;
    border-top:1px solid #6D6D6D;
    border-bottom:1px solid #6D6D6D;
}

Zoiets dus.

[imp4ct]

Zoefff schreef op maandag 27 juni 2005 @ 09:44:
Maar ook dan werkt het natuurlijk. Geef de table of tr (volgens mij werkt dat niet) de left- en right-border, en de td de top- en bottom-border

'k Heb het kunnen oplossen met de <ul> & <li>, handiger denk ik toch zelf, want nu moet ik maar 1x meegeven dat hij rechts & links een border moet plaatsen. 't probleem is nu dat hij bolletjes zit te plaatsen, 'k weet het een dikke newb vraag, maar hoe krijg ik ze weg

edit:

'k Heb juist je code hierboven gezien, 'k denk dat ik het nu wel zal vinden, thx !!!

[ Voor 13% gewijzigd door imp4ct op 27-06-2005 10:04 ]

[Zoefff]

Zie bovenstaande CSS, met list-style-type dus

[imp4ct]

Zoefff schreef op maandag 27 juni 2005 @ 10:03:
Zie bovenstaande CSS, met list-style-type dus

OK, thx .. 'k zit nog met een paar foutjes .. 'k denk dat het komt omdat ik met deze structuur nu werk, ik kom er wel uit . Bedank in ieder geval alle 2

code:

<table>
<tr>
  <td>
  <ul>
    <li></li>
    <li></li>
       ....
    <li></li>
    <li></li>
  </ul>
  </td>
</tr>
</table>

[Zoefff]

Waarom zet je die table er nou omheen?

[Kayshin]

Zoefff schreef op maandag 27 juni 2005 @ 09:27:
Je menu is waarschijnlijk een lijst, ul met li erin? Dan is de ul het containing element. Geef die een linker- en rechter-border, en geef de li items een top- en bottom-border

:hover werkt in IE alleen voor het a element, in FF werkt het op alle elementen (zoals bedoeld).

Overigens, je CSS zit wel wat omslachtig en véél te uitgebreid in elkaar. Je definieert steeds weer de font-family, font-size, text-align en vertical-align, terwijl dat voor het hele menu hetzelfde is. Definieer die dingen (wederom) voor het containing element, dan hoef je ze voor de sub-items niet steeds weer te definieren. Scheelt dataverkeer, maar maakt vooral je CSS overzichtelijker

Daar heb ik ondertussen een oplossing voor gekregen door een medestagiair: IE7, een JS extensie, die allerlei bugs die IE heeft omzeilt en waarmee valid code kan, zoals :hover op alle elementen, een attr[name="bla"] mogelijkheid en meer mooie dingen. Alleen het display: table-cell etc is nog niet zo ooi werkend. Ook png transparancy werkt nu...

Box model werkt ook eindelijk hiermee!!!

Enige wat je hoeft te doen is bovenin je head tags een paar js te includen en thats it!

http://dean.edwards.name/IE7/

[ Voor 6% gewijzigd door Kayshin op 27-06-2005 16:12 ]

[krvabo]

Als je met een table werkt zijn die stukjes die openblijven geloof ik op te lossen met cellspacing="0" cellpadding="0" op de table te zetten. Ik weet het alleen niet zeker

[imp4ct]

Zoefff schreef op maandag 27 juni 2005 @ 09:59:

HTML:

<ul id='menu_links'>
    <li class='kop'>Kop</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

Cascading Stylesheet:

body {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    background-color:#BBBBBB;
}
#menu_links {
    text-align: left;
    vertical-align: middle;
    border-left:1px solid #6D6D6D;
    border-right:1px solid #6D6D6D;
    padding:0px;
    margin-left:0px;
    background-color:#EFEFEF;
    width:150px;
}
#menu_links li {
    list-style-type:none;
    border-top:1px solid #DFDFDF;
    border-bottom:1px solid #DFDFDF;
    padding:3px 2px 3px 15px;
}
#menu_links .kop {
    background-color: #666699;
    color: #F5F5F5;
    border-top:1px solid #6D6D6D;
    border-bottom:1px solid #6D6D6D;
}

Zoiets dus.

Bedankt voor't voorbeeld, echt veel aan gehad, alles zit nu goed, enkel de laatste <ul> zou een #6B6B6B border vanonder moeten krijgen maar dat wil niet lukken als ik bij #menu_links " border-bottom:1px solid #6D6D6D;" zet, 'k weet niet waarom. Zoefff enig idee ?

[ Voor 8% gewijzigd door imp4ct op 27-06-2005 23:31 ]

[imp4ct]

Laat maar, 'k heb het opgelost, blijkbaar gebruikte ik de naam van een class al eens en daarmee flipte alles een beetje. Fel bedankt voor de hulp !!

[Zoefff]

Geen dank

[imp4ct]

Is dat probleem met die hovers in IE niet op te lossen ? Want 'k vind het knap vervelend, in FF kan ik nu mooie backgroundhovers maken, maar in IE blijf ik dan steken op een underline.

Daar moet toch een oplossing voor zijn niet ?

[ Voor 3% gewijzigd door imp4ct op 28-06-2005 12:45 ]

[Zoefff]

Jazeker, je kan een behavior toevoegen aan je CSS, een stuk javascript dat er voor zorgt dat :hover ook in IE goed werkt

Dat word (onder andere) beschreven in dit artikel. Het script moet je opslaan als csshover.htc, en aan je stylesheet toevoegen:

Cascading Stylesheet:

body {
   behavior:url("csshover.htc");
}

Als het goed is, kan je dan ook in IE :hover voor elk element gebruiken

[ Voor 12% gewijzigd door Zoefff op 28-06-2005 12:53 ]

[imp4ct]

Zoefff schreef op dinsdag 28 juni 2005 @ 12:52:
Jazeker, je kan een behavior toevoegen aan je CSS, een stuk javascript dat er voor zorgt dat :hover ook in IE goed werkt

Dat word (onder andere) beschreven in dit artikel. Het script moet je opslaan als csshover.htc, en aan je stylesheet toevoegen:

Cascading Stylesheet:

body {
   behavior:url("csshover.htc");
}

Als het goed is, kan je dan ook in IE :hover voor elk element gebruiken

Damd Zoefff, heb je nog zo van die handige websites ofzo, want echt deze is mega handig, echt fel bedank "again"

[b19a]

ik heb net lopen spelen met wat scripts van "IE7". Deze scripts zorgen ervoor dat een groot deel van de IE6 bugs worden omzeilt.