Forum Moderators: not2easy
Here is the css:
/* CSS Document */
body {
margin: 20px 0;
padding: 0;
color: #666666;
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
h1, h2, h3 {
margin-top: 0;
font-family: Papyrus, Perpetua, Verdana, Arial;
font-weight: bold;
font-style: normal;
color: #CC6600;
font-variant: normal;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1.2em;
margin: 0;
}
p, ul, ol, blockquote {
margin-top: 0;
}
a:link {
text-decoration: none;
color: #663300;
}
a:visited {
color: #003300;
}
a:hover {
text-decoration: underline;
}
li {
color: #333333;
}
li a:link {
color: #666666;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #663300;
}
li a:hover {
text-decoration: none;
color: #006600;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #663300;
}
li a:visited {
color: #003300;
}
img.float {
float: left;
margin: 5px 15px 10px 0;
border: 5px solid #CC6600;
}
/* Header */
#header {
width: 700px;
height: 160px;
padding: 10px;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
background-position: 10px 10px;
background-color: #CC6600;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
/* Content */
#content {
width: 700px;
margin: 0 auto;
background-color: #FFFFFF;
background-image: url(images/background.gif);
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CC6600;
border-right-color: #CC6600;
border-bottom-color: #CC6600;
border-left-color: #CC6600;
}
#colOne {
float: left;
width: 180px;
padding: 20px 10px;
}
#colOne ul {
margin-left: 0;
padding-left: 1em;
list-style: square inside;
}
#colTwo {
float: left;
width: 460px;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
/* Footer */
#footer {
padding: 10px;
text-align: center;
font-size: smaller;
}
#footer * {
color: #999999;
}
HERE IS THE CORRESPONDING HTML for the Header
<!--[if IE 5]>
<link rel="stylesheet" media="screen, projection" type="text/css" href="/ie.css" />
<![endif]-->
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
</div>
Any clues as to how I can get the background image of the header look like it should (like it does in FF2 and NN?)
I'm only new here too, but welcome to webmasterworld. It's been three and a bit days, but just in case this is still bothering you:
I wonder if it wouldn't be easier to just overcome the problem another way;
#header {
width: 680px;
height: 140px;
/* background: url(/images/banner.jpg) no-repeat; */
background-color: black;
padding: 0;
margin: 0 auto 0 auto;
border: 10px solid #c60;
}
...
<div id="header"><p> </p></div>
Seems to drop that black background in a sort of near brown colored border, I feel fairly confident it will do it in all the reasonable browsers and it even seems to be about 680*140px in the black space in both MSIE(6 but, I won't dirty my home machine with 7 unless I set up VMWare for something else) and FF.
Assuming the jpeg is 680*140px, exchanging the commented 'background:' for commenting the 'background-color:' would hopefully simply 'go' for you. I *think* this is stronger than the method you are trying to employ, if anyone knows better hopefully they will post next.
I also think you would have had more and better responses than me if you just gave us the #header { /* stuff */ }, it's being conditionally fed to MSIE (?) and your html snippet is possibly of perfect length to convey how you are using #header in the mark up along with the application of specific CSS for MSIE.
Regards,
robsoles.
Here is the HTML if you think it will help....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
</div>
<div id="content">
<div id="colOne">
<h2>Menu</h2>
<ul>
<li><strong><a href="" accesskey="1" title="Home">Home</a></strong></li>
<li><strong><a href="" accesskey="2" title="Services">Services</a></strong></li>
<li><strong><a href="" accesskey="3" title="Gallery">Gallery</a></strong></li>
<li><strong><a href="" accesskey="4" title="Contact">Contact Us</a></strong></li>
</ul>
<h2>Recent Projects:</h2>
<h3><h3>
<p><a href="" target="_blank">More…</a></p>
</div>
<div id="colTwo">
<h2></h2>
<h3></h3>
<p> </p>
<img src="images/kitchen2.jpg" alt="" width="115" height="160" class="float" />
<p> </p>
<p></p>
<p></p>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<p>Copyright © 2008 ¦ This site is best viewed with <a href="http://www.mozilla.com/en-US/firefox/" target="_blank"><strong>Mozilla Firefox 2</strong></a><br />
Web Design by <a href="" target="_blank"><strong></strong></a></p>
</div>
</body>
</html>
THANKS THANKS THANKS!
Emily
I will be able to play with it in about 8 hours, I'll check back and see if anyone's rounded this out for you and if not I'll make myself a suitable image and have a little play tonight. Don't hesitate to play and just say if you nail it in the meantime.
robsoles.
Ps. Thanks phranque, now I realise how I should form that welcome properly next time I 'say' it.
I've tried the following in FF and MSIE 6 & 7 and couldn't get it to fail so I'll give what I saw work.
test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tester</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="header"> </div>
</body>
</html>
test.css:
#header {
width: 700px;
height: 160px;
background: url(test.png) no-repeat;
/* background-color: black; */
padding: 0;
margin: 0 auto 0 auto;
border: 10px solid #c60;
}
test.png
700x160px blue with a sort of squiggle in the corner, though you'd probably prefer to use your own ;)
Give this a whirl and I wonder if you've seen SuzyUK's short refresher about posting and debugging CSS [webmasterworld.com]?
Good luck,
robsoles.
Ps. If you know of a browser it falls apart in as is then please alert me!
My banner still gets cropped off at the bottom. Granted, it is only a tiny tiny bit, but as my banner has a logo in it, it is significant enough to be noticeable. I am thinking at this point that I will create a separate style sheet with linkage to an alternate image that has a bit more bottom edge, therefore eliminating any cropping of the logo within....
As to the centering issue....What is it that I am missing....Is this something I could address within the IE style sheet?
{if gte IE5....do you know off-hand how to point the browser to the alternate style sheet?
*~*~*It is AMAZING to me how FF renders my pages sooooo perfectly and IE7 changes soooooo much of the pages' appearance...what's up with that Microsoft?!?!?*~*~*
Does your completed HTML doc validate at [validator.w3.org...] and if so then does your completed CSS doc validate at [jigsaw.w3.org...] ?
Regards,
robsoles.
