Jak porovnat dva HTML elementy?

Dobrý den,

Mám dva weby. - first a second

Oba mají mapu pomocí stejného pluginu. S tím rozdílem, že první je zobrazuje špatně a nejsem si jistý proč.

I když to, kvůli velikosti mapy, není patrné, není rozdělena nahodile. Mapa se nenačítá celá, ale je rozdělena na obdélníky, které se postupně načítají. A právě jejich rozdělení je tam zobrazeno.

Nevím, jestli se to nastavuje pomocí CSS (nic jsem nenašel). Ale napadlo mě, oba elementy porovnat. A z toho by se snad dalo vyčíst, v čem se konkrétně liší a co způsobuje to zobrazení.

Jenže jsem nic smysluplného nenašel. Pouze mi to nabídlo nějaké rozšíření do Chromu, které mi skoro nic neřeklo.

Neznáte, prosím Vás, free rozšíření/web/software pro porovnání html elementů? Nebo existuje jiný způsob, jak zjistit příčinu?

Děkuji

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny

Předmět	Autor	Datum
Iný spôsob, ako zistiť príčinu, je použiť web inspector a pozrieť sa na to, odkiaľ to zobrazené rozd… moose 21.07.2019 00:02	moose	21.07.2019 00:02
Problém vyřešen. U obrázku nestačí pouze uvést všechny jeho třídy, ale i třídy divu, ve kterém je.… poslední MichalDM 21.07.2019 23:43	MichalDM	21.07.2019 23:43

Iný spôsob, ako zistiť príčinu, je použiť web inspector a pozrieť sa na to, odkiaľ to zobrazené rozdelenie prišlo.

V wp-content/themes/mantra/style.css je pravidlo, ktoré pridáva okraj všetkým obrázkom:

.mantra-image-seven .entry-content img[class*='align'], .mantra-image-seven .entry-content [class*='wp-block'][class*='align'] img, .mantra-image-seven .entry-summary img[class*='align'], .mantra-image-seven .entry-summary [class*='wp-block'][class*='align'] img {
    padding: 7px;
    ...

Problém vyřešen. U obrázku nestačí pouze uvést všechny jeho třídy, ale i třídy divu, ve kterém je.

Konečný kód je tedy

.mantra-image-seven .entry-content [class*='wp-block'][class*='align'] img, .mantra-image-seven .entry-summary img[class*='align'] {
    padding: 0px;
    border: none;
}

pro skrytí ohraničení rozdělení mapy a jejich okrajů

.leaflet-pane.leaflet-marker-pane .leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive {
    background-color: transparent;
}

pro průhlednost značky.

Jedná se o web ve WordPressu, šablona Mantra a plugin ultimate map by supstic.

Akorát nechápu, proč u jedné mapy k ničemu nedojde, ale to není podstatné.

Každopádně díky

Zpět do poradny Odpovědět na původní otázku Nahoru