CSS issue with top margin in safari - css

I can't get a top margin to show in safari. CSS works fine and the #divcontainer has a top margin and is centered in firefox and other browsers but not in safari.
I would like a 10px space to show above the container which will hold all other content.
Here is the CSS:
/* CSS Document */
body {
color: #000000; /*This sets all text to Black*/
/*background-color: #FFFFFF; /*This sets the bacground to white*/
margin: 100px auto; /*This sets the margin to zero*/
padding:0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
.redtext {
color: #FF0000;
}
a {
color: #009900;
}
a:link {
color: #000099;
text-decoration: underline;
}
a:visited {
color: #666666;
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: #CCCCCC;
}
a:active {
text-decoration: none;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.menu a:link {
color: #336600;
text-decoration: none;
}
.menu a:visited {
color: #666666;
text-decoration: none;
}
.menu a:hover {
color: #990000;
text-decoration: none;
}
.menu a:active {
color: #666666;
text-decoration: none;
}
div#container {
width: 960px;
height:760;
overflow:auto;
/*margin-left:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
div#outer {
margin-left: auto;
margin-right: auto;
width: 960px;
}
div#header {
position:relative;
text-align: center;
width: auto;
}
div#nav {
width: auto;
padding: 10px;
margin-top: 1px;
position:relative;
}
div#main {
position:relative;
width: auto;
}
div#footer {
position:relative;
width:auto;
padding: 15px;
margin: 0px;
}#nav {
position: relative;
padding:20px;
width: auto;
}

You'll probably want to set the margin: 10px auto; on the #container. Usually, I do this:
body {
text-align: center;
padding: 0;
margin: 0;
}
#container {
width: 960px;
height: 760px;
text-align: left;
margin: 10px auto;
}
...assuming the #container div is the first element, that should work out.
You may also want to try out one of the css reset files out there.

Related

Sub Menu Sensitive In Chrome But Fine In Firefox

I'm only a year in to Web Design. I've been learning menus at Lynda.com and specifically have a problem creating a sub menu.
I've made the sub menu how I want it, however when I flick between the list items on my menu they change over too quickly.
See on the picture below:
http://s22.postimg.org/699f35hm9/macca_travel.png
If you look at the position of the cursor, it is still on the 'About' tab, but the 'Blog' hover has lit up and has been selected.
The two sections with sub menus are the 'Blog' tab and the 'Photos' tab. These two tabs don't cross over smoothly and I think it's because for whatever reason they're selecting too quickly.
I don't know why :)
Here is my CSS:
#font-face {
font-family: 'telegraficoregular';
src: url('../FONTS/telegrafico-webfont.eot');
src: url('../FONTS/telegrafico-webfont.eot?#iefix') format('embedded-opentype'),
url('../FONTS/telegrafico-webfont.woff2') format('woff2'),
url('../FONTS/telegrafico-webfont.woff') format('woff'),
url('../FONTS/telegrafico-webfont.ttf') format('truetype'),
url('../FONTS/telegrafico-webfont.svg#telegraficoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.cf:after {
content: "";
display: table;
clear: both;
}
html, body, head, nav, article, aside, section, h3, h4, footer, ul, li {
margin: 0;
padding: 0;
}
/*Global Styles*/
html {
background: white;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
h1 {
font-family: telegraficoregular;
font-size: 3em;
color: white;
padding: 0;
margin:0;
text-align: center;
}
h2 {
font-family: telegraficoregular;
font-size: 1em;
font-style: italic;
color: white;
padding: 0;
margin: 0;
text-align: center;
}
p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
}
h4 + p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding-left:70px;
padding-top: 10px;
}
/*Nav Styles */
header {
background:#6593b5;
width: 100%;
height: 160px;
margin:0 auto;
}
nav {
background: black;
height: 2em;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding:0 2em;
line-height: 2em;
color: white;
font-family: telegraficoregular;
text-decoration: none;
}
li, ul {
position: relative;
margin: 0;
padding: 0;
}
ul.SubMenu {
float: none;
width: auto;
height: auto;
list-style: none;
background: black;
color: white;
position: absolute;
left: -9000em;
}
ul.SubMenu li{
float: none;
}
ul.SubMenu li a{
display:block;
border-bottom: 1px solid white;
padding: .2em 2em;
white-space: nowrap;
}
li:hover ul {
left: 0;
}
li:hover ul {
left: 0;
}
/* Article Styles */
article {
width: 896px;
padding: 32px;
}
/*Section Styles */
section.China {
text-align: center;
margin: 80px auto;
padding: 20px;
}
section h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
}
section h4 {
font-family: telegraficoregular;
font-size: 1.4em;
padding-top: 60px;
padding-left: 70px;
text-align: left;
text-decoration: underline;
}
section.China img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Australia {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Australia img {
position: relative;
top: 20px;
border-radius: 5px;
}
section.Thailand {
text-align: center;
margin: 20px auto;
padding: 20px;
}
section.Thailand img {
position: relative;
top: 20px;
border-radius: 5px;
}
/* Link Styles*/
a:hover {
color: orange;
height: 32px;
background: black;
}
ul.SubMenu li a:hover {
background: orange;
color: white;
}
/* About Styles */
#AboutContent{
width: 960px;
height: 1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#AboutHeader {
text-align: center;
margin: 20px auto;
padding: 20px;
}
#AboutHeader img {
display: block;
margin: 0 auto;
text-align: center;
}
#AboutHeader h2 {
font-family: telegraficoregular;
font-size: 1.5em;
text-decoration: underline;
color: black;
padding: 0;
margin-top: 20px;
text-align: center;
}
h2 + img {
position: relative;
top: 50px;
border-radius: 5px;
}
#AboutHeader p {
font-family: serif;
font-size: 1.1em;
color: black;
text-align:left;
padding:50px 0 0 100px;
}
/*Photos Content */
#PhotoContent{
width: 960px;
height:auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Photos Gallery */
#ChinaPhotos {
width: 960px;
height:1200px;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
#ChinaPhotos h3 {
font-family: telegraficoregular;
font-size: 2em;
border-bottom: 1px solid black;
padding: 5px;
text-align: center;
margin-top: 20px;
}
#ChinaPhotos img {
margin-top: 20px;
border: 1px solid black;
}
#ChinaPhotos a .Thumb:hover {
width: 320px;
height: 240px;
}
/* Container Styles */
#Content {
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
background: white;
font-family: serif, arial, helvetica, georgia;
font-size: 16px;
color: black;
}
/* Footer Styles */
.Footer {
width: 100%;
height: 160px;
background: black;
}
.Footer p {
font-family: telegraficoregular;
color: white;
font-style: italic;
line-height: 160px;
text-align: center;
}
Thanks Joe
Add the following to each section of your CSS:
ul.SubMenu {
margin-top: 2em;
}
nav ul li a {
float: left;
}
nav ul li {
display: block;
}

grey line on top of my visual studio website

I'm currently working on a website.. I've check the css but I can't seem to figure out why this grey line keeps on showing on top of my Visual Studio website website... I'm using the default Site.css present when creating a asp.net website... please help....
my css:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
(This is based on Blender's answer, I will delete this if Blender will post his answer)
In order to be formal and to have an answer to this question, as what Blender suggested change
margin: 20px auto 0px auto;
to
margin: 0px auto 0px auto;
This solved the issue according to the one who asked the question.

CSS drop down menu error

I have made a dropdown CSS menu and honestly can't figure out why it's getting indented...
Here is the screenshot:
If you see it is all aligned to the right no matter how I set the width.. :(
Here is the CSS:
(included all CSS but menu is: #mainMenu)
#charset "UTF-8";
/* CSS Document */
/* Background styling of all forms (should set is here) */
form#payment {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#f7fca3;
padding: 10px;
}
form {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#d6f5df;
padding: 10px;
}
/*styling for text inputs and password of homepage */
input[type="text"]#profile, textarea#profile, input[type="password"]#profile {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
border: solid 1px #35b459;
width:365px;
}
input[type="text"], textarea, input[type="password"]#inputArea {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin-bottom: 5px;
display: block;
padding: 4px;
border: solid 1px #35b459;
width:300px;
}
p {
font-family:Arial, Helvetica, sans-serif;
color:#231f20;
}
h1 {
font-family:Arial, Helvetica, sans-serif;
color:#231f20;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
color:#231f20;
}
h3 {
font-family:Arial, Helvetica, sans-serif;
color:#231f20;
}
/* Split homepage in two */
#span1 {
width: 330px; float: right;
}
#span2 {
width: 390px; float: left;
}
/* Homepage note */
#note {
border-style:dashed;border-color:red;
}
/* Registration button link style */
.regbutton a:hover {
color:#ff;
text-decoration:none;
}
.regbutton a {
color:#ff;
text-decoration:none;
}
.regbutton a:visited{
color:#ff;
text-decoration:none;
}
div#steps {
background-color:#f7fca3;
}
.regbutton
{
position:absolute;
color:#ff;
background:#E76600;
font-family:Arial, Helvetica, sans-serif;
padding:6px;
text-align:center;
left:550px;
bottom:30px;
}
.header{
position:relative;
width:650px;
align:center;
height:200px;
}
.logo{
position:absolute;
align:left;
left:30px;
top:50px
}
.menu{
position:relative;
align:center;
top:150px;
}
.content{
width:800px;
position:relative;
align:center;
}
#holder{
width:100%;
}
.homecontent{
position:relative;
width:700px;
top:20px;
height:500px;
}
a>div { display: none; }
a:hover>div { display: block; }
a span {display: none;}
a:hover span#hovImg {
position: relative;
right: 0px;
bottom: 0px;
display: block;
}
#mainMenu,
#mainMenu ul {
list-style: none;
}
#mainMenu {
float: left;
}
#mainMenu > li {
float: left;
}
#mainMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#mainMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#mainMenu ul li a {
width: 80px;
}
#mainMenu li:hover ul {
display: block;
}
/* Main menu
--*/
#mainMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
}
#mainMenu > li > a {
color: #fff;
font-weight: bold;
}
#mainMenu > li:hover > a {
background: #f09d28;
color: #000;
}
/* Submenu
--*/
#mainMenu ul {
background: #f09d28;
}
#mainMenu ul li a {
color: #000;
}
#mainMenu ul li:hover a {
background: #ffc97c;
}
ul elements have left padding by default in almost all browsers. Creating a JS Fiddle (http://www.jsfiddle.net) would be very helpful here. But try setting your
#mainMenu ul{
padding: 0;
margin: 0;
}
It is probably because of this, you are using CSS short-hand :
padding: 0 1.5em; /* Top-Bottom(0), Left-Right(1.5em) */
In
#mainMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em; <------ Here
text-decoration: none;
}
First of all, what browser are you viewing it in? I also suggest using firebug or some sort of
add-on that helps you view the box method, as you can see if that is what's causing the problem in terms of margin, padding. and border issues. I'd like to see your html file and I can help your problem more efficiently. I also think it is a padding issue, though...
Try:
#mainMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding-right:.2em; /* <-- */
text-decoration: none;
}

Weird top padding on horizontal list items

I have a horizontal list on which I have placed borders on the li tags in order to separate them. Its all working well but I have some mysterious padding on the top of the li which is making the borders taller than the text:
http://img641.imageshack.us/img641/3706/picture13y.png
I have played around with the padding and margins but I cant figure out what is causing this. Any suggestions?
Here is the html:
<div id="top_center">
<ul>
<li>(1 New)</li>
<li>Verified Account</li>
<li>Prefrences</li>
</ul>
</div>
Css:
/* --------------------------------------------------------------
typography.css
* Sets up some sensible default typography.
* Based on the typography.css portion of Blueprint CSS # http://blueprintcss.org/
-------------------------------------------------------------- */
/* Default font settings.
The font-size percentage is of 16px. (1 * 16px ~ 16px) */
body {
padding: 0px;
margin: 0px;
font-size: 100%;
color: #313131;
background: #fff;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #313131; }
h1 { text-transform: none; text-decoration: none; font-style: normal; font-weight: normal; letter-spacing: -0.01em; font-size: 30px; font-family: Georgia, "Times New Roman", Times, serif;line-height: 1; margin-bottom: 0.5em; }
h2 { margin-bottom: 0.75em; text-decoration: none; font-size: 1.13em; }
h3 { font-size: .88em; line-height: 1; margin-bottom: 1em; color: #767676; }
h4 { font-size: .88em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: .75em; margin-bottom: 1.5em; }
h6 { font-size: .75em; font-weight: bold; }
h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
margin: 0;
}
/* Text elements
-------------------------------------------------------------- */
p { margin: 0 0 1.5em; }
p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }
a:focus,
a:hover { color: #94c909; }
a { color: #7aa807; text-decoration: underline; }
h5 a, #top_center li a {text-decoration: none; font-size: .75em; padding-top: 0px;}
blockquote { margin: 1.5em; color: #666; font-style: italic; }
strong { font-weight: bold; }
em,dfn { font-style: italic; }
dfn { font-weight: bold; }
sup, sub { line-height: 0; }
abbr,
acronym { border-bottom: 1px dotted #666; }
address { margin: 0 0 1.5em; font-style: italic; }
del { color:#666; }
pre { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }
/* Lists
-------------------------------------------------------------- */
li ul,
li ol { padding-top: 0px; padding-left: 0; margin-left: 0; margin-bottom: 0; margin-right: 1.5em; margin-top: 0; }
ul, ol { padding-left: 0; margin-left: 0px; margin-bottom: 1.5em; margin-right: 1.5em; margin-top: 0; }
ul { list-style-type: none; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em;}
/* Tables
-------------------------------------------------------------- */
table { margin-bottom: 1.4em; width:100%; }
th { font-weight: bold; }
thead th { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
tr.even td { background: #e5ecf9; }
tfoot { font-style: italic; }
caption { background: #eee; }
/* Misc classes
-------------------------------------------------------------- */
.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide { display: none; }
.quiet { color: #666; }
.loud { color: #000; }
.highlight { background:#ff0; }
.added { background:#060; color: #fff; }
.removed { background:#900; color: #fff; }
.first { margin-left:0; padding-left:0; }
.last { margin-right:0; padding-right:0; }
.top { margin-top:0; padding-top:0; }
.bottom { margin-bottom:0; padding-bottom:0; }
#top { height: 53px; width: 100%; background-repeat: repeat-x; background-image: url(img/top_bg.jpg); }
#top_center { height: 53px; margin: 0 auto; width: 950px; }
#top_center ul {float: right; margin-top: 10px; padding-top: 0px;}
#top_center li { display: inline; padding-left: 7px; padding-right: 7px; padding-top: 0px; border-left-color: #b3b3b3; border-left-width: 1px; border-left-style: solid;}
#top_center li:first-child { border: none;}
#top_center li img { margin-right: 7px; }
It could be that you decrease the text size of the links.
Update: You decrease the font size here:
h5 a, #top_center li a {text-decoration: none; font-size: .75em; padding-top: 0px;}
Then the text gets aligned to the bottom of the box.
To center them vertically, you can do this:
#top_center a {
vertical-align: middle;
}
Update 2:
Ok with your whole CSS it doesn't align properly somehow. But this works for me:
#top_center a {
display: table-cell;
vertical-align: middle;
}
Reference: vertical-align

a bug in IE7 - body -direction:rtl

When I set the body element direction to rtl, in IE7 (compatability view in IE8), and hover over ul li, it shifts weirdly to the left by a couple of inches. A good example for this is the default ASP.NET MVC CSS (after adding direction:rtl to the body element). What is happening here?
The example code:
/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
background-color: #5c87b2;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
direction:rtl;
}
a:link
{
color: #034af3;
text-decoration: underline;
}
a:visited
{
color: #505abc;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #12eb87;
}
p, ul
{
margin-bottom: 20px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}
h1
{
font-size: 2em;
padding-bottom: 0;
margin-bottom: 0;
}
h2
{
padding: 0 0 10px 0;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
/* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */
.page
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
#header
{
position: relative;
margin-bottom: 0px;
color: #000;
padding: 0;
}
#header h1
{
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #fff;
border: none;
line-height: 2em;
font-family: Arial, Helvetica, sans-serif;
font-size: 32px !important;
}
#main
{
padding: 30px 30px 15px 30px;
background-color: #fff;
margin-bottom: 30px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#footer
{
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0;
font-size: .9em;
}
/* TAB MENU
----------------------------------------------------------*/
ul#menu
{
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li
{
display: inline;
list-style: none;
}
ul#menu li#greeting
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
}
ul#menu li a:hover
{
background-color: #fff;
text-decoration: none;
}
ul#menu li a:active
{
background-color: #a6e2a6;
text-decoration: none;
}
ul#menu li.selected a
{
background-color: #fff;
color: #000;
}
/* FORM LAYOUT ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0;
padding: 1em;
border: 1px solid #CCC;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input[type="text"]
{
width: 200px;
border: 1px solid #CCC;
}
input[type="password"]
{
width: 200px;
border: 1px solid #CCC;
}
/* TABLE
----------------------------------------------------------*/
table
{
border: solid 1px #e8eef4;
border-collapse: collapse;
}
table td
{
padding: 5px;
border: solid 1px #e8eef4;
}
table th
{
padding: 6px 5px;
text-align: left;
background-color: #e8eef4;
border: solid 1px #e8eef4;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.error
{
color:Red;
}
#menucontainer
{
margin-top:40px;
}
div#title
{
display:block;
float:left;
text-align:left;
}
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
}
#logindisplay a:link
{
color: white;
text-decoration: underline;
}
#logindisplay a:visited
{
color: white;
text-decoration: underline;
}
#logindisplay a:hover
{
color: white;
text-decoration: none;
}
.field-validation-error
{
color: #ff0000;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
I've seen lots of issues with RTL pages in all versions of IE. Recommended practice is to set the RTL direction on the HTML tage and not use the CSS direction property.
<html dir="rtl">
It's worth trying this to start with to see if the behaviour changes. Also makes sure that the page is rendering in standards mode so that you get more consistent results overall.

Resources