i reduced a "zurb foundation" problem to the following minimum of code. When i open a website with that code in Safari, sometimes not all images load. Sometimes none, sometimes just one or two. In the moment i resize the browser window, all lost images appear.
<!DOCTYPE html>
<head>
<style type="text/css">
p { float: left; }
img { box-sizing: border-box;
max-width: 100%;
border: solid;
}
</style>
</head>
<body>
<p><img src='1.jpg'></p>
<p><img src='2.jpg'></p>
<p><img src='3.jpg'></p>
</body>
</html>
Maybe it's just a rendering/speed problem of Safari and the combination of box-Sizing, float, border and max-width. When i try it locally in my file system, there seems to be no problem (fast). On two different web servers, images appear different certain.
'Normal' server:
http://test5.topiclodge.com
Slow server:
http://wiki.norm-konform.de/test/
I testet it on 3 Macs (Safari versions 6.0.3 and 6.0.5)
Maybe there is a workaround or any idea?
Thanks a lot!
WebKit browsers don't like images without width and height attributes added to them. Add width and height to the images and try again.
Related
META: I asked this question over at Webmasters Stack Exchange, but they booted it, and told me to ask here. Apparently Webmasters only ever want to talk about SEO.
Original Post:
I am having a VERY strange issue with Chrome on the Mac.
I have this page: https://heartoflongislandna.org/cleantime/
It's a simple JS app that takes a date, calculates a time difference, then displays a bunch of mortised transparent PNG images that display awarded keytags. These overlap each other in two layouts:
Vertical, where one is laid over another in a vertical "chain," and
Horizontal, where they are placed side by side, but overlapping, like a spread out deck of cards.
What is happening, is that the layouts display (and print) fine in Safari and FF, but in Chrome, the print screws up. The screen display is fine, and looking at it with the device pane set to print also shows them fine.
There is also a small PNG image that is added to some of the images to close the ring at the top. That is added as a top, center background image.
The vertical layout is a bit better than the horizontal, in that the background transparency is honored, but the background image is lost (top keytag).
The horizontal layout is a mess. The background image is not displayed, and the background transparency is not honored.
I will add that examining this with Chrome's device view panel set to "Print" does not show a problem. It looks great. The print preview shows the issue, and opening the image in Preview also shows the problem, which is in the renderer.
*UPDATE 2: This is now available as a fiddle, here: http://jsbin.com/kakirinife/edit?html,output
The (Fiddle) HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Issue Demo</title>
<style type="text/css">
/** This is the container for the keytag display. */
.NACC-Keytags {
margin-top: 122px;
display: table;
margin-left: auto;
margin-right: auto;
background-color: transparent;
}
/** This allows us to compensate for the automatic offset of the tags. */
.NACC-Keytag-Tabular {
margin-top: 82px;
padding-right: 50px;
text-align:left;
}
/** This describes a keytag image layout. */
.NACC-Keytag {
width: 100px;
max-width:100px;
overflow: visible;
margin-top:-122px;
display: block;
margin-left: auto;
margin-right:auto;
background-color: transparent;
}
/** If we are displaying a closed ring, then we add an image to the background. */
.NACC-Keytag.NACC-Keytag-Ringtop {
background-image: url('https://i.stack.imgur.com/QcEYN.png');
background-position: center top;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: local;
}
/** We display inline-block, so we get a flow that will wrap. */
.NACC-Keytag-Tabular .NACC-Keytag {
display: inline-block;
margin-top:-82px;
margin-right:-50px;
}
</style>
</head>
<body>
<div class="NACC-Results">
<div class="NACC-Keytags NACC-Keytag-Tabular">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag NACC-Keytag-Ringtop" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
<div class="NACC-Results">
<div class="NACC-Keytags">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
</body>
</html>
</body>
The Images:
UPDATE: I determined that this is likely a Chrome bug, and I reported it, but I am still looking for a CSS fix that I can apply. Chrome is a popular browser.
I will add images that show what happens.
First, this is the vertical format on the screen:
Next, here is the horizontal image on the screen:
Now, here are both of them as printed:
Just for posterity: Chrome has since fixed this bug.
My question is how I via. the CSS can force my webpage to show a horizontal scroolbar on the frontpage.
I've triede looking for overflow-x: but can't seem to find the right place.
My webpage: http://holtumdata.dk
I've had customers who have trouble finding the "Download" page, when they're on computers with small screens. (open browser in window mode, to see what I mean.)
Thanks in advance!
Here looking at your page I can see that you have a HTML line like this
<div id="portfolio_viewport" style=" overflow: hidden; outline: none; cursor: -webkit-grab;" tabindex="5000">
Remove the overflow:hidden in element's style
but since CSS is generated from module we can override it locally by using script like
<style media="screen" type="text/css">
#portfolio_container {
overflow-x: scroll !important;
}
</style>
I check your site.. By applying overflow-x:scroll
your problem may be solved .
In CSS :
body{
overflow-x:scroll;
}
You put it in the html{} in your css file.
And a mozilla firefox specific one: -moz-scrollbars-horizontal
Like this:
html{
overflow-x:scroll;
}
I am beginner in HTML/CSS and I come to one issue that is strange to me. Can't remember that I had this problem when started to learn. Nevertheless, the problem is that I can't scroll when I resize my browser window. Her is the code:
<!DOCTYPE html>
<html>
<head>
<body>
<img id="pic" src="http://0.tqn.com/f/lg/a154.png"/>
<style>
#pic {
position: fixed;
left: 1060px;
top: 150px;
right: 300px;
bottom: 658px;
}
</style>
</body>
</head>
</html>
I put position of picture on left and right because that is the only way that I know to fix image on one specific position. I tried auto, but the picture moves when I resize browser.
Thank you for your time and effort
Ok, the issue I think you have is that when you position an element absolute, it removes it from the flow of the document.
So think of it as if the absolute element is removed from the body of the page.
The body of a page is always 100% width of the browser. Your image is being positioned outside of the browsers view port.
you have two options. either do not user absolute positioning and use a css layout to get it the image in the proper place.
or you can set the width of the browser to the width that you need it to be e.g. 1200px
the first option is better for modern days and doing more future facing sites.
The following code works differently in Firefox and Webkit (Safari/Chrome) and should not. From what I understand, Firefox is rendering it correctly. How can I make Webkit render it the same?
<!doctype html>
<html>
<head>
<style type="text/css">
.frell {
margin: auto;
position: absolute;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="container">
<button class="frell">Test</button>
</div>
<body>
</html>
Probably inheriting either it's parent's width or getting display:block. What does the Chrome developer tools say? I'd either specify a width (% or px) or display:inline (possibly inline-block)
Firefox is rendering it incorrectly, webkit is rendering it correctly. To make firefox behave, you need to add width: 100% to the class, even then, that won't work in all cases, but it will be closer.
Absolutely positioning an item and specifying both left and right should make the item become the necessary width to fill the space between them. For a simple test, here is a jsfiddle http://jsfiddle.net/c3EeF/2/ that shows what happens when you apply the same class to both the button and div tags. Firefox misbehaves when using the button, and I have been unable to find any setting that makes it work 100% correctly.
I have created a responsive site with Twitter Bootstrap, however when I view the site in a screen resolution of 320x480 a horizontal scroll bar appears as the website seems to have an extra 20px-30px width. You can see this by scrolling too the right horizontally.
I have inspected the elements that form the page, however I can not work out what is causing this extra width - ideally I do not want any horizontal scrolling at the 320x480 resolution.
You can view the problem by changing the resolution to 320x480 in Google Chrome after inspecting an element.
Here is the site:
http://www.bestcastleintown.co.uk/wp/
It's the .jumbotron and .footer css rule margin-right: -20px; causing the problem.
Did you enabled the Bootstrap's responsive features?
http://twitter.github.com/bootstrap/scaffolding.html#responsive
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Please note that bootstrap-responsive.css must be included and referenced on your website
Hope this helps.
You could try resetting lateral margins from -20px to 0 for header and footer tags
try this:
.footer{
width: 85%;
margin: 0 auto;
/* other css properties */
}