BurgerEditor導入時のテキストウィジェットの高さ不正の件

こんにちは

現在独自サーバ上にbaserCMS(nada_icons)を導入し社内ポータルの構築を行っております。

コンテンツをある程度作成した段階でBurgerEditorプラグインを導入した所、
一部ウィジェットのレイアウト(高さ) が崩れ対応に苦慮しております。

おそらくBurgerEditrで利用しているスタイルと重複しているのではと
思っております。

作成したウィジェットは、標準サイドバーにコアウィジェット(テキスト)で
作成しています。

添付ファイルのCSS1/CSS2は、FireFoxのデバックモードで表示したさいのものです。

本来は、CSS3の左上のシステムへのリンクのような表示(高さ)を行いたいです。

初心者の質問で申し訳ありませんが、具体的な対処方法についてご教示願います。


■ BaserCMSのバージョン：3.0.12
■ 追加プラグイン：Burger Editor 2.8.0
■ サーバ種別：独自サーバ
■ 設置フォルダ：　[サブフォルダ]
■ 利用しているデータベース：　[PostgreSQL]
■ PHPスキル（自己評価）：　[E]
■ OSの種類：CentOS 7.2
■ PHPのバージョン：5.4.16
■ CakePHPのバージョン：2.5.9
■ データベース種類・バージョン：PostgreSQL 9.2.15
■ セーフモード：Off
■ 適用テーマ：nada icon


css3.zip

Yoshyさん　こんにちは。

添付画像していただいている画像のcss2で、divタグについているpaddingが原因であることは、想像できるのですが、
そのpaddingがどこで指定されているのか添付の画像ではわかりません。

FireFoxのデバックモードで、左下のCSSの表示を「ボックスモデル」ではなく「ルール」に変更したら、どのCSSの何行目のスタイルが効いているのかわかります。
また、ブラウザ内でスタイルを書き換えた場合の見え方もプレビューできますので、まず、そちらで確認されてみてはどうでしょうか？

katokaisyaさん

お返事が遅くなり申し訳ありません。

ご助言いただいたようにFireFoxのデバッグモードにてルールを見ながら確認しました。

どうもbaserCMSがテキストウィジェットで生成するHRに対しバーガーエディタの
bge_edtitor.cssのHR要素に対するスタイルが適用されているようです。

HR要素は、baserCMS側で生成しているようですので
取り急ぎ、baserCMSのソースを見てテキストウィジェット生成部を
確認してみます。

本件、style.cssに直接下記定義を追加する事で、解決しました。

.widget hr {
margin: 0px;
}

katokaisyaさん　デバックへの助言、とても参考になりました。

ほとんどCSSを触ったことがなかったので苦労しましたけど、
CSSの適用順番や優先順位について勉強することができました。

ご協力ありがとうございました。