The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> please help me in modifying my blog template :)
eyesonyouu
post Oct 4 2008, 03:46 PM
Post #1


Newbie
*

Group: Members
Posts: 18
Joined: 4-October 08
Member No.: 6,810
hello folks....i have crated a new blog.
http://whitegoggles.blogspot.com/

its under construction but the problem i am facing is that the font in the template is pretty messed up....i have tried various options but it is not reader friendly....i was wondering if someone coud help me in changing the code in template to get the font like its on the following website

http://www.steami.net/tech/first-picture...

hope some1 helps me.....

(the template i m using is funkyzine modified for blogger)

sorry if i am posting in the wrong section.....plzz guide me
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 4 2008, 04:52 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Do you mean you want the text to be resizeable even in IE Win? Good for you!

Don't use points or pixels as the unit for font-size, but rather em or percent. That's it. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eyesonyouu
post Oct 4 2008, 05:10 PM
Post #3


Newbie
*

Group: Members
Posts: 18
Joined: 4-October 08
Member No.: 6,810
QUOTE(pandy @ Oct 4 2008, 04:52 PM) *

Do you mean you want the text to be resizeable even in IE Win? Good for you!




srry but i dint get the meaning of this line sad.gif

the problem i am facing is that the default font style of the template is very small....its not reader friendly.....if i try to enlarge it using wysiwyg editor....it starts overlapping nd becomes mugged up....so i guess the change has to be done in template so the font size increases but doesnt overlap nd is clearly visible like the one in website i have mentioned.....but i dnt know how to change it in template sad.gif

so any help will b appreciated.... shall i upload the xml file of the template also??

thnx and regards smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 4 2008, 05:20 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
In your style sheet you have this.

CODE
body { color:#000000; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
            /* ...and so on... */ }


Change 11px to something more sensible, like 100% (of the user's default text size). Don't use px or pt as IE Win can't resize either of them.

To learn about CSS, go here.
http://htmlhelp.com/reference/css/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eurisko
post Oct 5 2008, 04:44 AM
Post #5





Group: Members
Posts: 6
Joined: 13-September 08
Member No.: 6,661
hey eyesonyouu,

have you taken a look at your site lately? there is a background image on your site about photobucket. I'm not sure what the deals is with that but I almost had a seizure when i saw it. It was really overwhelming.

If there was some error I suggest you try to fix it. If you thought it looks nice on your site, I would suggest you re-think it.

Its just my opinion. I don't mean to insult you in any way so please don't take it like that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eyesonyouu
post Oct 5 2008, 07:41 AM
Post #6


Newbie
*

Group: Members
Posts: 18
Joined: 4-October 08
Member No.: 6,810
QUOTE(pandy @ Oct 4 2008, 05:20 PM) *

In your style sheet you have this.

CODE
body { color:#000000; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
            /* ...and so on... */ }


Change 11px to something more sensible, like 100% (of the user's default text size). Don't use px or pt as IE Win can't resize either of them.

To learn about CSS, go here.
http://htmlhelp.com/reference/css/



hey thnx 4 the reply....but when i changed font-size:11px to 100% or 50% it still overlapped so i was wondering if there is some code by which u can add more space between lines.....

like when a line gets completed suppose if the next line is 1 cm below to.....can we change it so that it can b 2cm below the above line....so that it doesnt overlap??


thnx and regards
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eyesonyouu
post Oct 5 2008, 07:43 AM
Post #7


Newbie
*

Group: Members
Posts: 18
Joined: 4-October 08
Member No.: 6,810
QUOTE(eurisko @ Oct 5 2008, 04:44 AM) *

hey eyesonyouu,

have you taken a look at your site lately? there is a background image on your site about photobucket. I'm not sure what the deals is with that but I almost had a seizure when i saw it. It was really overwhelming.

If there was some error I suggest you try to fix it. If you thought it looks nice on your site, I would suggest you re-think it.

Its just my opinion. I don't mean to insult you in any way so please don't take it like that.


its okie....eurisko....thnx 4 informing me abt this.....the problem was that the background image was hosted on some1 else account and the bandwidth got exceeded.....i dint notice it because it loaded well on my laptop because of the temporary files which had earlier been stored....so i had to delete them and see to find the problem....i will correct it today only!!!!!! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 5 2008, 10:52 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Your doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" uses ES instead of EN at the end, which causes the HTML validator to return errors on the .dtd instead of your markup!

You also should check your CSS files.

Otherwise, in Safari/Mac, I don't see any problem with your text, nor its size.

If you wish you could set a line-height, if that solves your problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eyesonyouu
post Oct 5 2008, 11:28 AM
Post #9


Newbie
*

Group: Members
Posts: 18
Joined: 4-October 08
Member No.: 6,810
QUOTE(Frederiek @ Oct 5 2008, 10:52 AM) *

Your doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" uses ES instead of EN at the end, which causes the HTML validator to return errors on the .dtd instead of your markup!

You also should check your CSS files.

Otherwise, in Safari/Mac, I don't see any problem with your text, nor its size.

If you wish you could set a line-height, if that solves your problem.



unsure.gif i guess that was bit too techincal for me!!!!! dint get the 1st paragraph at all.....nywayz how can i set a line-height??
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 5 2008, 12:34 PM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
In your template, change the first line
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
to
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Your style sheet already specifies line-height. In some places, you set it to a size in px, which will cause overlapping if the user's font size is bigger than that. In others, you set it to much less than 1em, which is going to cause overlapping for everyone. In others, you set it to 0, which is going to cause a lot of overlapping.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eyesonyouu
post Oct 5 2008, 02:32 PM
Post #11


Newbie
*

Group: Members
Posts: 18
Joined: 4-October 08
Member No.: 6,810
QUOTE(Darin McGrew @ Oct 5 2008, 12:34 PM) *

In your template, change the first line
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
to
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Your style sheet already specifies line-height. In some places, you set it to a size in px, which will cause overlapping if the user's font size is bigger than that. In others, you set it to much less than 1em, which is going to cause overlapping for everyone. In others, you set it to 0, which is going to cause a lot of overlapping.



i have changed the above code to the code u gave below......but i cant notice any difference!! what does the code actually do?? wacko.gif

and for the second part......it seems that theres some problem with the coding so the font is overlapping as the coder has set the size in px ( i guess this is what u r trying to convey)

so can it b corrected??

thnx to all the people 4 their wonderful support smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 5 2008, 06:20 PM
Post #12


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Please see the FAQ entry What is a DOCTYPE? Which one do I use?

Apparently, FF overrides line-height when it is too small, but I see it in Opera and Safari. Anyway, your style sheet includes
CODE
.widget .text  {
padding : 10px 14px;
line-height : 18px;
text-align : justify;
}
and all you need to do is remove the line
CODE
line-height : 18px;

Actually, unless you have a real reason to specify line-height, it's generally safer to just let the browser use its default line-height.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eyesonyouu
post Oct 6 2008, 02:26 PM
Post #13


Newbie
*

Group: Members
Posts: 18
Joined: 4-October 08
Member No.: 6,810
QUOTE(Darin McGrew @ Oct 5 2008, 06:20 PM) *

Please see the FAQ entry What is a DOCTYPE? Which one do I use?

Apparently, FF overrides line-height when it is too small, but I see it in Opera and Safari. Anyway, your style sheet includes
CODE
.widget .text  {
padding : 10px 14px;
line-height : 18px;
text-align : justify;
}
and all you need to do is remove the line
CODE
line-height : 18px;

Actually, unless you have a real reason to specify line-height, it's generally safer to just let the browser use its default line-height.


u mean its generally better to remove the line height so that browser can use its default value??

and apparantly their are 2 parts in the template which include line-height-

CODE

widget .text { padding:10px 14px; line-height:18px; text-align:justify;}


this is the 1 you have already mentioned.....nd heres another one....

CODE

.post .text { padding:0px; text-align:justify; line-height:16px;
width:595px;}


so the overlapping is only corrected when i remove line-height at both the places. i just wanted to confirm shall i remove it in both the places and it is safe to do?? smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 6 2008, 02:53 PM
Post #14


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Yes, it's safe to remove line-height. The default should be fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eyesonyouu
post Oct 8 2008, 07:14 AM
Post #15


Newbie
*

Group: Members
Posts: 18
Joined: 4-October 08
Member No.: 6,810
finally i removed the line-height and the template luks gr8!!!!!! yay!!!! thanks a lot to all the people who helped me.....i had diminshed hopes of getting this right and then i found this wonderful site via google which solved my problem.....

thnx again to all of you!!!!! smile.gif smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 8 2008, 01:20 PM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Less is More, huh? happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eyesonyouu
post Oct 8 2008, 01:53 PM
Post #17


Newbie
*

Group: Members
Posts: 18
Joined: 4-October 08
Member No.: 6,810
QUOTE(pandy @ Oct 8 2008, 01:20 PM) *

Less is More, huh? happy.gif


what does that mean??
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 8 2008, 03:55 PM
Post #18


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Just a joke. By removing the line-height you fixed the problem. It's easy to go over the top with CSS and do too much. Sometimes it's better not to specify something than to do it just because you can. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 8 2008, 04:34 PM
Post #19


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
And FWIW, a lot of web problems are like this. Normally, browsers present content in a way that fits the display environment. Authors who try to control the presentation too much (to fit the author's display environment) often end up breaking this functionality, and then they scramble for ways to fix it (while still clinging to the control they want, of course).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eyesonyouu
post Oct 9 2008, 08:15 AM
Post #20


Newbie
*

Group: Members
Posts: 18
Joined: 4-October 08
Member No.: 6,810
lolzz....thats rite.....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 04:40 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC