Kevin M Posted January 14, 2007 Share Posted January 14, 2007 Some people I know are having trouble viewing my layout in FF. They say that the banner doesn't show up, and all they can see is the 3 content sections. It works fine for me in IE. I don't have FF so I don't know what it looks like. According to W3C it's all valid XHTML and CSS, so I don't know where the problem is. Here's a link: LinkHere's the coding:CSS body, td, th { font-family : Verdana, Arial, Helvetica, sans-serif;font-size : 11px;color : #ffffff;} body { background-color : #000000;background-position : top center;background-image: url(/layout2/bg.png); background-repeat: repeat-y;margin: 0px;} a { color : #ffffff;text-decoration : none;} a:hover, a:active { color : #ffffff;text-decoration : underline;} #container { position : absolute;z-index : -2;background-color: #000000;width : 800px;top : 0;} #banner { position : absolute;z-index : -1;background-image: url(/layout2/header.png); background-repeat: no-repeat;height : 200px;width : 800px;top : 0px;}#navigation { position: absolute;z-index : 1;width : 175px;left : 13px;top : 200px;text-align : center;} #content { position: absolute;z-index : 1;width : 382px;left : 210px;top : 212px;text-align: center;} #extras { position: absolute;z-index : 1;width : 175px;left : 612px;top : 200px;text-align : center;} .center { text-align : center;margin-left : auto;margin-right : auto;} XHTML <!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=iso-8859-1" /><link rel="stylesheet" type="text/css" href="styles.css" /><title>Harry Potter Layout by Kevin of forums.dervish-banges.com and rahponline.com</title></head><body><div id='container'><div id='banner'></div> <div id='navigation'>Navigation Here</div> <div id='content'>SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT</div> <div id='extras'>Extras Here</div></div></body></html> Is anyone having this problem in FF. And if so, do you have any ideas as to how I could change the layout so it works in both browsers, I would greatly appreciate it.Thanks,Kevin Link to comment Share on other sites More sharing options...
Anders Moen Posted January 14, 2007 Share Posted January 14, 2007 Hmm....it's ****** up in Opera too. Link to comment Share on other sites More sharing options...
Kevin M Posted January 14, 2007 Author Share Posted January 14, 2007 I edited some bits in the CSS, but I have no idea if it's working or not. Can someone take a look for me?Here's the link again: LinkIt's supposed to look like this: Thanks,Kevin Link to comment Share on other sites More sharing options...
Anders Moen Posted January 14, 2007 Share Posted January 14, 2007 Ok, but the text you've added on the site..wait, ill take a screenshot of it :)Just wait a minute, and it'll come. Link to comment Share on other sites More sharing options...
Kevin M Posted January 14, 2007 Author Share Posted January 14, 2007 Ok, so the background image isn't lining up right with the banner. Thanks a ton, this really helps. :)EDIT: I figured out that's it's probably the background image positioning. I changed it. Does it all line up now?Thanks for all the help. Link to comment Share on other sites More sharing options...
Kevin M Posted January 15, 2007 Author Share Posted January 15, 2007 A person I know gave me a screenshot of what they see in FF. Here's what it looks like:The banner and content don't even show at all. Is anyone else getting the same result in FF? I have no idea what might be the problem. If anyone has any idea I would really appreciate it. Thanks. Link to comment Share on other sites More sharing options...
jlhaslip Posted January 15, 2007 Share Posted January 15, 2007 z-index as a negative number??? or is it due to the Image being a background to an empty div??? Try placing the image into the div to see if that works, instead of a background image.. Link to comment Share on other sites More sharing options...
roondog Posted January 15, 2007 Share Posted January 15, 2007 Either but the banner in the div rather than as background or give that div a width and height. Link to comment Share on other sites More sharing options...
Kevin M Posted January 15, 2007 Author Share Posted January 15, 2007 Ya, z-index can be negative numbers.Thanks, I'll try that. I'd rather have it in the CSS, but I don't really care. Do you think if I put a HTML comment in the Div for the banner it might work? That way the div isn't empty, but the text doesn't show? I'll try...The div does have a width and height, the width and height of the banner. Link to comment Share on other sites More sharing options...
roondog Posted January 15, 2007 Share Posted January 15, 2007 this is the css i use for a banner and is fine in ff div.banner{float: left;width: 800px;height: 100px;background: url(/headers/title.jpg);} i don't put any html in the div. Link to comment Share on other sites More sharing options...
Kevin M Posted January 15, 2007 Author Share Posted January 15, 2007 My div for the banner is like this: #banner { position : absolute;z-index : -1;background-image: url(/layout2/header.png); background-repeat: no-repeat;height : 200px;width : 800px;top : 0px;} Would that be fine? I don't want to use float. Also, the content doesn't show up either. There's just the background image. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now