Hello All,
I am fairly new to html authoring and have run into a strange problem.
I have a simple GIF file that is a black horizontal line. As a test
start I am trying to display it twice with the left edge of the second
line aligned with the right edge of the first.
I have set the width of the first line to be 100 pixels with an
absolute position left offset 0. I would think that the correct left
offset of the second line should then be 100 pixels ... but it is 50
(and in general is width/2). Why? Any ideas on what I am missing is
greatly appreciated. Below is the html I am using ...
<snip>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
<!--
#image0 {
position:absolute;
left:0;
top:100;
height:5;
width:100;
}
-->
</style>
<style type="text/css">
<!--
#image1 {
position:absolute;
left:50;
top:99;
height:5;
width:200;
}
-->
</style>
<head>
<title>Tester Page</title>
</head>
<body>
<div id="image0">
<img name="fu0" id="image0" src="~/test_code/html/hline1.gif">
</div>
<div id="image1">
<img name="fu1" id="image1" src="~/test_code/html/hline1.gif">
</div>
</body>
</html>
<snip>
Sincerely,
TJ Walls
Ph.D. Candidate - Stony Brook University 8  6528 
On Mon, 25 Oct 2004 11:14:04 -0400, TJ Walls
<tj*****@mindspring.nospam.com> wrote: I am fairly new to html authoring and have run into a strange problem.
I have a simple GIF file that is a black horizontal line. As a test
start I am trying to display it twice with the left edge of the second
line aligned with the right edge of the first.
I have set the width of the first line to be 100 pixels
No you haven't. You've set it to be 100 somethings. All non-zero lengths
in CSS must have a specified unit.
with an
absolute position left offset 0. I would think that the correct left
offset of the second line should then be 100 pixels ... but it is 50
(and in general is width/2). Why? Any ideas on what I am missing is
greatly appreciated. Below is the html I am using ...
<snip>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
<!--
#image0 {
position:absolute;
left:0;
top:100;
height:5;
width:100;
}
-->
</style>
<style type="text/css">
<!--
#image1 {
position:absolute;
left:50;
top:99;
height:5;
width:200;
}
-->
</style>
There's no need for two style elements and no need for those HTML
comments. The style elements should also go inside the head element not
before it.
<head>
<title>Tester Page</title>
</head>
<body>
<div id="image0">
<img name="fu0" id="image0" src="~/test_code/html/hline1.gif">
</div>
The alt attribute is required in HTML 4.01. I know this is just a test
page but good habits are just as hard to break as bad ones - so develop
some good habits.
<div id="image1">
<img name="fu1" id="image1" src="~/test_code/html/hline1.gif">
</div>
Each id must be unique. But you're using id="image1" twice which is an
error. Now it turns out that instead of ignoring the styles for one or
both of the elements in question your browser has decided to break the
rules and apply the styles to both elements (and break the rules and treat
your unitless lengths as pixel lengths). So the div is positioned 50px
from the edge of the viewport and the image is positioned 50px from the
edge of the div. 50 + 50 = 100.
Your code be corrected and simplified to become this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Tester Page</title>
<style type="text/css">
#image0 {
position:absolute;
left:0;
top:100px;
height:5px;
width:100px;
}
#image1 {
position:absolute;
left:100px;
top:99px;
height:5px;
width:200px;
}
</style>
</head>
<body>
<img id="image0" src="~/test_code/html/hline1.gif" alt="Image Zero">
<img id="image1" src="~/test_code/html/hline1.gif" alt="Image One">
</body>
</html>
Steve
On Mon, 25 Oct 2004 11:14:04 -0400, TJ Walls
<tj*****@mindspring.nospam.com> wrote: As a test
start I am trying to display it twice with the left edge of the second
line aligned with the right edge of the first.
I have set the width of the first line to be 100 pixels with an
absolute position left offset 0. I would think that the correct left
offset of the second line should then be 100 pixels ... but it is 50
(and in general is width/2). Why? Any ideas on what I am missing is
greatly appreciated.
A unit of measure. In CSS, you must indicate %, em, px, etc. or the UA
will guess (wrong).
Dear Steve,
Thank you very much for your helpful comments. One quick followup
question ... I purchased the O'Reilly HTML Definitve Guide over the
weekend and basically everything I've learned of CSS so far has come from
that ... but they said that the HTML comments in the style elements is for
compatibility with older browsers ... ie, browsers that don't recognize
<style> will ignore everything in the comments and browsers that recognize
<style> will ignore the comment lines ...
Is this outdated information and practice?
-TJ
Ph.D. Candidate - Stony Brook University
On Mon, 25 Oct 2004 11:57:45 -0400, TJ Walls
<tj*****@mindspring.nospam.com> wrote: Dear Steve,
Thank you very much for your helpful comments. One quick followup
question ... I purchased the O'Reilly HTML Definitve Guide over the
weekend and basically everything I've learned of CSS so far has come from
that ... but they said that the HTML comments in the style elements is
for
compatibility with older browsers ... ie, browsers that don't recognize
<style> will ignore everything in the comments and browsers that
recognize
<style> will ignore the comment lines ...
Is this outdated information and practice?
Quite. The browsers you're attempting to accomodate are dinosaurs. For at
least the last 6-7 years all CSS-capable browsers have relatively correct
rendering of CSS.
Best way to ensure whatever old browsers which remain will not see styles
is to import the stylesheet.
On Mon, 25 Oct 2004 11:57:45 -0400, TJ Walls
<tj*****@mindspring.nospam.com> wrote: Thank you very much for your helpful comments. One quick followup
question ... I purchased the O'Reilly HTML Definitve Guide over the
weekend and basically everything I've learned of CSS so far has come from
that ...
That's a good reference book and I use it all the time as such. I don't
think I would recommend it as a tutorial though.
but they said that the HTML comments in the style elements is for
compatibility with older browsers ... ie, browsers that don'trecognize
<style> will ignore everything in the comments andbrowsers that
recognize <style> will ignore the comment lines ...
Is this outdated information and practice?
The <style> element was introduced (as a placeholder) in HTML 3.2 back in
1996. Any browser produced after that time _should_ have no problems with
the <style> element, regardless of whether they actually parse CSS or not.
Anyway, it's almost always better to use an external CSS file via a <link>
element, though I do agree that for quick testing a <style> block is handy
- but for quick testing you don't need to worry about old browsers.
Steve
On Mon, 25 Oct 2004, Neal wrote: A unit of measure. In CSS, you must indicate %, em, px, etc.
yes... (except, optionally, for 0)
or the UA will guess (wrong).
I know that happens with some misbegotten software, but I think you'll
find that the CSS specification forbids such behaviour. So, those
clients which "guess" are in a state of sin.
(What follows is marked for reading with monospace font; please
keep in mind the significance of the word "must" in the sense of
RFC2119.) http://www.w3.org/TR/REC-CSS2/syndat...parsing-errors
4.2 [...]
In some cases, user agents must ignore part of an illegal style
^^^^^^^^^^^
sheet. This specification defines ignore to mean that the user agent
parses the illegal part (in order to find its beginning and end), but
otherwise acts as if it had not been there.
[...]
User agents must ignore a declaration with an illegal value. For
^^^^
example:
[...]
{ border-width: 3 } /* a unit must be specified for length values */
^^^^
Anything which fails to do that cannot claim to be a W3C-compatible
client agent.
[You probably knew all that; but maybe someone reading here could be
misled by the fact you didn't mention it in so many words.]
all the best
On Mon, 25 Oct 2004 17:39:14 +0100, Alan J. Flavell <fl*****@ph.gla.ac.uk>
wrote: [You probably knew all that; but maybe someone reading here could be
misled by the fact you didn't mention it in so many words.]
Agreed. Bottom line - explicitly state the measurement for all non-zero
values.
On Mon, 25 Oct 2004, Steve Pugh wrote: The <style> element was introduced (as a placeholder) in HTML 3.2
back in 1996.
Indeed; and HTML 3.2 (as it says itself) was introduced to codify
existing practice, so you can take it that many of the browsers that
were in use at that time already behaved themselves in this regard.
Any browser produced after that time _should_ have no problems with the
<style> element, regardless of whether they actually parse CSS or not.
Just so; and if we go back that far, we're getting back to before the
time when browsers supported name-based virtual hosting (i.e the HTTP
Host: extension header), without which they'd be practically useless
on today's web.
So I really wouldn't lose any sleep nowadays over that. Irrespective
of your views on the next point.
Anyway, it's almost always better to use an external CSS file via a
<link> element, though I do agree that for quick testing a <style>
block is handy - but for quick testing you don't need to worry about
old browsers.
Yup, fully agreed.
all the best This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Harlan Messinger |
last post by:
What am I not understanding about the definition of { position: absolute; }?
"The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These...
|
by: Michael Hill |
last post by:
I have created a test page with a window in it created by using divs, but I
haven't figured out how to move the "down arrow" to the bottom of the main
div.
http://www.hulenbend.net/test2.html
...
|
by: Gustaf Liljegren |
last post by:
Here's what I'm trying to achieve:
1. A <div>, centered on screen, 600px wide and 100px high, with a
background-image (also 600 x 100).
2. Text (an <h1> element) positioned with precision inside...
|
by: ivanhoe |
last post by:
What I wanted was to get rid of offsetLeft and use "proper" way
instead....but when I do
document.getElementById('someDiv').style.left;
I keep getting empty string, unless I first set it manually...
|
by: mike eli |
last post by:
Hi,
I have several absolute positioned elements inside an absolute
positioned DIV.
I would like one of the nested elements to have a dynamic width. I set
it's left and right attributes to 5, so...
|
by: Alan Silver |
last post by:
Hello,
Having been a light reader of this ng for a few months now (after
several years absence), I have noticed that absolute positioning seems
to be considered a Very Bad Thing around here....
|
by: Mark |
last post by:
hi, i'm trying to position something in the top right corner of a
container, but i can't seem to figure out how to get it working.
here's the html
<div class='thumb'><a href='image.jpg'><img...
|
by: GGG |
last post by:
Neither go the way I want them to... Absolute doesn't get it right
over multiple browsers. Relative puts it in the right place, but only
the portion that it is "relative" the style, #wleMenu, is...
|
by: mehstg1319 |
last post by:
Hi there
Not sure if anyone can help me, I am working on a site for my
university, and am having a bit of trouble with css positioning. I am
very new to css and do not know very much about it....
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
