i' m making a website that have to work with all browsers.
I' ve tested IE, FF, Opera, Chrome and solved a lot of thing related to CSS and jQuery compatibility... but the last thing is making me crazy :(
Safari doesn' t work as it should on the vertical div scrollbar. It is blocked at the bottom of div at the first access. Zooming in/out the page is the only way to unlock it... then it works...
I have this CSS (just a part of it) :
html, body {
margin: 0px 0px 0px 0px;
font-family: "Trebuchet MS", sans-serif;
background-color:#FFF2E6;
height:100%;
overflow:hidden;
}
#content {
margin-top:5px;
margin-left:170px;
position:fixed;
float:right;
width:88%;
height: 85%;
display:inline;
overflow:auto;
background-color:#E5E5E5;
}
#main_content {
position:static;
width:99.8%;
height: 85%;
}
The HTML page (just the interested block) :
<div id="main_content">
<div id="menu">
<p>Menu</p>
... menu block ...
</div>
<div id="content"><p>Content</p></div>
</div>
Is there any way to solve the Safari div scroll stuck problem?
Thanks very much for your help and sorry for my english.
Just a lucky shot, not sure if it will work:
try using zoom:1; in your #content css block. Although its not an widely 'supported' tag but I recall that it did miracles for some css in IE, perhaps it will work for Safari too.
Sorry if I am wrong.
The problem is that I have a PHP generated page that is printed in the #content div via Ajax functions, well, this page has some iframe tags for files upload (the only working trick to upload a file in a jQuery/Ajax context..) These iframe had the src property set to src='#' what made Safari stuck on a simple div scrolling...
So if you encounter a problem like this just remember to fix your iframe src="#" to iframe src=".
Related
I found a very weird bug today while developing a new site, I really don't know why in the hell it's happening, but I think someone might know.
I made a navigation menu fixed to the top-right part of the page, within it, a big div made round from a lot of border-radius.
It was working very fine and normal untill I added to the right bar a facebook page plugin.
When the bottom of that div goes over the title of the page in the plugin, the border-radius disappears. It stays a square div while it's there, goes back to round if I scroll the page and stays round until it's "touching" that very specific part of that page plugin.
I really don't have a clue about why, here's some code for better understanding:
.nav {
position:fixed;
width:100%;
text-align:right;
z-index:9999;
}
.face {
position:absolute;
width: 20%;
background:#F93;
top:5px;
right:10px;
border-radius:9999px;
overflow:hidden;
}
.face:before {
content: "";
display: block;
padding-top: 95%;
}
.face a img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
.menu{
display:inline-block;
background:#FFF;
padding:1em;
width:50%;
text-align:left;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
margin-top:3%;
}
.menu a {
padding:0 0.5em;
border-radius:4em;
}
And also:
<div class="nav">
<div class="menu">
menumenumenumenu
</div><br/>
<div class="name">
<h2>name</h2>
</div>
<div class="face">
<img src="i/image.png"/>
</div>
</div>
By the way, it seems to happen only on webkit browsers, on firefox it looks very normal, didn't even test in internet explorer.
EDIT: Just tested on Internet Explorer and SURPRISINGLY it did work very well, this is now very very weird
EDIT2: Some Screenshots for even more clarification:
Before touching the title:
After it gets on that very specific spot:
Further down:
Anytime it's over the title it's not round, elsewhere it's fine.
EDIT3: I found out that there was another place the bug was happening; I have a jquery slider on the page; I had an Opacity effect on hover on some controls, when these opacity was being animated, it reproduced the disappearing border-radius problem, and then went back to normal by itself; Removing opacity CSS rule from the neutral state made the bug stop happening while hovering the slider, but it keeps hapenning while that div is over the facebook plugin
There may be more going on here because of the Facebook plugin, but it sounds like this is a problem of not taking into account Webkit CSS rules. If that's the problem, I'm surprised that Firefox isn't giving you trouble. The standard way to style rounded corners with cross-browser support is to give border-radius, then -moz-border-radius and -webkit-border-radius:
.menu {
...
border-radius: 100px 0px 0px 100px;
-moz-border-radius: 100px 0px 0px 100px;
-webkit-border-radius: 100px 0px 0px 100px;
...
}
.menu a {
...
border-radius: 4em;
-moz-border-radius: 4em;
-webkit-border-radius: 4em;
}
Ok, I found a fix for the problem, that I can only think I didn't thought before because I was too tired. ^^'
First of all, I found out that this bug was even weirder than I thought, thinking back how the opacity on another element seemed to affect it, I tried changing the image opacity, then, I found out that the div that contained it was in fact, still round.
Even though the image was being cut by the overflow:hidden; it wasn't being cut by the border-radius of the parent div.
I fixed it by putting border-radius on the image too, so now it is round even when over that plugin, the problem is gone now.
I hope someday this gets found by some webkit developers and the identify and fix that bug, it was really weird.
Thanks Henry for the help too!
TL;DR
Fixed by using border-radius on both parent div and image.
This is my code http://jsfiddle.net/FbC86/. If you open this page with Chrome or Firefox the text inside the cell is overflowing correctly through a vertical scrollbar. If you open it with Internet explorer it doesn't work properly.
I need your advice as i am new to web development and i cannot find any solution to this problem. Thanks in advance!
Part of the code:
CSS
div.main
{
width:100%;
height:100%;
display:block;
position:relative;
overflow:auto;
}
div.transparent{
padding:3em;
background-color: rgba(255,255,255,0.7);
display:block;
}
HTML
...
<td colspan="7" valign="top" style="height:0;" >
<div class="main">
<div class="transparent">
Here goes a long text
</div</div></td>
...
You need to add a height attribute to the div you want to overflow.
JSFiddle
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
I have read a lot of answers regarding this but it does not solve my problem. On the main page when I scrolled to the bottom, the footer has an extra space but it seems like the extra space below it is the background of my page. In other pages, the footer is okay. I think this happened because my main page has a short content. I actually cheated on its sidebar by adding margin bottom. Any help which applies to all browsers and any screen sizes that will fix this? Thanks!
This is the CSS of my footer:
#footerArea{
height:108px;
width:100%;
z-index:5;
background:url('../images/footerArea.jpg') #404042;
}
#footerPart{
height:48px;
width:988px;
margin:0 auto;
padding:0px;
background:url('../images/footerbg.jpg') no-repeat #404042;
}
#footerPart a {
text-decoration:none;
}
#footerLink{
margin:0 auto;
padding:15px 0px 0px 0px;
width:960px;
}
#footerLink ul{
list-style-type:none;
float:left;
}
#footerLink ul li{
display:inline;
margin:0px 5px 0px 0px;
}
#footerLink ul li a{
background:url('../images/footerbtn.jpg') no-repeat;
font-size:10px;
text-decoration:none;
padding:0px 0px 0px 15px;
}
EDITED:
This is from footer.php
<div id="footerArea">
<div id="footerPart">
<div id="footerLink">
<ul>
<li>xxx</li>
<li> | </li>
<li><li>yyyy</li>
<li> | </li>
<li>zzzzz</li>
<li> | </li>
<li>aaaaaa</li>
</ul>
<p class="fR">SOME TEXT　ggggg</p>
</div>
</div>
</div>
</body>
</html>
I have tested it in Chrome, Firefox and IE but it has the same output.
Check if you have some kind of web tracking code or any other javascript (in javascript tags) at end of your document. Though it must be a few lines of javascript code, it sometimes takes-up space beneath footer in some browsers, especially in IE. If you can provide a codepen reference, we can review
In your HTML you have a <li> tag embedded within another <li> which is invalidating your code, as it doesn't have a closing tag.
Short of that, it's hard to debug such a vague problem as "Has extra space". To provide further insight it would be great if you could provide a jsfiddle or something similar.
If you can't provide that or don't know how, I can offer some debugging tips. If you're using google chrome to debug, you can go into your webkit inspector, or firebug if using firefox (Right click, "inspect element") and look at the CSS and boxing for paticular elements.
If that fails and you still can't figure out what's causing the extra space, you can right click elements and begin deleting the ones that you think may be the root of the problem. Once an element is deleted it will no longer appear in your browser, so if you delete one and the problem persists, you can be comfortable knowing it wasn't that element (or is multiple elements, but lets not get that complex.)
I am rendering a small menu in the upper right-hand corner of a web site. There will always be a "Banner" graphic across the top of the page (1024x80 pixels) and the menu must render on top of it. In IE 7, IE 8, FireFox and Safari, the menu looks fine. In IE 6, however, the menu does appear sometimes and fails to appear at other times with no discernable pattern. In the CSS shown below, I placed the "z-index" in the class definitions after reading that this was a fix for some CSS problems of this type in IE 6. However, there is still no joy in Renderville. ANY help will be appreciated!
Here is the CSS defined for the page, the header and the menu:
Div.XPage { background-color: White; position:relative; width:1024px; border-left:1px solid #a4a4b1; border-right:1px solid #a4a4b1; margin:auto; text-align:left; z-index:10; }
Div.XHeader { background-color: White; clear:both; padding:0px; margin:0px; z-index:2; }
Div.XTopMenu { position:absolute; left:810px; top: 0px; width:214px; height:16px; background-color:#333333; z-index:3; }
Div.XTopMenuItem { width:70px; height:14px; margin-bottom:3px; text-align:center; float:left; }
Div.XTopMenuItem a { color: White; font-size:smaller; }
Here is the HTML that uses these CSS classes:
<div class="XPage">
<div class="XHeader">
<a href='/Home.aspx'><img src="/images/Header.png" alt="Banner Graphic" border="0" width="1024" height="80" /></a>
</div>
<div class="XTopMenu">
<div class='XTopMenuItem'><a href='/Home.aspx'>Home</a></div>
<div class='XTopMenuItem'><a href='/Calendar.aspx'>Calendar</a></div>
<div class='XTopMenuItem'><a href='/Logout.aspx'>Log Out</a></div>
</div>
...
</div>
IE6 has issues with z-indexing. In IE6 z-index is only respected for siblings.
Things I'd try:
Reverse the order of menu and header in the html
Give the header a negative z-index
Give the menu a more significant lead on z-index than the header, say z-index:999.
Failing those you could try giving IE6 a different header image that didn't cover up where you want the menu to go. In many cases I've strived for IE6 to have degraded support, it's an ancient browser and has way too many problems. So if it's an option I'd consider letting it have a slightly different appearance. Of course that may not be up to you.
z-index only works on positioned
elements (position:absolute,
position:relative, or position:fixed).
You do not have these on Div.XHeader thus that z-index is being ignored completely.
Read more about z-index on w3schools
No directly useful info, I'm afraid, just another suggestion in case you're sufficiently desparate:
Google has managed to solve this problem, and many more, in GWT. Hold off on the downvotes, please - I'm not sugesting rewriting the app in GWT. I am, however, recommending to look at their code. In their implementation of various components, they have sections, sometimes whole classes, dedicated to working around particular quirks in WebKit, Opera, IE6... Their code is very clear and well commented, often including not just "what" but also "why".
How effective this approach is will depend on how good you are at zeroing in on relevant code (in Java), understanding it and moving the implementation of the essentials to your own code.
Why z-index 10 for the Page? It's supposed to be way in the background, right? Could you try setting its index to 0 or 1?