CSS padding problems

Question

Hi
I am building a site for a client that has had the page
designed by a graphic designer and she is being EXCEPTIONALLY picky
about the font size, spacing and many other things. The problem I
have is, that on some browsers, the space between the text and the
border at the top of the container, is double what it is in IE6 and
IE7. Can anyone tell me how I can fix this so that it has the same
amount of spacing in all browsers.
Many thanks
Julie
CSS code:
/* CSS Document */
/*formatting divs*/
body a p td th div blockquote ul ol dl{
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color:#999999;
margin: 0;
body { margin: 0px; padding: 0px; background:#262425}
h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
a:link {
text-decoration:underline;
color: #000000;
a:visited {color:#666666; text-decoration:underline;}
a:hover {color:#ff9c04; text-decoration:underline;}
/*layout divs*/
#wrapper {width: 820px; position:relative; margin:0 auto;
top:15%}
#header {clear:both; height:50px; width:820px}
#leftcol {
width: 108px;
float:left;
padding-right:12px;
text-align: right;
#container {margin:0; padding:0; float:right; width:695px}
#content {background-color:#FFFFFF; width: 328px; padding: 0
10px 0 10px; height: 500px; float:left; color: #666666; font-size:
14px; overflow: hidden;}
#rightcol {width: 347px; float:right}
#footer {clear: both}
#text {padding: 0 10px 10px 0; height: 370px; overflow:auto}
/*menu*/
#leftcol ul {}
#leftcol li {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
list-style:none;
.logo {
margin-right: 0px;
margin-left: 0px;
padding: 23px 0px 12px 0;}
/*design elements*/
.scroll {
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #C2A2DA;
scrollbar-highlight-color: #C2A2DA ;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#C2A2DA}

Answer 1

Designing for the web is NOT the same as designing for print.
Graphic
designers do not understand that there are too many variables
you can't
control such as screen size, browsers, and the default text
size used by
visitors. Firefox, Opera & Safari will render pages
differently than IE. In
some cases, you can use IE hacks or CSS tricks to get it
closer to what you
want. Or you could make one big graphic or image map but I do
not recommend
this as it will impact your site's search engine rankings
& user
accessibility.
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"ukjooles" <[email protected]> wrote in
message
news:[email protected]...
> Hi
>
> I am building a site for a client that has had the page
designed by a
graphic
> designer and she is being EXCEPTIONALLY picky about the
font size, spacing
and
> many other things. The problem I have is, that on some
browsers, the
space
> between the text and the border at the top of the
container, is double
what it
> is in IE6 and IE7. Can anyone tell me how I can fix this
so that it has
the
> same amount of spacing in all browsers.
>
> Many thanks
> Julie
>
> CSS code:
>
> /* CSS Document */
>
>
> /*formatting divs*/
>
> body a p td th div blockquote ul ol dl{
> font-family: "Times New Roman", Times, serif;
> font-size: 14px;
> color:#999999;
> margin: 0;
> }
>
> body { margin: 0px; padding: 0px; background:#262425}
>
> h1 {font-family: Arial, Helvetica, sans-serif;
font-size:36px}
>
> a:link {
> text-decoration:underline;
> color: #000000;
> }
> a:visited {color:#666666; text-decoration:underline;}
>
> a:hover {color:#ff9c04; text-decoration:underline;}
>
>
> /*layout divs*/
>
> #wrapper {width: 820px; position:relative; margin:0
auto; top:15%}
>
> #header {clear:both; height:50px; width:820px}
>
> #leftcol {
> width: 108px;
> float:left;
> padding-right:12px;
> text-align: right;
> }
>
> #container {margin:0; padding:0; float:right;
width:695px}
>
> #content {background-color:#FFFFFF; width: 328px;
padding: 0 10px 0 10px;
> height: 500px; float:left; color: #666666; font-size:
14px; overflow:
hidden;}
>
> #rightcol {width: 347px; float:right}
>
> #footer {clear: both}
>
> #text {padding: 0 10px 10px 0; height: 370px;
overflow:auto}
>
>
> /*menu*/
>
> #leftcol ul {}
> #leftcol li {
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> color: #FFFFFF;
> list-style:none;
> }
>
> .logo {
> margin-right: 0px;
> margin-left: 0px;
> padding: 23px 0px 12px 0;}
>
>
> /*design elements*/
>
> .scroll {
> scrollbar-face-color: #ffffff;
> scrollbar-shadow-color: #C2A2DA;
> scrollbar-highlight-color: #C2A2DA ;
> scrollbar-3dlight-color: #ffffff;
> scrollbar-darkshadow-color:#ffffff;
> scrollbar-track-color:#FFFFFF;
> scrollbar-arrow-color:#C2A2DA}
>
>