I have a superscript that is messing up the line spacing. How do i make it even?
I tried
sup{vertical-align:0; position: relative;}
but that doesn't help.
Any suggestions?
We can achieve it by ignoring the <sup></sup> tags and directly using something like
<span style="position:relative; top:0.3em;">
You may need to try altering the line height of the sup element to be smaller than the parent text.
sup{vertical-align:super; line-height:0.5em;}
http://en.wikipedia.org/wiki/Superscript has lots of examples that you can inspect. Some of them increase the line height of the parent, some do not.
If that isn't working for you, you can also try
sup{vertical-align:top;}
sup{vertical-align:top; line-height:0.5em;}
This works for me, even though I have sup defined in my stylesheet. I have a link, which also has styling applied, between the <sup> and </sup> tags, but this seems to force the intended effect of keeping the line spacing consistent.
Related
Why is this page (http://calvoter.org/issues/votereng/votebymail/study/findings.html) so wide. The table with the white background has a 750px image at the top but the page is wider than needed. I made a copy and deleted all the images/tables in the content and the page remained wider than it needs to be. The text was copied from a Word doc to textwrangler then Dreamweaver
The finding.html page is from the same template as http://calvoter.org/issues/votereng/votebymail/study/ocprofile.html which does not have the extra width issue. Thanks for any help.
The page was made with Dreamweaver CS5.5
Your table is 970 pixels wide. It is stretching to accommodate an image you have in one of the table cells. The image is
<img src="graphics/uncounted_ballots.png" width="690" height="253" hspace="100">
This accounts for 890 pixels of width. This is inside a blockquote with a margin of 40 on both sides. Add is all up and you get 970 pixels. The difficulty in figuring this out is why we try to use better coding practices. Your HTML is a maze of nested tables and block quote, which makes it almost impossible to decipher.
basically, it comes from bad coding practices. You have enclosed everything inside block quotes, so you have two paths here: just add this to your stylesheet
blockquote{margin:0;}
the problem here is you will actually lose the blockquote formatting, but if you don't care about it, it will solve your issues at once. You can also add margin:5px or something like that.
The best approach is to simply "kill" those blockquote elements, and use then ONLY when they are intended to be used. The easiest way is to open your source code with a raw text editor (like Notepad, NOT WORD!) and replace any occurrence of <blockquote> and </blockquote>. Or even better: replace <blockquote> with <div> and </blockquote> with </div> (do a backup first!). That will solve it for you.
because you are not set the main part:<blockquote>'s width,and it's width will change and enlarge <table>'s width.
first,set <blockquote>'s width to inherit in main.css line 134:
div#main blockquote {
font-family: sans-serif;
font-style: normal;
width:inherit; /* add this to control blockquote's width */
}
then,change some title and img,they are the main reason that blockquote become too large,like these:
there is no need to have two nesting <blockquote> here,delete them.
finally,give a reasonable position of your <img> ,like this:
set hspace is not a good habit,you can simply change it or set a compatible css style.and you can delete this attribute here
If this has any help,please let me know.
UPDATE:
actually,If you control elements well in <blockquote>,you needn't to set it's width.but if you want to reach your expectation,you'd better do this.
I have the following HTML code:
this is just a <i>test sentence</i>
As you can see, I put in "white-space:nowrap" to ensure that the sentence stays on one line no matter the browser window size. However, it seems that italicizing some words in the sentence prevents this from happening. On smaller browser windows, the result is "this is just a" on one line and then "test sentence" on the next line. How do I make it so that the sentence always stay on one line?
Italic does not cause line wrapping. The problem is in some part of a style sheet that was not disclosed in the question (the code posted does not demonstrate the problem). It might be a “killer CSS reset”, which really tends to mess things up. It might be something like * { white-space: normal }, which naturally causes normal line wrapping inside the i element, instead of letting it inherit white-space from its parent.
So you should clean up your use of CSS, preferably getting rid of “CSS resets”. Reset just the properties that really need to be reset.
I've had this problem as well in FF - identical situation.
The quickest fix is to set the font size to be a bit smaller e.g 90%.
I don't have any css resets either.
You could try adding inline-block to the href which works at least in chrome
this here is a very long is just a<span style="font-style: italic"> test sentence</span>
i have the following markup
<a class="block"><span class="inline">hello</span>world</a>
the <a> has a display:block ... if i give the span.inline a margin-top:3px it also pushes down the text after it. here is a jsfiddle to see this behaviour
http://jsfiddle.net/YLMeh/
could anybody give me a hint why this is happening?
All inline elements on a row share the same line-height. If you think about it it makes sense. What would happen when you have multiple lines of text otherwise? It would be completely unreadable.
In these situation the vertical-align attribute is what you have to work with. Read up on that and you should be fine.
margin-top: 3px; applied to your <span class="inline"> pushes the baseline down for the whole text.
understanding the vertical-align css property may help: https://developer.mozilla.org/en-US/docs/CSS/vertical-align
For some reason my paragraphs are displaying line breaks when there is no <br/> tag being used! So if I type content into the HTML and hit return a few times it gets formatted that way.
How can I prevent that? Can I not just get it to flow?
Browsers will automatically render paragraph tags to have some padding unless you explicitly style it not to... is this the problem?
If so, p {padding: 0; margin:0;}
If not, try giving us some of your code and a better explanation of exactly what the problem is.
Put this into your stylesheet:
p {white-space:normal;}
The <pre> tag will cause white space to display. So will a CSS rule like this:
p {white-space: pre;}
Could either of those be the problem?
If the text is being broken to make it fit, you cannot / should not try to stop the text from breaking. However, if your problem is that the text is breaking at an undesirable point and you would rather have it break at a more appropriate point, use the following:
<nobr>... Unwanted break point here ...</nobr>
enclose the unwanted break point with nobr tags.
And, add the following at the appropriate break point:
... some text ... Text on next line
I have a web page that displays a pdf document. In the header there is an image and an h1 tag that contains a name. When the name is too long, it gets cut off. How can I force it to wrap to the next line instead so that the entire name is displayed? I tried inserting a style="white-space:normal" but it doesn't help. Any suggestions?
word-wrap:break-word;
It should have the combination of two:
word-wrap: break-word;
white-space: normal;
thanks to Tor and Alex :)
h1 tags wrap by default. If they're not, something in your CSS is overriding that default behaviour. If you can post a link to the site, we can quickly help you out. You might want to consider installing Firebug for Firefox - it'll let you right-click on the h1 and view what styles are being applied to it, and from where they come.
Is the header contained wihtin another element such as a div? If so, check the overflow for that element and/or try setting it to visible like this:
style="overflow:visible;"
the h1 tag has a zero line height
style="line-height:100%;"