Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 316
  • Last Modified:

Trying to indent some text

On this page:
http://roofgenius.com/test2.asp
I am trying to get these 3 lines of text moved to the right 20px;
Legend Cost:
Low = 1
High = 10
My last attempt:
<p class="Bfont12" style="margin-left:20px;"></br>
<span style="display:block;">Legend</span>
Cost: Low = 1<br />
High = 10
</p>
How can i do this ?
0
isnoend2001
Asked:
isnoend2001
3 Solutions
 
Adrian CrabtreeCommented:
Are you trying to line it up with the table? It is moved over 20px, but if you want it to line up you need to set margin-left to 70px.
0
 
COBOLdinosaurCommented:
Instead of trying to move the box around with margin; the correct approach is to use padding-left to position inside the box.

Setting display:block on a span is totally illogical.  div is the same as a block span; however just using another br will do the trick. Or use a pre tag and it will respect the linefeeds from the editor without the need for br.

Cd&
0
 
APoPhySptCommented:
well first of all as 'acrab' said with you current html set up you need to give it way more margin than you are giving it now. this said, you should consider improving your html, as it will become inscrisingly dificult to mantain that code when there are divs overlapped, like when a div starts behind another one, resulting in that you are giving the div a margin that is not yet visible.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
COBOLdinosaurCommented:
<p class="Bfont12" style="padding-left:20px;">
<pre>
Legend
Cost: Low = 1
High = 10
</pre></p>


Cd&
0
 
isnoend2001Author Commented:
Thanks everyone
0
 
isnoend2001Author Commented:
I have tried all the solutions to no avail
0
 
COBOLdinosaurCommented:
You have a p tag nested inside a p tag... that is invalid and breaks the structure.

<p class="Bfont12" style="padding-left:70px;">
<p>
Legend Cost:<br />
 Low = 1<br />
High = 10
</p>
</p>

should be:
<p class="Bfont12" style="padding-left:70px;">
Legend Cost:<br />
 Low = 1<br />
High = 10
</p>


Cd&
0
 
isnoend2001Author Commented:
Made no difference
0
 
isnoend2001Author Commented:
Probably not the best way,but this works:
<br />
<p style="padding-left:200px;">
<span class="Bfont12">Legend Cost:</span><br />
 Low = 1<br />
High = 10
</p>

http://roofgenius.com/test.asp
0
 
COBOLdinosaurCommented:
It looks fine in FF, Chrome and IE10.  A bit messy in compatibility mode; but that is to be expected.

Cd&
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now