Morning Guys,

 

I am in the process of producing a basic XHTML/CSS site for my course final assignment and am having a problem.

 

My page views fine in IE but in firefox, safari and opera there is a gap between the top of my page and the browser window.

 

See www.tarletonbowlingclub.co.uk

 

Here is my page styling:-

 

body {

background-color: #AAB6CF;

text-align: left;

margin: 0;

padding: 0;

font-family: Helvetica, Arial, Verdana, sans-serif;

}

#wrapper {

width: 760px;

margin-left: auto;

margin-right: auto;

border-left: 2px solid #11198D;

border-right: 2px solid #11198D;

background-color: #fff;

}

#banner {

background-color: #3E5991;

border-bottom: 2px solid #11198D;

}

#banner h1 {

color: white;

font-size: 50px;

text-align: center;

padding: 0;

margin-bottom: 8px;

}

#navigation ul {

padding: 0;

list-style-type: none;

width: 175px;

margin-left: 7px;

}

#navigation li {

display: inline;

}

* html #navigation a {

height: 1px;

}

#navigation a {

color: #fff;

font-size: 1em;

text-decoration: none;

border: 2px solid #11198D;

padding: 7px 5px;

display: block;

background-color: #28809D;

padding: 7px 5px 7px 10px;

margin-top: 10px;

}

#navigation a:hover {

font-weight: bold;

background-color: #60A1B7;

}

#sidebar {

width: 185px;

float: left;

}

#content {

margin-left: 190px;

line-height: 1.3em;

border-left: 2px solid #11198D;

 

}

#content img {

margin-left: 32px;

margin-top: 35px;

border: 2px solid #11198D;

}

#content p {

margin-left: 16px;

margin-right: 16px;

}

#content h2.clubtitle {

border-bottom: 1px black dashed;

margin-right: 275px;

font-size: 1.1em;

margin-left: 16px;

}

#content ul {

margin-bottom: 0px;

padding-bottom: 20px;

}

#footer {

background-color: #3E5991;

border-top: 2px solid #11198D;

}

.contact {

font-size: 1.2em;

}

#footer a {

text-decoration: none;

color: white;

}

#footer a:hover {

text-decoration: underline;

}

#footer p {

line-height: 1.5em;

text-align: center;

font-weight: bold;

padding-top: 3px;

padding-bottom: 5px;

margin-bottom: 0;

margin-top: 0;

font-size: 0.8em;

}

#links {

margin-top: 150px;

padding: 0px;

background-color: #CCFFFF;

margin-left: 5px;

border: 1px #11198D solid;

}

#links h3 {

font-size: 1em;

text-align: center;

border-bottom: 1px black dashed;

margin-left: 60px;

margin-right: 60px;

padding-top: 10px;

}

#links ul {

list-style-type: none;

padding-left: 5px;

margin-left: 0;

padding-bottom: 10px;

}

#links li {

padding-bottom: 3px;

}

#links a {

text-decoration: none;

font-size: 0.9em;

color: #009;

}

#links a:hover {

text-decoration: underline;

}

 

Hope you can help, cheers

 

Slinky

Hi

By adding this to your css should fix it

 

* {margin: 0;
padding:0;}

 

Pat

Hi

By adding this to your css should fix it

 

* {margin: 0;
padding:0;}

 

Pat

 

Thanks pat that has worked spot on, much appreciated!