I am designing a website for my father and so far I'm midway the index page only.
What is bugging me that when I zoom out to around 30% (just for tests sake) The divs are broken and they end up out of place (will show you an example). Also even the divs do not stay as one "whole entity"
I tried basically everything, the min-width (which is 965px). Is there a way to make it round up Percentage wise sort of? If so, how can it be made considering that the width max-width has to be 965px?
My website is mainly for PCs.
Also I am using HTML5 and CSS3
There is one outer div which puts the whole body into a "box"
Warning: My header is in a PHP so is the footer and then I just load them. I will be posting both the header.php and the generalbackground CSS
The CSS Code is this:
#charset "utf-8";
/* CSS Document */
body
{
background:url(pics/bg.jpg) no-repeat center center fixed;
background-color:#282828;
font-family: 'Sancreek', cursive;
min-width:965px;
margin: 0 auto;
}
.bodyoutline
{
min-width:100% ;
}
div.upperbody
{
background:url('pics/topbg.png') no-repeat center center;
width:965px;
height:100px;
margin: 0 auto;
}
div.body
{
background:url('pics/divbg.png') no-repeat center center fixed;
width:965px;
height:1304px;
margin: 0 auto;
margin-top:-25px;
}
div.header
{
background:url('pics/header.png');
width:965px;
margin: 0 auto;
height: 319px;
overflow:hidden;
}
div.logo
{
background:url('pics/logo.png');
width: 220px;
height: 215px;
float:left;
margin-left:20px;
margin-top:20px;
}
div.groupPhoto
{
background:url('pics/group.png');
float:right;
margin-right:30px;
width:552px;
height:244px;
margin-top:30px;
transform: rotate(12deg);
-ms-transform: rotate(12deg); /* IE 9 */
-webkit-transform: rotate(12deg); /* Safari and Chrome */
}
div.mainContent
{
width:965px;
margin: 0 auto;
float:left;
}
div.menuLinks
{
width:965px;
margin: 0 auto;
text-align:center;
}
ul,li.menuLinks
{
width:965px;
margin: 0 auto;
display:inline;
font-size: 38px;
padding: 10px;
color: #39100a;
font-weight:bold;
}
div.separator
{
width:965px;
text-align:center;
margin:0 auto;
height:50px;
}
div.box
{
width:965px;
margin: 0 auto;
}
div.updec
{
background:url('pics/updec.png') center no-repeat;
width: 965px;
height: 202px;
}
h1.titles
{
margin-left:75px;
font-size:30px;
}
h1.ePhotos
{
float:left;
font-size:18px;
text-decoration:underline;
margin-left:25px;
}
.position
{
margin-left:90px;
margin-top:-130px;
}
a:visited
{
text-decoration:none;
color:#000;
}
a:hover
{
text-outline:#000;
outline-color:#000;
outline-width:2px;
margin: 0 auto;
}
header.php
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Copyright" content="© Dorienne Grech (DodoSerebro), All Rights Reserved ">
<meta name="description" content ="Forever Friends Official Website. All the Latest Dances Walkthroughs, Videos of Recent Events, Photos, Contacts and More regarding Forever Friends Linedancers will be found here!, latest Dances">
<meta name="keywords" content="">
<title>Forever Friends Lineadancers Official Site</title>
<link rel="stylesheet" type="text/css" href="generalbackground.css">
<link rel="stylesheet" type="text/css" href="accordion.css">
<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bodyoutline">
<div class="upperbody"></div>
<div class="body">
<div class="header"> <!-- Header containing Logo and Group Photo -->
<div class="logo"></div> <!-- Logo -->
<div class="groupPhoto"></div> <!-- end of groupPhoto -->
</div> <!--End of header -->
<div class="mainContent"> <!--Main Body Consisting of Links / Video/Photo and others -->
<div class="menuLinks"> <!-- Menu Links -->
<ul class="menuLinks">
<li class="menuLinks">Home</li>
<li class="menuLinks">About</li>
<li class="menuLinks">Dances</li>
<li class="menuLinks"> Videos </li>
<li class="menuLinks">Events </li>
<li class="menuLinks">Contact</li>
</ul>
</div> <!-- end of mainContent -->
Result of Zooming out to 30%
http://imageshack.us/photo/my-images/571/y1bw.jpg/
PS: BROWSER Currently Testing and using is GOOGLE CHROME: Version 29.0.1547.66 m
thanks
best practice would be
.bodyoutline
{
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto;
width: 100%;
}
This will make your all elements be in the div and always aligned regardless of zoom-in or zoom-out.
What I found best people is to use the MEDIA QUERIES
By Simply adding
#media (max-width: 600px)
{
//All the CSS [classes] to be effected by the change in screen will be written here for e.g
h1
{
font-size:20px;
}
}
When the screen is 600px or smaller (or zoomed out) the font-size of h1 will change to 20px whereas ALL the other CSS will stay as originally written (as it is the parent)
In other words:
Media queries will ONLY affect those classes written between the media queries (will overwrite the original)
Related
I have this very simple web that I developed. I used all the codingand tips provided in similar questions here but with no luck. The web runs ok and its validated, but divs do not resize to fit phones. Can anybody give it a quick look and give me some pointers? much appreciated.
Here is the HTML code:
#import url(//db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light);
#font-face {
font-family: "Adieu Light";
src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot");
src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot?#iefix") format("embedded-opentype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff2") format("woff2"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff") format("woff"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.ttf") format("truetype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.svg#Adieu Light") format("svg");
}
.body, html {
height: 100%;
margin: 0;
background-image: url("Home-bck.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.full {
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%)translateY(-50%)
}
.tromper {
display: flex;
justify-content: center;
margin-top: auto;
margin-bottom: 0px;
color: #686868;
font-family: adieu light;
font-size: 28px;
}
.better {
display: flex;
justify-content: center;
margin-top: -39px;
color: #707070;
font-family: Adieu light;
}
.social ul {
display: flex;
position: absolute;
justify-content: center;
right: 50%;
left: 44%;
list-style: none;
}
.social ul li {
margin-top: 0;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 30px;
}
.social ul li .fa {
font-size: 70px;
line-height: 60px;
color: #626262;
}
.social ul li .fa-instagram:hover {
color: #bfeefd;
transition: .5s;
transform: translate(0, -10px) rotate(360deg);
}
.social ul li .fa-linkedin:hover {
color: #bfeefd;
transition: .5s;
transform: translate(0, -10px) rotate(360deg);
}
.Contact {
display: flex;
justify-content: center;
margin-top: 70px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
color: #626262;
font-family: Adieu Light;
font-size: 24px;
}
.clients {
display: flex;
justify-content: center;
}
/* Media Queries: Tablet Landscape */
#media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Media Queries: Tabled Portrait */
#media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; height: auto;
}
#media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
#media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
html { font-size:100%; }
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width:960px) { body {font-size:1.2rem;} }
#media (min-width:1100px) { body {font-size:1.5rem;} }
<!DOCTYPE html>
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta charset="utf-8">
<title>Tromper&Tromper</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="full container">
<div class="tromper">
<h1>TROMPER&TROMPER</h1>
</div>
<div class="better">
<h3>"BETTER TOGETHER"</h3>
</div>
<div class="social">
<ul>
<li>
<a href="https://www.instagram.com/tromperandtromper/?hl=es" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/tromper-and-tromper-works" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
<a href="mailto:whatever#whatever.com" style="text-decoration:none" target="_blank">
<div class="Contact">
<h4>CONTACT US</h4>
</div>
</a>
<div class="clients"></div>
</div>
</body>
</html>
The reason of your div is not resizable it's because h1 tag.
You can try modify your css file with this:
/* Media Queries: Tabled Portrait */
#media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
h1 {font-size: 7vw;} /* <- HERE */
}
However, your code isn't semantic. Try to improve this with the time.
I would comment as I am not sure if this is the right answer, but unfortunetly I am not allowed to.
I don't want to offend you or your experience level but it seems like you do not know how css works? Or maybe you just copied without looking.
You use the media queries to make the website responsive pretty much. Depending on your needs of course.
The easiest way to make divs respeonsive is giving them a width with %. So if you give them lets say 90% they will only get 900px wide when the screen (or window) is 1000px etc.
When you use media queries, because maybe the divs need to be smaller or bigger or you use absolute numbers (like pixel or so) you also need to use your classes and IDs.
Right now in your media queries I see two IDs "primary" and "secondary" because with # you declare this is an ID and in your HTML I dont see any IDs at all. So how is the browser supposed to know, where to apply your CSS?
Now, I dont claim to be a professional CSS user, so it is possible that "#primary" is some sort of special command, but as of right now, I would say there is at least one of your problems.
You also use alot of flex and I dont really know why? You could also work a bit on your HTML, using containers, sections, articles and such, but thats another story.
i agree with bibleblade, and i would like to add that its pretty weird that you use "screen" and sometimes just dont add it. maybe try to be a bit more consistent with that. and plus, by adding "screen" youre stating that this will only look like this, if its on a screen, so it wont work on a printer, which is pretty unnecessary, so i would just remove the "screen" so it defaults to "all" and the last media queries at the bottom for the font-size. are unnecessary, since you could just make the font-size relative to the screen via vw or vh or just use something like clamp
i have made a simple website using a free template. i am confused because the images on my version are not showing but the images on the demo version are working and both have exactly the same css files and html because i copy pasted. i will post them below. my confusion lies in the fact that i dont see any of the images reffered to in either the html or the css stylesheet. the styling is there for the images but no link to the file location. 2 questions.
this is what the site should look like:
http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/
this is what my site looks like:
https://cherry-cupcake-30790.herokuapp.com/
as you can see background, background to the navbar and main images are missing but other styling and css are implemented.
why are the images not showing on my version?
why are the images showing on the demo version 0hen there seems to be no reference to the actual file location of the image (only styling of the image)?
thanks.
html file:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>NightBeach | florida web design</title>
</head>
<body>
<div id="container">
<div id="mainpic">
<h1>Green<span class="off">Mountain</span></h1>
<h2>A template by Bryant Smith</h2>
</div>
<div id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">About</li>
<li class="menuitem">Products</li>
<li class="menuitem">Services</li>
<li class="menuitem">Design</li>
<li class="menuitem">Contact</li>
</ul>
</div>
<div id="content">
<h2>You may use this template in any manner you like. All I ask is that you leave the link back to my site at the bottom of the page. </h2>
<p> </p>
<p> </p>
<h3>Template Notes</h3>
<p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like. If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find "#mainpic h1" in style.css and modify it's "left" and "top" properties, this is also true for the h2 tag.</p>
<p> </p>
<h3>More information</h3>
<p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
<p> </p>
<h3>Template Notes</h3>
<p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like. If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find "#mainpic h1" in style.css and modify it's "left" and "top" properties, this is also true for the h2 tag.</p>
<p> </p>
<h3>More information</h3>
<p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="footer"><h3>florida web design</div>
</div>
</div>
</body>
</html>
css file:
/* A Free Design by Bryant Smith (bryantsmith.com) */
body {
margin: 0;
padding: 0;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 13px;
color: #061C37;
background: #EEEFE4;
background-image:url(images/background.png);
background-repeat:repeat-x;
}
*
{
margin: 0 auto 0 auto;
text-align:left;}
#container
{
display: block;
height:auto;
position: relative;
width: 940px;
}
#mainpic h1
{
position:absolute;
text-align:right;
color:#F8FDEE;
font-size:30px;
color:#FFF;
left:60px;
top:20px;
}
#mainpic h2
{
position:absolute;
text-align:right;
color:#E1E7F7;
left:60px;
top:50px;
}
#mainpic
{
background-image:url(images/main.jpg);
background-repeat:no-repeat;
width:900px;
height:354px;
}
.off
{
color:#3A6028;
}
#menu
{
background-image:url(images/menu.png);
background-repeat:no-repeat;
width:940px;
height:69px;
float:left;
clear:both;
}
#content
{
width:880px;
height:auto;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
}
#footer
{
width:inherit;
height:auto;
}
#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#7198E1;
}
#menu ul {
list-style: none;
padding: 0px;
margin-left:auto;
width:900px;
}
#menu li {
list-style: none;
padding: 0px;
display: inline;
}
#menu a {
float: left;
width: 150px;
height: 40px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
padding-top: 17px;
font-size: 15px;
}
#menu a:hover{
color:#BEE399;
}
#content p
{
}
html, body {
text-align: center;
}
p {text-align: left;}
[1]: http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/
for problem 1, because your website's css is empty, nothing in. The css link is https://cherry-cupcake-30790.herokuapp.com/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css .
for problem 2, the image link refer is not in the html, but in the css file.
#mainpic {
background-image: url(images/main.jpg);
background-repeat: no-repeat;
width: 900px;
height: 354px;
}
the image link is http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/images/main.jpg
When we normally zoom in or zoom out a webpage (by pressing Ctrl + or Ctrl -) the entire page components remain together like the following screenshot of this page
But when I zoom my webpage instead of zooming to a specific area ,the components get distorted
Here is my html
<!doctype html>
<html>
<head>
<title>Are you ready for the show?</title>
<link rel="stylesheet" href="css/global.css"/>
</head>
<body>
<div id="header">
<a href="home.php">
<img src="../images/logo.png"></img>
<span id="logo_name">Dooms Day</span>
</a>
<span id="login">
LogIn
</span>
</div>
</dody>
</html>
and the css
*
{
margin:0;
padding:0;
}
body
{
font-family:Palatino,Georgio,"Times New Roman",Times,serif;
}
#header
{
position: relative;
width:100%;
background: none repeat scroll 0% 0% rgb(50,51,47);
height:80px;
}
#header a
{
text-decoration: none;
color:white;
}
#logo_name
{
font-size:25px;
}
#header img
{
padding-top:12px;
margin-left:10%;
}
#login
{
width:auto;
height:auto;
font-size:20px;
padding:8px 20px 8px 20px;
background-color: rgb(100,192,0);
margin-left: 60%;
border-radius: 10px
}
What should I do to achieve this effect as its necessary for symmetry?
I am playing around with webdesign, I always assumed that div's that are positioned relative, always are ordered in the way they are coded. But now I have a div that jumps above another although they are both relative.
A screenshot of the problem:
Here is the code of my index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/layout.css">
<link rel="stylesheet" type="text/css" href="CSS/nav.css">
<meta name="description" content="Website template 1">
<meta name="keywords" content="template">
<meta name="author" content="">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="MainContainer">
<div id="HeaderContainer">
<div id="NavigatieContainer">
<ul id="nav">
<!-- LVL 1 -->
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
</div>
<div id="BodyContainer">
<p>test</p>
</div>
</div>
</body>
</html>
And here is the code of my layout css:
/*Basic tags*/
body {
background-color: #efebdf;
}
/*DIV ID's*/
div#MainContainer {
width: 60%;
margin-left:auto;
margin-right:auto;
}
div#HeaderContainer {
position: relative;
}
div#NavigatieContainer {
float: right;
}
div#BodyContainer {
position: relative;
background-color: brown;
}
and the code of my navigation css so far, although I don't think the problem is here:
a {
color:#333333;
}
#nav {
/*-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 1px 3px;*/
border-radius: 0.3em;
position: relative;
z-index: 5;
}
#nav li {
margin-right: 10px; /*spacing tussen de list items*/
float:left;/*zorgt voor naast elkaar te plaatsen*/
list-style:none;/*Haalt list bolletjes weg*/
position:relative;
border-radius: 0.3em;
background-color: #e2e0d3;
}
#nav a {
color:black;
display:block;
font-weight:bold;
margin:0;
padding:8px 20px;
text-decoration: none;
}
#Adrift almost got it right, but he mentioned the wrong div. The overflow property should be on the HeaderContainer.
div#HeaderContainer {
position: relative;
overflow: auto;
}
I've created a jsfiddle for you with the result. You might want to add it to any following questions as it allows us to easier detect the problem.
http://jsfiddle.net/7Kx9g/
A little more background informations; once an image floats it is no longer in the document and therefor does not reserve it's own height. A trick called clearfix can be used to prevent it, but it's an advanced way of using overflow: auto; or overflow: hidden;
Do you know how to use inline-block? IMO, it's much easier to organize things with display:inline-block; than to use floats, because float makes it ignore several CSS rules, and the larger your project becomes, the more troublesome this "rule-ignoring" has the POTENTIAL to become.
The problem is caused by the float. Put clear:both; in the css for div#BodyContainer.
Look here. http://jsfiddle.net/aKy67/
Total agree #HC_
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.