Forum Moderators: open
I have a problem with the display of the <span> tag on the website. I want to highlight quotations in the text and used a span tag, but unfortunately, in firefox this doesn't work as I want. Inside the span tag, the text doesn't break the line where necessary. I have a picture with a div tag on the right side of the text and the text should flow around this picture. With the normal text this works fine but with the span tag the highlighted text part moves under the picture to use the full width of the screen. In IE this works fine.
the code for the highlighted area is:
<p class="lineSpaceBigger"><span class="highlight"> highlighted text </span></p>
the css is:
span.highlight {
text-align: justify;
border:0px solid #808080;
background-color: #FFF8B7;
float:left;
padding-left: 12px;
padding-right: 12px;
padding-top:10px;
padding-bottom:10px;
margin-bottom:12px;
font-weight: bold;
}
the Doctype is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
thanks for any ideas how to deal with this!
elster02
1) The border-width: is set at 0, which makes declaring a border pointless?
2) I shorthanded the padding to make the code easier to follow. One declaration instead of four.
3) The questions references "I want to highlight quotations in the text.....". This calls into quesiton the float: and text-align: declarations. You can't just plug these properties into the middle of ongoing inline text.? I'm missing something.
4) .....doesn't break the line where necessary. I have a picture with a div tag on the right side of the text and the text should flow around this picture.....
There are two separate potential issues here (breaking the line where necessary {undefined} and the markup being used for the image. There is not enough markup to replicate the problem.
5)
the code for the highlighted area is:
<p class="lineSpaceBigger"><span class="highlight"> highlighted text </span></p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
span.highlight {
text-align: justify; /* ? */
/*border: 0 solid #808080;*/
background-color: #fff8b7;
float: left; /* ? */
padding: 10px 12px;
margin-bottom: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, ante elit, in proin sit mauris nibh, urna urna aliquam, auctor in etiam. Ipsum integer feugiat corporis sodales, vestibulum elit placerat vel egestas, elit dignissim maecenas lectus leo. Tempora wisi, nulla pellentesque,<span class="highlight"> ut magna ut lectus. Nunc fames eget neque dolor donec pede, auctor nunc nec magna. Fermentum eleifend lacus id, congue in.</span> Nulla cursus, varius sed sodales, a ullamcorper sollicitudin aliquet, ac luctus in rutrum, lobortis semper eget id vitae quam. Nunc vel, amet nec metus felis nec massa ligula, ligula pellentesque, dui quis ligula enim, a cras praesent faucibus sit orci enim.
</div>
<!--##########
I have a problem with the display of the <span> tag on the website. I want to highlight quotations in the text andused a span tag, but unfortunately, in firefox this doesn't work as I want. Inside the span tag, the text doesn't
break the line where necessary. I have a picture with a div tag on the right side of the text and the text should
flow around this picture. With the normal text this works fine but with the span tag the highlighted text part
moves under the picture to use the full width of the screen. In IE this works fine.
the code for the highlighted area is:
<p class="lineSpaceBigger"><span class="highlight"> highlighted text </span></p>
-->
</body>
</html>
<edit>With the DTD specified a warning (if validating the CSS) will be issued for not declaring a width: to the float: - It will validate, but be advised that there will be a warning. float: should have a declared width:</edit>
I deleted the float: and text-align: declarations. I also changed the span tag to a div tag because it is actually not inline, but a single paragraph. with the ongoing text I just wanted to say that the quotation have a fixed place in the text and should not just display anywhere on the site.
Now, the quotations display nice and at the right place, but the new problem is the "coloured background box" which displays too wide, not only around the text but the whole width of the screen (behind the picture and on the right side of the picture which is on the right side of the quotation).
the tag for the quotation is now:
<div class="highlight">quotation</div>
with the css:
div.highlight {
background-color: #FFF8B7;
padding: 10px 12px;
margin-bottom: 12px;
font-weight: bold;
line-height: 150%;
}
the div tag for the picture is as follows:
.feature {
float: right;
border: 1px solid #358139;
padding: 0.4em;
margin: 12px 5px 5px 0;
text-align: center;
padding: 0.4em;
}
he "coloured background box" which displays too wide, not only around the text but the whole width of the screen (behind the picture and on the right side of the picture which is on the right side of the quotation).
Complete test-ready code would be helpful to fix the problem, because I still have to do some guessing as to what is wanted and what it will take to achieve that.
Putting a width: on div.highlight will solve part of the problem, but I feel like you are asking for more than what that will do.
I've added an image and let the text flow around it. I suspect that I am still missing part of the question. Broken code is easier to work with than no code. A sample might make it easier to describe what is and is not wanted.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
div.highlight {
background-color: #fff8B7;
padding: 10px 12px;
margin-bottom: 12px;
font-weight: bold;
line-height: 150%;
width: 50%; /* ? */
}.feature {
float: right;
border: 1px solid #358139;
padding: 0.4em;
margin: 12px 5px 5px 0;
text-align: center;
padding: 0.4em;
width: 200px;
}
.feature img {
width: 200px; height: 200px;
}
</style>
</head>
<body>
<div class="highlight">
<p class="feature">
<img src="aaa.jpg" alt="" title="" />
</p>
<p>
thanks a lot for your answer. I am sorry that I did not explain the problem detailed enough. Originally, I just had the task to update the text on this website and now I try also to correct the things that display wrong and which I just took over from the old version.
<br />
I deleted the float: and text-align: declarations. I also changed the span tag to a div tag because it is actually not inline, but a single paragraph. with the ongoing text I just wanted to say that the quotation have a fixed place in the text and should not just display anywhere on the site.
<br />
Now, the quotations display nice and at the right place, but the new problem is the "coloured background box" which displays too wide, not only around the text but the whole width of the screen (behind the picture and on the right side of the picture which is on the right side of the quotation).
</p>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div.highlight {
background-color: #FFF8B7;
padding: 10px 12px;
margin-bottom: 12px;
font-weight: bold;
line-height: 150%;
}
.feature {
float: right;
border: 1px solid #358139;
padding: 0.4em;
margin: 12px 5px 5px 0;
text-align: center;
padding: 0.4em;
}
</style>
</head>
<body>
<div id="content">
<h1 id="pageName">Title </h1>
<div class="feature"><img src="picture2.jpg" width="320" height="427" />
<p>subtitle</p>
</div>
<p class="lineSpaceBigger">
<p class="lineSpaceBigger">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut adipiscing risus. Duis a sem orci, quis rhoncus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="highlight">quotation</div>
<p class="lineSpaceBigger">Aenean porttitor facilisis orci vitae malesuada. Aliquam erat volutpat. Vivamus ac tellus diam. Fusce vel leo vel mauris luctus viverra. Duis risus mauris, condimentum id egestas et, fermentum non nisl. Aliquam ante diam, commodo quis pulvinar a, feugiat ac mauris. Praesent rutrum, turpis sit amet porttitor mollis, arcu eros mollis nibh, vitae aliquam mi sapien sit amet odio. Maecenas blandit, ligula ac porttitor ullamcorper, lorem purus aliquet mi, in viverra eros massa at massa. Fusce a nisl at sapien fringilla feugiat. </p>
</body>
</html>
As you can see, the yellow "box" goes through the image. I cannot define a fixed width to this box, because it changes according to the browser, font size, screen... If you use a big font and a small screen, the quotation is even under the picture, so in this case it should be the whole width of the screen.
I hope you understand my problem now.
Thanks a lot for your help!
However, I'm not seeing any text break problems in any browser, no matter how narrow I make the browser window.
How about giving the image box a background-color such as #fff. That overrides the highlight color. The highlight will still bump up against the border around the floated div with the picture, but it no longer intrudes, anyway.
Another work-around might be to give div.highlight a percentage width.
The background color is a good idea. Do you know if it is possible to have 2 kinds of borders? If I just add the background colour, there is still the small yellow part on the right side of the image, so perhaps I could add a second border with color #fff or a background which is bigger than the picture box or ...?
A percentage width for div.highlight is not the best solution since according to the screen and font size div.highlight is sometimes next to the picture and sometimes under the picture.
Thanks a lot already! If there is no other possibility, I will just leave it like this with the background color.
I just found another solution to handle this. I set the right margin of div.feature to 0px, so now it is moved a little to the right and the yellow color is covered.
