Safari, Firefox and CSS problems

Ok, First time into CSS (and real web design) and I am having the biggest problem known to man! :( .

I made the site and then converted to CSS! The only problem is i am having some problems. I wanted to make it fairly simple for my first ever site. However in firefox every thing is on the right (the body of text and the navigation links). In safari it works fine bar a few positioning issues.

Can u figure out what i am doing wrong? Also does anyone have any useful tips on css in case i make bad code or mistakes

:ermm:

Code:

---

body {
        background-color: #FFFFFF;
        padding: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        margin: 0px;
}
h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.4em;
        color: #330033;
        border-bottom-width: thin;
        border-bottom-style: solid;
        border-bottom-color: #000099;
}
h2 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        margin: 0px;
        padding: 0px;
        border-bottom-style: solid;
        border-bottom-color: #000066;
        border-bottom-width: thin;
        font-size: 1.2em;
        color: #330033;
}
text {
        padding: 0px;
        float: right;
        position: absolute;
        display: block;
        top: 1.5em;
        bottom: 0px;
        left: 12em;
        right: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        margin: 0em;
}
div#sidebar {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: small;
        display: block;
        float: left;
        padding: 0px;
        border-top-width: thin;
        border-right-width: thin;
        border-top-style: none;
        border-right-style: none;
        border-top-color: #000099;
        border-right-color: #000099;
        border-bottom-color: #000099;
        border-left-color: #000099;
        border-left-style: none;
        border-left-width: thin;
        border-bottom-style: none;
        position: absolute;
        top: 2.5em;
        margin: 0em;
        left: 0px;
}

---

i am assumeing that text is not a real tag correct me if i am wrong so you must have missed a "#" or "." on the beginning eg
.text
or
#text

Quote:

---

border-bottom-style: solid;
border-bottom-color: #000066;
border-bottom-width: thin;

---

can be made border-bottom:1px #000066 solid;
to save space
why float and then call for absolute postioning
div#sidebar
this is unnecessary if it works because an id can be used only for a single element try
#sidebar instead

ok, so my tags are wrong <text> is a really tag shall I change it to <div id="textmain">

What is the difference between float and absolute positioning? Are they any advantages/disadvantages?

note: #textmain makes it work in firefox but not safari. <text> works in safari but not firefox. div#textmain works in both.

Can someone explain?

<text> is not a tag in the w3c specs. You can define your own tags and use a custom dtd. But if you haven't gone to that effort, then you have to use the tags that are defined in the w3c specs for html.

There was a web before the w3c and there were many tags that have long since be depracated. Some browsers may still have settings to render these very old tags. The <text> tag may be one of these that safari continues to support. However my googling can find no referances to text tags.

so is <div id="something"> a valid tag? And then do i define it as either #something or div#something

an id is a name for the tag you are specifying not the actual tag and yes it is vaild code