This is my website for mobiles to visit : m.looa.com
If you got an Iphone,please visit it and you will find that the words don't break line .
This only happens in Iphone's browser, it looks fine for android and almost all browsers for PC,including
IE Chrome FireFox and even Safari(you can try that).
I know this must have something to do with CSS but I can't figure out where the problem lies .
Below is the code from my webpage,please pay attention to the class : middigest,I think that probably is where the problem lies(I have delete some code to make it more clear):
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='theme/mobile/img/style.css' type='text/css' media='all' />
</head>
<body onload='setPage(160)'>
<div class='allbox'>
<dl class='alltop'>
<dt class='w2' onclick="window.location.href='http://m.looa.com/g_m_city'"><a>北京</a></dt>
<dd><a href='http://m.looa.com/mobile'><img src='theme/mobile/img/looa_logo.png'/></a></dd>
<dt class='w3' onclick="window.location.href='http://m.looa.com/g_m_cang'"><a>收藏夹</a></dt>
</dl>
<dl class='topmid'>
<dt><img src='theme/mobile/img/looa_nearby_s.gif' /></dt>
<dd onclick= 'getCityDis()'><a> <img src='theme/mobile/img/looa_dis.gif'/></a></dd>
</dl>
<div class='midbox' id='midbox'>
<dl class='midmenu'>
<dt>距离<strong> 0.0km</strong></dt>
<dd>商家<strong> 纯视觉摄影工作室</strong></dd>
</dl>
<div class='middigest'>
<a href='http://m.looa.com/g_m_detail?deal_id=6921'>性感翘臀，迷人水腰，诱人S曲线，这一站就是你</a> <----------- this line
</div>
<dl class='midpic'>
<dt><a href='http://m.looa.com/g_m_detail?deal_id=6921'><img width='175px' height='129px' src='http://www.looa.com/theme/tuan/outsite_deal_img/201010/1287700044_small.jpg'/></a></dt>
<dd>
<ul>
<li>现价</li>
<li style='margin-bottom:6px;'><span><strong class='numfont'>3</strong>元</span></li>
<li>原价 264元</li>
<li>购买 1人</li>
<li>网站 <a href='#' onclick='gotoOutSite("http://www.groupon.cn/html/product/FS/FS4446.html")'>团宝网</a></li>
<li>剩余 6天9小时</li>
</ul>
</dd>
</dl>
<dl class='midbot'>
<dt><a href='http://m.looa.com/m_map?deal_id=6921'><img src='theme/mobile/img/looa_map.gif' /></a></dt>
<dt><img id='cangbtn6921' src='theme/mobile/img/looa_no_cang.gif' onclick="toggleDealCangState('cang',6921,60)" /></dt>
<dt><img src='theme/mobile/img/no_phone.gif' /> </dt>
</dl>
</div>
************* Repeat *****************
</div>
</body>
</html>
and the CSS related is :
.middigest {word-break:normal;float:left;width:98%;line-height:17px;font-weight:bold;padding:6px 0 8px 0;clear:both;margin:0 1%;}
also,if you want to see the whole CSS,please go to http://m.looa.com/theme/mobile/img/style.css
Anyone of you has the experience of web developing
for Iphone ? Give me a hand please.
Thanks so much !!!
I don't have an iphone so I can't test it but did you try those CSS properties?
White-space
Word-wrap
Overflow: hidden
Related
So i was making a project tribute page and as i started to write the css i was first checking it with firefox device toolbar, but when i opened the same code on chrome the image that i had given a img-fluid class was taking up its original full width (1065px)
The div #content is inside a div with .container-fluid
this is how it looks on chrome
this is how it looks on firefox
<div id="content" class="container">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.webp" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
edit: okay so i started to add elements to a new file to see when the error would start to occur and it happened when I pasted the section that follows #Home which is #Bio.
I will edit the code so you can see the following section because i still dont know why it's causing the issue
/*I'll take away the css because none of it proved to be an issue*/
<div class="container-fluid">
<!-- there's a nav div here but it doesnt cause issues-->
<div class="container-fluid" id="content">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.png" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
<!--the #Bio has three .achivement elements but even if its just one and the figure element the issue occurs-->
<div id="Bio" class="container">
<div id="summary">
<h1>Her life</h1>
<div class="achivement">
<ul>
<li>The iconic writer got her start when she won Vogue's "Prix de Paris" contest and got a job opportunity in the magazine's
New York office as price for one month. Once there, she got a permanent position after writing a seminal article on self-respect on the fly after the reporter that was supposed to make the assignment failed to deliver a complete article. She worked at the famed magazine for years after that.</li>
</ul>
<blockquote cite="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">
<p>
" Had I been blessed with even limited access to my own mind there would have been no reason to write. I write entirely to find out what I'm thinking, what I'm looking at, whot I see and what it means."
</p><cite>-- Joan Didion on her "Why I Write" article for the New York Times</cite>
</blockquote>
</div>
<figure>
<img src="images/tradlands-flickr.jpg" alt="joan didion in later years">
<figcaption>Didion by Irving Penn.</figcaption>
</figure>
</div>
</div>
</div>
</div>
Try adding the rule in your css file:
<style>
figure .img-fluid {
width: 100%;
}
</style>
I'm pretty sure it will work for you.
So after taking off and adding elements one-by-one I realized that an image on the section that followed the #Home div didn't have .img-fluid
I don't know why that wasn't an issue on firefox but I've tested the code on both browsers and it's working properly.
I am trying to get a simple Dragula implementation but it is refusing to work. My code:
<head>
<link href='drag3.css' rel='stylesheet' type='text/css' />
<link href='css/dragula.css' rel='stylesheet' type='text/css' />
<script src='drag3.js'></script>
</head>
<div class="container">
<h1>Drag & Drop</h1>
<p>Trying out <code>dragula.js</code>. Source here.</p>
<div class="left">
<div id="drag-elements">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>
<div id="drop-target">
</div>
</div>
<div class="right">
<div id="display">Display</div>
</div>
</div>
<script src='js/dragula.js'></script>
<script src='js/example.min.js'></script>
Not sure what I am doing wrong, any help would be gratefully received!
The live code is here:
Dragula Implementation
OK so I fixed it by simply moving the
<script src='drag3.js'></script>
to the end of the page.
Indeed :
There's a caveat to dragula. You shouldn't include it in the head of your web applications. It's bad practice to place scripts in the head, and as such dragula makes no effort to support this use case.
Place dragula in the body, instead.
...according to https://github.com/bevacqua/dragula
I have written selenium code for smoke test on my MSCRM aplication. I am unable to click Ribbon Button . Action can be performed by simple click or double click.The Below two Code i have written for Button
WebElement Email = driver.findElement(By.xpath("//span[text()='Email Handling']"));
Actions action2 = new Actions(driver);
action2.moveToElement(Email).doubleClick().perform();
OR
// driver.findElement(By.xpath(".//*[#id='incident|NoRelationship|Form|fmc.incident.form.Button.EmailHandling-Medium']/span[2]")).click();
Below is HTML structure of page
<html webdriver="true">
<head>
<body scroll="no">
<noscript> <div style="padding:10px;background-color:#C9C7BA;"> <span class="warningHeader">Important:</span> <hr size="1" color="#000000"> <span class="warningDescription"> Microsoft Dynamics CRM makes <i>extensive</i> use of your Web browser's client-side abilities. You either have one of these features turned off or your security settings are set so high that they prevent these features from being used. To enable these features, change your browser settings to allow the Microsoft Dynamics CRM site to run JavaScript. Learn more. </span> </div> </noscript>
<!--[if MSCRMClient]> <script type="text/javascript"> var MS_CRM_CLIENT_OUTLOOK_INSTALLED=true; </script> <![endif]-->
<span id="crmEventManager"/>
<div id="crmHistoryManager" style="display:none;" count="1"/>
<div id="crmRecentlyViewed"/>
<div id="crmLookupMru"/>
<div id="crmTopBar" class="ms-crm-TopBarContainer ms-crm-TopBarContainerForm" style="visibility: visible; background-position: 719px 0px;">
<div id="crmRibbonManager" currentribbonelement="ribbonContainer0" style="">
<div id="ribbonContainer0" class="loaded" style="display: inline;">
<div id="Mscrm.Ribbon" class="ms-cui-ribbon" unselectable="on" aria-describedby="ribboninstructions" role="toolbar">
<span id="ribboninstruction" class="ms-cui-hidden" unselectable="on">undefined</span>
<div class="ms-cui-ribbonTopBars" unselectable="on">
<div class="ms-cui-tabContainer " unselectable="on">
<ul id="EntityTemplateTab.incident.NoRelationship.Form.Mscrm.Form.incident.MainTab" class="ms-cui-tabBody" unselectable="on" role="tabpanel" aria-labelledby="EntityTemplateTab.incident.NoRelationship.Form.Mscrm.Form.incident.MainTab-title">
<li id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Save" class="ms-cui-group" unselectable="on">
<li id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions" class="ms-cui-group" unselectable="on">
<span class="ms-cui-groupContainer" unselectable="on">
<span class="ms-cui-groupBody" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge" class="ms-cui-layout" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0" class="ms-cui-section" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0-0" class="ms-cui-row" unselectable="on">
<a id="incident|NoRelationship|Form|fmc.incident.form.Button.EmailHandling-Medium" class="ms-cui-ctl-medium " unselectable="on" href="javascript:;" onclick="return false;" aria-describedby="incident|NoRelationship|Form|fmc.incident.form.Button.EmailHandling_ToolTip" mscui:controltype="Button" role="button">
<span class="ms-cui-ctl-iconContainer" unselectable="on">
<span class="ms-cui-ctl-mediumlabel" unselectable="on">Email Handling</span>
</a>
</span>
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0-1" class="ms-cui-row" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0-2" class="ms-cui-row" unselectable="on">
</span>
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-1" class="ms-cui-section" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-2" class="ms-cui-section" unselectable="on">
</span>
Can any one look into this Issue. I checked there is no frame on HTML page
I didn't got any exception but there is no action performing after click action on button
after wait of 1 min new window is opening in eclipse IDE and getting Class File Editor......Source not found Issue
I have just roughly looked at the html element via FireBug I found the top container
become like that
<div id="crmHistoryManager" style="display:none;" count="1"/> eventhough the div element ends on the same line but the fireFox has different interpretation
if we run your code, I get exception which state current element is not visible, hence you can't interact with so the FireFox has converted the given div into a top container for all other divs below.
Below please find my article (individual blog) template for Modx. Everything works fine except for the fact that my [[*pagetitle]] value is not visible. I can select it with the mouse, but it is invisible. I am using the default sample.ArticleRowTpl. Also, find below my container template as well. Does anyone know why it wont display the [[*pagetitle]] href?
Individual article blog template:
[[$blogHeader]]
[[$blogMenu]]
Blog
[[*pagetitle]]
<p class="post-info">
<span class="left">Posted on [[*publishedon:strtotime:date=`%b %d, %Y`]] by [[*publishedby:userinfo=`username`]]</span>
</p>
<br>
<div class="entry">
[[*content]]
</div>
<!--<hr />-->
<p>
[[*articlestags:notempty=`
<br>
<span class="tags left"> <b style="color: #000000">Tags: </b>[[+article_tags]]</span>
<br>
`]]
</p>
<div class="post-comments" id="comments">
<br>
[[+comments]]
<h3>Add a Comment</h3>
[[+comments_form]]
<br>
</div>
</div>
<div class="col-md-4 verticalLine">
<div class="sidemenu">
<h3>Latest Posts</h3>
<ul>
[[+latest_posts]]
</ul>
</div>
[[+comments_enabled:is=`1`:then=`
<div class="sidemenu">
<h3>Latest Comments</h3>
<ul>
[[+latest_comments]]
</ul>
</div>
`]]
</div>
</div>
<!-- end: .containter -->
[[$blogFooter]]
Blog container template
[[$blogHeader]]
[[$blogMenu]]
Blog
[[*content]]
<div class="col-md-4 verticalLine">
<div class="sidemenu">
<h3>Latest Posts</h3>
<ul>
[[+latest_posts]]
</ul>
</div>
[[+comments_enabled:is=`1`:then=`
<div class="sidemenu">
<h3>Latest Comments</h3>
<ul>
[[+latest_comments]]
</ul>
</div>
`]]
</div>
</div>
<!-- end: .containter -->
[[$blogFooter]]
I figured it out. Somehow I had a class in my .css file (which I wasnt actually using) that was causing this anomaly. It took me a while to troubleshoot, but I finally figured out which one it was and removed it. It works fine now:)
basically guys i will like to layout a website with dojo where by i will have a header, content area ( this is divided in two with some accordions in the left pane and the right for the main content) then a footer.
since i need the site to always have this layout i decided to put it in the master layout. however when i view the site, i see the default index page alright but its not in the pane as i was hoping and none of the dijit widgets gets rendered.
not sure if pasting large code in a post is allowed if not i am sorry but below is the code for the master layout. i have not done much to the default zend tool structure. i have only created a couple of modules:
<?php
Zend_Dojo::enableView($this);
$this->dojo()->setCdnBase(Zend_Dojo::CDN_BASE_GOOGLE)
->addStyleSheetModule('dijit.themes.tundra')
->setDjConfigOption('parseOnload', TRUE)
->setDjConfigOption('locale', 'en-GB')
->setDjConfigOption('isDebug', TRUE);
echo $this->dojo();
?>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");
</script>
</head>
<body>
<div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainer">
<div id="header" dojoType="dijit.layout.ContentPane" region="top" splitter="false">
<div id="logo">
<img src="/images/logo.gif" />
</div>
<div id="menu">
HOME
SERVICES
CONTACT
</div>
</div><!-- end header -->
<div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"
region="center" id="content">
<div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 300px;"
id="leftAccordion" region="leading" splitter="true">
<div dojoType="dijit.layout.AccordionPane" title="One fancy Pane">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Another one">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Even more fancy" selected="true">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Last, but not least">
</div> <!-- end AccordionContainer -->
</div>
<div dojoType="dijit.layout.TabContainer" region="center" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
<?php echo $this->layout()->content ?>
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
Lorem ipsum and all around - last...
</div>
</div>
</div>
<div id="footer">
<p>Created with Zend Framework. Licensed under Creative Commons.</p>
</div><!-- end footer -->
</div>
You have a typo when setting your dojo config options. Instead of
->setDjConfigOption('parseOnload', TRUE)
it needs to be
->setDjConfigOption('parseOnLoad', TRUE)
Watch the uppercase 'L'. If you fix this then at least the dojo parser will do it's job.
Didn't check if your layout is OK, see the comment of Ken.