Full browser width div in IE
To create a div the full width of the browser – and have it working in properly IE:
html, body {
width: 100%;
margin: 0;
}
#myDiv {
min-width: 100%;
}
CSS: Sticky Footer
To make a footer stick to the bottom of the page, even when there isn’t enough content for the footer to normally reach the bottom of the page:
NOTE: you must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser.
MORE INFO: http://www.cssstickyfooter.com/
HTML
CSS
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
CSS: Making a DIV height the same as the browser height
html, body {
height: 100%;
}
#div {
min-height: 100%;
}
Horizontal Navigation list with CSS rollovers
Ok we want to create a horizontal Naviagtion bar, by creating a list containing images for buttons instead of text. Pretty simple stuff.
Here’s the HTML code:
Here’s the CSS code (X = your numerical value):
#myList {
list-style-type: none;
padding: 0;
margin: 0;
}
#myList li{
display: inline;
}
#myList span{
display: none;
}
.item1 a {
display: block;
background-repeat: no-repeat;
background-image: url(../images/sprite.jpg);
background-position: -Xpx -Xpx;
width: Xpx;
height: Xpx;
float:left;
}
.item1 a:hover {
width: Xpx;
height: Xpx;
background-position: -Xpx -Xpx;
}
The difference between CLASS and ID
ID : used once on a page – Denoted in CSS by a hash #
CLASS: May be used multiple times on a page – Denoted in CSS by a period .
Full Browser SWF in Internet Explorer
An easy one to kick this blog off, but something I can never remember when I need it..
So I’ve been working on a website in Flash that needs to automatically resize, or stretch itself to the browser window (More on how to do that in another post). Works perfectly in Safari, Firefox, and Opera – But of course breaks in IE (No surprise there, huh).
I seem to be getting this unwanted strip of blank space on the right of the screen, and also IE keeps displaying the vertical scrollbar, even though I have used overflow:hidden on both the X and Y axis in my CSS.
So here is the soution:
My SWF is contained in a DIV with the following CSS element to disable the vertical and horizontal scrollbars:
#div {
visibility: visible;
position: absolute;
top:0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
display: block;
border: 0;
overflow-x:hidden;
overflow-y:hidden;
}
Now this works fine for all browsers except IE, in which you need to add the following..
In the body tag set the margins to 0. This gets rid of the unwanted white strip down the side.
<body topmargin=”0″ leftmargin=”0″>
and in my css I type the following to get rid of the dead scrollbar in IE:
body {overflow: auto;}
leave a comment