I just found a bug that's related to positioning in IE 5.5 (could someone
please tell me if this bug exists in IE 6, and if so, if my solution works in
that browser?). I don't know if this bug has been reported before, but here
it is, and its solution, in case anyone else runs into it.
On the following page there is a box (DIV) that contains six anchors. The
anchors have a style of display:block, so you should be able to move the mouse
cursor ANYWHERE inside the box to click on a link. However, that is not the
case in IE 5.5. In IE 5.5, you can only click on a link when the mouse cursor
is on top of the anchor's text. If the mouse cursor moves to the side of the
text, the link can no longer be clicked. This bug does not appear in Mozilla
or Opera. Here is a page that shows the problem: http://home.comcast.net/~delerious1/index10a.html
Could someone with IE 6 and Javascript enabled please tell me if the bug
occurs in that browser?
I know that the bug is related to positioning, because the following
javascript code is executed when the page is loaded:
divElement.styl e.left = '100px';
divElement.styl e.top = '100px';
If I take those two lines out, then the bug does not occur.
The solution to this bug is to call the focus() and blur() methods on one of
the anchors when the page is loaded. Here is a page that shows the solution: http://home.comcast.net/~delerious1/index10b.html
If the bug exists in IE 6, could someone please tell me if this solution fixes
it in that browser?
Thanks. 7 2204
On Fri, 19 Dec 2003 04:41:46 GMT, de*******@no.sp am.com declared in
comp.infosystem s. www.authoring.stylesheets,alt.html: On the following page there is a box (DIV) that contains six anchors. The anchors have a style of display:block, so you should be able to move the mouse cursor ANYWHERE inside the box to click on a link.
However, that is not the case in IE 5.5.
No surprises there. ;-)
In IE 5.5, you can only click on a link when the mouse cursor is on top of the anchor's text. If the mouse cursor moves to the side of the text, the link can no longer be clicked. This bug does not appear in Mozilla or Opera.
No surprises there either. :-D
Here is a page that shows the problem:
http://home.comcast.net/~delerious1/index10a.html
Here is a page that shows the solution:
http://home.comcast.net/~delerious1/index10b.html
If the bug exists in IE 6,
Yes.
could someone please tell me if this solution fixes it in that browser?
Yes. If Javascript is enabled, of course.
Yes, it's a known bug. It is nothing to do with Javascript, of course. It
is the fact that the div is positioned. I can't remember the solution
offhand (other than not positioning it, of course).
--
Mark Parnell http://www.clarkecomputers.com.au
"Mark Parnell" <we*******@clar kecomputers.com .au> wrote in message
news:1p******** *************** *****@40tude.ne t... On Fri, 19 Dec 2003 04:41:46 GMT, de*******@no.sp am.com declared in comp.infosystem s.www.authoring.stylesheets,alt.html: On the following page there is a box (DIV) that contains six anchors.
The anchors have a style of display:block, so you should be able to move the
mouse cursor ANYWHERE inside the box to click on a link.
The hand only activates when the cursor is over the text.
Which is what the anchor is referring to, not the division itself.
Perhaps padding with trailing spaces might cure that problem.
IE6 BTW. de*******@no.sp am.com wrote:
[snip] On the following page there is a box (DIV) that contains six anchors. The anchors have a style of display:block, so you should be able to move the mouse cursor ANYWHERE inside the box to click on a link. However, that is not the case in IE 5.5. In IE 5.5, you can only click on a link when the mouse cursor is on top of the anchor's text. If the mouse cursor moves to the side of the text, the link can no longer be clicked. This bug does not appear in Mozilla or Opera. Here is a page that shows the problem:
[snip] If the bug exists in IE 6, could someone please tell me if this solution fixes it in that browser?
I have just copied your code and added a "width: 400px;" after the "display:
block;". This makes it fairly consistent in IE 5, IE 6, and others.
In fact, I have been using the combination of display: block and width on all
my web sites for some time to make my buttons look OK. Normally I use a
percentage - someone said that you shouldn't use 100% because of an IE bug, so
I use 99.9%, but I don't know if that is true. Have a look at them, below. You
may need to experiment. My sites don't use Javascript.
--
Barry Pearson http://www.Barry.Pearson.name/photography/ http://www.BirdsAndAnimals.info/ http://www.ChildSupportAnalysis.co.uk/
Richard wrote: The hand only activates when the cursor is over the text. Which is what the anchor is referring to, not the division itself. Perhaps padding with trailing spaces might cure that problem. IE6 BTW.
If it's display:block, that's incorrect.
Barry Pearson wrote: In fact, I have been using the combination of display: block and width on all my web sites for some time to make my buttons look OK. Normally I use a percentage - someone said that you shouldn't use 100% because of an IE bug, so I use 99.9%, but I don't know if that is true. Have a look at them, below. You may need to experiment. My sites don't use Javascript.
Older versions of IE think that 100% means 100% of the page, rather than
100% of the containing element.
<de*******@no.s pam.com> wrote in message
news:3f******** *******@news.md .comcast.gigane ws.com... I just found a bug that's related to positioning in IE 5.5 (could someone please tell me if this bug exists in IE 6, and if so, if my solution works
in that browser?). I don't know if this bug has been reported before, but
here it is, and its solution, in case anyone else runs into it.
On the following page there is a box (DIV) that contains six anchors. The anchors have a style of display:block, so you should be able to move the
mouse cursor ANYWHERE inside the box to click on a link. However, that is not
the case in IE 5.5. In IE 5.5, you can only click on a link when the mouse
cursor is on top of the anchor's text. If the mouse cursor moves to the side of
the text, the link can no longer be clicked. This bug does not appear in
Mozilla or Opera. Here is a page that shows the problem:
http://home.comcast.net/~delerious1/index10a.html
Could someone with IE 6 and Javascript enabled please tell me if the bug occurs in that browser?
I know that the bug is related to positioning, because the following javascript code is executed when the page is loaded:
divElement.styl e.left = '100px'; divElement.styl e.top = '100px';
If I take those two lines out, then the bug does not occur.
The solution to this bug is to call the focus() and blur() methods on one
of the anchors when the page is loaded. Here is a page that shows the
solution: http://home.comcast.net/~delerious1/index10b.html
If the bug exists in IE 6, could someone please tell me if this solution
fixes it in that browser?
Thanks.
I believe the error occurs because a soon as you dynamically (style/css)
position an element it is removed from the normal 'flow' of the document and
placed on it's own layer. This somehow affects how the block element is
rendered by the browser.
Your example - somewhat simplified:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>test</TITLE>
<STYLE type="text/css">
A {
background-color: blue;
color: white;
display: block;
font-family: Verdana;
font-size: x-small;
font-weight: normal;
padding-left: 0.3em;
padding-right: 0.4em;
text-decoration: none;
width: 100%;
}
A:hover {
background-color: rgb(0,192,255);
}
#submenu {
border-color: rgb(0,192,255);
border-style: solid;
border-width: 2px;
left: 200px;
position: absolute;
top: 100px;
visibility: visible;
width: 200px;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="submenu">
<A id="a1" href="fakepage. html">link 1</a>
<A id="a2" href="fakepage. html">Link number 2.00</a>
<A id="a3" href="fakepage. html">Link trey</a>
<A id="a4" href="fakepage. html">Link fourvages</a>
<A id="a5" href="fakepage. html">Link 5</a>
<A id="a6" href="fakepage. html">Link #6</a>
</DIV>
</BODY>
</HTML>
Without Javascript you need to add the WIDTH attribute for your DIV
submenu. Use whatever form you want (px or % probably).
Oh no, I just discovered my solution doesn't work in IE 5.0. :( This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: murali |
last post by:
Hello everyone,
I used absolute positioning with div tag in my website. The page looks
cool as long as someone doesn't try to zoom in by increasing the text
size (ctrl++ or thru changing font size in browser settings). When
someone does that, the layers seem to overlap and the layer with a
greater z value pops in front and the other layers...
|
by: Bryan R. Meyer |
last post by:
Hello Everyone,
The problem of browser resizing has become an issue for me. While
redesigning my webpage, I set the left and right margins to be auto so
that my content would be centered. However, there are images that I
used absolute positioning in order to place them in the appropriate
location on my page. When I do a browser resize,...
|
by: Jack Hughes |
last post by:
This argument has come up two or three times lately.
We have a web standards document at our company that say "Use valid
HTML 4; We don't recommend switching to DIV-based CSS-P for layout
just yet though, tables are a lot easier."
That's because we have a lot of developers who aren't ready to move to
CSS-P and DIVs just yet.
But I'm...
|
by: Jane Withnolastname |
last post by:
I am trying to re-work an old site by replacing the html with css.
On the main page, I have a logo image which I needed centred on the
initial screen. I found the solution here:
http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example)
The problem is, under the image is a large table. But using the above
positioning, now the...
|
by: Asad |
last post by:
Hi,
I am basically trying to accomplish drop down menus for navigation on
a site. And I'm pretty much done except I am having one problem. The
z-index is not working with relative positioning!
Basically I have a page such as this:
http://members.rogers.com/asadkhan2/prob2.jpg
| |
by: NS |
last post by:
I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up
Here is the basic HTML I am using:
<html>
<head>
<script language="JavaScript">
<!--
|
by: TheCeej |
last post by:
I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm pretty sure I know what the problem is already. I just don't know how to fix it. I'd be very grateful of any help. I'll post what I'm trying to...
|
by: K. |
last post by:
Hello all!
I have a question.
I have built a page. I would like to make my page better positioning in the
web searchers i.e. in google search browser.
There are many companies which do such things for $$$.
I would like to do by myself. Could you give me some examples which explain
how to modify the page to make it better in web browser...
|
by: Fistro |
last post by:
I'm trying to find a design that would allow me to build web pages
without having to worry about compatibility issues (not too much, in
any case,,,)
I've came across this CSS layout technique:
http://alistapart.com/articles/fauxabsolutepositioning
It calculates the left offset from a fixed position, as opposed to
calculating it from the...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
| |
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |