homepage Welcome to WebmasterWorld Guest from 23.22.179.210
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Site looks spot on in FF- not so much in IE7
EmilyG




msg:3570666
 11:59 pm on Feb 9, 2008 (gmt 0)

I have an image in the background of the header and in FF and Netscape it is centered and in IE 7 it overlaps on the right- and the entire page is "supposed" to be centered....but isn't in IE7....What am I missing here...? I even tried and set up an alternate css page for just IE but it whatever I do to the header, it changes nothing....

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?)

 

robsoles




msg:3573696
 10:35 am on Feb 13, 2008 (gmt 0)

Hi EmilyG,

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>&nbsp;</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.

EmilyG




msg:3574034
 5:42 pm on Feb 13, 2008 (gmt 0)

Well- First off I appreciate your reply. Secondly, I tried what you suggested and while it seemed to work better because the image wasn't overlapping on the right, the height is still not displaying correctly. The actual banner is 700 x 160, and once I give it the right dimensions so that it displays right in IE7, it gives me a gap in FF....grr...this is so frustrating. Also the entire pages is *supposed* to be centered and displays this way in FF but IE pushes it all the way to the left......Do I need a separate style sheet for IE just to fix this....?
Doing THIS:
#header {
width: 700px;
height: 160px;
border: 10px solid #c60;
background-color: #CC6600;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
padding: 0;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Fixed the overlap on the right but the bottom of the banner image is still getting "clipped" off.

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&#8230;</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;">&nbsp;</div>
</div>
<div id="footer">
<p>Copyright &copy; 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

phranque




msg:3574360
 11:38 pm on Feb 13, 2008 (gmt 0)

welcome to WebmasterWorld [webmasterworld.com], EmilyG!

robsoles




msg:3574382
 12:04 am on Feb 14, 2008 (gmt 0)

Hey EmilyG, you need have only said that when the background image was applied it erred in browser 'x' to get me to look again. The !DOCTYPE you are using is relevant though.

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.

robsoles




msg:3574794
 12:56 pm on Feb 14, 2008 (gmt 0)

Ok EmilyG,

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">&nbsp;</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!

EmilyG




msg:3574877
 2:44 pm on Feb 14, 2008 (gmt 0)

Well Rob- Thanks for taking the time to assist me with this prob...

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?!?!?*~*~*

robsoles




msg:3575235
 10:05 pm on Feb 14, 2008 (gmt 0)

Hey EmilyG,

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved