The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Sizing text in Javascript, Javascript, CSS, HTML
Rating  4
Learningtheropes
post Feb 10 2009, 03:07 PM
Post #1





Group: Members
Posts: 4
Joined: 10-February 09
Member No.: 7,771



Hello! This is my first post here. I know the basics of HTML, although a lot of what I do is guess work, i.e. typing in a bit of code, crossing my fingers, then yelling, "AURGH!!" when it doesn't work.

I have a blog for brides on a budget with which I'm experiencing some trouble in Internet Explorer. The url is http://www.budgetbride.tumblr.com, and I would really appreciate it if someone using Internet Explorer could take a look at it and help me out.

The blog is a Tumblr blog, and therefore doesn't support comments. I had to add comments to my blog using Disqus. Everything seems to be working fine, except the text, "Trackback URL" looks huge in IE when you click into the "Comments" section of any post.

It used to be that all the text associated with Disqus was huge, but I was able to work with the HTML to shrink everything down. Everything but "Trackback URL." This looks to be linked to the Javascript and I'm not sure where to specifiy the font.

Can I add something to my CSS to get this font size down in IE?

Also, any tips on keeping fonts low in IE would be very helpful. I have been having a lot of trouble with this.

Here is the section of HTML and Javascript I brought in from Disqus:

<div style="font-size: 10px; text-align: left;"><a href="{Permalink}#disqus_thread"><font size="2"> Comments (View)</font></a></div>
{/block:Posts}

{block:Permalink}
<script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>
<div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/budgetbrideblog/embed.js"></script>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
{/block:Permalink}

<script type="text/javascript">
//<![CDATA[
(function() {

var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0)
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script type="text/javascript" src="http://disqus.com/forums/budgetbrideblog/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>

Thanks in advance!

Bethany

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 10 2009, 03:40 PM
Post #2


Computer says no.
********

Group: WDG Moderators
Posts: 18,958
Joined: 9-August 06
Member No.: 6



Hard to find since it's written by JS. The font-size must be set in px or pt since IE can't resize it. Whatever JS does, you can overrule it with a CSS rule (in this case).

CODE
#dsq-content p a     {font-size: 100% }


BTW, you use pt a lot. It's for print. You shouldn't use it for screen. I also get a cascade of JS errors when the page loads.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Learningtheropes
post Feb 10 2009, 03:57 PM
Post #3





Group: Members
Posts: 4
Joined: 10-February 09
Member No.: 7,771



QUOTE(pandy @ Feb 10 2009, 03:40 PM) *

Hard to find since it's written by JS. The font-size must be set in px or pt since IE can't resize it. Whatever JS does, you can overrule it with a CSS rule (in this case).

CODE
#dsq-content p a     {font-size: 100% }


BTW, you use pt a lot. It's for print. You shouldn't use it for screen. I also get a cascade of JS errors when the page loads.


Thank you very much, inputting that bit of CSS fixed my font size problem. I wasn't sure what to label the rule as. How do you know to use "dsq"?

I wasn't sure what you meant by "pt." do you mean pixels when I'm defining my font size?

Finally, I would love it if you or someone else could assist me with moving the text on my comments page up so that it's not all jammed on the bottom of the page in Internet Explorer.

Thanks again!

B
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 10 2009, 04:21 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,334
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
I wasn't sure what you meant by "pt." do you mean pixels when I'm defining my font size?
See Length Units in our CSS guide. You shouldn't use pt or px for font sizes on the web. Use 100% for body text, use larger percentages for headings and the like, and use (slightly) smaller percentages for legalese and similar fine print.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Learningtheropes
post Feb 10 2009, 04:37 PM
Post #5





Group: Members
Posts: 4
Joined: 10-February 09
Member No.: 7,771



Thank you, I will do that!

Anyone know how I can prevent the text on my comments pages from appearing way down at the bottom of the page in Internet Explorer?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 10 2009, 04:54 PM
Post #6


Computer says no.
********

Group: WDG Moderators
Posts: 18,958
Joined: 9-August 06
Member No.: 6



QUOTE
Thank you very much, inputting that bit of CSS fixed my font size problem. I wasn't sure what to label the rule as. How do you know to use "dsq"?


There are ways to view "rendered source", i.e. the HTML including the output from JS. Here's the relevant JS generated markup.
HTML
<DIV id=disqus_thread>
<DIV class=clearfix id=dsq-content>
<H3>Trackbacks:</H3>
<P>(<A
href
="http://budgetbrideblog.disqus.com/internet_explorer_problems_again/trackback/">Trackback
URL</A>)</P>
<UL id=dsq-references></UL></DIV></DIV>
<script src="http://disqus.com/forums/budgetbrideblog/embed.js"...


Here you go to get a plugin for IE. I don't know how high versions of IE it works with. IE6 and , I think, 7 anyway.
http://www.microsoft.com/windows/ie/ie6/pr...bdevaccess.mspx
You'll also get to see the raw MSHTML IE rewrites your carefully crafted markup to. happy.gif



QUOTE
I wasn't sure what you meant by "pt." do you mean pixels when I'm defining my font size?


No, points. Most (all) font-sizes use pt. I looked at the style sheets first. The links to them must also be generated by JS, because I found no link to them in the HTML, but when HTTP sniffing (looking at whet the server really sends) there were 3 of them. Oops! Now they are only two and one of them seems come from the ads or plugins. blush.gif
http://tumblrtags.hr1v.com/default.css
http://entrecard.s3.amazonaws.com/css/ecard.css
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Learningtheropes
post Feb 10 2009, 05:50 PM
Post #7





Group: Members
Posts: 4
Joined: 10-February 09
Member No.: 7,771



Thanks, this is all so helpful!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 3rd August 2020 - 10:20 PM