vetical aignment of the text.

M

Mr. X.

Hello.
In CSS, while using the property line-height:46px;
the related line is vertical-aliged differently on some browser by default
(Opera has center vertical alignment, and IE 5 and more has the default of
top-vertical-alignment).

What is the property that may change the above vertical alignment ?

Thanks :)
 
J

Jukka K. Korpela

Mr. X. said:
In CSS, while using the property line-height:46px;
Click to expand...

You shouldn't use the px unit for anything related to font size, except
possibly in a user style sheet.
the related line is vertical-aliged differently on some browser by
default (Opera has center vertical alignment, and IE 5 and more has
the default of top-vertical-alignment).
Click to expand...

What do you mean by that? Have you got a demo URL, and what makes you think
the alignments are as you described?
 
M

Mr. X.

Sorry ...

Yes.
Here is the demo :

test_nav.css :
=========
a {
text-decoration: none;
color: #0171AF;
}

a:hover {
text-decoration: none;
color: #111;
}

#nav {
position:absolute;
top:120px;
left:80px;
width:600px;
height:60px;
line-height:46px;
padding: 5px 0 0 0px;
}

#nav ul {
position:absolute;
top:0px;
left:0px;
}

#nav li {
float:left;
font-weight:700;
width:100px;
list-style-type:none;
}
#nav a {
text-decoration:none;
display:block;
text-align:center;
}

test_nav.html
=========

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test_nav.css" />
</head>
<body>
<div id = "nav">
<ul>
<li"><a href="#">link A</a></li>
<li"><a href="#">link B</a></li>
<li"><a href="#">link C</a></li>
<li"><a href="#">link D</a></li>
<li"><a href="#">link E</a></li>
</ul>
</div>
</body>
</html>

copy the above, and see that links are not at the same positions, at some
navigators.
(for 1024x768 resolution. IE 7.0, and Safari 3.1 - it may be relevant to
some other navigator, such as the google's new navigator etc ...).

If there any way to control the <li> position ?

Thanks :)
 
J

Jukka K. Korpela

Mr. X. said:
Sorry ...
Click to expand...

For what? Please learn how to post to Usenet. If you don't intend to, please
keep using the same forged From field; thank you in advance.
Here is the demo :
Click to expand...

Please learn what "URL" means.
test_nav.css :
Click to expand...

And get the clue that on Usenet, we need absolute URLs.
copy the above,
Click to expand...

Why would I do that for you, when you did not bother setting up a demo page
and posting its URL, even after being asked to.

Again, please keep using the same forged From field as long as you remain
clueless. Again, thanks in advance.
 
M

Mr. X.

Why URL link ? It is not an advertising site ... and not a spammer's
searcher engine !
The code I gave is just fine and enough, to understand what's wrong !

Please, if you know how can I run the code on different browser, so it will
look the same.

Thanks :)
 
M

Mr. X.

Let it be simple :
delete the "block" property (it occures only once on the *.css file I have
givven).

All are at the same line - but if you run them on IE7, and Safari 3.1, their
top positions are not the same on that different browser.

If I could control the <li>'s top positions, it would be enough.

Thanks :)
 
A

Ari Heino

Yucca's point was clear and fair: put your code online, don't expect
anyone to make your job for you. That's the least you can do to get help.
 
S

Sherm Pendley

Mr. X. said:
Why URL link?
Click to expand...

Because that's the convention here.
The code I gave is just fine and enough, to understand what's wrong!
Click to expand...

If you knew what was "fine and enough" to understand the problem, you
wouldn't need to ask for help with it.

That's why the convention of posting a URL came about; far too often,
the posted code *isn't* enough.
Please, if you know how can I run the code on different browser, so
it will look the same.
Click to expand...

What code? The message to which I'm replying has no code in it, and no
URL pointing to code.

sherm--
 
S

Sherm Pendley

Mr. X. said:
Let it be simple :
Click to expand...

Let *what* be simple?

Please quote the relevant parts of the message you're replying to. If
you don't, and that message hasn't yet arrived at my local usenet
server, then your reply won't make any sense.
delete the "block" property (it occures only once on the *.css file I have
givven).
Click to expand...

You can't "give" files here, it's not a group that allows attachments.

sherm--
 
M

Mr. X.

Who said the convention here are that ???

It's a public newsgroup, from 50,000 and more newsgroups arround, you can
see on
"outlook express", google, and some other sites, and due that, it has no
such rules, unless the whole 50,000 newsgroups has the same rules,
and their are not.
You can look it as an helpdesk, or what ever.
That's the way internet does it's way, if you like it or not.

I don't have a link, because the site is not intented to be that one.
It may be under construction, or top secret.
I gave enough details.

And I give some more
(delete single "block" property on css file).

The following lines, makes the whole different, and solve the problem
(Why ? Cann't someone ever answer, because it's very difficult to pick up
the solution, even googling for days ...)

/* CSS RESET */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym
{border:0;font-variant:normal;}sup {vertical-align:text-top;}sub
{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

body {font:13px/1.231
arial,helvetica,clean,sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
/* CSS RESET */

Thanks :)
 
C

Chris F.A. Johnson

Who said the convention here are that ???
Click to expand...

The people who can help you, and who will not do so if you don't
provide a URL.

....
I don't have a link, because the site is not intented to be that one.
It may be under construction, or top secret.
I gave enough details.
Click to expand...

But no URL; therefore not enough.

If it's top secret, why did you post the code?
And I give some more
(delete single "block" property on css file).

The following lines, makes the whole different, and solve the problem
(Why ? Cann't someone ever answer, because it's very difficult to pick up
the solution, even googling for days ...)

/* CSS RESET */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym
{border:0;font-variant:normal;}sup {vertical-align:text-top;}sub
{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

body {font:13px/1.231
Click to expand...

Specifying a font size in px is likely to cause problems.
 
M

Mr. X.

We can argue for month about adding a URL or not.
There are many newsgroup, that simply answer,
and their are people in this newsgroup, who be glade to answer,
since the globes has much more then 6 Bilion people (don't argue on that -
even I may be wrong at that ... It's not an issue).
(I answer too, if I know, and it is too short unswer).

And you have cought me - English is not my language ;o)

I have found the problem.
It was margin - browsers have their default margins,
and one of the long marked code (start with /* CSS RESET */)
has the attributes : {margin:0;padding:0;}

Cheers

:eek:)
 
M

Mr. X.

For first glance :
You said the following is O.K :
font-size:1.25em; line-height:1.5em;

font-size:1.25em - 1em is the current font-size, so what do you mean of
1.25em ?
(1.25 font size of what font size ?)

Thanks :)
 
C

Chris F.A. Johnson

Horsehockey!
A "pt" in the printing industry has a defined size.
Click to expand...

The web has nothing to do with the printing industry; a web page is
not a piece of paper; "pt" does not apply.
A "px" in the electronics of computers has a defined size.
Click to expand...

No, it doesn't. And if it did, it would be the wrong unit to use.
You may be able to read text at 12px, many others cannot.
An "em" is defined by the person who wrote the browser and could mean
just about anything. Is an "em" based on the capital M or the little
m?
Click to expand...

Neither. See <http://www.w3.org/TR/CSS21/syndata.html#em-width>:

The 'em' unit is equal to the computed value of the
'font-size' property of the element on which it is used.
The exception is when 'em' occurs in the value of the
'font-size' property itself, in which case it refers to
the font size of the parent element.
Of the 500 plus fonts available, which font was used to base it
on?
Click to expand...
What if I don't have that font?
A "%" is even worse. What exactly is 100%?
Click to expand...

100% of the current size.
Inches and millimeters should be recognized by any browser precisely
as they are. But who knows?

If you're going to give a line-height property in pixels, then define
your font size in pixels as well. Do not use both ems and pixels.
This will help make sure the two work together if the user changes
font sizes.
Click to expand...

Why do you want to make the use change font sizes? Only incompetent
web coders do that.
With that in mind, perhaps em's would be better for common text usage
as both font size and line height will change accordingly.

font-size:1.25em; line-height:1.5em;
Click to expand...

Don't use units with line-height:

font-size:1.25em; line-height:1.5;
 
S

Sherm Pendley

Mr. X. said:
We can argue for month about adding a URL or not.
Click to expand...

No thanks - I'd rather spend that time helping people who know how to
be polite.

*plonk*

sherm--
 
D

dorayme

"Mr. X. said:
We can argue for month about adding a URL or not.
There are many newsgroup, that simply answer,
and their are people in this newsgroup, who be glade to answer,
Click to expand...

Everyone who has asked you to supply a URL are correct, it helps a lot
to see what is going on. It is not always easy to see what is wrong by
simple inspection of code in a usenet post.

Best if *you* do all the boring work instead of your helpers having to.
Boring work? Well, getting all your code and sticking it into an editor,
making sure the CSS bits go one place and the HTML bits go in another
place and scratching one's head about whether or not to put in what
doctype, how many errors in validation to fix that might have something
to do with the problem etc.

By making a URL and checking it yourself for validation via free
validation services for CSS and HTML errors, you will benefit too by
clearing up many mistakes or at least knowing what mistakes to ask about
that you do not understand. So this is good for you.
 
R

richard

The web has nothing to do with the printing industry; a web page is
not a piece of paper; "pt" does not apply.
Click to expand...


Actually it is "paper". A type of paper that can be recycled on
demand.
A "font" size is measured in points. Not pixels.
Then why are we given the choice to use "points"?


No, it doesn't. And if it did, it would be the wrong unit to use.
You may be able to read text at 12px, many others cannot.
Click to expand...

Oh? Then what does 800x600 resolution refer to? Point size?
Neither. See <http://www.w3.org/TR/CSS21/syndata.html#em-width>:

The 'em' unit is equal to the computed value of the
'font-size' property of the element on which it is used.
The exception is when 'em' occurs in the value of the
'font-size' property itself, in which case it refers to
the font size of the parent element.
Click to expand...


Pure gibberish. It's a roundabout way of saying, "We really don't know
either".
If I use, font-size:1.5em; how is this value computed?
I have been assuming that it is based on the user's choice if not
defined elsewhere.
So if the user has selected a 10pt font, oh my, he can't do that
because a "point" is irrelevant on a screen because a screen is not
paper, and I say display 1.5 em, then in effect, I have told the user
to see 15pt.

But if I say display 15px, then it does not matter what font point the
user has chosen, he will see the same thing I see.

Now tell me kind sir, when you select a font to use on your browser,
how does the browser define how the text will be displayed? In points
or pixels or....? It has to define it somehow.


100% of the current size.
Click to expand...

Ah hah! And what is that size based upon? Points.
Why do you want to make the use change font sizes? Only incompetent
web coders do that.
Click to expand...

Dude, I constantly have to change text size on most sites.
I have my browser font size set to like 14pt because I know many sites
just love small print. Even then, I find some that are way to small.
Don't use units with line-height:

font-size:1.25em; line-height:1.5;
Click to expand...

well whaddaya know, an almost agreement.
 
J

Jukka K. Korpela

richard said:
Pure gibberish.
Click to expand...

That's what you are writing mostly, so I wonder why people bother responding
to the garbage you send. Do you perhaps alternate your forged sender
information to make it more dífficult to ignore you?
 

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

<Button ...> display is fine, except for two things 1
Text does not display correctly to glow 2
Anyone familiar with WP Bakery and/or Visual Composer? 4
Need help with code on website (noob) 2
Measuring a string of text 1
Is it possible an iframe can overlapp another? 3
Slideshow not working properly 2
I Need Help with making a function that draws in a canvas using location data. 1

Members online

No members online now.
Total: 33 (members: 0, guests: 33)
Robots: 420

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top