I need the background image to stay centered because I am going to display charts in fixed positions and want the van (in the image) always to be visible. It's working fine in Chrome etc but nothing appearing in IE8.
http://clients.online95.com/RzMaOxkMOC/rep_mktsh.php
Thank you for any assistance you can provide.
#aa_breakdown_bg {
background: url(/RzMaOxkMOC/images/aa_breakdown_bg.jpg) center top no-repeat fixed;
overflow: hidden;
height: 100%;
}
<html lang="en">
<head>
<title>UK Breakdown Market Tracker</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
<div id="aa_breakdown_bg"></div>
</body>
</html>
My guess would be that while your div is 100% height, that's 100% of zero. Try stretching both the body and html elements to 100%, too, and see if that does the trick.
body, html {
height: 100%;
}
Also, as Adrift mentions, you'll be a lot better off adding an appropriate DOCTYPE to your HTML, otherwise Internet Explorer will probably run in "quirks mode" and really confuse you.
Related
Here's the extremely simple HTML page
<body style="overflow-y: hidden">
...
</body>
The expected behavior of this page is: scrolling of a document is prevented because of overflow-y: hidden.
It works as expected (scrolling is prevented) everywhere except Safari.
Live demo: https://spotted-chime.glitch.me/
The question is: how to make Safari behave the same way as other browsers?
Just use overflow: hidden and it will work.
Alternatively, you can try using position: fixed on the <body> tag as well.
(NOTE: Using this approach, the body will scroll to the top as by default the top: 0.)
EDIT: For safari mobile devices, you need to use Javascript events. Explained in this answer.
https://stackoverflow.com/a/4770179/2860486
Position fixed is meant to create a div that stays in the same position on the screen while the content behind it is scrolled down.
fixed
The element is removed from the normal document flow, and no
space is created for the element in the page layout. It is positioned
relative to the initial containing block established by the viewport,
except when one of its ancestors has a transform, perspective, or
filter property set to something other than none (see the CSS
Transforms Spec), in which case that ancestor behaves as the
containing block. (Note that there are browser inconsistencies with
perspective and filter contributing to containing block formation.)
Its final position is determined by the values of top, right, bottom,
and left.
This value always creates a new stacking context. In printed
documents, the element is placed in the same position on every page.
Have you tried changing it to absolute?
body {
overflow-y: hidden;
}
#backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .2);
border: 5px dashed black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="backdrop">
</div>
<div>0%</div>
<div>1%</div>
<div>2%</div>
<div>3%</div>
<div>4%</div>
<div>5%</div>
<div>6%</div>
<div>7%</div>
<div>8%</div>
<div>9%</div>
<div>10%</div>
<div>11%</div>
<div>12%</div>
<div>13%</div>
<div>14%</div>
<div>15%</div>
<div>16%</div>
<div>17%</div>
<div>18%</div>
<div>19%</div>
<div>20%</div>
<div>21%</div>
<div>22%</div>
<div>23%</div>
<div>24%</div>
<div>25%</div>
<div>26%</div>
<div>27%</div>
<div>28%</div>
<div>29%</div>
<div>30%</div>
<div>31%</div>
<div>32%</div>
<div>33%</div>
<div>34%</div>
<div>35%</div>
<div>36%</div>
<div>37%</div>
<div>38%</div>
<div>39%</div>
<div>40%</div>
<div>41%</div>
<div>42%</div>
<div>43%</div>
<div>44%</div>
<div>45%</div>
<div>46%</div>
<div>47%</div>
<div>48%</div>
<div>49%</div>
<div>50%</div>
<div>51%</div>
<div>52%</div>
<div>53%</div>
<div>54%</div>
<div>55%</div>
<div>56%</div>
<div>57%</div>
<div>58%</div>
<div>59%</div>
<div>60%</div>
<div>61%</div>
<div>62%</div>
<div>63%</div>
<div>64%</div>
<div>65%</div>
<div>66%</div>
<div>67%</div>
<div>68%</div>
<div>69%</div>
<div>70%</div>
<div>71%</div>
<div>72%</div>
<div>73%</div>
<div>74%</div>
<div>75%</div>
<div>76%</div>
<div>77%</div>
<div>78%</div>
<div>79%</div>
<div>80%</div>
<div>81%</div>
<div>82%</div>
<div>83%</div>
<div>84%</div>
<div>85%</div>
<div>86%</div>
<div>87%</div>
<div>88%</div>
<div>89%</div>
<div>90%</div>
<div>91%</div>
<div>92%</div>
<div>93%</div>
<div>94%</div>
<div>95%</div>
<div>96%</div>
<div>97%</div>
<div>98%</div>
<div>99%</div>
<div>100%</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
Try this:
<head>
<style>
.forSafari::-webkit-scrollbar { width: 0 !important }
</style>
</head>
<body style="overflow-y: hidden" class="forSafari">
...
</body>
just use "position: relative" or fixed it will resolve the problem
EDIT 10:04 PM I RESOLVED THIS
Yeah I figured this out, but the forum software here doesn't let me post an answer to my own question until 8 hours have elapsed. Anyway, I found the solution here. It uses a pure HTML approach and I tested it successfully in all 5 browsers. Just had to put in the HTML: <img src="starter1.jpg" onmouseover="this.src='starter2.jpg'" onmouseout="this.src='starter1.jpg'" />
I'm trying to set up a page (eventually several pages) featuring this:
1) A default image loads when the page loads.
2) When you mouse over, a slightly different image loads.
3) When you move away from that, it goes back to the original image.
I figured this was easy with a little CSS, and it is, except when it comes to Internet Explorer. Here's what I have (it just shows 2 pictures of a broken starter from my car):
<html>
<head>
<style>
#pic1
{
width:500px;
height:500px;
background:url("starter1.jpg")no-repeat;
}
#pic1:hover
{
background:url("starter2.jpg")no-repeat;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
It works just fine in Firefox, Chrome, Safari, and Opera, but not in Internet Explorer 8. In fact, in IE8, neither image loads. I just get a blank white screen. Am I missing a detail? Is there a way to get this to work on all browsers? I read something about wrapping it in an anchor tag but that didn't do anything either.
EDIT:
I can't seem to comment on any post without the code looking terrible, so here goes. I tried this:
<html>
<head>
<style>
#pic1
{
width: 500px;
height: 500px;
background:url(starter1.jpg);
no-repeat;
}
#pic1:hover
{
width: 500px;
height: 500px;
background:url(starter1.jpg);
no-repeat;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
Now the first image shows up but the hover over image doesn't. IE keeps telling me "To protect your security, Internet Explorer has blocked this website from displaying content with security certificate errors." as soon as I open up (IE, before going to the page with my pictures), then asks if I want to view only content that was delivered securely. I always just say "No".
Lastly, if I try this:
<html>
<head>
<style>
#pic1
{
background: #FFFFFF url(starter1.jpg) no-repeat fixed center;
}
#pic1:hover
{
background: #FFFFFF url(starter2.jpg) no-repeat fixed center;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
I get nothing at all, no images of any kind in any browser.
You need to use proper syntax. Here is the proper syntax.
element {
background:
#fff
url(image.png)
no-repeat
20px 100px
fixed;
}
Notice there are no double quotes ("")
I have this minimal code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width height=device-height">
<title>test</title>
<style>
html, body {
height: 100%
}
#container {
height: 100%;
background-color: #0f0;
}
</style>
</head>
<body>
<div id="container"> </div>
</body>
<script type="text/javascript">
alert(window.getComputedStyle(document.getElementById('container')).height);
</script>
</html>
on a server at:
http://catplusplus.org.uk/catpsite/portfolio/test.html
so this code will alert the height of the container div which should be 100% of the browser window.
I've included the meta-viewport tag in the header which should ensure mobile zooming is set to 1:1 in terms of pixels.
when I load this on a LG nexus 4 running android on Chrome I get a height of 519px in portrait and 311px in landscape - which I think is pretty much right (screen size minus UI etc)
when I load this on the same phone using Firefox (v23) I get a height of 1134px in portrait and 718px in landscape, this seems wrong.
Is this a known issue, am I missing something simple, can someone fill the gap in my knowledge here please?
Thanks
James
p.s. just tested on Safari on iPhone 4 also seems off, reporting 540px for both portrait and landscape....
So I have this Div that has a roll over effect on it where it changes the border color on roll over, in order to make this div a link I've put a link into the DIV and given it a Display: Block property so it fills the div.
What I'm having an incredibly hard time doing is getting the text to align to the bottom left corner of this div while keeping the blocking so the whole roll over area stays a link.
ANY solutions to this problem I'd greatly appreciate, thanks for your help in advance I've been battling this for a while.
http://www.klossal.com/media/index_test.html
this is the test page and this is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MEDIA</title>
</head>
<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.borderLeft="10px solid black";
}
function mouseout()
{
document.getElementById("thediv").style.borderLeft="10px solid #898787";
}
//-->
</SCRIPT>
<style type="text/css">
</style>
</HEAD>
<link rel="shortcut icon" href="\favicon.ico">
<body>
<DIV style="width:200px;height:200px;border-left:10px solid #898787" id=thediv
onmouseover="mouseover()" onmouseout="mouseout()">
<a style="padding-top:1cmpx;" href="www.klossal.com">LINK IT BABY</a>
<DIV>
</body>
</html>
</body>
To align something to the bottom, one can set the position to absolute and bottom to 0px. This will align it to bottom of the first parent that is positioned either absolute or relative.
In your case, set the position of the DIV to relative, the position of the link to absolute and the bottom of the link to 0px:
http://jsfiddle.net/rodin/jxyZz/
And by the way, you can achieve the rollover effect with pure CSS, see the fiddle. If you want to make the entire box a link, the box should be an A and the text a DIV (you did it the other way around).
You could add an additional span element that will positioned a the bottom of the link. Note you could create the hover effect in css as well: http://jsfiddle.net/Te23c/
Html
text
a{
width: 200px;
height: 200px;
display: block;
position: relative
}
CSS
a:hover{
background: lime
}
span{
position:absolute;
bottom:0;
}
I am new to the world of coding as well as XHTML. I am in the process of putting a sample page together however having read a number of conflicting articles, it has been suggested that the navigation div block appear above the content div block or vice versa or does it not matter at all? Below is my base code as an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
}
#header {
background-color: orange;
}
#leftnav {
background-color: yellow;
float: left;
}
#rightnav {
background-color: blue;
float: right;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="leftnav">
leftnav
</div>
<div id="rightnav">
rightnav
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
I think you need to elaborate your question. I am unable to figure it out that whether you are concern with SEO or HTML code. Declaring dive any where is not an SEO issue. But for better readability it would be better to make your web page in order.
Like Header at the top. Content in center and footer at the bottom. Left or right navigation menus can be mention before or after content but i suggest that first you should make left nav, then content and then right....
Ideally from an SEO perspective you would want the most important code to appear highest in the HTML source. This is one of the many factors that potentially contribute to how important certain content within a page is perceived to be to search engines.
If it were me I would make the following adjustments to the base template provided
Move the content div above the navigational elements within the source code.
Move the inline CSS code to an external CSS file to help reduce page load times and allow the most important content to move even higher in the source code.
The advice to put the navigation block before the content block is not SEO related, but usability related, in particular for those with screen readers.
The idea is to put a first (invisible to graphical browsers) link to the content of the page so navigation can be bypassed.
Your code is wrong, but here's how you can fix it:
You are using XHTML so you must include XML language information, also you should just include your general language info in your HTML declaration like this:
Microsft's Bing would flag this as an error and inform you to change it appropriately.
Don't use margins, or floats! This is like saying, ok, please move this element a little towards the left and kind of towards the right. Makes no sense! Use absolute positioning and percentages to place elements in your webpages CSS. There are too many different size screens and too many resolutions today. Float and margin are 1995, and I have no idea why people are still using these methods. We also have a society that is now driven by mobile. Keep in mind, one pixel on device will be larger or smaller than one pixel on another device. You can have 5 laptops that are all 17 inches and all have completely different resolutions! Its ok to specify a fixed pixel width and height for images and elements, but you must use percentages when placing those elements otherwise they won't appear in the right position on alternate devices and LCD screens.
If you position an element using absolute positioning with a percentage value such as:
"position: absolute; left: 30%; top: 5%;", then that particular element will be displayed on the screen at 30% from the left, and 5% from the top of the screen regardless of the device rendering it! However, if you position an element with a fixed pixel value say:
"position: absolute; left: 160px; top: 45px;" this will not render correctly on any screen other than the one you are viewing it on. Don't do this! Think about it? You have 2 separate resolutions, one is 1024x768, and the other is, 1366x768, obviously using fixed values will cause serious problems. A percentage is a percentage of the screens or browsers resolution, while a pixel value is a fixed value that hardly changes.
As for your question, you can include your navigation or any other content any way you wish, just be sure to use CSS ID's and corresponding DIV tags that map back to them. Doesn't matter where or when you specify them in your CSS at all. Its entirely up to you. Just stay away from all that "padding" and "margin" stuff, its pointless. With absolute positioning you don't have to float anything, cause everything goes exactly where you want it too from either the top-left, or bottom-right of the screen.