HTML / CSS изображения слева и текст справа. Мульти-браузер

Question

HTML / CSS изображения слева и текст справа. Мульти-браузер

0

Я пытаюсь создать газетную панель с изображениями и текстом. Я могу заставить его работать нормально с отдельным браузером, т.е. (Chrome), но если я открою его в Firefox, он испортит формат. Есть ли простое решение этой проблемы? Я не понимаю, почему код не работает на другом broswer??

Я включил ссылку на код, так как я сказал, что это не работает с несколькими браузерами. Я могу поиграть с ним, чтобы он работал только с одним.

Благодарю.

http://jsfiddle.net/f4jfj/1/

HTML

<body> 
<div id="newsBar">
    <img src="website-myhero.png" align="left" name="Ian Thorpe" style="margin: 10px 0 0 10px; margin-right: 5px;" height="80" width="80">
    <div id="newsBar-text" style="margin:7px;"><a href="News.html" class="link">  BREAKING NEWS: Ian Thorpe who recently went under the knife is unlikely, according to offcials, to ever...</a>
    </div>
    <img src="wikimedia.png" align="left" name="Rio 2016" style="margin: 10px 0 0 10px; margin-right:5px;" height="80" width="80">
    <div id="newsBar-text" style="margin: 14px 0 0 10px;"><a href="News.html" class="link"> Rio is to host the 2016 olympics games. The construction of the actual stadium is currently  ...</a>
    </div>
    <img src="media-olympics-au.jpg" align="left" name="Stephanie Rice" style="margin:10px 0 0 10px; margin-right: 5px;" height="80" width="80">
    <div id="newsBar-text" style="margin: -7px 0 0 10px;"><a href="News.html" class="link"> The Austrailian olympian, Stephanie Rice, has decided to hand in the towel this year. The three time olympic champion ...</a>
    </div>
    <img src="swimIreland-ie.jpg" align="left" name="UCD Race To Midnight" style="margin: 10px 0 0 10px; margin-right: 5px;" height="80" width="80">
    <div id="newsBar-text" style="margin: 18px 0 0 10px;"><a href="News.html" class="link">UCD recently hosted a charity swimming event in aid of Marymount university hospital and hospice. The event took place ...</a>
    </div>
    <img src="npr-org.jpg" align="left" name="M.Phelps" style="margin: 10px 0 0 10px; margin-right: 5px;" height="80" width="80">
    <div id="newsBar-text" style="margin: 18px 0 0 10px;"><a href="News.html" class="link">Micheal Phelps has annouced his retirement from the olympics this year, "I am getting older, and I do find it harder to recover." He said...</a>
    </div>
    <div id="newsBar-text" style="margin: 0 0 0 90px; font-size: 19px;"><a href="News.html" class="link"><br /><br />Read more news here</a>
    </div>
</body>

CSS

#newsBar {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #104979), color-stop(100%, #5198d3));
    background: -webkit-linear-gradient(top, #104979 0%, #5198d3 100%);
    background: -o-linear-gradient(top, #104979 0%, #5198d3 100%);
    background: -ms-linear-gradient(top, #104979 0%, #5198d3 100%);
    background: -moz-linear-gradient(top, #104979 0%, #5198d3 100%);
    border-top: 1px solid #336699;
    box-shadow: 1px 1px 5px -1px #000;
    border-right: -5px;
    height: 750px;
    width: 350px;
    opacity: 0.9;
    z-index: 99;
    margin: 0 0 0 0;
    /* top, right, bottom, left */
}
#newsBar img {
    margin-right: 5px;
    margin-bottom: 5px;
}
#newsBar-text {
    color: #ffffff;
    font-family: serif;
    font-size: 16px;
    word-wrap: break-word;
}
#newsBar-titleBox {
    height: 50px;
    width:350px;
    background-color: #0c4482;
    border-bottom: 1px solid #092545;
    box-shadow: 1px 1px 5px -1px #000;
    margin: -455px 0 0 900px;
}
#newsBarTitle {
    font-family: sans-serif;
    float:left;
    padding: 20px 10px 8px 10px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    font-size: 18px;
    letter-spacing: 2px;
}

Gary 16 апр. 2014, в 12:33

Источник

1

Ссылка не отображается.
Billy Moat 16 апр. 2014, в 10:13
0

Извините, я пытался выяснить, почему у него были проблемы с публикацией
Gary 16 апр. 2014, в 10:15

Теги:

html

css

cross-browser

1 ответ

Ещё вопросы

Извините, я пытался выяснить, почему у него были проблемы с публикацией

SW4 · Answer 1 · 2014-04-16T08-46-00.000Z

Firstly- переместите свой встроенный CSS в таблицу стилей, конфликтов немного. Во-вторых, просто поместите ваши изображения влево, добавьте clear:both для них, чтобы каждый отображался на новой строке, а затем измените несколько полей, предоставив текст набору width- и вуаля!

Демо-скрипт

HTML

<body>
    <div id="newsBar">
        <img src="website-myhero.png" />
        <div id="newsBar-text"><a href="News.html" class="link">  BREAKING NEWS: Ian Thorpe who recently went under the knife is unlikely, according to offcials, to ever...</a>

        </div>
        <img src="website-myhero.png" />
        <div id="newsBar-text"><a href="News.html" class="link"> Rio is to host the 2016 olympics games. The construction of the actual stadium is currently  ...</a>

        </div>
        <img src="website-myhero.png" />
        <div id="newsBar-text"><a href="News.html" class="link"> The Austrailian olympian, Stephanie Rice, has decided to hand in the towel this year. The three time olympic champion ...</a>

        </div>
        <img src="website-myhero.png" />
        <div id="newsBar-text"><a href="News.html" class="link">UCD recently hosted a charity swimming event in aid of Marymount university hospital and hospice. The event took place ...</a>

        </div>
    </div>
</body>

CSS

#newsBar {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #104979), color-stop(100%, #5198d3));
    background: -webkit-linear-gradient(top, #104979 0%, #5198d3 100%);
    background: -o-linear-gradient(top, #104979 0%, #5198d3 100%);
    background: -ms-linear-gradient(top, #104979 0%, #5198d3 100%);
    background: -moz-linear-gradient(top, #104979 0%, #5198d3 100%);
    border-top: 1px solid #336699;
    box-shadow: 1px 1px 5px -1px #000;
    border-right: -5px;
    height: 750px;
    width: 350px;
    opacity: 0.9;
    z-index: 99;
    margin: 0 0 0 0;
    /* top, right, bottom, left */
}
#newsBar img {
    margin: 10px 5px 0 10px;
    height:80px;
    width:80px;
    float:left;
    clear:both;
}
#newsBar-text {
    color: #ffffff;
    font-family: serif;
    font-size: 16px;
    width:230px;
    margin:10px;
    float:right;
}

Спасибо! Это сработало отлично. Действительно ценю это