we've got an issue that only effects Chrome, Firefox and IE are fine.
the only page affected in Chrome is the home page, index.html... all other pages use the exact same header html and CSS. If we click a link on the home page to go to an interior page, the page works fine, then we click back to the home page and it looks fine... but if we refresh the home page, its messed up again.
here's the url
http://www.logilityconnectionseurope.com
the element that gets pushed down is a big div that holds an image and some text on the right side, the div CSS is as follows
.dateLogoTopDiv {
float:right;
text-align:right;
margin-top: 15px;
}
HTML:
<div class="header">
<img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />
<div class="dateLogoTopDiv">
<img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
<p>14-15 May 2013</p>
<p>Hotel Le Plaza </p>
<p>Brussels, Belgium</p>
</div>
</div>
as I said, works fine in Firefox and IE and works in Chrome on every page except the index
any help would be appreciated
Run your page through the HTML Validator and fix all errors. Without valid HTML, browsers don't know for sure what you intended to display and you'll have cross-browser rendering inconsistency. In this case, Webkit browsers (Chrome & Safari).
http://validator.w3.org/
EDIT:
OP's site previously contained malformed HTML including open tags and misplaced tags. OP's site has since been fixed, rendering the code at the URL posted in the question obsolete.
EDIT 2:
I'm seeing the OP's issues in Chrome. I cannot explain why the issue was occurring or why it was intermittent. However, I fixed it by adding the following...
Additional CSS:
.header {
overflow: auto;
}
.header > img {
float: left;
}
Existing HTML:
<div class="header">
<img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />
<div class="dateLogoTopDiv">
<img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
<p>14-15 May 2013</p>
<p>Hotel Le Plaza </p>
<p>Brussels, Belgium</p>
</div>
</div>
This takes the two main header elements and floats them left & right respectively. The right one was already floating to the right. overflow: auto; is a trick to force the header to expand to contain it's floated elements. Since both are floated, they are outside the regular content flow and would not normally cause the header to expand.
Related
I have a div block which shouldn't be scrolled apart from the page when entire page is scrolled, so I used css property
pointer-events: none
I using parallax, so top position of image and title in section "first" is set by it, but when mouse scrolling on this block it affects the top position
<section id="first" data-type="background" data-speed="10" style="pointer-events: none!important">
<div>
<h1 id="title">TITLE</h1>
<img src="slider.png" id="slider-image" />
</div>
</section>
<section class="second" data-type="background" data-speed="10" >
...
Disabling pointer events works fine for Chromium and Mozilla, but nothing happens in Chrome.
Thanks
Here is an overview of supported browsers for the CSS pointer events. As you can see, there is an issue that chrome and IE have with your code:
Moving the scrollbar on an object with pointer-events: none; works in Firefox, but doesn't work in either Chrome or IE.
One potential workaround is to follow this guide on forwarding mouse events through layers.
You may also find this post helpful.
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 using font-face + CSS. Text padding appears fine in most browsers except Safari and Chrome on a Mac, where it's rendering the top padding with an extra 20px or so... This is the piece of CSS in question:
p.style10 {font-family: 'TitilliumText22LThin', Arial, sans-serif; font-size: 17px; line-height: 19px; color: #FFFFFF; padding: 20px 40px 10px 10px}
Here's how it appears incorrectly in Chrome/Safari (Mac): http://siddharthkhajuria.com/srv/chrome.png
And correctly in Firefox (Mac): http://siddharthkhajuria.com/srv/firefox.png
Any help/suggestions on why it's appearing with extra padding in Chrome/Safari on a Mac?
Thanks!
Sidd.
-- here's the relevant bit of html too:
<!-- START OF PROMOS 1 -->
<div class="g320" style="background-image:url(img/p1.png);
width:310px;
height:354px;
overflow:hidden;">
<p class="style9"><strong>'Bootylicious' by Tom Rosenthal</strong><br /><br />A video for Tom's reworking of the Destiny's Child classic. I directed (with Tom), filmed and edited it.<br /><br /><br /></p>
<p class="style10"><strong>BBC at the Edinburgh Fringe</strong><br /><br />I produced the website for the BBC at the 2011 Fringe Festival. I also made a range of films and took photos on-site throughout the fortnight.</p>
</div>
<div class="g640">
<iframe src="http://player.vimeo.com/video/37423313?title=0&byline=0&portrait=0" width="630" height="354" frameborder="0"></iframe>
</div>
<div class="g320"></div>
<div class="clear"> </div>
<!-- END OF PROMOS 1 -->
Use CSS reset to avoid this kind of problem. CSS Reset is important in removing inconsistent margins, paddings, line-heights, and other attributes that can cause your web pages to look differently across various browsers. Create a different CSS file and name it 'reset.css' and add it at the top of your all other css file's links using
<link rel="stylesheet" href="your_domain/css/reset.css">
Go to this link to get a ready made reset CSS file and more at here all about CSS reseting.
For anyone who found the reset.css didn't work, I found that it helps setting heights on elements which are showing inconsistent padding between browsers. I could see a big difference in padding between Chrome and Safari and this fixed it.
hi
I have this simple CSS code to add a banner to a sharepoint 2010 site - the problem is, when I add it, the page doesn't 'recognize' the additional horizontal space added by the banner, and thus the scrollbar scrolls past the bottom of the page. This happens when windows is maximized as well as when it isn't. Happens in IE, chrome, FF.
EDIT: screenshot of browser scrollbar
banner code:
<div id="header_container">
</div>
css:
#header_container {
background-image:url('/Images/topBanner.png');
background-repeat:no-repeat;
background-color:#fff;
height:147px;
}
Try adding 1px padding and set the width. Im just learning but ive found sometimes wierd stuff happens when you add more code to a site. The 1px of padding has fixed some of my layouts
Also id recommend not using header_container as your div tag. Think about how many items you have in the header.
EG if i had a banner and site name but still needed a wrapping div i would use
<div id="header">
<div id="banner"></div>
<div id="headerlogo"></div>
</div>
or
<div id="headerbox">
<div id="banner"></div>
<div id="sitetitle"></div>
</div>
I have an element on my page that has "display:none" and "visibility: hidden" applied to it. Yet IE 7 still displays the element. Not only does it display the element, when I open developer tool bar and inspect said element it tells that it is indeed not displayed and not visibile.
Furthermore, When it's in its original state I can't use the selector tool in the developer tool bar to select the element, until I manually remove the "display:none" and "visibility: hidden" rules.
It's as if IE 7 is interpreting my style sheets correctly but the rendering engine is flagrantly ignoring them
Here's the CSS
.ModalTypeTwo .button-wrapper { display: none; visibility:hidden; }
Here's the mark up
<div class="MyModal ModalTypeTwo" id="sb-wrapper" style="top: 20px; width: 926px; left: 328px;">
<div class="footer wrapper">
<div class="corner left"></div>
<div class="corner right"></div>
<div class="button-wrapper" id="btnContents">
<a title="contents" id="sb-nav-button">
<span>Contents</span>
</a>
</div>
<div class="button-wrapper" id="txtContents">
<div id="sb-title">Lorem Ipsum </div>
</div>
<div style="cursor: pointer;" onclick="Modal.next()" class="button-wrapper" id="btnNext">
<a title="Next"><span>Next</span></a>
</div>
<div style="cursor: pointer; display: none;" onclick="Modal.previous()" class="button-wrapper" id="btnPrevious">
<a title="Previous"><span>Previous</span></a>
</div>
</div>
</div>
Notice that the above rule should apply to #btnContents, #txtContents, #btnNext, and #btnPrevious, however in IE& only the later 3 are hidden.
Try applying overflow: hidden; on ModalTypeTwo. I had a similar problem in IE7 and hiding the overflow of the parent fixed it.
http://jsfiddle.net/UugDU/
I added some start and end text just to make sure the result was being rendered at all.
I have no problems in IE7. It must be a problem somewhere else in your code. I suggest you start with the full version of your code, and whittle it down to the minimum required to produce the error and post that.
If this helps future Googlers of this issue, the problem is with how Internet Explorer versions 4-7 interpret "visibility:hidden" in CSS. Those older browsers will hide their immediate content, but not their HTML children's content. In addition, IE5 had a weird "reverse" bug to that problem where adding "visibility:visible" to an immediate content element under the hidden parent would not be visible. That is based on my knowledge of the issue and could have more subtleties I missed.
In general, if you are testing in IE7 browsers, try and avoid showing and hiding things using "visibility". If you must hide something in those older browsers, just remove them completely using "display:none", which was almost always universally reliable in these older browsers. Or, if they must be accessible in the page for IE7 users, just not shown to them, you can move them quickly off the page using CSS as shown below. Note: This will not affect your page design or layouts.
position: absolute !important;
top: -9999px !important;
left: -9999px !important;