how to modify lists <li> for windows edge ?

Forum Moderators: not2easy

Message Too Old, No Replies

how to modify lists <li> for windows edge ?

RogerL

12:00 pm on Jun 7, 2016 (gmt 0)

I have an old (2007) intranet site using i-frames
it displays a list using this class and script
it displays the list properly on IE11 / windows 7
but not with firebox/windows 7, chrome/windows7 or IE11/edge/windows10
the list is shown, but instead of one column with 10 rows
it renders as 3 columns (using the full width of the page), and 4 rows deep

I'm thinking this is an i-frame issue
but I can't find a solution

RogerL

12:02 pm on Jun 7, 2016 (gmt 0)

this is the class

ul.autoSuggest li {
color:red;
cursor:pointer;
padding:2px 1px;
text-align:left;
width:398px;
}

not2easy

1:52 pm on Jun 7, 2016 (gmt 0)

A quick visit to caniuse says Edge is not ready for iframes: [caniuse.com...] but it also shows issues with IE11 so my guess is that it is the html/doctype in use that might be making it look funny. It also says Edge doesn't play well with <li> styles.

You did not say what format is used for the iframe or its container. In html 5 there are some additional lines for the css to help, but without more details I don't want to give you useless information. Is all of the css inline or in an external stylesheet? Is the page built with some particular tool that might not be straight html? Do the iframe and its parent page use the same html doctype? Generally you can limit the width of things in modern browsers by creating a contain of an explicit width such as <div style="width: 400px;"> that surrounds the <ul> to limit its width.

lucy24

4:16 pm on Jun 7, 2016 (gmt 0)

instead of one column with 10 rows it renders as 3 columns (using the full width of the page), and 4 rows deep

You mean it's using multi-column display even though you haven't told it to? Yuk.

What happens if you explicitly tell it not to use multiple columns, as in a global

ul, ol {column-count: 1; column-width: 100%;}

Urk. I belatedly noticed this is the Content Management subforum, not CSS. Can you edit your own stylesheets?

ergophobe

5:03 pm on Jun 7, 2016 (gmt 0)

Don't worry Lucy24 - this thread has found it's proper home now ;-)

RogerL

1:42 pm on Jun 10, 2016 (gmt 0)

setting the <div> width to 398px has resolved the 3-column problem, so this is one of the list items

<li name="EXAMPLE" id="36" onclick="selectSuggestion(this, 'txtCompany', 'intCompanyID', 'txtCompany_suggestions');"</li>

this is the onclick() routine
with IE11 the alert shows EXAMPLE, but with chrome it shows 'undefined'
is there a different syntax to access name / id ?

function selectSuggestion(itemClicked, textFieldId, valueFieldId, suggestionId) {
alert(itemClicked.name);

document.getElementById(textFieldId).value = itemClicked.name;
document.getElementById(valueFieldId).value = itemClicked.id;
}

[edited by: not2easy at 3:10 pm (utc) on Jun 10, 2016]
[edit reason] Please use "example" to replace site/brand specifics [/edit]

not2easy

3:07 pm on Jun 10, 2016 (gmt 0)

To be able to get help with a problem, we would need to have more information about the document details. For example: the html/doctype in use? Is the page built with some particular tool that might not be straight html? Do the iframe and its parent page use the same html doctype? Without knowing the doctype I don't know for certain whether it would accept the use of name="something" or not. I can see that the <li tag is open, it would not work as <li> without the ">" but there is script within the <li too.

RogerL

3:25 pm on Jun 17, 2016 (gmt 0)

you asked, Do the iframe and its parent page use the same html doctype?
yes, I believe the doctype is
type="text/javascript"

this is the start of the page source (index.php)
<html>
<head>

<title>RLL .::. Production</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Private">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<script language="Javascript" type="text/javascript">

this is the start of the frame source
<html>
<head>
<link href="../inc_v2/css/common.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="..validateWorkOrder.js"></script>
<script language="JavaScript" type="text/javascript">

var jsAction = "Enabled"

both the parent and iframe are generated from php

.............................
you stated, I can see that the <li tag is open, it would not work as <li> without the ">" but there is script within the <li too.

this is what I get with chrome's inspect, which shows the closing </li>
<li name="EXAMPLE" id="36" "="" onmouseover="hover(this, 'hover');" onmouseout="hover(this, '');" onclick="selectSuggestion(this, 'txtCompany', 'intCompanyID', 'txtCompany_suggestions');" <strong="" class="">EXAMPLE</li>

[edited by: not2easy at 10:18 pm (utc) on Jun 17, 2016]
[edit reason] Please use "example" to replace site/brand specifics [/edit]

RogerL

3:47 pm on Jun 17, 2016 (gmt 0)

I added this, as the first line for both the parent and i-frame
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

it does not solve the problem

RogerL

5:00 pm on Jun 17, 2016 (gmt 0)

I've removed the doctype and 'type="text/javascript"' references that I added
back to the original version of the source

if I click on this list item
<li name="EXAMPLE" id="36" "="" onmouseover="hover(this, 'hover');" onmouseout="hover(this, '');" onclick="selectSuggestion(this, 'txtCompany', 'intCompanyID', 'txtCompany_suggestions');" <strong="" class="">EXAMPLE</li>

the selectSuggestion() function is invoked, and I added three alerts
function selectSuggestion(itemClicked, textFieldId, valueFieldId, suggestionId) {
alert(itemClicked.name);
alert(itemClicked.id);
alert(textFieldId);
}

the first displays 'undefined', the next two shows the correct info
any idea why the 'name' value cannot be passed to the function ?

[edited by: not2easy at 10:20 pm (utc) on Jun 17, 2016]
[edit reason] Please use "example" to replace site/brand specifics [/edit]

lucy24

5:04 pm on Jun 17, 2016 (gmt 0)

I added this, as the first line

It shouldn't be necessary to say anything more than
<!doctype html>
This is known as the HTML 5 DTD, though technically 5 doesn't have a DTD at all; it's just to keep the browser from going into "quirks" mode.

RogerL

6:07 pm on Jun 17, 2016 (gmt 0)

I had tried <!doctype html> too
made sure it is the first line of both page and i-frame html, confirmed using chrome's view page and view frame source

tested list presentation using original class where no width was specified
still rendered as 3-columns instead of 1-column

had to add
width = 100%;
to properly display list as one column

then tested on-click function, alert() still shows that the name attribute is 'underfined'

so adding doctype definition doesn't hurt but doesn't help

not2easy

6:47 pm on Jun 17, 2016 (gmt 0)

The "name" attribute is deprecated in html5, if you are going with html5 try changing that to "id". A doctype should always be used, but it matters that the correct doctype is in place. It is always best to use the doctype that actually tells a browser what version of html is on the page so it does not misinterpret the page. There are differences in iframe attributes between html, xhtml and html5. One quick reference that might help is at the w3schools site: [w3schools.com...] where they show you what attributes can be used with which html.

lucy24

2:53 am on Jun 18, 2016 (gmt 0)

The "name" attribute is deprecated in html5

Only for the <a> element. It's fine on other things, notably metas. And it's essential if, as seems to be the case here, your script is supposed to pick up everything with a particular name. (For example, a group of radio buttons would all have separate id's, but they have to share a name.)