[Firefox] Site niet geheel compatible, hoe fix ik dit?

[Verwijderd]

Ik heb weer wat cross-browser gezeik
Ik ben momenteel een website aan het knutselen voor m'n dj-bezigheden, ik doe dat op basis van WordPress en de daarvoor gemaakte skin 'Yellesh'. Het probleem waar ik tegenaan loop in firefox is ook aanwezig in de niet-gemodificeerde versie van de skin.

Als je www.filmkings.com/index.php ziet in IE werkt alles naar behoren. Als je hem in FireFox bekijkt zie je dat de lijn, die de 'sidebar' scheidt van het linkerdeel, niet goed aansluit (zowel boven als onder) en dat de inhoud van de sidebar te ver naar rechts is verschoven. Ik kan er maar niet achter komen wat nou de oorzaak hier van is, ik hoop dat jullie me hierbij kunnen helpen.

Op 3 van de pagina's, nml index.php, page.php en single.php staat de verwijzing naar sidebar.php als volgt:

HTML:

<td width="232px" class="sidebar" valign="top">
                <!-- Begin Sidebar Content -->
                <?php get_sidebar(); ?>
                <!-- End Sidebar Content -->
                </td>

Origineel was width="30%" maar ik probeerde even of een fixed width de oplossing zou bieden. Pure gok idd .

De pagina sidebar.php bevat weinig bijzonders, nml wat links en <ul>'s en het google-adsense script. Aan die laatste zal het niet liggen want zonder dat script is het probleem er nog steeds.

In style.css staat het volgende;

HTML:

.sidebar {
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-size: 10pt;
    color: #FFFFFF;
    border-left: 5px solid #FFFFFF;
}

Als iemand me kan helpen zou ik het erg fijn vinden, ik ben er met oa GoTsearch en google niet uitgekomen . Als ik nog andere delen van de code moet posten, laat het me ff weten.

[Raynman]

Ik heb momenteel geen IE en geen FF, maar in Konqueror en Opera raakt die middelste lijn de buitenrand inderdaad niet. Zal weinig met width te maken hebben denk ik, maar kijk eens bij jouw code hierboven, het lijntje onder jouw "fix" (geen eenheid bij width in html).

Lijkt erop dat je sidebar niet alles vult (border zit bij sidebar, er is dus een ruimte tussen sidebar en rand daarboven). Waarschijnlijk een padding/margin in parent element.

[Verwijderd]

D'oh, je hebt gelijk Wat stom van me. Padding voor boven en onder voor het table element stonden op 4px, door die naar 0px te veranderen lijkt het probleem opgelost. Thanks een boel man .

De linker en rechter padding van table stonden op 8px, ik dacht door die naar 0 te veranderen misschien het 2e probleem op te lossen (de positie van de content van de sidebar, die nog te veel naar rechts is geplaatst). Dit hielp echter niet. Kan iemand me hierbij nog in de goede richting wijzen?

EDIT: Is dit misschien de boosdoener? De file style.inc waar dit in staat;

HTML:

<style>
    body {
        margin: 0px 0px 0px 0px;
        background: url(<?php bloginfo('stylesheet_directory'); ?>/images/djachtergrond_groot.jpg);
        background-repeat: repeat-x;
        background-color: #000000;
    }
    
    li {
        display: list-item;
        list-style-image: url(<?php bloginfo('stylesheet_directory'); ?>/images/limage.gif);
        list-style-position: inside;
        list-style-type: none;
        font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
        font-size: 8pt;
        vertical-align: middle;
        margin: 0;
    }
    
    .children li {
        display: list-item;
        list-style-image: url(<?php bloginfo('stylesheet_directory'); ?>/images/limage.gif);
        list-style-position: inside;
        list-style-type: none;
        font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
        font-size: 8pt;
        vertical-align: middle;
        margin: 0;
        font-weight: normal;
    }
</style>

Ik zag hier in eerste instantie geen kwaad in omdat er alleen een verwijzing naar stond in header.php. Maar die list item is natuurlijk wel belangrijk voor de sidebar.

[ Voor 61% gewijzigd door Verwijderd op 23-10-2006 23:42 ]

[Boelie-Boelie]

Die table-cell waar de list instaat, heeft margins, probeer dat eens te veranderen. Verder kun je de padding van de list op 0 zetten.

Overigens is pt voor font-sizes bedoeld voor print en kun je beter px gebruiken, of nog beter ems en/of procenten (zie url=http://css-discuss.incutio.com/?page=UsingFontSize]Using font-size[/url] en de links op die pagina).

[Verwijderd]

Ik heb al een heleboel met margins en padding geprobeerd, maar nog geen succes. Moet ik toch in deze hoek zoeken of kan het ook ergens anders aan liggen? En bedankt voor de hulp tot zover

[moozzuzz]

Cascading Stylesheet:

.sidebar { 
    width: 232px; // of 30%;
}

ipv in de html te specifiëren.

waarom div'eren als alles in tables staat?

[Verwijderd]

Bedankt voor de suggestie, maar het maakt geen verschil

[Reinier]

offtopic:
Je background-image repeat, en dat is niet mooi bij hoge resoluties. Of is het de bedoeling?

[Verwijderd]

offtopic:
Was idd de bedoeling, maar ik zal het uit zetten, is idd mooier. Zullen trouwens weinig mensen zien, moet je op 1600 of hoger zitten .

[ Voor 4% gewijzigd door Verwijderd op 26-10-2006 00:24 ]

[Mayco]

Verwijderd schreef op donderdag 26 oktober 2006 @ 00:24:

offtopic:
Was idd de bedoeling, maar ik zal het uit zetten, is idd mooier. Zullen trouwens weinig mensen zien, moet je op 1600 of hoger zitten .

als je resolutie breder is dan 1280 heb je het al zitten, en das toch al meer...

[Verwijderd]

Oeps, je hebt gelijk

Maar ontopic: ik zou nog erg graag er achter komen waarom de inhoud van de sidebar wel 'gecentreerd' lijkt in firefox (wat dus niet de bedoeling is). Dus zijn er nog mensen met suggesties?

[Boelie-Boelie]

Als ik met de Webdeveloper Toolbar in FF de padding van de ul in style.css op 0 zet, springt de list toch echt naar links...

[Verwijderd]

Ik ben echt niet bij de les Bedankt Boelie-Boelie. Trouwens, super handige toolbar! Dat uploaden de hele tijd is zo irritant...

Bedankt jongens, nu is de site bijna helemaal hetzelfde in FF als in IE op een paar kleine dingetjes na