Пробел прерывает поток текста внутри divs

Question

У меня есть веб-сайт. В Chrome и Internet Explorer есть пробел, который прерывает поток текста. Я не знаю, откуда они.

Мне нужна помощь в поиске и удалении их.

Вы можете просмотреть полную страницу здесь: http://printingunlimited.com/business-card-info.htm

HTML код:

<div id="about-product"> 
    <h3 itemprop="description">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3> 
    <img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"/> 
</div> 

В CSS, который определяет ручку о-продукта:

#about-product {padding: 0 0 20px 0; height: 200px;} 
img.product-image {display:block; position:absolute; left:560px; top:-5px; } 
#about-product h2 {float:left;} 
#about-product h3{display:block; font-size:16px; font-weight:normal; padding-bottom:5px; padding-right:5px; width:550px;} 

изображения, указывающей из проблемной области:

Где белое пространство между (your business cards are printed) и (on 14 point card stock) взялось?

Answer 1

После некоторой настройки, это работает:

#about-product { 
    padding: 0 0 20px 0; 
    height: 180px; 
} 

#about-product h3 { 
    display: inline-block; 
    font-size: 16px; 
    font-weight: normal; 
    float: left; 
    width: 550px; 
    position: absolute; 
} 

Answer 2

Попробуйте это:

.header-content { 
    width: 860px; 
    margin: 0 auto; 
    height: 190px; 
    position: relative; /* <~ add this line */ 
} 

ul#drop-nav { 
    display: block; 
    float: none; 
    margin: 0 auto; 
    position: absolute; /* <~ change this line */ 
    top: 170px; /* <~ change this line */ 
} 

Answer 3

стратегии, вы должны использовать, чтобы решить эти ошибки сами является разделяй и властвуй, следующим образом:

1. Удалить все атрибуты HTML и CSS стиль, который влияет этот конкретный элемент HTML.

2. Добавьте обратно элементы html в куски, проверяя, как вы идете, чтобы увидеть, как каждое дополнение влияет на страницу.

3. При обнаружении проблемы вырезайте последнюю партию изменений, сделанных вами пополам, чтобы изолировать стиль, вызывающий проблему.

4. При обнаружении атрибута CSS, прерывающего поток текста, удалите его или попробуйте что-то другое.

Answer 4

Все правильно, так как люди уже предложили, ваш CSS стиль не подходит для IE и хром. Во-первых, вы должны проверить его на W3.

Далее, я добавил несколько стилей для его исправления.

Вот они:

<div id="about-product" style="height: 175px"> 
<h3 itemprop="description" style="display:inline-block;float: left;position: absolute;">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3> 
<img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"> </div> 

снимок экрана здесь ниже: