Last night, I experienced a strange behavior in IE8 as I saw two noticeably different layouts of a page that's being hosted on separate servers. On my local web server, the header markup looked as expected with its left aligned logo and right aligned and stacked utility links, all of which displayed on a centered page. On a staging web server and a production web server, the header markup was completely invisible on the page, as it was positioned 152px higher than the page.
I understand that the ".header .hog" selector CSS code below is a hack. It was a quick fix for changes that needed to get deployed immediately. Rather than analyzing how to improve this code, I'm more interested in knowing the cause(s) of these presentation differences in IE8. A few question that I have are:
Could the markup have different encoding? If so, what is the best way in determining this possibility? And, which setting, if any, in IIS7 is responsible for encoding output?
Could permissions be the cause of this problem?
Is there a feature in IIS7 that determines whether or not the markup is strictly interpreted?
Is there a difference between the Layout Engines of IE8 on Vista and IE8 on XP?
My markup code is as follows:
<body>
<div class="content">
<div class="header">
<h1 id="logo"><img src="/img/logo.jpg" /></h1>
<div class="hog">
<a class="see">Text</a>
<div class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="utility-links">
<a>link1</a>|
<a>link2</a>|
<a>link3</a>|
<a>link4</a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
My CSS code is as follows:
* {
border:none;
line-height:normal;
margin:0;
outline:none;
padding:0;
text-decoration:none;
}
body{
background:#70133F;
color:#000000;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
margin:0 auto;
}
.clear{
clear:both;
font-size:0;
height:0;
line-height:0;
margin:0;
padding:0;
}
.content{
background:#FFFFFF;
margin:0 auto;
width:970px;
}
.header{
height:160px;
}
.header #logo{
float:left;
font-size:0;
height:124px;
margin:25px 0 0 18px;
width:204px;
}
.header .util-links {
color:#E83F00;
font:bold 12px;
float:right;
margin:135px 15px 0 0;
text-align:right;
text-transform:uppercase;
}
.header .util-links a {
padding:0 10px;
}
.header .hog {
height:3px;
position:relative;
margin-top:-152px;
text-align:right;
width:945px;
}
.header .hog a.see-holiday {
color:#E83F00;
font:bold 12px;
text-transform:uppercase;
height:40px;
width:254px;
}
.header .hog .guidelines {
display:none;
margin-left:524px;
text-align:left;
width:428px;
}
Thanks for the help. Happy Thanksgiving, everyone!
John
Is there a difference between the
Layout Engines of IE8 on Vista and IE8
on XP?
If I understood it right, it appears that you are not only having 2 servers but you are also accessing the site from 2 different computers, one running XP and another Vista. Open the IE developer tools in both computers and observe the browser mode and document mode. Perhaps one of the browsers has been set permanently to IE7 compatibility mode? Or one of the servers is sending the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> tag forcing a compatible mode?
There is a slight difference between IE on XP and Vista because IE uses OS controls to render certain controls such as buttons, textboxes, select boxes and scrollbars. However, the difference in layout caused by that should not be that drastic.
For finding differences in headers, you can install a tool such as fiddler or httpwatch and inspect them in both machines.
Related
I'm trying to get this text to not "fragment" on smaller resolutions. It's for an assignment, and I'm restricted to using XHTML.
The image to the right is floated like this:
#image {
width:420px;
margin-left: 2%;
height:370px;
position:relative;
float:right;
}
with the XHTML:
<div id="image">
<a href="http://en.wikipedia.org">
<img src="picture.png"/>
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Obviously this "fragmentation" doesn't appear on larger resolutions.
Is there an elegant way to this in CSS2.1?
Since the wrapping issue is resolution dependent, you can solve this pretty easily with CSS Media Queries. Think of these as a simple "if/else" for css.
So figure out the window width where the wrapping becomes unacceptable and create a max-width rule with that number. This means for width's less than your max size, the rule will apply.
Now at this size, simply remove the float and set the image to display block which will push the text down the page.
#media (max-width: 600px) {
#image {
display:block; // make image push text down
float: none; // remove your float
margin: 10px auto; // center the image in the available space
}
}
Note: With media queries should be at the BOTTOM of your CSS so they override the previous rule AND you only need to change the attributes that are overridden.
Nice solution #BryceHowitson.
I have just been grappling with this problem and came up with a variant on your approach. I put the Media query on the paragraph of text that followed the image.
My solution targets the clear property on the paragraph that follows the floated image. When the screen resolution leaves enough space beside the floated image for satisfactory rendering of the text, the paragraph wraps around the image. When the available width is too low for satisfactory rendering of the text, the paragraph has "clear:both" applied and the paragraph moves down below the floated image.
One 'pro' for this approach is that the CSS rule is applied to the element whose behavior we are trying to control.
However, what #BryceHowitson's solution achieves, and mine doesn't, is the centering of the image when the wrapping of the subsequent text is turned off.
CSS
.p-clear {
#media (min-width: 400px) {
clear: none;
}
#media (max-width: 400px) {
clear: both;
}
}
HTML
<img src="..." width="300px">
<p class="p-clear">text that needs at least 100px width</p>
I am targeting the 320x480 and 320x568. The issue i am facing in 320x568 Portrait view. Everything is working fine on 320x480 but in 320x568 portrait view, the size of the container is very large. I tried everything to adjust the height but it is not showing the same as 320*480 portrait view. I can't find the way to solve this issue. You can check the screenshot below:
You can check the site here through your mobile - bit.ly/1bD6EhX
I have to move the text to top position but when i do this, this will also affect the 320*480 portrait view. Here is my code below:
.container3 {
margin:0;
height:750px;
overflow:hidden;
}
.fullwidth3 {
width:100%;
}
.mobtxt {
margin:0 0 0 25px;
font-size:22px;
font-weight:600;
font-family:'Open Sans', arial, helvetica;
letter-spacing:0;
text-align:center;
width:80%;
border-bottom:2px solid #e0e0e0;
}
.mobdes {
margin:15px 0 0 10px;
font-size:16px;
font-weight:normal;
font-family:arial;
letter-spacing:0;
text-align:left;
width:95%;
}
.mobdes2 {
position:absolute;
top:320%;
width:95%;
margin:15px 0 0 10px;
font-size:arial;
font-size:15px;
color:#adadad;
padding:0;
}
.mobimg {
width:100%;
clear:both;
float:none;
margin-left:0;
margin-right:0;
right:10px;
margin-top:30px;
}
HTML File
<div class="container3">
<div class="fullwidth3">
<p class="mobtxt">We have an experience of 10 Years</p>
<p class="mobdes">Mandaremus veniam dolor ita sunt, duis praesentibus vidisse velit ingeniis qui
sed est dolore fore eram a do aute incurreret transferrem ab se qui culpa
eiusmod, quem iis pariatur, an culpa magna legam occaecat o in qui quorum legam
quem. Singulis exquisitaque ut quamquam, ita ea tractavissent, nam sint de quis
est quo a tractavissent. </p>
<img src="img/mobimg.png" alt="mob image" class="mobimg" >
<hr class="hr"/>
<p class="mobdes2">Laborum duis malis in duis, duis ingeniis nam transferrem, nam quis commodo, de
nisi varias illum nescius si probant ipsum in laborum exercitation, ut a
comprehenderit, iis aliqua praesentibus, e nisi litteris expetendis.</p>
</div>
</div>
I dont understand, why you are doing top:320%; in .mobdes2. I think you want to do it top:320px. However, it would be better if you'd have provided the HTML as well.
But, I would recomend you to use vh unit of css 3. This just mean the viewport height as unit.
Example: http://snook.ca/archives/html_and_css/vm-vh-units
Browser support: http://caniuse.com/#feat=viewport-units
Good luck!!
I am having allot of trouble with layering, My current issue is that vistors can not click on links inside div layers for some reason. They can't highlight text, click on the images in the sidebar which are linked up. I don't know what is wrong. Any help would be much appreciated.
Site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arakion - Homepage</title>
<html>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="js/video-js/video-js.css" rel="stylesheet" type="text/css">
<script src="js/video-js/video.js"></script>
<script>
_V_.options.flash.swf = "video-js.swf";
</script>
<style type = "text/css">
body {background-color:#FFFFFF; background-size:contain;}
</style>
<script type="text/javascript">
function chgbg() {
var d = new Date();
var h = d.getHours();
if ((h >= 6) && (h < 9)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 9) && (h < 20)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 20) && (h < 22)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 22) || (h<6)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
}
</script>
</head>
<body onload="chgbg()">
<div id="Wrapper">
<div id="navbar" style="display: inline-block;">
<ul id="nav">
<li id="top">
HOME
</li>
<li id="top">
GUIDE
<ul>
<li id="submenu">CLASSES</li>
<li id="submenu">DUNGEONS</li>
<li id="submenu">MONSTERS</li>
<li id="submenu">PETS</li>
<li id="submenu">RACES</li>
<li id="submenu">TOWN BUILDINGS</li>
<li id="submenu">UNIVERSE</li>
<li id="submenu">WIKI</li>
</ul>
</li>
<li id="top">
BLOG
<ul>
<li id="submenu">ARAKION</li>
<li id="submenu">CHRIS TAYLOR</li>
</ul>
</li>
<li id="top">
MEDIA
<ul>
<li id="submenu">CONCEPT ART</li>
<li id="submenu">SCREENSHOTS</li>
<li id="submenu">VIDEOS</li>
</ul>
</li>
<li id="top">
FORUM</li>
</ul>
</div>
<div style="display: inline-block;" id="sidebar_header"><div id="Kickstarter_progressbar"></div></div>
<div style="display: inline-block;" id="sidebar_banner"><div id="Kickstarter_donationcount"><a>$20,000</a></div>
<div id="Sidebar_content">
<p> </p>
<p class="title">Social Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" class="title" /></p>
<p><img src="images/IndieDBIcon.png" width="35" height="35" />
<img src="images/FacebookIcon.png" width="35" height="35" /> <a href="http://twitter.com/arakiongame" target="_new">
<img src="images/TwitterICon.png" width="35" height="35" /> </a> <img src="images/YoutubeICon.png" width="35" height="35" /> </p>
<p> </p>
<p>Random Media</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
<p> </p>
<p> </p>
<p>Something</p>
<p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
<p> </p>
</div></div>
<div style="display: inline-block;" id="main_background">
<div id="main_content"><div id="main_img"><img src="images/MainImages/Main_Placeholder_img.jpg"/></div>
<table width="600" height="106" border="0" id="main_section_img" style="margin:0 auto; vertical-align:top; margin-top: 0;">
<tr>
<td width="140"><img src="images/MainImages/Placeholder1.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder2.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder3.jpg" height="100%" width="100%"/></td>
<td width="140"><img src="images/MainImages/Placeholder4.jpg" height="100%" width="100%"/></td>
</tr>
<tr>
<td width="140">How Housing Works and why we have it <p> </p></td>
<td width="140">An In depth look at the Satyr race <p> </p></td>
<td width="140">We take a look at the role the alchemist plays in a group <p> </p></td>
<td width="140">Our doors are offically open to new employees apply today <p> </p></td>
</tr>
</table>
<p> </p>
</div></div>
<div style="display: inline-block;" id="sub_background_1"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_2"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_3"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text" style="z-index:9;">
<video id="" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="js/video-js/Posters/Test.png"
data-setup="{}">
<source src="js/video-js/Videos/Test.mp4" type='video/mp4' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>
Read More.</div></div></div>
<div style="display: inline-block;" id="sub_background_4"><div id="sub_content">
<div id="Sub_title">Kickstarter has just opened!</div>
<div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
<div id="Sub_image" style="display: inline-block;">
<img src="images/MainImages/Sub_Placeholder.jpg" height="100%" width="100%"/></div>
<div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, Read More.</div></div></div>
<div id="footer_background" style=" text-align: center; ">
<img src="images/Footer_Divider.png" height="10px" width="600px"/>
<p> </p>
COPYRIGHT 2012 CHRIS TAYLOR ALL RIGHTS RESERVED | CODED BY SEAN HALL</a></div>
<div id="left"><img src="images/Backgrounds/Left.png" width="320" height="802" /></div>
<div id="right"><img src="images/Backgrounds/Right.png" width="333" height="833" /></div>
</div>
CSS Code:
#font-face {
font-family: 'KingthingsExeterRegular';
src: url('font/kingthings_exeter-webfont.eot');
src: url('font/kingthings_exeter-webfont.eot?#iefix') format('embedded-opentype'),
url('font/kingthings_exeter-webfont.woff') format('woff'),
url('font/kingthings_exeter-webfont.ttf') format('truetype'),
url('font/kingthings_exeter-webfont.svg#KingthingsExeterRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'KingthingsExeterRegular';
overflow-y: auto;
}
body,td,th {
font-family: KingthingsExeterRegular;
background-size: cover;
background-repeat:no-repeat;
text-align: center;
font-size: 15px;
zoom: 110%
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
color: #FFF;
}
a:active {
text-decoration: none;
}
/*Body Css */
#header{
z-index: -999;
width:900px ;
height:800px ;
position: relative;
top:0;
left:0;
}
#left{
z-index:-9;
width:239px;
height:600px ;
float: left;
clear: both;
position: absolute;
left:-215px;
top:150px;
}
#right{
z-index:-2;
width:239px;
height:600px ;
float:right;
clear: both;
position: absolute;
left:960px;
top:120px;
}
#Wrapper {
width:1040px;
margin:auto;
margin-top:-40px;
height:2000px;
position: relative;
z-index:0;
}
/*------------------------------------*\
NAV
\*------------------------------------*/
#navbar{
position: relative;
top:91px;
float:left;
margin-top:50px;
margin-left:5px;
width:649px;
height: 50px;
z-index:4;
margin-bottom:10px;
clear:both;
}
#nav{
list-style:none;
font-weight:bold;
width:600;
height:50;
margin-bottom:5px;
}
#top{
float:left;
position:relative;
background-image:url("images/Button_NavBar_Unselected.png");
height:55px;
width:119px;
font-size:15px;
}
#top:hover{
background-image:url("images/Button_NavBar_Hover.png")
}
#submenu{
float:left;
position:relative;
height:18px;
width:110px;
font-size: 12px;
text-align:center;
}
#submenu_bottem{
float:left;
position:relative;
height:18px;
width:110px;
font-size: 12px;
text-align:center;
}
#nav a{
display:block;
padding-top:20px;
z-index:-1;
font-family:"Arial";
}
/*--- DROPDOWN ---*/
#nav ul{
list-style:none;
position:absolute;
left:-9999px;
text-align:center;
width:100px;
height:18px;
}
#nav ul li{
padding-top:1px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:-30px;
top:40px;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
}
/* Main Block */
#main_background{
width:680px;
height:519px;
float:left;
background-image:url(images/MainSection.png);
}
#main_content{
width:590px;
height:430px;
text-align:left;
margin-top:20px;
margin-left:45px;
}
#main_img{
margin:0 auto;
margin-top:5px;
background-image:url(images/MainSection_BigImageHighlight.png);
width:520px;
height:300px;
text-align:center;
padding-top:4px;
}
#main_section_img{
margin-top:10px;
background-image:url(mages/MainSection_SmallImageInsett.png);
width:560px;
height:95px;
text-align:center;
vertical-align:top;
margin-top:0;
}
#main_section_img td{
vertical-align:top;
margin-top:0;
}
/* Sub Block */
/* Sub Background Hierarchy */
#sub_background_1{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-1;
margin-left:30px;
top:-38px;
background-repeat:no-repeat;
}
#sub_background_2{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-2;
margin-left:30px;
top:-52px;
background-repeat:no-repeat;
}
#sub_background_3{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-3;
margin-left:30px;
top:-65px;
background-repeat:no-repeat;
}
#sub_background_4{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-4;
margin-left:30px;
top:-77px;
background-repeat:no-repeat;
}
#sub_background_5{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-5;
margin-left:30px;
top:-83px;
background-repeat:no-repeat;
}
#sub_background_6{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-6;
margin-left:30px;
top:-81px;
background-repeat:no-repeat;
}
#sub_background_7{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-7;
margin-left:30px;
top:-81px;
background-repeat:no-repeat;
}
#sub_background_8{
position:relative;
width:610px;
height:270px;
float:left;
background-image: url(images/SubSection_Base.png);
z-index:-8;
margin-left:30px;
top:-85px;
background-repeat:no-repeat;
}
/* Hierarchy End */
#sub_content{
width:580px;
height:220px;
margin:0 auto;
margin-top:10px;
clear: both;
}
#Sub_title{
height:35px;
width:400px;
margin-top:30px;
margin-left:10px;
font-size:30px;
text-align: left;
}
#Sub_subtitle{
height:20px;
width:200px;
margin-left:10px;
margin-top:65;
font-size:15px;
text-align: left;
}
#Sub_image{
height:100px;
width:100px;
margin-top:10px;
margin-left:15px;
float:left;
}
#Sub_text{
height:180px;
width:400px;
float:right;
margin-top:5px;
text-align: left;
z-index:9;
position: relative;
}
/* SideBar Block */
#sidebar_header{
position:relative;
height:80px;
width:350px;
float:right;
background-image:url(images/Kickstarter.png);
margin-right:5px;
left:-20px;
margin-top:10px;
z-index:1;
clear: both;
top:1px;
}
#sidebar_banner{
position:relative;
height:729px;
width:360px;
float:right;
background-image: url(images/Side%20Banner.png);
left:-20px;
z-index:-1;
clear: both;
}
#Sidebar_content{
margin:0 auto;
margin-top:20px;
text-align:center;
font-size: 20px;
width:300px;
height:700px;
line-height: 3px;
}
#Kickstarter_donationcount{
width: 119px;
height: 26px;
text-align:center;
top:8px;
left:230px;
background-image:url("images/Progress/GoalNumber.png");
position: absolute;
padding-top:6px;
}
#Kickstarter_progressbar{
position:relative;
top:62px;
margin:0 auto;
width: 310px;
height: 18px;
background-image:url("images/Progress/KickstarterGoalBar_100.png")
}
#Kickstarter_donationcount a {
color: #000;
font:"arial";
font-size: 18px;
}
#Sidebar_content .title{
line-break: 1px;
}
/* Footer */
#footer_background{
position:relative;
background-image:url(images/Footer.png);
width:605px;
height:75px;
float:left;
margin-left:35px;
top:-89px;
z-index:-9;
line-height:1px;
font-family:"Arial";
font-size:12px;
}
#footer_background a:link{
color: #000;
text-decoration: underline;
}
#footer_background img {
margin-top:100px;
}
Wrapper is covering other stuff so you want to just push it to the bottom. Add z-index: 0; to #wrapper.
Or you can remove the z-index: -1 from the divs inside #wrapper
In the future, post only relevant code inside the post. Nobody will bother going through your site to figure out the issue for you. If you can't narrow the problem down to something specific, then you need to troubleshoot better.
While sachleen's answer did provide a workaround for your imminent problem, your page is facing several critical issues that will become problems very soon.
Give me the code!
Here's the link to your page fully working and without any validation issues. Images are not optimized, but I had to adapt one of them to prevent the usage of z-index all the time:
View it online
Download the files
Compare the files with your own and see what has been done to improve and make the document valid.
Here's a list of the most significant issues:
Element ID
Elements can have an ID, but the ID must be unique on the page, this because the ID purpose is to identify a specific element. If you need to provide a style to multiple elements, the proper way is to use classes.
From MDN :: id
A unique identifier so that you can identify the element with. You can use this as a parameter to getElementById() and other DOM functions and to reference the element in style sheets.
Images
While this is more related with performance, I'm sure that visitors of this webpage will not be please to have to wait a considerable amount of time while 4Mb of images that you currently use get downloaded.
You can use Google Pagespeed Tools, that provides you with a tool to analyze the webpage for errors, and also if images aren't optimized, a link is presented on the analyse report to download an optimized version.
Document Stack
This is the reason as to why you've placed your question. You are messing around with your document stack to overcome issues that should be solved with images usage or a proper markup. While you're free to move elements up and down within the document stack, your page will be facing issues when it comes to cross-browser compatibilities.
The document stack should be used to overcome small details or provide a way to interact with the user without forcing a page refresh, among others. Shouldn't be used for the majority of the elements present as a way to solve layout issues.
Document Type
The document type is used to tell the browser how we should interpreter the document, and what rules should be respected to present it the way you intended.
When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The doctype declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult.
You can read about it at W3c - Doctype Declarations
HTML Markup
Your page lacks a proper markup, that in turn will prevent the browser from presenting elements the way they are supposed to be presented.
You can read about it at W3C - HTML: The Markup Language
Additionally, you can use the W3C validation service to validate and identify issues with your HTML Markup. Keep in mind that recent features aren't properly validated, mainly with CSS. But that's just a small portion.
What exactly is the difference between the inline and inline-block values of CSS display?
A visual answer
Imagine a <span> element inside a <div>. If you give the <span> element a height of 100px and a red border for example, it will look like this with
display: inline
display: inline-block
display: block
Code: http://jsfiddle.net/Mta2b/
Elements with display:inline-block are like display:inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.
Difference of supported styles as summary:
inline: only margin-left, margin-right, padding-left, padding-right
inline-block: margin, padding, height, width
display: inline; is a display mode to use in a sentence. For instance, if you have a paragraph and want to highlight a single word you do:
<p>
Pellentesque habitant morbi <em>tristique</em> senectus
et netus et malesuada fames ac turpis egestas.
</p>
The <em> element has a display: inline; by default, because this tag is always used in a sentence.
The <p> element has a display: block; by default, because it's neither a sentence nor in a sentence, it's a block of sentences.
An element with display: inline; cannot have a height or a width or a vertical margin. An element with display: block; can have a width, height and margin.
If you want to add a height to the <em> element, you need to set this element to display: inline-block;. Now you can add a height to the element and every other block style (the block part of inline-block), but it is placed in a sentence (the inline part of inline-block).
One thing not mentioned in answers is inline element can break among lines while inline-block can't (and obviously block)! So inline elements can be useful to style sentences of text and blocks inside them, but as they can't be padded you can use line-height instead.
<div style="width: 350px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div style="display: inline; background: #F00; color: #FFF">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div style="display: inline-block; background: #F00; color: #FFF">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
All answers above contribute important info on the original question. However, there is a generalization that seems wrong.
It is possible to set width and height to at least one inline element (that I can think of) – the <img> element.
Both accepted answers here and on this duplicate state that this is not possible but this doesn’t seem like a valid general rule.
Example:
img {
width: 200px;
height: 200px;
border: 1px solid red;
}
<img src="#" />
The img has display: inline, but its width and height were successfully set.
splattne's answer probably covered most of everything so I won't repeat the same thing, but: inline and inline-block behave differently with the direction CSS property.
Within the next snippet you see one two (in order) is rendered, like it does in LTR layouts. I suspect the browser here auto-detected the English part as LTR text and rendered it from left to right.
body {
text-align: right;
direction: rtl;
}
h2 {
display: block; /* just being explicit */
}
span {
display: inline;
}
<h2>
هذا عنوان طويل
<span>one</span>
<span>two</span>
</h2>
However, if I go ahead and set display to inline-block, the browser appears to respect the direction property and render the elements from right to left in order, so that two one is rendered.
body {
text-align: right;
direction: rtl;
}
h2 {
display: block; /* just being explicit */
}
span {
display: inline-block;
}
<h2>
هذا عنوان طويل
<span>one</span>
<span>two</span>
</h2>
I don't know if there are any other quirks to this, I only found about this empirically on Chrome.
inline elements
Have respect for their left & right margin and padding. not for top/bottom.
Cannot set width or height.
Allow other elements to sit to their left and right.
Inline-Block elements:
Respect all sides for margin and padding.
Can set width and height.
Allow other elements to sit to their left & right.
Block elements:
Respect all sides for margin and padding
Acquire full-width (in case the width is not defined)
Force a line break after them
A visual example looks like this:
Check out the snippet below for an extra visualization example
.block{
background: green;
width: 50px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
display: block;
}
.inline-block{
background: green;
width: 50px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.inline{
background: green;
width: 50px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
display: inline;
}
<div class="block">
block
</div>
<div class="block">
block
</div>
<div class="inline-block">
inline block
</div>
<div class="inline-block">
inline block
</div>
<div class="inline">
inline
</div>
<div class="inline">
inline
</div>
Block - Element take complete width.All properties height , width, margin , padding work
Inline - element take height and width according to the content. Height , width , margin bottom and margin top do not work .Padding and left and right margin work. Example span and anchor.
Inline block - 1. Element don't take complete width, that is why it has *inline* in its name. All properties including height , width, margin top and margin bottom work on it. Which also work in block level element.That's why it has *block* in its name.
My problem is that the border for the main div doesn't extend to the bottom of the window.
Here's the stylesheet:
body {
margin:0px;
padding:0px;
background-color:#F7F7F7;
}
#nav {
background-color:#F7F7F7;
border-top:10px solid #89B7C4;
height:45px;
padding-top:20px;
padding-left:200px;
border-bottom:1px solid #7597A1;
}
#nav a {
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#sidebar {
float:left;
padding:15px;
}
#main {
float:left;
border-right:1px solid #7597A1;
width:800px;
margin-left:200px;
margin-top:0px;
margin-bottom:0px;
padding-top:10px;
}
Here's the page source:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>home: index</title>
<link href="/stylesheets/application.css?1305224655" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/effects.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/controls.js?1304452925" type="text/javascript"></script>
<script src="/javascripts/application.js?1304452925" type="text/javascript"></script>
</head>
<body>
<div id="nav">
#nav ·
link1 · link2 · link3 · link4
</div>
<div id="main">
#main<br><br>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div id="sidebar">
#sidebar<br>
link1 <br> link2 <br> link3 <br> link4
</div>
</body>
</html>
I had to put breaks in main to see how the border would look. This is not ideal. I would like the border to display even if there's little to no content in the main div.
If you have any ideas on how to get it to extend all the way down to the bottom of the page, I'd really appreciate it.
Any other tips on cleaning up the CSS would also be appreciated.
You have a classic equal height column problem. Here is just one of the many links to show you how to accomplish what you want: http://abcoder.com/css/css-equal-height-columns/
html,body
{
height:100%;
}
body {
margin:0px;
padding:0px;
background-color:#F7F7F7;
}
#nav {
background-color:#F7F7F7;
border-top:10px solid #89B7C4;
height:45px;
padding-top:20px;
padding-left:200px;
border-bottom:1px solid #7597A1;
}
#nav a {
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#sidebar {
float:left;
padding:15px;
}
#main {
float:left;
border-right:1px solid #7597A1;
width:800px;
margin-left:200px;
margin-top:0px;
margin-bottom:0px;
padding-top:10px;
min-height:100%;
}
This is as close as I can come. Most credit goes to:
http://www.sitepoint.com/forums/css-53/automatic-div-height-fill-100%25-screen-height-158987.html
The main does not extend to the bottom of the window because its height is determined by the contents of the div. Just add more content and it will extend accordingly.
Even height:100% won't work because the body, and even the html, are only as high as they need to be. So making the main just as high as them isn't going to work.
Most elements prefer to only take up as much height as its content needs. Unfortunately you will just have to set the height explicitly.
Also look at this question for how to do it with Javascript.
You could also insert the min-height property which will give the #main div a minimum height and will also remain in place. However keep in mind that content may overlap or hide because of your minimum height be aware to adjust the height accordingly
#main {min-height:500px}
This should be a good start:
#left {
width: 14em;
float: right;
}
#right {
margin-right: 14em;
border-right: 1px solid grey;
}
<div id="left">
<ol>
<li>Lorem ipsum</li>
<li>Duis aute</li>
<li>Excepteur sint</li>
<li>Ut enim minim veniam</li>
<li>Lorem ipsum amet</li>
<li>Duis reprehenderit</li>
<li>Ut enim veniam</li>
<li>Ut enim veniam</li>
</ol>
</div>
<div id="right">
<h1>Stretch the Background Color in a Two Column Layout</h1>
<p>The trick is to add the background color to the main container(in this case, id #canvas)<em>view the source for answer</em>.</p>
<div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>