Menu
Community /Pin to ProfileBookmark
@NogDogJul 25.2005 — #A 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. @NogDogJul 25.2005 — #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:
HTML:@NogDogJul 25.2005 — #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), [i]and it changed the doctype![/i] 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:
IE Prob (99% of my posts are about IE :@ )
Hey,
My site, [url]http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/
Thanks.
Sign in
to post a comment9 Comments(s) ↴
0
@NogDogJul 25.2005 — #0
@NogDogJul 25.2005 — #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(http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/titleback.jpg);
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(http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/button.jpg);
WIDTH: 96px;
COLOR: #000;
PADDING-TOP: 4px;
HEIGHT: 20px;
TEXT-DECORATION: none
}
UL.menu LI A:hover {
BACKGROUND-IMAGE: url(http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/buttonover.jpg)
}
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:
[code=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="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.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.sixfoottallrabbit.co.uk/cssstyles/gradient/#">Home</A>
<LI><A
href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/#">Archive</A>
<LI><A
href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/#">Contact</A>
</LI></UL></DIV>
<DIV class=footer><A class=copyrightlink
href="http://www.sixfoottallrabbit.co.uk/cssstyles/gradient/copyright.txt">Copyright
© 2005 Joseph Mansfield</A></DIV></BODY></HTML>
[/code]0
@NogDogJul 25.2005 — #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), [i]and it changed the doctype![/i] 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:
[code=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="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<h1>
<img src="title.jpg" alt="SFTR Productions" width="428" height="80" />
</h1>
</div>
<div class="content">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer"><a class="copyrightlink" href="copyright.txt">Copyright © 2005 Joseph Mansfield</a></div>
</body>
</html>
[/code]