moldboy 0 Report post Posted November 11, 2005 I am making a website dessign that makes heavy use of CSS and DIV's now When I view my site as it is in IE it works almost perfect, but when I open it in Firefox the main background dissapears, here is the sitehere is the siteand here is the external CSS file: BODY { background-color:#ffffff; background-image: url(images/topimage.jpg); background-repeat:repeat-x;}DIV.content { width:760px; position:absolute; top:19px; left:19px;}DIV.head { width:758px; height:125px; background-image: url(images/head_bg.jpg); background-repeat:repeat-x; background-color:#793d00; border-left:2px solid #510801; border-right:2px solid #510801; border-top:2px solid #510801; }.hb { z-index:1; position:absolute; left:266px; top:2px; }DIV.body { background-color:#e0dfe3; background-image: url(images/body_book.jpg); background-position:top right; background-repeat:no-repeat; width:758px; z-index:-2; color:black; border-left:2px solid #510801; border-right:2px solid #510801; border-bottom:2px solid #510801; }.login { height:47px; width:217px; z-index:4; position:absolute; right:15px; top:15px; Color:#d67900; font: normal small-caps normal x-small arial x-small; font-size:10px; }.login INPUT { color:#d67900; font-weight:bold; background-color:#894e00; border:1px solid black;}DIV.menu { width:150px; border:2px solid black; float:left; margin:5px }DIV.text { width:569px; border:2px solid black; float:right; margin:5px}DIV.lower_menu { width:150px; float:left; margin:5px; }According to the WC3 my HTML is conditionaly acceptable, something about Character sets, and my CSS has not immediate errors, but like I said thre are problems with the FireFox version.P.S. What do you think of the layout/dessign, (only on IE please) Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted November 11, 2005 well with the character thing your missing one line in doc type <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://forums.xisto.com/no_longer_exists/; and this<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> that will solve your character problems.Now i went and check your css for validation it is acceptable but had these warnings in them.Line : 2 (Level : 1) You have no color with your background-color : BODY Line : 17 (Level : 1) You have no color with your background-color : DIV.head Line : 47 (Level : 1) You have no background-color with your color : .login Line : 48 font-family: You are encouraged to offer a generic family as a last alternative Line : 48 (Level : 1) Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. : .login Line : 48 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : .login Line : 49 (Level : 2) Redefinition of font-size : .login well the error has to do with your background image and table border for fire fox, what i suggest you do is quote your image sources and see if that works. Or if need to do one part of the css at a time and trial and error it that way on firefox. Share this post Link to post Share on other sites
Tyssen 0 Report post Posted November 11, 2005 Without addressing your problem directly, here's a couple of tips:1. Don't develop your sites in IE; use FF instead and then institute workarounds for IE's incorrect adherence to certain CSS specs.2. Don't use absolute positioning. Here's an article on reasons why not. Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted November 11, 2005 well it displayed fine in IE7 so but yeah, IE6 might have some issues with that still, but everything look good from what i saw. Share this post Link to post Share on other sites
moldboy 0 Report post Posted November 11, 2005 I was developing it around FireFox however as I continued to define the CSS I found that when I tested it in the Browsers it didn't look right, (The Background went away) now when I tested it in IE it did work still. It also kinda works on Opera, does anybody feel like checking this in Opera and seeing why I get a bar between the head and the body? Share this post Link to post Share on other sites
Tyssen 0 Report post Posted November 11, 2005 Add overflow:hidden to div.body to sort out your problem for FF. I really would recommend losing the absolute positioning though. Absolute positioning is something that should be avoided until you really understand the Visual Formatting Model. Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted November 11, 2005 (edited) moldboy,simply add the missing colour values where required, and the DTD and Meta tag as per SM up there. Pay attention to Tyssen's advise about absolute positioning. It helped me out big time last month.Seperate the fonts with commas and end with "sans-serif" .These will handle most of the errors reported in the css.Also, please be reminded that "valid" css doesn't mean it will work the way you intend. Notice from BuffaloHELP: Additional message as reported. Edited November 11, 2005 by BuffaloHELP (see edit history) Share this post Link to post Share on other sites
moldboy 0 Report post Posted November 11, 2005 Add overflow:hidden to div.body to sort out your problem for FF.Okay thanks, that worked well, but one question what exacly does it do?Okay I removed one of the absolute positionings, looking at the article it does make sense why, but one more question, how do we all feel about relative positioning?Oh, I'm also taking down the page until I have more work done on it. Share this post Link to post Share on other sites
Tyssen 0 Report post Posted November 12, 2005 Okay thanks, that worked well, but one question what exacly does it do? The specs say that elements that are floated or positioned absolutely are taken out of the normal flow of the document. The specs also say that containers shouldn't expand to contain these out-of-flow elements. FF adheres to this spec; IE doesn't and expands to contain these elements. I'm not quite sure how overflow:hidden works in respect to solving the issue in browsers that follow the spec, but it does. how do we all feel about relative positioning?It's all a question of relative to what. The thing is, using the normal flow of the document and using elements' margins/borders etc., you can position elements where you want them without ever having to resort to position: relative or position: absolute. As I said in that article on the other site, using position: something creates a new positioning context for elements. The only time I ever use position: relative is when I want an element contained within that element to be positioned absolutely relative to the containing element rather than the body. Or, if I want to give a z-index to something because z-index only works on elements that have position: something applied to it. So, in a lot of cases when I use it, applying position: relative to something doesn't actually affect that element's position, but rather affects the way elements contained within it behave. Share this post Link to post Share on other sites
Lozbo 0 Report post Posted November 13, 2005 Okay thanks, that worked well, but one question what exacly does it do? 203774[/snapback] I believe that the property overflow is for adding a vertical scroll bar for navigation or am i wrong? Share this post Link to post Share on other sites
Tyssen 0 Report post Posted November 13, 2005 I believe that the property overflow is for adding a vertical scroll bar for navigation or am i wrong? 204375[/snapback] In this case you are, because that's not the end result. Share this post Link to post Share on other sites
