WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > CSS BR & P Line Break Issues

Reply
  Thread Tools Display Modes
Old 25th August 16, 01:19 PM   #1
mark.eting
WLC Member
 
Join Date: Aug 2016
Posts: 1
Default CSS BR & P Line Break Issues

Hi, please can you help with this one...

I have some simple html that displays correctly in a classic view. I am using <P> for new paragraphs and <BR> for line breaks.

See example 1.


When the css is applied the line breaks all go crazy, breaking in the wrong position. I need there to be a new paragraph for every <P> tag and when there is a <br> tag, this should be a new line under that paragraph.


___

<P>Boost your selling power with the Draco retail display set</P>
<P>It's amazing what a difference presentation can make to your sales, with its white frame and long-lasting laminate, wood effect finish. You can rearrange it as three individual units, or fitting them together to make one single unit.</P>
<P>The individual units are:</P>
<P>A1200 A solid retail unit which has a closed front and plenty of under counter storage to the rear, plus a fixed internal shelf. The A1200 is a versatile unit which is ideal as a serving area, but you can also display it with the shelves facing your customers for that added POS temptation.
<BR>Dimensions 90cm high x 120cm wide x 60cm deep. </P>
<P>C1200 With a full width glass shelf, glass front and another glass viewing panel on top, means customers can see your products clearly.
<BR>Dimensions 90cm high x 120cm wide x 60cm deep.</P>
<P>CM60 This corner unit has plenty of shelf space and has been specially designed to connect any combination of the A1200, B1200, C1200 or K1200 counters together to create one large L shaped counter set. It's so versatile that you can also use it as a single, standalone unit. It has a lovely curved front with two levels to display your items.
<BR>Dimensions 90cm high x 60cm wide x 60cm deep. </P>
<P>Please note Counters will arrive flat packed and two people are required for lifting and assembly, so do rope in a friend or colleague to help. Some counter units may have minor aesthetic imperfections that make them all unique.</P>

___

My CSS code is:
____

@import url(https://fonts.googleapis.com/css?fam...rce+Sans+Pro);
* {
max-width:900px;
padding: 0;
margin: auto;
box-sizing: border-box;
}

body {
padding: 2%;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
color: #333333;
line-height: 20px;
text-align:justify;
}

.header {
width:100%;
overflow: hidden;
}
.header ul {
list-style: none;
overflow: hidden;
}
.header li img {
display:block;
float:left;
width:33.33%;
padding-bottom:1px;
}

h2 {
line-height:150%;
}
h3 {
line-height:150%;
padding-bottom:2%;
}
p {
display: block;
white-space:pre-line;
}
br {
white-space:pre-line;
display: block;
content: "";
}
}
/*---Start Navigation---*/
nav {
width: 100%;
height:100%;
overflow: hidden;
}
nav ul {
list-style: none;
overflow: hidden;
}
nav li a {
background: #f6921e;
color: #ffffff;
display:block;
float:left;
font-size:105%;
padding:1%;
text-align:center;
text-decoration:none;
width:16.66%;
transition: background 0.5s ease;
border-bottom: 1px solid #fff;
}
nav li a:hover, nav li a:active {
background: #8dd3d6;
}
nav li:last-child a {
border:none;
}
/*---End Navigation---*/
.usp {
width:100%;
height:100%;
margin-bottom:1%;
overflow: hidden;
}
.usp ul {
list-style: none;
overflow: hidden;
}
.usp li p {
background:#eef8f9;
line-height:14px;
display:block;
float:left;
text-align:center;
width:25%;
padding:1%;
font-size:85%;
color:#777;
text-indent:0%;
}
.banner {
width: 50%;
}
.banner img {
width: 50% !important;
height:auto;
}
.productinfo {
width: 100%;
padding: 1% 0%;
overflow: hidden;
}
.productinfo ul {
list-style: none;
overflow: hidden;
}
.productinfo li h2 {
background:#eef8f9;
line-height:14px;
display:block;
float:left;
text-align:left;
width:80%;
padding:2%;
font-size:120%;
text-indent:0%;
}
.productinfo li p {
background:#eef8f9;
line-height:14px;
display:block;
float:left;
text-align:center;
width:20%;
padding:2%;
font-size:120%;
text-indent:0%;
}
section {
float:left;
width:50%;
padding:2%;
margin:1% 0;
}
section ul {
list-style-position:inside;
}
aside {
float:right;
width:48%;
padding:1%;
padding-bottom:0px;
overflow: hidden;
}
mainimage.product-image-holder {
text-align: center;
display:inline-block;
border: 0px;
}
mainimage.product-image-holder img {
width:100%;
border: 0px;
overflow: hidden;
margin-top:2%;
}
thumbnail.product-image-gallery-holder {
text-align: center;
display:inline-block;
border: 0px;
}
thumbnail.product-image-gallery-holder img {
width:32%;
padding:0%;
margin:0%;
}
thumbnail.product-image-gallery-holder a {
padding:0%;
margin:0%;
}
.spec{
margin:4% 0%;
}
.usp {
width: 100%;
}
.usp img {
width: 100% !important;
height:auto;
}
.uspbanners {
width:100%;
height:100%;
overflow: hidden;
}
.uspbanners ul {
list-style: none;
overflow: hidden;
}
.uspbanners li p {
display:block;
float:left;
text-align:center;
width:50%;
text-indent:0%;
padding-bottom:2%;
}
footer {
width:100%;
height:100%;
overflow: hidden;
}
.footer ul {
list-style: none;
overflow: hidden;
}
.footer li p {
background:#FFFFFF;
height:100%;
display:block;
float:left;
text-align:left;
width:33.33%;
text-indent:0%;
font-size:85%;
}
.footer li a {
text-decoration:none;
color:#333333;
}
.footer li:nth-child(1) p {
text-align:left;
}.footer li:nth-child(2) p {
text-align:center;
}.footer li:nth-child(3) p {
text-align:right;
}
/*---Media Queries---*/
@media only screen and (max-width: 780px) {
nav ul {
line-height:16px;
}
nav li a {
width:33.3%;
font-size: 90%;
padding-top:1%;
padding-bottom:1%;
border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
}
nav li:nth-child(3) a {
border-right:none;
}
nav li:nth-child(6) a {
border-right:none;
}
.usp li p {
width:50%;
line-height:10px;
}
.productinfo li h2 {
width:100%;
line-height:10px;
text-align:center;
line-height:14px;
}
.productinfo li p {
width:100%;
line-height:10px;
font-size:14px;
}
section {
width:100%;
}
aside {
width:100%;
margin:0% 0%;
}
aside.imagegallery {
width: 100%;
}
p {
font-size:95%;
}
.uspbanners li p {
margin-top:2%;
}
}
@media only screen and (max-width: 580px) {
.header li:nth-child(1) img {
width:50%;
margin:0px;
padding:0px;
}
.header li:nth-child(2){
visibility:hidden;
display:none;
}
.header li:nth-child(3) img {
width:50%;
}
nav li a {
width:50%;
font-size: 82%;
padding-top:2%;
padding-bottom:2%;
}
nav ul {
line-height:12px;
}
nav li:nth-child(even) a {
border-right:none;
}
nav li:nth-child(3) a {
border-right:1px solid #ffffff;;
}
.usp li p {
width:100%;
line-height:12px;
font-size: 75%;
}
.productinfo li h2 {
width:100%;
line-height:10px;
text-align:center;
line-height:14px;
font-size: 95%;
}
.productinfo li p {
width:100%;
line-height:10px;
line-height:14px;
font-size: 90%;
}
h2{
font-size:105%;
}
h3{
font-size:95%;
}
p {
line-height:14px;
font-size: 90%;
}
.uspbanners li p {
width:100%;
padding-bottom:1px;
margin-bottom:1px;
line-height:5px;
}
.footer li p{
width:100%;
}
.footer li:nth-child(1) p {
text-align:center;
}
.footer li:nth-child(1) img {
width:30%;
padding-top:3%;
}
.footer li:nth-child(3) img {
width:30%;
}
}
___

Any help for this would be great as I'm drawing a blank on it. Thanks in advance!
mark.eting is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:15 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.