The website that I'm currently working on is having a few issues with Webkit browsers (Chrome, Safari, etc.)
One of those issues is that I have a bullet list that is displaying strange.
The top bullet item is going to the right of the list rather than the left.
(source: jamespwright.com)
I can't seem to fix it. I've tried overflow:hidden, I've tried list-style-position:inside, nothing seems to work.
EDIT
I will try to provide some of the code but it's a pretty huge site that is built with DotNetNuke so I might not be able to give you too much information.
The code in question is this:
#PremiumServicesMenu .LinkList ul {
margin-top: 0px;
margin-left: 1em;
_margin-left: 3em;
margin-bottom: 0px;
}
/* Safari and Chrome specific settings */
#media screen and (-webkit-min-device-pixel-ratio:0)
{
.PremiumServicesContainer .LinkList ul {
list-style-position: inside;
}
}
and the html for that section is this:
<div id="PremiumServicesMenu">
<div class="PremiumServicesContainer">
<span class="Corporate">
<div id="PremiumServicesHeader">
<div class="PremiumServicesShim"></div>
<div class="PremiumServicesTitle">Premium Services</div>
<div class="EndCap"></div>
</div>
<div class="LinkList">
<ul>
<li>AIMS</li>
<li>Feed Lab Analysis</li>
<li>MSDS</li>
<li>Prior Cargo</li>
</ul>
</div>
</span>
</div>
</div>
The problem seems to be with page height. On the other browsers if the page is not very tall, this Premium Services section still retains a height that fits everything, but in Webkit if the page is short, this section shortens itself and puts the first item next to the Premium Services header image rather than on the line below it. If the page is long enough, then this issue doesn't occur.
The answer was in the floats.
The ul needed to have clear:both; added to it.
Related
I have done everything I could to make a decent web page validated with W3C validator etc and tried to make a responsive design and did all i could to enhance SEO onsite and off site. But all my efforts go down the drain with stupid IE ! I am using IE 8 now. How I wish internet bans IE for its various vagrancies !
My problem is I am not able to get a solution for clicking on elements laid over a div background image. Whether I use background color or not. If I use -ms-filter with opacity, the div disappears !
Somebody please give a proper solution ! I have tried posting the issue in another question. I just got one suggestion that did not work. Hence I am trying again.
My code
HTML
<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>
<div id="smshare">
<img src="share.png" width="20" height="20" alt="Share on Social Media">
<div id="smp"></div>
</div>
<div style="clear:both"></div>
<div class="header-small-image">
<img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
<div style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
<div style="clear:both"></div>
</div>
<div class="opaq">
BLOGS
LOANS
SEARCH PROPERTY
FREE LISTING
</div>
<?php include('searchbox.php');?>
<div style="clear:both"></div>
</div>
CSS
#header{background:url('images/Thane2.jpg') no-repeat;background- size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o- background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg ',sizingMethod='scale') no-repeat;-ms- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border- radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;
}
My site is www.landshoppe.com
Your header element has pointer-events: none; set in the css.
#header {
...
pointer-events: none; //remove this line
}
Remove pointer-events: none; from header and then click events will work within it.
Also this issue isn't IE specific. Didn't work for me in Chrome either. pointer-event: none makes that element and its child elements not clickable, and clicks to fall through to the underlying element.
#Arathi, I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)
In Internet Explorer only (Works fine in Chrome and Firefox), it always puts a PDF displayed in an iFrame over top of any other objects on the page. I have a horizontal menu above that has drop down menus that become hidden behind.
I have tried forcing the site in IE9 mode, z-index on all items and parent items, adding wmode = to transparent or opaque.
This only happens when a pdf is loaded in the iframe. If a webpage is loaded, the menu appears over top as it should.
CSS:
iframe
{
position: relative;
z-index: 0;
}
#Standings_Container
{
float:left;
text-align: center;
width: 100%;
z-index: 0;
position: relative;
}
#nav .Menu_Child {
display:none;
position:absolute;
left:0;
top:26px;
height:auto;
float:left;
width:174px;
overflow:hidden;
z-index: 10000;
}
HTML:
<div class="Menu_Child">
<ul>
<li>Applications</li>
<hr class="Menu_Child_HR" />
<li>Schedules</li>
<hr class="Menu_Child_HR" />
<li>Standings</li>
<hr class="Menu_Child_HR" />
<li>Rules</li>
<hr class="Menu_Child_HR" />
<li>Sponsors</li>
<hr class="Menu_Child_HR" />
<li>Gym/Field Directions</li>
<hr class="Menu_Child_HR" />
<li>Register Online</li>
</ul>
</div>
<div id="Standings_Container">
<iframe style="margin-top:8px;" scrolling="yes" width="850" height="600" src="[PDF URL]"></iframe>
</div>
I have come across this so many times, and unfortunately, it seems to be a limitation of the way IE (specifically the Adobe Windows PDF plug-in) renders the PDF. It basically generated it last, over every other element on the page.
Whereas Flash embedded objects could overcome this using the wmode="transparent", this is not the same with the PDF plugin. I will try to play around with the windowless or windowed parameter, but I am certain I already tried this.
Unfortunately for myself, and others, shifting the PDF lower and/or widening the gap below the navigation is not an option.
Seems to me, but I could be wrong, that Adobe need to revisit the way IE handles PDF or Microsoft to use a different rendering engine.
fabio
After a week of trying different solutions and fixes, i couldnt find anything that would work for my specific situation. Instead i just made the vertical spacing on my sub menus much shorter and pushed the pdf in the iframe further down on the page so the drop down menus never overlap.
I'm experiencing a weird issue in the latest version of Chrome (25.0.1364.97 m). I have a set of divs inside a floated, cleared container, all floated left with the same width.
In Firefox, IE, and older versions of Chrome all the boxes sit side by side as they are supposed to but in the latest version of Chrome the first div is above the others like so:
It only seems to happen when the window is maximised and on the first load, if I refresh the page it sorts itself out, but if i do a hard refresh with Ctrl + F5 it happens again
The HTML:
<div id="top">
<h1>Words</h1>
</div>
<div id="wrapper">
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
</div>
CSS:
#wrapper {clear:both;float:left;margin-top:20px;width:500px}
.box {float:left;width:100px;border:1px solid #000;margin-right:20px}
I've made a fiddle here: http://jsfiddle.net/GZHWR/3/
Is this a bug in the latest Chrome?
EDIT: I know this can be solved by applying padding to the #wrapper element instead of margin-top but we manage around 140 sites so it's not practical to go and change the CSS on every one
EDIT 2: I think I need to clarify my question. I am not asking how to fix the issue. I already know that. I want to know why this behaviour is occuring? Why is the rendering engine rendering the markup/css like this? Is it correct behaviour?
It seems to be a bug. The problem appears when applying clear on the wrapper element. When you remove the clear, the bug goes away.
According to the W3C specs regarding the clear property:
This property indicates which sides of an element's box(es) may not be
adjacent to an earlier floating box. The 'clear' property does not
consider floats inside the element itself or in other block formatting
contexts.
So it shouldn't effect the children's floating behaviour. I filed a bug report at Chrome about this issue.
Update: From the link in the comments, kjtocool mentioned on 30-03-2013:
It appears that this issue has been corrected in version 26.0.1410.43
Why don't you use
display: inline-block;
instead of float: left for .box?
Try :
#wrapper {
display:inline;
}
.box{
vertical-align:top;
}
I had the same issue with the "Like" toolbar and after this code, it work.
Try this:
css:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
html:
<div id="wrapper" class="clearfix">
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
</div>
Remove
clear:both;
from #wrapper
remove clear:both from #wrapper yes it works..........
http://jsfiddle.net/GZHWR/20/
Remove clear:both from #wrapper and if you still face a problem apply clear:both after last div
Remove clear:both;float:left; form #wrapper
clear:both is require when you want div nex raw.
I'm writing a page that is meant to be printed and styling is different from the rest of the pages in my application. Essentially I'm trying to create a wallet card with login information for a user to print out, cut, and keep with them.
I've only tried printing my login card with chrome and IE. IE get's it perfectly but chrome unfortunately makes the card too big. Not sure if it matters (I'm not a CSS expert) but I tried using different units; inches, pixels, and points.
When I use the developer tools in chrome, I see that the pixels are calculated correctly. I checked that to see if the browser was adding additional padding inside the div.
Here's what I have for the login card elements.
<div id="divLoginCard">
<div id="divLoginCardHeader">
<h3>User Login - <span id="spnUserName"></span></h3>
</div>
<div id="divLoginCardContent">
<div class="fieldRow">
<span class="fieldLabel">Website:</span>
<span class="fieldValue">http://www.xxx.zzz</span>
</div>
<div class="fieldRow">
<span class="fieldLabel">ID:</span>
<span class="fieldValue" id="spnUserID"></span>
</div>
<div class="fieldRow">
<span class="fieldLabel">Contact's Name:</span>
<span class="fieldValue" id="spnContactsName"></span>
</div>
</div>
</div>
Here is my CSS styling. I'm trying to achieve a physical size of 3.5" x 2" which is a standard US business card size.
#divLoginCard
{
margin:0 auto;
width:252pt;
height:144pt;
border-style:dashed;
border-color:gray;
}
#divLoginCardHeader
{
text-align:center;
}
#divLoginCardContent
{
margin-left:25px;
margin-right:15px;
padding-top:15px;
}
.fieldRow
{
margin-bottom: 3px;
display: table;
width: 100%;
}
.fieldLabel
{
font-weight: bold;
width: 96px;
text-align: left;
display: table-cell;
}
.fieldValue
{
min-width: 100%;
display: table-cell;
word-wrap: break-word;
width: 200px;
}
body
{
font-family:Arial;
}
Naturally, I would prefer to have a cross browser solution for this where I don't have to use a lot of browser specific style rules but that may not be possible in this case.
Do I need some sort of CSS reset in order to properly size this for printing with any browser?
UPDATE
Chrome renders my html as a PDF document when it is printed. I noticed that the print dialog in chrome is simply a modal window on top of the page. I checked out the elements in developer tools and the print preview is a pdf document. The html provides the source URL (chrome://my_path/print.pdf) which is the full document that is printed by a printer.
SO, long story short; my issue seems to be how chrome renders my html as pdf. Is there a way to control how it renders the html or maybe some chrome friendly CSS that I could use?
Try the #media print specification in your CSS. Chrome is probably overriding your on-screen CSS with print CSS that sizes the elements to fit the printed page.
#media print {
/* put your fixes here */
}
I think this is more likely to be the issue than that Chrome is translating to pdf.
I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.
Firefox separates the divs correctly but only prints the first page.
Chrome and Safari only applies the page break to the last div.
How can I get this working across all browsers correctly?
The HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.
I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.
The CSS:
#media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
Parent elements can not have float on them.
Setting float:none on all parent elements makes page-break-before:always work correctly.
Other things that can break page-break are:
using page-break inside tables
floating elements
inline-block elements
block elements with borders
For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.
I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).
I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.
It looks like it's a bit of an arms race to discover the next property that might break page-breaks.
This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.
#media print {
div { float: none !important; position: static !important; display: inline;
box-sizing: content-box !important;
}
}
There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.
<div style='float:left'>
<p style='overflow:hidden;page-break-before:always;'></p>
</div>
Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table; or display:table-cell; applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).
Here is an example of how to do this for the popular clearfix problem.
.clearfix:before, .clearfix:after{
display: block!important;
}
The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;
If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block; with display:block should work.
I had a position: absolute; in the div printing that caused this not to work.
Make sure the parent element has display:block; rather than display: flex;. This helped me fix the issue
"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values."
IE support is also partial
you can achieve what needed by :page-break-before:always; which is supported in all browsers
"but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)
what's your code?
like this?:
<style>
#media print
{
table {page-break-after:always}
}
#media print
{
table {page-break-before:always}
}
</style>