Embeded Div's And Css Problems

moldboy

Nov 11 2005, 04:01 AM

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 site

and here is the external CSS file:

CODE

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)

Comment/Reply (w/o sign-up)

Saint_Michael

Nov 11 2005, 04:21 AM

well with the character thing your missing one line in doc type

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

and this

CODE

that will solve your character problems.

Now i went and check your css for validation it is acceptable but had these warnings in them.

QUOTE

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.

Comment/Reply (w/o sign-up)

Tyssen

Nov 11 2005, 04:32 AM

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.

Comment/Reply (w/o sign-up)

Saint_Michael

Nov 11 2005, 04:38 AM

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.

Comment/Reply (w/o sign-up)

moldboy

Nov 11 2005, 04:39 AM

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?

Comment/Reply (w/o sign-up)

Tyssen

Nov 11 2005, 04:53 AM

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.

Comment/Reply (w/o sign-up)

jlhaslip

Nov 11 2005, 05:53 AM

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.

Additional message as reported.

Comment/Reply (w/o sign-up)

moldboy

Nov 11 2005, 04:47 PM

QUOTE

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.

Comment/Reply (w/o sign-up)

Tyssen

Nov 12 2005, 12:15 AM

QUOTE(moldboy @ Nov 12 2005, 02:47 AM)

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.

QUOTE(moldboy @ Nov 12 2005, 02:47 AM)

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.

Comment/Reply (w/o sign-up)

Lozbo

Nov 13 2005, 07:51 AM

QUOTE(moldboy @ Nov 11 2005, 10:47 AM)

Okay thanks, that worked well, but one question what exacly does it do?

I believe that the property overflow is for adding a vertical scroll bar for navigation or am i wrong?

Comment/Reply (w/o sign-up)

Recent Queries:-

css firefox background problems height - 150.33 hr back. (1)
firefox div position - 151.79 hr back. (1)

Similar Topics

Keywords : Embeded Div39s Css Problems

Span "display: _____" Problems - block vs inline (2)
[problem] Css Unordered List Display Problems Ie6 Bug - Making unordered list under unordered list couses some padding to appe (2)
I just started designing something that i thought is gonna be a really simple xHTML strict template.
Everything is right except that i thought of using unordered list, some other list under that list.
Well this is the code for the Menu that is cousing me problems CODE               List1
         List2                                    List 2 Sublist
                                              This is really long text that explains a bunch of
nothing3                          This is really long text that explains a bunch of nothing2 ...

Height % In Ff Problems With Css - (3)

Does anyone know how to make the height of a div in firefox equal to the percentage you input? For
example if I put blablabla the div container will only be as high as the text makes it, when in
internet explorer it does make it take up 100% of the page or whatever height in percentage I input
in it. by the way, html, body {} have 100% height in them, so does the container that has the div
element. Example: html,body {height:100%;} #container {height:100%;} #div {min-height:100%;} the
one called #div is the one I want with 100% height. Thanks for any help....

Browser Issues - CSS and embeded DIVs (7)

Okay so I'm redisigning my site (here: http://d-gression.trap17.com/new/index2.html) and need
help with the CSS that makes the main content. On IE it works which scares me because I'd much
rather have it work on FireFox. So here's the CSS I used: CODE BODY{
background-color:#22324f; background-image:url('./images/bg.gif'); } DIV.frame {
background-color:#07571f; border:solid #000000 2px; width:740px; } img.banner { } DIV.green {
background-color:#6d966c; width:730px; } DIV.menu { width:145px; background-color:#cccccc;
float:left; } DIV.conte...

css scripting problems need help - NEED HELP (5)

for some unknown reason the scroll bar info will not kick in it eithers makes the page doe wierd
things or nothing at all and i know i got it right so whats need help QUOTE BODY {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; margin:
0px; padding: 0px; background-color: #2d3851; } h1 { font-family: Times New Roman, serif;
font-size: 26px; font-weight: normal; color: #e9f2fc; } h2 { font-family: Verdana, Arial,
Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #333333; } p { font-family...

Looking for embeded, divs, css, problems