CODEWITHSUNDEEP
htmlcsslinemarginbreak
user1284806
user1284806

Reputation: 23

line breaks ignoring margins

when i enter a line break in my text, the following text starts before the margin. 

<li><a class="yourlinkclass" href="http://blah.com" class="blahlink" target="blank">this is really <br>annoying</a></li>

<style>
A.yourlinkclass {
font-family: Arial;
color: #595454;
text-decoration: none;
font-size: 11px;
font-weight:;
margin-left:80px;
}

A.yourlinkclass:hover {
font-family: Arial;
color: #BDBDBD;
text-decoration: underline;
font-size: 11px;
font-weight:;
margin-left:80px;
</style>

how do i fix it so text after line breaks start after 80px like they should?

Upvotes: 2

Views: 3914

Answers (2)

Theron Luhn
Theron Luhn

Reputation: 4082

You should avoid bread and butter code. (Google it.)

Turns out Googling "bread and butter code" doesn't return any meaningful results. What it means is you should avoid "br" tags because they can't be styled with CSS. (There's also stuff about not using deprecated HTML tags, but that's not relevant.)

So, don't use br's. Have you tried using div's instead?

<li><a class="yourlinkclass" href="http://blah.com" class="blahlink" target="blank"><div>this is really</div><div>annoying</div></a></li>

Disclaimer: That is invalid HTML, because div is a block-level element and a is inline, so divs should not be nested inside an "a" element. The proper way would be this:

<div><a href="blah">This is really</a></div>
<div><a href="blah">Annoying</a></div>

But this isn't acceptable for all uses. HTML5 fixes this problem by allowing any element to be a link, but you can't count on browser support yet.

PS: You should have really tagged this question with and/or . "line margin break ignore" doesn't tell anybody anything.

Upvotes: 0

vascop
vascop

Reputation: 5222

This achieves your intended result while keeping the line break. http://jsfiddle.net/vasco/Dn8Sf/

<li><p id="parent"><a class="yourlinkclass" href="http://blah.com" class="blahlink" target="blank">this is really <br />annoying</a></p></li>

​

a.yourlinkclass {
font-family: Arial;
color: #595454;
text-decoration: none;
font-size: 11px;
}

a.yourlinkclass:hover {
font-family: Arial;
color: #BDBDBD;
text-decoration: underline;
font-size: 11px;
}

#parent {
margin-left:80px;
}

Upvotes: 1

Related Questions