CSS - Css Indentation Problem

Hello all this is my first post so i hope you can help.
The problem is that i don't have a mac to develop on (and in the past that hasn't been a problem) but i'm currently doing a site for a client and they solely use a mac (Firefox / Safari) to view my work.
The site so far looks and functions the way i want it to on windows using IE7 / 8, Firefox 3, Safari and Opera 9.5, The client sent over a scrren shot that showed all the textin the left hand div seemed to be either padded out so it was to tall or either padding has been applied to the divs that contain the text.
Is there a known problem with MACs and CSS rendering?

Thanks in advance... i can't quite afford a Mac to test things on

Hello,

I am having a bit of problem with UL code in my sidebar for my website. In Safari the two items in my list display correctly under the paragraph of text, but in most other browsers the first part of the first item, jumps up and overlays itself in the upper paragraph.

Here is my CSS code:
Code:

ul.sidebar {
  margin: 0 0 5px 0;
  padding: 5px 0 0 25px;
}

ul.sidebar li {
  font-size: 75%;
  list-style-type: circle;
}

ul.sidebar li a {
  color: black;
  list-style-type: circle;
  height: auto !important;
}

And here is its implementation on the website:
Code:

<div id="midcont">
        <!-- left body div starts here-->
        <p>Please use the contact form to the right for inquiries. Most questions are answered within 24-48 business hours. Below is our direct contact information.</p>
        <br/>
        <ul class="sidebar">
        <li><b>E-Mail:</b> xxx@xxx.com</li>
        <li><b>Phone: </b>(xxx) yyy- zzzz</li>
        </ul>
        <!-- left body div ends here-->
      </div>

Thanks in advance for all your help!

Link is he http://setupyourblog [dot] com

I have created this style

.class1 A:link {text-decoration: none;color:white;}
.class1 A:hover {text-decoration: underline; color:Orange;font-weight:bold}
.class1 A:visited {text-decoration: none;color:white;}
.class1 A:active {text-decoration: none;color:white;}

In the aspx page but the problem is that when the user visit some link and try to put the mouse again on that link color is not changing but yea it is making bold font.

What can be the problem or something I am missing ??

In IE6 my page is not lining up like it is supposed to. The left navigation is not sitting flush against the footer or main content DIV. I have tried a clearing DIV after the main content, but still can't get it to stay flush against the footer. It looks fine in IE7, FireFox, and Safari. Can anyone help me with this?? I would appreciate it!

Here is my CSS code
Code:

body {
	background-image: url(../images/bgs/bg_try_02.jpg);
	background-repeat: repeat;
	margin-top: 0px;
	margin-bottom: 0px;
}


.container {
	background: transparent;
	width: 1000px;
	padding-top: 0px;
	margin: 0px auto;
}
.banner {
	background: url(../images/banner.jpg);
	height: 245px;
	width: 1000px;
	margin: 2px auto 4px;
	padding-bottom: 0px;
	padding-top: 0px;
}
.left_col {
	background: url(../images/bgs/left_col_bg_03.jpg) repeat-y;
	float: left;
	height: 623px;
	width: 200px;
	margin: 1px auto 0px;
	padding: 1px 0px 0px;
}
.pipe {
	background: url(../images/bgs/images/pipe_bg_03.jpg) repeat-y center;
	text-align: center;
	height: 622px;
	width: 200px;
	margin: 0px auto;
	padding-bottom: 2px;
}

.right_col {
	background: #FFFFFF;
	float: right;
	width: 786px;
	height: 620px;
	padding: 1px 9px 2px 5px;
	margin: 1px 0px 0px;
}
.footer {
	background: url(../images/bgs/footer_02.jpg) repeat-x;
	padding-bottom: 15px;
	margin: 0px auto;
	padding-top: 5px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	height: 75px;
	clear: both;
}
.border_2 {
	background: url(../images/bgs/border2.gif) repeat-x;
	height: 14px;
}
.clearfix {
	clear: both;
	visibility: hidden;
	font-size: 1px;
	line-height: 0px;
	height: 0px;
}

.border_1 {
	background: url(../images/bgs/border1.gif) repeat-x;
	height: 14px;
}
.bg_color {
	background: url(../images/bg_color_02.jpg) repeat-x;
	height: 768px;
}
.bus_border {
	background: url(../images/bgs/border2.gif) repeat-x;
	height: 14px;
	width: 140px;
}
.floatright {
	float: right;
	margin: 4px;
	clear: right;
}
.btn1 {
	background: url(../images/btns/left_bg_nav.jpg);
	height: 65px;
	width: 200px;
}
.btn2 {
	background: url(../images/btns/left_bg_nav.jpg);
	height: 65px;
	width: 200px;
}
.btn3 {
	background: url(../images/btns/left_bg_nav.jpg);
	height: 65px;
	width: 200px;
}

I got the bellow css that I am using to display a drop down menu on my page.
On firefox the drop down menu width looks ok , all the menu options looks the same. But in IE the drop down menu width is showing different. Is displaying the menu options broken as the size of the text.

The bellow lines are a representaion of how the menu in IE is showing. In Firefox all the lines are display the same.

How can I make it look the same in IE as in Firefox?

Drop down menu options
--------------------option 1
--------------------------------option 2
--------option 3
------------------------------------------------option 4

#menuh-container
{
position: absolute;
top: 8.2em;
left: 21.7em;
width:auto;
}

#menuh
{
font-size: 12px;
font-family: arial, helvetica, sans-serif;
width:auto;
float:left;
margin:2em;
margin-top: 0em;
width:auto;
}

#menuh a
{
text-align: left;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
width:auto;
}

/* menu at rest */
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color:#3399CC;
text-decoration:none;
}

/* menu on mouse-over */
#menuh a:hover
{
color: white;
background-color: #8FD400;
text-decoration:none;
width:auto;
}

/* attaches down-arrow to all top-parents */
#menuh a.top_parent, #menuh a.top_parent:hover
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

/* attaches side-arrow to all parents */
#menuh a.parent, #menuh a.parent:hover
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:auto;
/* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}

#menuh li
{
position:relative;
min-height: 0px;
vertical-align: top;
width:auto;
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:46px;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
width:auto;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursorointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:block;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

Hello,

I am having a problem with displaying multiple tables within a div container.. I get this problem only for IE as firefox and other browsers show the tables how I want.

current code in comments:

// div container, width = 80%
//while loop

// table
<table>
<tr>
<td>
//php table values being printed
</td>
</tr>
</table>

//end while loop
// end div container

the table is aligned to the left and should print out the tables with values as long as they exist in the database. The div container which the table sits in is 80% in width. Within Firefox 5 tables are displayed acorss the container from left to right before moving onto the next line. However in IE it displays all the tables in a long line from left to right and overflowing off to the right ignoring the container parameter.

any hep would be much appreciated

Thanks

Hi there,

Does anyone know what this code messed up in IE6, its fine in IE7 and firefox? I'v attached the html, css and a screengrab.

Thank

Code:

<div class="commentAvatar"><img src="/images/avatars/noavatar.gif" alt="USER" border="0" height="50" width="50"></div>
<div class="commentMessage">
<div style="float: right; width: 32px; text-align: center;"><div class="voteBad" id="3:-:15"></div><div class="voteGood" id="3:+:15"></div></div>
<em class="comment-info"><span>4 votes</span>
	<strong>guest23</strong> said <strong>(3 days, 10 hours ago)</strong></em>

    my message<br>
is here</div>

Code:

/* CSS*/
.commentAvatar {
	width:70px;
	height:64px;
	float:left;
	margin-left:114px;
	background-image:url(images/comment_left.gif);
	background-position:right;
	background-repeat:no-repeat;
}
.commentMessage {
	width:391px;
	min-height:50px;
	margin-left:184px;
	padding: 5px 10px;
	background-color:#555555;
	background-image:url(images/comment_bg.jpg);
	background-repeat:no-repeat;
}

http://www.refinethetaste.com/html/

My website displayed fine with internet explorer 7 and Firefox. But so many errors with IE 8. Is it my codes or IE8?

Problem solved, thank you very much

Hi to all

Can anyone help me how to identify browser in css and apply css according to the browser

for example

// if Browser is IE 7

.test
{
font-size:10px
}

// if Browser is IE 8
.test
{
font-size:12px
}


Is this is possible .

i found this code but it does not work for iE 7 or IE 8
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6hacks.css" />
<![endif]-->

thanks

Hello,

I'm struggling to make my homepage work correctly with IE and I'd appreciate some help.

The URL is www . andytrus . com

Firefox looks good, but in IE, the document is for some reason making the size of the page much longer than it should be. As you'll see, there is a lot of wasted space on the bottom I've been trying to get rid of to no avail. No other page is having this problem on my site and its very frustrating!

Here is the code to the index page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see (URL address blocked: See forum rules)" />
<title>Portfolio Website</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--

if (document.images) { // Preloaded images
demo1 = new Image();
demo1.src = "images/bigtext1.jpg";

demo2 = new Image();
demo2.src = "images/bigtext2.jpg";

demo3 = new Image();
demo3.src = "images/bigtext3.jpg";

demo4 = new Image();
demo4.src = "images/bigtext4.jpg";

demo5 = new Image();
demo5.src = "images/bigtext5.jpg";

demo6 = new Image();
demo6.src = "images/bigtext6.jpg";

demo7 = new Image();
demo7.src = "images/bigtext7.jpg";

demo8 = new Image();
demo8.src = "images/bigtext8.jpg";

demo9 = new Image();
demo9.src = "images/bigtext9.jpg";

demo10 = new Image();
demo10.src = "images/bigtext10.jpg";

demo11 = new Image();
demo11.src = "images/bigtext11.jpg";

demo12 = new Image();
demo12.src = "images/bigtext12.jpg";

demo13 = new Image();
demo13.src = "images/bigtext13.jpg";

demo14 = new Image();
demo14.src = "images/bigtext14.jpg";
}

function timeimgs(numb) { // Reusable timer
thetimer = setTimeout("imgturn('" +numb+ "')", 13500);
}

function imgturn(numb) { // Reusable image turner
if (document.images) {

if (numb == "14") { // This will loop the image
document["demo"].src = eval("demo14.src");
timeimgs('1');
}

else { document["demo"].src = eval("demo" + numb + ".src");

timeimgs(numb = ++numb);
}
}
}

// -->
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
 div.c2 {clear:both}
 span.c1 {color: #F0E9B9; font-family: Trebuchet MS; font-size: 1.3em}
/*]]>*/
</style>
</head>
<body onload="timeimgs('2');">
<div id="outside_container">
<div id="container">
<ul id="menu">
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
<ul id="right_menu">
<li><a href="index.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<img src="images/bigtext1.jpg" name="demo" id="panel" alt="demo" />
<div id="content">
<div class="column1">
<h2>Recent work</h2>
<ul class="work">
<li><a href="blowthewhistle.html"><img src="images/work_4.jpg" alt="Sample Work 1" /> <span class="c1">Created a system to help basketball referees make better calls through user-centered design.</span></a></li>
<li><a href="madness.html"><img src="images/work_1.jpg" alt="Sample Work 1" /> <span class="c1">Scripted a unique story and used Google Sketchup to design 3D models for a working video game.</span></a></li>
</ul>
</div>
<div class="column2">
<h2>Background</h2>
<p>Hello, my name is Andy Trus, and I am an interaction designer. I recently graduated from Indiana University with a Masters in HCI, and I also have an undergraduate degree in Marketing from IU in 2004. My combination of skills, creativity, business accumen, and leadership make me an invaluable asset to any design team.</p>
</div>
<div class="c2"></div>
</div>
</div>
</div>
<div id="footer"><img src="images/footerlogo.jpg" alt="AndyTrus.com" /> <span id="footer_text">A portfolio designed to showcase my talents as a designer.</span></div>
</body>
</html>

Here is the code to my CSS which is used in this page

Code:

body {
margin : 0;
padding : 0;
background-color : #11090a;
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}

#outside_container {
background : url(images/bg2.jpg) repeat-x;
}

#container {
background : url(images/bg1.jpg) no-repeat;
min-height : 545px;
max-height : 560px;
width : 1007px;
position : relative;
}

#logo {
position : absolute;
top : 0;
left : 0;
}

#panel {
position : absolute;
top : 115px;
left : 50px;
}

ul#menu {
margin : 0;
padding : 0;
position : absolute;
top : 85px;
left : 67px;
}

ul#right_menu {
margin : 0;
padding : 0;
position : absolute;
top : 85px;
right : 205px;
}

ul#menu li, ul#right_menu li, ul#resume_menu li {
margin : 0;
padding : 0;
list-style : none;
margin-right : 15px;
font-size : 11px;
text-transform : uppercase;
display : inline;
}

ul#menu li a, ul#right_menu li a, ul#resume_menu li a {
text-decoration : none;
color : #bd92b2;
}

ul#menu li a:hover, ul#right_menu li a:hover, ul#resume_menu li a:hover {
text-decoration : none;
color : #ffffff;
}

#content {
padding-top : 270px;
padding-left : 68px;
width : 815px;
color : #f0e9b9;
font-size : 13px;
line-height : 20px;
}

.column1 {
float : left;
width : 280px;
margin-right : 30px;
}

.column2 {
float : left;
width : 390px;
margin-right : 30px;
}

#content h2 {
font-family : Georgia, "Times New Roman", Times, serif;
color : #bd92b2;
margin : 0 0 20px 0;
font-weight : normal;
}

#content h4 {
font-family : Trebuchet MS, "Times New Roman", Times, serif;
color : #f0e9b9;
margin : 0 0 20px 0;
font-weight : normal;
}

ul.work {
margin : 0;
padding : 0;
}

ul.work li {
list-style : none;
margin : 0;
padding : 0;
clear : both;
}

ul.work li a {
color : #e0b882;
display : block;
padding : 5px 10px 5px 10px;
text-decoration : none;
font-size : 10px;
}

ul.work li a img {
float : left;
margin-right : 20px;
margin-bottom : 20px;
}

ul.work li a h4 {
color : #f0e9b9;
margin : 0;
font-weight : normal;
font-size : 13px;
}

ul.work li a:hover, ul.work li a:hover h4 {
color : #ffffff;
}

#footer {
border-top : 1px solid #3f2324;
padding : 5px 50px 45px 50px;
color : #bd92b2;
font-size : 9px;
line-height : 14px;
}

#footer img {
float : left;
margin-right : 10px;
}

#footer span {
display : block;
float : left;
width : 350px;
padding : 15px 50px 10px 40px;
}

#footer a {
color : #9e8292;
text-decoration : none;
}

#footer a:hover {
color : #ffffff;
}

a img {
border : 0;
}

I'd really appreciate the help. Thanks!

I have a big problem with css in both IE and FF I don't know what's going on i'm making a navigation menu with submenu from some elements when i display the submenu from the element the square bullets isn't displayed beside the list item from the submenu and it's required in firefox and even the hover effect isn't displayed correct in FF also and it's displayed in IE correctly and in some page the conetnt was wholy distroyed in IE and display correct in FF with it's bugs and in dream weaver the design is going ok and i'm using a strict DTD i don't know what's wrong and what's going on ???

I have two problems,

1. One page of my website centers nicely in everything but but IE, trying to fix. Can't figure out what to do.

2. I attempted to use Firebug to see if I could figure out why this one page does not center vs all the others but it escapes me. Then I realized I was using Firebug in Firefox, how would it know there was a problem in IE.

I am a new member of this forum so I can't post a URL for you to look at.

Hi, i having some problems with some css code, it looks ok with FF but in IE he design looks bad. I have cked with WC3 Validator and it pass the tests.

Anyone have some ideeas abut fixing that.

Thanks.

Code:

* {
    margin: 0;
    padding: 0;
}

body {
    background: #f4bd27 url('images/background__ornoment.png');
    color: #323232;
    font: 11px verdana;
    padding: 25px 0;
}
div.background__gradient {
    background: url('images/background__gradient.png') repeat-x;
    height: 800px;
    min-height: 1px;
    width: 100%;
    margin: -25px 0 0 0;
    position: absolute;
    z-index: -9999;
}

a {
    color: #323232;
    border-bottom: 1px dotted #969696;
    text-decoration: none;
}
a:hover {
    color: #646464;
}

a img { border: none; }

img { margin: 3px 0; }

h3 {
    border-bottom: 1px solid #c8c8c8;
    margin: 0 0 3px 0;
    padding: 0 0 3px 0;
}
h3 a { border: none; }

hr {
    border: 0 none #ffffff;
    border-top: 1px solid #c8c8c8;
    clear: both;
    display: block;
    height: 1px;
    margin: 3px 0;
}

ul, ol { padding: 0 15px; }

div.clearBoth { clear: both; }

div.small { font-size: 9px; }

textarea {
    margin: 3px 0;
    width: 702px;
}

div.container {
    margin: auto;
    width: 968px;
}

div.header {}
div.header__logo {
    background: url('images/header__logo.png');
    height: 77px;
    margin-left: -7px; /* !!! */
    width: 188px;
}

h2.navigation {
   left: -9999em;
   position: absolute;
}
.navigation ul {
   margin: 0;
   overflow: hidden;
   padding: 0;
}
.navigation li {
   float: left;
   list-style: none;
}
.navigation a {
    border: 0;
    display: block;
    float: left;
    height: 37px;
    margin-top: -37px;
    overflow: hidden;
    text-indent: -9999em;
}
#navigation__sakums a {
    background: url('images/navigation/sakums.png');
    margin-left: 166px;
    width: 112px;
}
#navigation__sakums a:hover {
    background: url('images/navigation/sakums.png');
    background-position: 0 37px;
    margin-left: 166px;
    width: 112px;
}
#navigation__blogs a {
    background: url('images/navigation/blogs.png');
    margin-left: 278px;
    width: 95px;
}
#navigation__blogs a:hover {
    background: url('images/navigation/blogs.png');
    background-position: 0 37px;
    margin-left: 278px;
    width: 95px;
}
#navigation__galerija a {
    background: url('images/navigation/galerija.png');
    margin-left: 373px;
    width: 114px;
}
#navigation__galerija a:hover {
    background: url('images/navigation/galerija.png');
    background-position: 0 37px;
    margin-left: 373px;
    width: 114px;
}
#navigation__pamacibas a {
    background: url('images/navigation/pamacibas.png');
    margin-left: 487px;
    width: 132px;
}
#navigation__pamacibas a:hover {
    background: url('images/navigation/pamacibas.png');
    background-position: 0 37px;
    margin-left: 487px;
    width: 132px;
}
#navigation__dg-studija a {
    background: url('images/navigation/dg-studija.png');
    margin-left: 619px;
    width: 132px;
}
#navigation__dg-studija a:hover {
    background: url('images/navigation/dg-studija.png');
    background-position: 0 37px;
    margin-left: 619px;
    width: 132px;
}
#navigation__kas-esmu a {
    background: url('images/navigation/kas-esmu.png');
    margin-left: 751px;
    width: 133px;
}
#navigation__kas-esmu a:hover {
    background: url('images/navigation/kas-esmu.png');
    background-position: 0 37px;
    margin-left: 751px;
    width: 133px;
}

div.header__rss {
    background: url('images/header__rss.png');
    height: 58px;
    margin-top: -58px;
    margin-left: 899px;
    width: 69px;
}

div.wrap__top {
    background: url('images/wrap__top.png');
    height: 11px;
}
div.wrap { background: url('images/wrap.png'); }
div.wrap__gloss {
    background: url('images/wrap__gloss.png');
    height: 91px;
    position: absolute;
    margin: -76px 0 0 5px;
    width: 958px;
}

div.content {
    margin: auto;
    width: 928px;
}

div.wrapWindows {
    float: left;
    z-index: 1; /* DON'T WORK! */
}
div.windows {
    margin: auto;
    width: 736px;
}
div.windows__top {
    background: url('images/windows__top.png');
    height: 15px;
}
div.windows__middle {
    background: url('images/windows__middle.png');
}
div.windows_ {
    margin: auto;
    padding: 0 0 6px 0;
    width: 706px;
}
div.windows__bottom {
    background: url('images/windows__bottom.png');
    height: 31px;
}

div.wrapSidebar {
    float: right;
    z-index: 1;  /* DON'T WORK! */
}
div.sidebar {
    margin: auto;
    width: 188px;
}
div.sidebar__top {
    background: url('images/sidebar__top.png');
    height: 15px;
}
div.sidebar__middle {
    background: url('images/sidebar__middle.png');
}
div.sidebar_ {
    margin: auto;
    padding: 0 0 6px 0;
    width: 158px;
}
div.sidebar__bottom {
    background: url('images/sidebar__bottom.png');
    height: 31px;
}

div.bullet {
    background: url('images/bullet.png');
    float: right;
    height: 16px;
    margin: 5px 10px 0 0;
    width: 16px;
}

div.footer {
    background: url('images/footer.png');
    height: 109px;
    width: 968px;
}
div.footer__twitter_com {
    background: url('images/footer__twiiter_com.png');
    float: right;
    height: 46px;
    margin: 19px 32px 0 0;
    width: 98px;
}
div.footer_ {
    padding: 27px 0 0 46px;
}

div.headerSearch {
    width:200px;
    height:25px;
    position:absolute;
    right:500px;
    background:url(./images/headerSearch.png) no-repeat 0 0;
    height: 30px;
    margin-top: 9px;
    overflow: hidden;
    text-indent: -9999em;
}
.searchQuery {
    display:block;
    float:left;
    padding:6px 5px 5px 10px;
    width:117px;
    height:14px;
    font-size:11px;
    border:0;
    color:#333;
    background:none;
}
.searchQueryIA {
    color:#666;
    font-style:italic;
}
.searchButton {
    display:block;
    float:left;
    margin-left:-7px;
    width:20px;
    height:25px;
    padding:0;
    border:0;
    background:none;
    text-indent:-1000px;
    cursor:pointer;
}

*just moved this from the html forum. Didnt see this one at first.*

Ok. So I have been reworking my company's website and have recently came upon a problem. Originally when I was coding, I was using Chrome. I kept checking my progress in Safari, IE8, Firefox, and Opera (or so I thought), and I never had problems. Today when showing my boss, he opened it in IE6 and it looked like crap. Came back to my desk and opened in IE8 and all the divs are screwed up. It looks perfect in the other browsers, just IE.

Anyone give me a tip, or help out? Id appreciate it. Been beating my head against a wall trying to figure it out. FYI, none of the links work yet. I am basing this off of "fixed header and footer" code I found he http://limpid.nl/lab/css/fixed/header-and-footer

Here is my site:
http://margraphics.com/NewSite/History.php

html:
Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
      <title>MAR Graphics - History</title> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
      <meta http-equiv="X-UA-Compatible" content="IE=8" /> 
      <link rel="stylesheet" type="text/css" href="Images/Style.css" /> 
      <meta name = "keywords" content="printing services, brochure printing, book printing, post card printing, printing, digital printing, business card printing, color printing, poster printing, commercial printing, printing company, printing equipment, catalog printing, magazine printing, label printing, brochure printer, book printer, post card printer, business card printer, poster printer, Catalog printer, Magazine printer, Label printer, U-seal, useal, integrated label, integrated card, interplast, business forms, pressure seal, unit sets, manifold forms, business form, cut sheet, cut sheets, continuous forms, labels, label, form/label combinations, digital printing, docutech, on demand printing, commercial printing, direct mail, commercial printing, mailing services, print, forms, documents, printing, variable imaging, one-to-one marketing, personalization, handbooks, manuals, school handbooks, binders, inkjet, barcodes" /> 
   </head> 
   <body> 
      <div id="Header" class="Header"> 
         <div id="fullheader"> 
            &nbsp;
         </div> 
         <div id="HeaderPane" class="HeaderPane"> 
            <a href="index.php"> 
               <img src="Images/MARlogo.png" alt="MARLogo" border="0" style="position: absolute; left: 134; top: 9;" /> 
            </a> 
            <div id="Address" style="position: absolute; right: 9; top: 7;" class=" AddressText"> 
               523 South Meyer Avenue
               <br /> 
               Valmeyer, IL 62295
               <br /> 
               618-935-2111
               <br /> 
               800-851-4460
            </div>           
         </div> 
      </div>      <div id="footer"> 
         <div id="NavPaneFade" class="NavPaneFade"> 
            &nbsp;
         </div> 
         <div id="NavPane" class="NavPane"> 
            <div id="About" style="position: absolute; left: 95; top: 7;" class=" NavPaneText"> 
               A little about us ...
               <img src="Images/Header-Red.png" alt="Red Header Bar" style="position: absolute; left: -6; top: 17;"/> 
               <br /> 
               <a href="History.php">History</a> 
               <br /> 
               <a href="News.php">News</a> 
               <br /> 
               <a href="Equipment.php">Equipment</a> 
            </div> 
            <div id="NavPaneWrapper"> 
               <div id="NavPaneContainer"> 
                  <div id="What" style="top: 7;" class=" NavPaneText"> 
                     What we offer ...
                     <img src="Images/Header-Green.png" alt="Green Header Bar" style="position: absolute; left: -6; top: 17;"/> 
                     <br /> 
                     <a href="Direct.php">Direct Mailing</a> 
                     <br /> 
                     <a href="Integrated.php">Integrated Cards/Labels</a> 
                     <br /> 
                     <a href="Variable.php">variable/Digital Imaging</a> 
                     <br /> 
                     <a href="Forms.php">Forms</a> 
                     <br /> 
                     <a href="Labels.php">Labels</a> 
                     <br /> 
                     <a href="Warehousing.php">Warehousing</a> 
                     <br /> 
                     <a href="Seku.php">Sekur Seal</a> 
                  </div> 
               </div> 
            </div> 
            <div id="Little" style="position: absolute; right: 95; top: 7;" class=" NavPaneText"> 
               A little bit of everything else ...
               <img src="Images/Header-Blue.png" alt="Blue Header bar" style="position: absolute; left: -6; top: 17;"/> 
               <br /> 
               <a href="Contact.php">Contact Us</a> 
               <br /> 
               <a href="FAQ.php">FAQ</a> 
               <br /> 
               <a href="OnlineOrder.php">Web ordering</a> 
            </div> 
            <div class="prop"></div> 
            <br /> 
            <div class="clear"></div> 
         </div> 
         <div id="fullFooter" class="Footer"> 
            <div id="SiteMap" style="position: absolute; left: 134; top: 4;"> 
               <a href="_blank" class="FooterText"> 
                  Home
               </a> 
               |
               <a href="_blank" class="FooterText"> 
                  Sitemap
               </a> 
               |
               <a href="_blank" class="FooterText"> 
                  Privacy
               </a> 
               |
               <a href="_blank" class="FooterText"> 
                  Terms
               </a> 
            </div> 
            <div id="Copyright" style="position: absolute; right: 134; top: 10;" class=" FooterText"> 
               <span class="FooterText"> 
                  Copyright 2010 MAR Graphics
               </span> 
            </div> 
            <a href="http://www.facebook.com/pages/Valmeyer-IL/MAR-Graphics/326577303828" target="_blank"> 
               <img src="Images/Facebook.png" alt="Facebook" border="0" style="position: absolute; right: 100; top: 3;" /> 
            </a> 
         </div> 
      </div> 
      <div id="Content"> 
         <div class="Rounded-Top"> 
            <div class="Rounded-Bottom"> 
               <div class="Rounded-Left"> 
                  <div class="Rounded-Right"> 
                     <div class="Rounded-BottomLeft"> 
                        <div class="Rounded-BottomRight"> 
                           <div class="Rounded-TopLeft"> 
                              <div class="Rounded-TopRight"> 
                                 <dl class="ContentPaneHeader"> 
                                    <dt>Now celebrating our 49th year of providing print solutions to distributors/brokers nationwide!</dt> 
                                    <dd class="ContentPaneContent">	
                                       <table width="100%" border="0" cellspacing="4"> 
                                          <tr> 
                                             <td width="81%" height="133" class="ContentPaneContent"> 
                                                In March of 1961, Myron A. Roever started a printing company in a garage in East St. Louis, IL. Almost 50 years later, MAR Graphics continues to provide printing services to brokers nationwide. Through it all, we have prided ourselves in offering high quality and timely delivery. Now, in the 21st century, we continue to maintain that quality and speed in every product line we offer.
                                             </td> 
                                             <td width="19%" height="133"> 
                                                <img src="Images/marm1.jpg" width="204" height="129" alt="Myron Roever"/> 
                                             </td> 
                                          </tr> 
                                       </table> 
                                       <table width="100%" border="0" cellspacing="4"> 
                                          <tr> 
                                             <td width="18%" height="152"> 
                                                <img src="Images/marm2.jpg" width="222" height="148" alt="Printing Press"/> 
                                             </td> 
                                             <td width="82%" height="152" class="ContentPaneContent"> 
                                                MAR Graphics began as a unit set manufacturer under the name MAR Business Forms almost 50 years ago. In 1994, we changed our name to MAR Graphics to better reflect the products and services we now offer. Over the years, 
                                   we have added other capabilities to our wide selection of web and sheet-fed presses, including flexographic label printing and digital printing. We now offer direct mail and commercial printing capabilities that expand the product mix we offer to the network of business printing distributors that we supply.
                                             </td> 
                                          </tr> 
                                       </table> 
                                       <table width="100%" border="0" cellspacing="4"> 
                                          <tr> 
                                             <td width="75%" height="144" class="ContentPaneContent"> 
                                                MAR Graphics is located in Valmeyer, Illinois, just outside St. Louis, Missouri. We offer a wide variety of printed products to forms distributors nationwide. MAR Graphics operates 14, 17, 22 and 28 inch presses capable of printing up to 10 colors, and our extensive digital imaging and bindery departments offers a multitude of value added features that make our documents and forms stand out from the rest. However, our most valuable resource is our staff of experienced and dedicated employees, who work hard to produce a high quality product in a fast and efficient manner.
                                             </td> 
                                             <td width="25%" height="144"> 
                                                <img src="Images/buildingfromair.JPG" width="210" height="140" alt="MAR at present"/> 
                                             </td> 
                                          </tr> 
                                       </table> 
                                    </dd> 
                                 </dl> 
                                 <script type="text/javascript"> 
                                    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                                    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                                 </script> 
                                 <script type="text/javascript"> 
                                    try {
                                    var pageTracker = _gat._getTracker("UA-11509100-1");
                                    pageTracker._trackPageview();
                                    } catch(err) {}
                                 </script> 
                              </div> 
                           </div> 
                        </div> 
                     </div> 
                  </div> 
               </div> 
            </div> 
         </div>   
      </div> 
   </body> 
</html> 

css:
Code:

body {
	padding-bottom: 280px;
   padding-left: 20px; 
   padding-right: 20px; 
   padding-top: 130px;
   background-color: #F3F3F3;   
}
div#header {
   height: 110px;
   position: absolute;
   top: 0;
   left: 0; 
   width: 100%;
}
div#footer {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 280px;
   bottom: 0px;
}
@media Screen {
   BODY > DIV#header {
	   position: fixed
   }
   BODY > DIV#footer {
	   position: fixed
   }
}
* HTML BODY {
   overflow": hidden
}
* HTML DIV#content {
	height: 100%;
   overflow: auto;
}
#fullheader {
	height: 20px;
	position: absolute;
   top: 0;
	width: 100%;
   background-color: #F3F3F3;
}
#HeaderPane {
   background-image: url(Blue-Bar.png);
   background-repeat: repeat-x;
   height: 90px;
   position: absolute;
   top: 20px;
   width: 100%;
}
#NavPane {
	height: 240px;
	position: absolute;
   bottom: 20px;
	width: 100%;
	background-color: #3F3F3F;
}
#NavPaneFade {
   background-image: url(FadetoTop.png);
   background-repeat: repeat-x;
	position: absolute;
   top: 10px;
   width: 100%;   
}
#NavPaneWrapper {
   right: 50%;
   position: absolute;
   top: 7px;
}
#NavPaneContainer {
   left: 50%;
   position: relative;
}
#fullfooter {
	height: 30px;
	position: absolute;
   bottom: 0;
	width: 100%;
   background-color: #F3F3F3;
	border-top: thick;
	border-top-color: #3F3F3F;
	border-top-style: solid;
}
.AddressText{
   font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #f7f5f0;
	font-weight: bolder;
   text-decoration :none;
}
.NavPaneText {
   font-family: Arial, Helvetica, sans-serif;
	font-size: 16.5px;
	color: #F3F3F3;
	font-weight: bolder;
   text-decoration :none;
}
.FooterText {
   font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #3F3F3F;
	font-weight: normal;
   text-decoration:none;
}
a:link {
   color: #F3F3F3;
   text-decoration:none;
}
a:visited {
   color: #c8c8c8;
   text-decoration:none;
}
a:hover {
   color: #F3F3F3;
   text-decoration:none;
}
a:active {
   color: #F3F3F3;
   text-decoration:none;
}
#fullFooter a:link {
   color: #3F3F3F;
   text-decoration:none;
}
#fullFooter a:visited {
   color: #3F3F3F;
   text-decoration:none;
}
#fullFooter a:hover {
   color: #3F3F3F;
   text-decoration:none;
}
#fullFooter a:active {
   color: #3F3F3F;
   text-decoration:none;
}
.ContentPaneHeader {
   font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #075fa3;
	font-weight: 900;
}

.ContentPaneSubHeader {
   font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #5caf70;
	font-weight: 900;
}

.ContentPaneContent {
   font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #3F3F3F;
	font-weight: 700;
}
/* Creating the 'notepad' look */
.Rounded-Top {
   background: url(Rounded-Dot.png) 0 0 repeat-x;
   background-color: #f1f0ec;
   overflow: auto;
}
.Rounded-Bottom {
   background: url(Rounded-Dot.png) 0 100% repeat-x
}
.Rounded-Left {
   background: url(Rounded-Dot.png) 0 0 repeat-y
}
.Rounded-Right {
   background: url(Rounded-Dot.png) 100% 0 repeat-y
}
.Rounded-BottomLeft {
   background: url(Rounded-BottomLeft.png) 0 100% no-repeat
}
.Rounded-BottomRight {
   background: url(Rounded-BottomRight.png) 100% 100% no-repeat
}
.Rounded-TopLeft {
   background: url(Rounded-Topleft.png) 0 0 no-repeat
}
.Rounded-TopRight {
   background: url(Rounded-TopRight.png) 100% 0 no-repeat;
   padding-left: 20px;
   padding-right: 30px;
   padding-top: 40px;
   padding-bottom: 30px;   
}