Hey,
My site, <!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/">http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/</a><!-- m -->, looks really crap in IE coz all the sizes are messed up and stuff. It looks good in Firefox. What do I need to change in the CSS?
Thanks.Why do you have those negative numbers in the top: ;? Like top: -13px;. What is that for?There are also big gaps between the sections in Opera.I took out the top: 13px in each of the main divs. What they were originally meant to get rid of the gap between each of them in firefox, which I have now just realised arn't in IE so that messed it up some more in IE. But now I looked at FF again and there is no gap between the content and the footer. Why not? It's in the same situation as the header and the content. :SA quick scan of the stylesheet suggest to me that the problem may be a result of not explicitly defining all the margins and/or paddings for the elements in question. My experience would seem to indicate that not all browsers use the same default values for margins and/or padding, so if you want two elements to be joined with no space, make sure the relevant margins are set to 0, don't assume they'll be 0 if you don't specify it.I know why I'm getting that space beneath the title on IE now, but still don't know how to solve it. It will be because, before I move the actual title image (not the title background image) up, the title images is actually in that space. You'll see I move the title image up by 73px to make it go over the title background. IE still thinks the title image is there, while FF knows that it has moved.
I still do not understand how to resolve the problems with the space between header and content divs and the problem with the buttons being in the wrong place.
Thanks for your help so far.OK, I played around with this a bit and ended up simplifying a lot of the CSS as well as the HTML in the header section. See if this is more like what you want:
CSS:BODY {
BACKGROUND-COLOR: #fff;
FONT-SIZE: 12px;
COLOR: #000;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
DIV.content {
BORDER-RIGHT: #000 1px solid;
margin: 0 auto;
BORDER-LEFT: #000 1px solid;
WIDTH: 734px;
padding: 8px;
HEIGHT: 250px;
BACKGROUND-COLOR: #d7d7d7
}
DIV.header {
border: #000 1px solid;
border-bottom: none;
margin: 0 auto;
WIDTH: 734px;
BACKGROUND-COLOR: #e9e9e9;
padding: 8px;
}
h1 {
border: #000 1px solid;
BACKGROUND-IMAGE: url(<!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/titleback.jpg">http://www.sixfoottallrabbit.co.uk/csss ... leback.jpg</a><!-- m -->);
background-repeat: repeat;
HEIGHT: 80px;
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
UL.menu {
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
margin: 0;
padding: 0;
}
UL.menu LI {
float: left;
margin: 0 12px 0 0;
}
UL.menu LI A {
BORDER: #000 1px solid;
DISPLAY: block;
PADDING-LEFT: 4px;
BACKGROUND-IMAGE: url(<!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/button.jpg">http://www.sixfoottallrabbit.co.uk/csss ... button.jpg</a><!-- m -->);
WIDTH: 96px;
COLOR: #000;
PADDING-TOP: 4px;
HEIGHT: 20px;
TEXT-DECORATION: none
}
UL.menu LI A:hover {
BACKGROUND-IMAGE: url(<!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/buttonover.jpg">http://www.sixfoottallrabbit.co.uk/csss ... onover.jpg</a><!-- m -->)
}
DIV.footer {
BORDER-RIGHT: #000 1px solid;
PADDING-LEFT: 4px;
MARGIN-LEFT: auto;
BORDER-LEFT: #000 1px solid;
WIDTH: 746px;
MARGIN-RIGHT: auto;
PADDING-TOP: 4px;
BORDER-BOTTOM: #000 1px solid;
HEIGHT: 20px;
BACKGROUND-COLOR: #e9e9e9
}
HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0054)http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/ -->
<HTML lang=en><HEAD><TITLE>SFTR Productions</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="Joseph Mansfield" name=author>
<META
content="SFTR Productions is an archive of games and programming scripts created by SFTR Productions."
name=description>
<META
content="SFTR, Productions, Six, Foot, Tall, Rabbit, Games, PHP, Scripts, Programming, Scripting, Programs, Applications, XTHML, Strict, CSS, Cascading, Style, Sheets, GameMaker, Game, Maker, Delphi"
name=keywords><LINK href=http://www.webdeveloper.com/forum/archive/index.php/"SFTR Productions_files/styles.css" type=text/css
rel=stylesheet>
<META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD>
<BODY>
<DIV class=header>
<h1>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/title.jpg"
alt="SFTR Productions" width=428 height=80>
</h1>
</DIV>
<DIV class=content>
<UL class=menu>
<LI><A href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/#">Home</A>
<LI><A
href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/#">Archive</A>
<LI><A
href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/#">Contact</A>
</LI></UL></DIV>
<DIV class=footer><A class=copyrightlink
href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/copyright.txt">Copyright
?2005 Joseph Mansfield</A></DIV></BODY></HTML>lol, I'd be happy with that if it were valid XHTML strict. I'll get converting it to that now. XD
Thanks for the help. I'll report back when I'm done.Hmmm...that's weird. Now I've found another reason to dislike IE. I did a "Save as..." and specified "Web page, complete" for file type (so that it would save the CSS file, too), and it changed the doctype! What the **** were the M$ coders thinking? I wonder what else it changed? (In fact, on closer review it look like it changed tag names to upper-case among other things I haven't yet detected).
*Sigh*
Here's a revised copy of the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<title>SFTR Productions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Joseph Mansfield" />
<meta name="description" content="SFTR Productions is an archive of games and programming scripts created by SFTR Productions." />
<meta name="keywords" content="SFTR, Productions, Six, Foot, Tall, Rabbit, Games, PHP, Scripts, Programming, Scripting, Programs, Applications, XTHML, Strict, CSS, Cascading, Style, Sheets, GameMaker, Game, Maker, Delphi" />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<h1>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"title.jpg" alt="SFTR Productions" width="428" height="80" />
</h1>
</div>
<div class="content">
<ul class="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Archive</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact</a></li>
</ul>
</div>
<div class="footer"><a class="copyrightlink" href=http://www.webdeveloper.com/forum/archive/index.php/"copyright.txt">Copyright ?2005 Joseph Mansfield</a></div>
</body>
</html>THANK YOU SO MUCH
Yes, and why does it change the doctype when you save? WTF
My site, <!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/">http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/</a><!-- m -->, looks really crap in IE coz all the sizes are messed up and stuff. It looks good in Firefox. What do I need to change in the CSS?
Thanks.Why do you have those negative numbers in the top: ;? Like top: -13px;. What is that for?There are also big gaps between the sections in Opera.I took out the top: 13px in each of the main divs. What they were originally meant to get rid of the gap between each of them in firefox, which I have now just realised arn't in IE so that messed it up some more in IE. But now I looked at FF again and there is no gap between the content and the footer. Why not? It's in the same situation as the header and the content. :SA quick scan of the stylesheet suggest to me that the problem may be a result of not explicitly defining all the margins and/or paddings for the elements in question. My experience would seem to indicate that not all browsers use the same default values for margins and/or padding, so if you want two elements to be joined with no space, make sure the relevant margins are set to 0, don't assume they'll be 0 if you don't specify it.I know why I'm getting that space beneath the title on IE now, but still don't know how to solve it. It will be because, before I move the actual title image (not the title background image) up, the title images is actually in that space. You'll see I move the title image up by 73px to make it go over the title background. IE still thinks the title image is there, while FF knows that it has moved.
I still do not understand how to resolve the problems with the space between header and content divs and the problem with the buttons being in the wrong place.
Thanks for your help so far.OK, I played around with this a bit and ended up simplifying a lot of the CSS as well as the HTML in the header section. See if this is more like what you want:
CSS:BODY {
BACKGROUND-COLOR: #fff;
FONT-SIZE: 12px;
COLOR: #000;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
DIV.content {
BORDER-RIGHT: #000 1px solid;
margin: 0 auto;
BORDER-LEFT: #000 1px solid;
WIDTH: 734px;
padding: 8px;
HEIGHT: 250px;
BACKGROUND-COLOR: #d7d7d7
}
DIV.header {
border: #000 1px solid;
border-bottom: none;
margin: 0 auto;
WIDTH: 734px;
BACKGROUND-COLOR: #e9e9e9;
padding: 8px;
}
h1 {
border: #000 1px solid;
BACKGROUND-IMAGE: url(<!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/titleback.jpg">http://www.sixfoottallrabbit.co.uk/csss ... leback.jpg</a><!-- m -->);
background-repeat: repeat;
HEIGHT: 80px;
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
UL.menu {
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
margin: 0;
padding: 0;
}
UL.menu LI {
float: left;
margin: 0 12px 0 0;
}
UL.menu LI A {
BORDER: #000 1px solid;
DISPLAY: block;
PADDING-LEFT: 4px;
BACKGROUND-IMAGE: url(<!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/button.jpg">http://www.sixfoottallrabbit.co.uk/csss ... button.jpg</a><!-- m -->);
WIDTH: 96px;
COLOR: #000;
PADDING-TOP: 4px;
HEIGHT: 20px;
TEXT-DECORATION: none
}
UL.menu LI A:hover {
BACKGROUND-IMAGE: url(<!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/buttonover.jpg">http://www.sixfoottallrabbit.co.uk/csss ... onover.jpg</a><!-- m -->)
}
DIV.footer {
BORDER-RIGHT: #000 1px solid;
PADDING-LEFT: 4px;
MARGIN-LEFT: auto;
BORDER-LEFT: #000 1px solid;
WIDTH: 746px;
MARGIN-RIGHT: auto;
PADDING-TOP: 4px;
BORDER-BOTTOM: #000 1px solid;
HEIGHT: 20px;
BACKGROUND-COLOR: #e9e9e9
}
HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0054)http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/ -->
<HTML lang=en><HEAD><TITLE>SFTR Productions</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="Joseph Mansfield" name=author>
<META
content="SFTR Productions is an archive of games and programming scripts created by SFTR Productions."
name=description>
<META
content="SFTR, Productions, Six, Foot, Tall, Rabbit, Games, PHP, Scripts, Programming, Scripting, Programs, Applications, XTHML, Strict, CSS, Cascading, Style, Sheets, GameMaker, Game, Maker, Delphi"
name=keywords><LINK href=http://www.webdeveloper.com/forum/archive/index.php/"SFTR Productions_files/styles.css" type=text/css
rel=stylesheet>
<META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD>
<BODY>
<DIV class=header>
<h1>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/title.jpg"
alt="SFTR Productions" width=428 height=80>
</h1>
</DIV>
<DIV class=content>
<UL class=menu>
<LI><A href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/#">Home</A>
<LI><A
href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/#">Archive</A>
<LI><A
href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/#">Contact</A>
</LI></UL></DIV>
<DIV class=footer><A class=copyrightlink
href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/copyright.txt">Copyright
?2005 Joseph Mansfield</A></DIV></BODY></HTML>lol, I'd be happy with that if it were valid XHTML strict. I'll get converting it to that now. XD
Thanks for the help. I'll report back when I'm done.Hmmm...that's weird. Now I've found another reason to dislike IE. I did a "Save as..." and specified "Web page, complete" for file type (so that it would save the CSS file, too), and it changed the doctype! What the **** were the M$ coders thinking? I wonder what else it changed? (In fact, on closer review it look like it changed tag names to upper-case among other things I haven't yet detected).
*Sigh*
Here's a revised copy of the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<title>SFTR Productions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Joseph Mansfield" />
<meta name="description" content="SFTR Productions is an archive of games and programming scripts created by SFTR Productions." />
<meta name="keywords" content="SFTR, Productions, Six, Foot, Tall, Rabbit, Games, PHP, Scripts, Programming, Scripting, Programs, Applications, XTHML, Strict, CSS, Cascading, Style, Sheets, GameMaker, Game, Maker, Delphi" />
<link href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<h1>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"title.jpg" alt="SFTR Productions" width="428" height="80" />
</h1>
</div>
<div class="content">
<ul class="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Archive</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact</a></li>
</ul>
</div>
<div class="footer"><a class="copyrightlink" href=http://www.webdeveloper.com/forum/archive/index.php/"copyright.txt">Copyright ?2005 Joseph Mansfield</a></div>
</body>
</html>THANK YOU SO MUCH
Yes, and why does it change the doctype when you save? WTF