Fon-size Problem In Konqueror & Firefox 1.5

A

aak

Hi,

I'm having a problem using CSS and viewing my page in the Konqueror
& Firefox 1.5 Browser.
It works OK on the IE and Firefox 2.0.0.4, but when I try to see
the page in
Konqueror & Firefox 1.5 It's Creating Some Font-size Problem.

In Firefox Fon-size Coming Out Of The Block(Background Image) & In
Konqueror Font-size Is
Looking So Small & text being half normal size.

This is my .css file:

body {
text-align: center;
font-family: Comic Sans MS, Verdana, sans-serif;
font-size: 92%;
margin: 0;
}

#main-content {
text-align: left;
background: #ffffff;
width: 800px;
margin: 0 auto 0 auto;
border: 0px solid #000000;
padding: 0;
}

#header {
background: url('./images/header-bg.png') repeat-x;
float: left;
width: 100%;
padding: 0;
margin: 0;
}

#logo {
float: left;
border: 0px solid #000000;
width: 60%;
}

#boog {
margin: 0 0 0 1em;
}

#mail-id {
float: right;
text-align: right;
display: inline;
margin: 0.2em 1em 0 0;
color: #707273;
border: 0px solid #000000;
width: 89%;
}

#mail-id a{
color: #707273;
text-decoration: none;
}

#mail-id span{
color: #707273;
}

#mail-search {
float: right;
text-align: right;
border: 0px ;
width: 40%;
margin: 0.9em 0 0 0;
color: #000000;
}

#search-box {
float: right;
text-align: right;
display: inline;
margin: 1em 1.1em 0 0;
padding: 0;
border: 0px solid #000000;
width: 60%;
}

#go {
background-color: #ffffff;
color: #000000;
border: 0.9px solid #000000;
width: 30px;
font-family: Comic Sans MS, Verdana, sans-serif;
text-align: center;
margin: 0 0 0 0;
padding: 0;
font-size: 0.9em;
font-weight: bold;
}

#search {
color: #000000;
border: 0.9px solid #000000;
width: 120px;
height: 20px;
font-family: Comic Sans MS, Verdana, sans-serif;
font-size: 0.9em;
font-weight: bold;
}

#primary-links li{
float: left;
list-style-type: none;
text-decoration: none;
border: 0px solid #000000;
margin: -0.5em 0 0 0;
padding: 0px;
width: 14%;
text-align: center;
border: 0px solid #000000;
}

#primary-links ul{
border: 0px solid #000000;
width: 100%;
margin: 0px;
padding: 0px;
float: left;
}

#primary-links {
width: 100%;
border: 0px solid #000000;
clear: left;
float: left;
}

..global-bar {
border: 0;
margin: 1em 0 0 0;
padding: 0;
}

#whole-movie {
border: 1px solid #000000;
width: 62.5%;
height: 180px;
margin: 0.5em 0 0 0.5em;
float: left;
display: inline;
}

#login {
background: url('./images/login-bg.png') no-repeat;
font-family: Comic Sans MS, Verdana, sans-serif;
float: left;
width: 33%;
height: 167px;
display: inline;
margin: 0.5em 0 0 1em;
border: 0px solid #000000;
}

#username {
margin: 2.5em 0 0 0.8em;
font-size: 0.8em;
font-weight: bold;
color: #ffab13;
}

#username input {
width: 125px;
border: 1px solid #ffab13;
}

#password {
margin: 0.7em 0 0 0.8em;
font-size: 0.8em;
font-weight: bold;
color: #ffab13;
}

#password input {
width: 125px;
border: 1px solid #ffab13;
}

#login-span{
color: #ffab13;
margin: -4em 0 0 11.5em;
border: 0px solid #000000;
font-size: 0.9em;
font-weight: bold;
border: 0px solid #000000;
float: left;
}

#login-span a{
color: #ffab13;
font-weight: bold;
}

#submit {
margin: 0.4em 0 0 0.8em;
font-family: Comic Sans MS, Verdana, sans-serif;
}

input#button {
background-color: #ffab13;
color: #ffffff;
font-weight: bold;
font-size: 0.7em;
height: 23px;
border: 0;
text-align: center;
font-family: Comic Sans MS, Verdana, sans-serif;
}

#flash-login {
width: 100%;
height: 200px;
float: left;
display: inline;
}

#activities-bg {
float: left;
display: inline;
background: url('./images/activities-bg.png') no-repeat;
border: 0px solid #000000;
width: 60%;
padding: 0 0 0 1em;
margin: 0 0 0 0.5em;
height: 181px;
}

#activities {
margin: 3em 0 0 0;
}

#left-arrow img{
float: left;
display: inline;
border: 0;
margin: 3.8em 0 0 0;
}

#games img{
float: left;
display: inline;
border: 0;
margin: 0 0 0 0.8em;
}

#puzzles img{
float: left;
display: inline;
border: 0;
margin: 0 0 0 2.5em;
}

#quiz img{
float: left;
display: inline;
border: 0;
margin: 0 0 0 2.5em;
}

#right-arrow img{
float: left;
display: inline;
border: 0;
margin: 3.8em 0 0 1em;
}

#email {
background: url('./images/email-bg.png') no-repeat;
float: left;
display: inline;
color: #36a4ff;
margin: -1.1em 0 0 1.5em;
width: 33%;
height: 151px;
font-size: 0.9em;
font-weight: bold;
padding: 0;
}

#email a{
text-decoration: none;
color: #36a4ff;
padding: 0;
margin: 0;
}

#email ul {
list-style-type: none;
margin: 2.2em 0 0 0.5em;
border: 0px solid #000000;
padding: 0;
}

#email li{
padding: 1em 0 0 0;
margin: 0;
}

#stories {
background: url('./images/stories-bg.png') no-repeat;
float: left;
margin: 0.6em 0 0 0.5em;
height: 223px;
padding: 0;
}

#stories-news {
clear: left;
width: 65%;
}

#stories span li{
margin: 1em 0 0 0;
display: inline;
padding: 0;
}

#col-1 {
float: left;
position: relative;
top: 2em;
left: -1.5em;
color: #669c0d;
display: inline;
border: 0px solid #000000;
margin: 0;
padding: 0 0 0 0;
}

#col-1 li{
list-style-type: none;
margin: 0;
padding: 0 0 0 0;
}

#col-1 a{
color: #669c0d;
text-decoration: none;
padding: 0;
margin: 0;
}

#col-2 a{
color: #669c0d;
text-decoration: none;
margin: 0;
padding: 0;
}

#col-2 {
margin: 0;
color: #669c0d;
border: 0px solid #000000;
float: left;
padding: 0;
position: relative;
top: 5em;
left: -4em;
}

#col-2 li{
list-style-type: none;
padding: 0 0 0 0;
}

#news {
background: url('./images/news-bg.png') no-repeat;
float: left;
border: 0px solid #000000;
font-size: 1em;
margin: 0.5em 0 0 -1.2em;
padding: 0;
height: 219px;
width: 241px;
color: #f7f400;
}

#news p{
position: relative;
top: 2em;
left: 1em;
margin: 0;
padding: 0;
}

#news a{
color: #f7f400;
text-decoration: none;
font-weight: bold;
margin: 0;
padding: 0;
}

#groups {
float: right;
background: url('./images/groups-bg.png') no-repeat;
height: 266px;
width: 35%;
color: #ff0598;
font-size: 1em;
margin: 0.6em -0.5em 0 0;
}

#groups span {
font-size: 1.3em;
color: #ff0598;
}

#groups p{
margin: 1.5em 0 0 0.3em;
}

#footer {
clear: left;
position: relative;
top: 0.8em;
left: 5em;
color: #707273;
}

#footer a{
color: #707273;
}

Am I doing something wrong?
I Have To Creat Different Css For That Or Not?
You Have Any Suggestion For Me, Please Let Me Know.
Or Any URL Or Tips Or How I Can Do Or Anything Else Please Reply Me As
Soon As Possible.
Thank You.
 
D

dorayme

aak said:
This is my .css file:

body {
text-align: center;
font-family: Comic Sans MS, Verdana, sans-serif;
font-size: 92%;
margin: 0;
}

#main-content {
Click to expand...

And we are supposed to guess the html? Anyway, I will just
comment on this tiny fragment I quote. Try:

body {

font-family: Arial, sans-serif;
font-size: 100%;
margin: 0;
}

and see how you go. If you must use Comic Sans, use it but it is
a taller font and takes up more room than is generally wise.
 
A

aak

And we are supposed to guess the html? Anyway, I will just
comment on this tiny fragment I quote. Try:

body {

font-family: Arial, sans-serif;
font-size: 100%;
margin: 0;

}

and see how you go. If you must use Comic Sans, use it but it is
a taller font and takes up more room than is generally wise.
Click to expand...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<title></title>
<link href="homepage.css" rel="stylesheet" type="text/css">
<!--[if IE 6]>
<link href="finalIE6.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<div id="main-content">
<div id="groups">
<p>&nbsp;&nbsp;animals <span>birds</span><br> <span>cakes</
span> juices <span>cricket</span><br> tennis cars <span>history</span>
maths<br> <span>bikes astronomy</span> nature<br> <span>geography</
span> computers<br> <span>hobbies</span> science <span>festiva</
span><br> travel <span>entertainment<br> cakes</span> juices
<span>cricket</span></p>
</div><!--groups-->
<div id="stories-news">
<div id="stories">
<div id="col-1">
<ul>
<li>$<a href="#">Ali Baba and <br> Chalis Chor</a></li>
<li>$<a href="#">King Uncle</a></li>
<li>$<a href="#">Isht Visht</a></li>
<li>$<a href="#">Isht Visht</a></li>
<li>$<a href="#">Boog's Life</a></li>
<li>$<a href="#">Boog's Life</a></li>
</ul>
</div><!--col-1-->
<div id="col-2">
<ul>
<li>$<a href="#">King Uncle</a></li>
<li>$<a href="#">King Uncle</a></li>
<li>$<a href="#">Boog's Life</a></li>
<li>$<a href="#">Isht Visht</a></li>
<li>$<a href="#">King Uncle</a></li>
</ul>
</div><!--col-2-->
</div><!--stories-->
<div id="news">
<p>#<a href="#">Prashant Marne <br>has gone mad and has
<br>reached a level of madness <br>where he can kill anyone... <br>So
Beware of HIM!!!!!!!!!!</a>
</div><!--news-->
</div><!--stories-news-->
</div><!--main-content-->
</body>
</html>
 
A

aak

And we are supposed to guess the html? Anyway, I will just
comment on this tiny fragment I quote. Try:

body {

font-family: Arial, sans-serif;
font-size: 100%;
margin: 0;

}

and see how you go. If you must use Comic Sans, use it but it is
a taller font and takes up more room than is generally wise.
Click to expand...

Now Check This & Let Me Know.
Is Some Line Height Problem In That Or Somthing Else?
Thanks For Your Reply.
& I'l Try What You Told Me But It's Not Working As I Want So Do You
Have Any Other Suggestion For Me Then Please Let Me Know.
Reply Soon.
Thank You
 
C

Chaddy2222

Now Check This & Let Me Know.
Is Some Line Height Problem In That Or Somthing Else?
Thanks For Your Reply.
& I'l Try What You Told Me But It's Not Working As I Want So Do You
Have Any Other Suggestion For Me Then Please Let Me Know.
Click to expand...
Ajust the font-size in your own browser.
Alternativly post a URL so we can see the page.
 
J

Jonathan N. Little

As dorayme said, Comic Sans MS & Verdana are oversized and MS only so a
Linux box will substitute a "standard" size sans-serif font that at 92%
will be too small. Much written about this on this NG and the web Google
"why is Verdana bad for web design"

Also multi-word font names should be quoted in stylesheets

font-family: "Comic Sans MS", Verdana, sans-serif;
<snip code>

No. Just to let you know, when asked to see your code, do not post
source to newsgroups, give a URL.
 
D

dorayme

aak said:
Now Check This & Let Me Know.
Is Some Line Height Problem In That Or Somthing Else?
Thanks For Your Reply.
& I'l Try What You Told Me But It's Not Working As I Want So Do You
Have Any Other Suggestion For Me Then Please Let Me Know.
Reply Soon.
Thank You
Click to expand...

On something like this, it is especially important to post a url
as you have bg images etc. As others have said. Do do this and
you will get some good advice.
 
A

aak

As dorayme said, Comic Sans MS & Verdana are oversized and MS only so a
Linux box will substitute a "standard" size sans-serif font that at 92%
will be too small. Much written about this on this NG and the web Google
"why is Verdana bad for web design"

Also multi-word font names should be quoted in stylesheets

font-family: "Comic Sans MS", Verdana, sans-serif;



<snip code>

No. Just to let you know, when asked to see your code, do not post
source to newsgroups, give a URL.
Click to expand...

Thanks For Your Advice & One More Thing I Wanted To Ask You Is In
Konqueror,
The Font Is Looking Bold & Size Is Also Different So How Can I Change
This Thing?
Thing Is Now It's Coming Proper In All The Browser Except That One In
Konqueror &
In One Block Only so Please Let Me Know If You Have Any Idea.
Reply Soon
Thank You
 
A

aak

Now Check This & Let Me Know.
Is Some Line Height Problem In That Or Somthing Else?
Thanks For Your Reply.
& I'l Try What You Told Me But It's Not Working As I Want So Do You
Have Any Other Suggestion For Me Then Please Let Me Know.
Reply Soon.
Thank You
Click to expand...

On something like this, it is especially important to post a url
as you have bg images etc. As others have said. Do do this and
you will get some good advice.
Click to expand...

My Problem Is Solve Now I Set The Line Height In My Css It's Coming
Almost Proper Except
In Konqueror Some Lines Are Looking Bold & Font-size Is Also Different
So Now How Can I Change This Thing?
Let Me Know If You Have Any Idea.....
Reply Soon.
Thank You
 
A

aak

Ajust the font-size in your own browser.
Alternativly post a URL so we can see the page.
Click to expand...

I Can Do That But What About The Other Different People Who Have
Konqueror Browser?
 
D

dorayme

aak said:
My Problem Is Solve Now I Set The Line Height In My Css It's Coming
Almost Proper Except
In Konqueror Some Lines Are Looking Bold & Font-size Is Also Different
So Now How Can I Change This Thing?
Let Me Know If You Have Any Idea.....
Reply Soon.
Thank You
Click to expand...

I am doubtful that you will solve the "problem" with line height
fiddling. Please consider a URl. We Are All Needing Badly To See
It.
 
R

rf

aak said:
My Problem Is Solve Now I Set The Line Height In My Css It's Coming
Almost Proper Except
In Konqueror Some Lines Are Looking Bold & Font-size Is Also Different
So Now How Can I Change This Thing?
Let Me Know If You Have Any Idea.....
Reply Soon.
Thank You
Click to expand...

Which part of the general message "change the size in your own [Konkerer]
browser" did you fail do understand?

Leave the font size alone.
Leave especially the line height alone. You should never need to change line
height.

Let your viewers choose what they want.

Finally: You will never ever ever get your site to look exactly the same in
different browsers. Ever. That is why they are different.
 
B

Beauregard T. Shagnasty

aak said:
Thanks For Your Advice & One More Thing I Wanted To Ask You ...
Click to expand...

Is all the content on your site typed with a capital letter for every
word?

Please don't type like that; use proper capitalization. Thanks for your
consideration.
 
D

dorayme

"rf said:
Richard (six hours behind)
Click to expand...

Now now Richard... I didn't mean to hurt your feelings about your
Bigpond newsgroup access... <g>

Remember, mate, there is always Google!
 
D

dorayme

"Beauregard T. Shagnasty said:
Is all the content on your site typed with a capital letter for every
word?

Please don't type like that; use proper capitalization. Thanks for your
consideration.
Click to expand...

Might be a setting in his ng software? It is awfully consistent.
 
D

dorayme

"Beauregard T. Shagnasty said:
No other google groupers type like that...
Click to expand...

Right, google... looking a tad more forensically at OPs posts, he
does not do this all the time, it is his way of emphasis. I agree
it is a bit annoying, I think it is better if he shouted loudly
and consistently. MORE UP FRONT!
 
N

Neredbojias

Right, google... looking a tad more forensically at OPs posts, he
does not do this all the time, it is his way of emphasis. I agree
it is a bit annoying, I think it is better if he shouted loudly
and consistently. MORE UP FRONT!
Click to expand...

Personally, I don't think it's as annoying as failing to capitalize
sentences or criticizing another for faults similar to one's own. How
pedantic can you be?
 
N

Neredbojias

My Problem Is Solve Now I Set The Line Height In My Css It's Coming
Almost Proper Except
In Konqueror Some Lines Are Looking Bold & Font-size Is Also Different
So Now How Can I Change This Thing?
Click to expand...

My index page displays smaller text in Opera even though I've set the
dafault text size to the same value as my other browsers (16px) and have no
(pertinent) text-size styling on the page. D(d)orayme is right (for a
change.) Post a url so others can compare their own experiences with your
problem-child.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Interfering CSS 1
How to position the *tooltip* comment on these buttons? 9
SendGrid email issue in responsive Gmail 1
Positioning CSS components 1
Help with my responsive home page 2
<Button ...> display is fine, except for two things 1
I need help fixing my website 2
Login button code 8

Members online

No members online now.
Total: 33 (members: 1, guests: 32)
Robots: 440

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,051
Latest member
CarleyMcCr

Latest Threads

Top