Beste,

In IE6 en FF3 wordt mijn site juist weergegeven, maar in IE7 zitten 2 kleine bugs, 1 is bij het menu daar hoort een pijltje te staan onder de menu items, zoals Home als je erover gaat hier zie je maar 1 bruin puntje, en aan de linke kant onderaan staan de buttons niet in het midden.. Hoe kan ik dit oplossen zonder een andere CSS. document aan te maken.

Het gaat om de website; http://ronniekoestering.nl
De bugs; http://ronniekoestering.nl/images/ie7.bmp

style.css

Code:

* { 
 margin : 0; 
 padding : 0; 
 border : none; 
} 
html { 
 background : #330033; 
 height : 100%; 
} 
body { 
 width : 559px; 
 height: 100%;
 font : 12px "Trebuchet MS"; 
 margin : 0 auto; 
 color : #90734d; 
 background : url('images/body-bg.jpg') no-repeat; 
 padding : 0 99px 0 92px; 
} 
br.clear { 
 clear : both; 
 font-size : 1px; 
 height : 1px; 
} 
div#top { 
 height : 188px; 
} 
ul#topmenu { 
 list-style : none; 
 text-align : center; 
 height : 20px; 
 padding : 3px 0 0 0; 
} 
ul#topmenu li { 
 display : inline; 
 font-weight : bold; 
 height : 20px; 
 padding : 3px 0 0 0; 
} 
ul#topmenu li a { 
 color : #fff; 
 text-decoration : none; 
 padding : 0 15px 2px 15px; 
} 
ul#topmenu li a:hover, ul#topmenu li a.active { 
 background : url('images/topmenu-hover.jpg') no-repeat center bottom; 
 color : #90734d; 
} 
div#content { 
 height : 271px; 
 position: relative; 
} 
div#content div#left { 
 float : left; 
 width : 288px; 
 text-align : center; 
 padding : 27px 0 0 0; 
} 
div#content div#left p { 
 font-weight : bold; 
 line-height : 14px; 
} 
div#content div#left a { 
 color : #90734d; 
} 
div#content div#left .item { 
 border : 2px solid #c6a67d; 
} 
div#content div#left .buttons { 
 padding : 3px 0 0 55px; 
 margin-top: 8px; 
 margin-left: -17px; 
} 
div#content div#left .button { 
 float : left; 
} 
div#content div#left span { 
 float : left; 
 font-weight : bold; 
 padding : 5px 5px; 
} 
div#content div#left span a { 
 text-decoration : none; 
} 
div#content div#right { 
 float : left; 
 width : 264px; 
 color : #90734d; 
} 
div#content div#right p { 
 line-height : 14px; 
 padding : 12px 5px 0 8px; 
} 
div#content div#right a { 
 color : #90734d; 
} 
div#content div#right span { 
 float : left; 
 font-weight : bold; 
 padding : 5px 5px; 
} 
div#content div#right span a { 
 text-decoration : none; 
} 
div#content div#right ul { 
 list-style : none; 
} 
div#content div#right ul li { 
 float : left; 
 padding : 12px 0 0 12px; 
} 
div#content div#right ul li img { 
 border : 2px solid #c6a67d; 
} 
div#google { 
 position: absolute; 
 right: 17px; 
 bottom: 8px; 
} 
div#footer p { 
 text-align : center; 
 color : #90734d; 
 padding : 6px 0 0 0; 
}

Alvast bedankt voor de moeite..

Met vriendelijke groet,
Ronnie Koestering
Aanvullend bericht:
Hmm, zie nu ook dat in IE6 de buttons onderaan ook niet in het midden staan

ul#topmenu li a {
color : #fff;
text-decoration : none;
padding : 0 15px 2px 15px;
}
ul#topmenu li a:hover, ul#topmenu li a.active {
background : url('images/topmenu-hover.jpg') no-repeat center bottom;
color : #90734d;
}

Als je in allebei de opmaken dit zet?
display:block;
Ik zie nu pas dat dit menu in het midden staat gecentreerd, vandaar
dat mijn manier niet werkte. Misschien werkt die display:block wel?

Ik zie dat er bij de buttons gebruik is gemaakt van tabellen? Is daar een rede voor, want mij lijkt het verstandiger om het in divisions te doen.
In de tabel staat: width=1%, probeer zo min mogelijk met procenten te werken aangezien browsers soms anders met procenten werken.
Ook de spaties die zijn gebruikt inplaats van padding of margin helpt niet
bij het crossbrowser maken ;)

Een oplossing hiervoor is waarschijnlijk:

<div id="buttons">

<div id="button_prev">

<a href="javascript:chgImg(-1)">Vorige</a>

<a href="javascript:chgImg(-1)"><img src="images/prev.jpg" class="button" alt="Volgende" /></a>

</div>

<div id="button_next">

<a href="javascript:chgImg(1)">Volgende</a>

<a href="javascript:chgImg(1)"><img src="images/next.jpg" class="button" alt="Volgende" /></a>

</div>

</div>

In css kan de styling dan worden opgemaakt.

Gr. Gijsbert

Iemand anders nog een tip?

Het komt voor de buttons door de padding in je div "left".