Welcome to WebmasterWorld Guest from 34.238.189.171

Forum Moderators: not2easy

Message Too Old, No Replies

how to modify lists <li> for windows edge ?

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

New User

joined:June 6, 2016
posts:7
votes: 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
12:02 pm on June 7, 2016 (gmt 0)

New User

joined:June 6, 2016
posts:7
votes: 0


this is the class

ul.autoSuggest li {
color:red;
cursor:pointer;
padding:2px 1px;
text-align:left;
width:398px;
}
1:52 pm on June 7, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4391
votes: 310


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.
4:16 pm on June 7, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15753
votes: 826


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?
5:03 pm on June 7, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8637
votes: 283


Don't worry Lucy24 - this thread has found it's proper home now ;-)
1:42 pm on June 10, 2016 (gmt 0)

New User

joined:June 6, 2016
posts: 7
votes: 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]

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

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4391
votes: 310


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.
3:25 pm on June 17, 2016 (gmt 0)

New User

joined:June 6, 2016
posts: 7
votes: 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]

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

New User

joined:June 6, 2016
posts: 7
votes: 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
5:00 pm on June 17, 2016 (gmt 0)

New User

joined:June 6, 2016
posts: 7
votes: 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]

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

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15753
votes: 826


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.
6:07 pm on June 17, 2016 (gmt 0)

New User

joined:June 6, 2016
posts: 7
votes: 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
6:47 pm on June 17, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4391
votes: 310


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.
2:53 am on June 18, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15753
votes: 826


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.)