Css Gone Horribly Wrong!

[webgyrl]

Hi!

 

Ok, so I have been trying to learn CSS and impliment its use in my sites.

 

I made a little mock up page to play around with and something has gone horribly wrong.

 

For some reason my navigation bar is below my CSS text and it's supposed to be above. In fact, the whole page is backwards... things that are on the bottom are supposed to be on the top etc. The text also goes beyond the paramaters I set for the tables I created. And for some strange reason the images are not all loading so the navigation interface I created is not showing up. I fact, it sort of looks like the CSS portion of the design is covering up the graphic... but I never inserted any layers etc. into the design, so I don't understand why this is happening.

 

Do CSS and HTML tables just not mix well, or did I do something else to make this not appear on the browser as I designed it in Dreamweaver? I checked it using IE 6.

 

This was done using Dreamweaver MX and Fireworks for graphics.

 

If you could check out the PAGE HERE and perhaps point out where I made my boo-boo's it would help me a ton.

 

If you want me to post the code, let me know and I can do that.

 

Thanks,

 

Nat

[TCH-Don]

Hi Nat!

 

Did you create the stylesheet in a text editor

and upload as an ascii file not binary?

the stylesheet looks strange, extra characters

 

I will paste it here (it looks better here, than in notepad)

>.designcss {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
background-color: #101040;
letter-spacing: normal;
word-spacing: normal;
list-style-position: inside;
list-style-type: none;

position: absolute;

height: auto;
width: auto;
color: #FFFFFF;
line-height: normal;
font-variant: normal;
}

 

in your code

<td class="designcss">

your are using absolute positioning in a table?

try removing it.

Just a thought.

[TCH-Bruce]

You also have a closing table tag in the middle of the page.

 

No you don't, sorry.

Edited March 21, 2004 by TCH-Bruce

[TCH-Don]

take out the

position: absolute;

and it works.

[webgyrl]

I actually did the CSS sheet in Dreamweaver and uploaded it via DW's FTP.

 

I will try taking out that absolute position.

 

I just did the by-the-steps approach to the style sheet in DW MX. I wonder how it got that messed up?

 

Ok... will tweak it and see if it works.

 

Thanks a mil guys!

 

Nat

[webgyrl]

take out the

position: absolute;

and it works.

Presto!

 

Don, that worked perfectly.

 

Now I just wonder how that happened? Was it something I did when setting up the Style Sheet in DW?

 

I will have to play again and try some different style sheets to see if that postion: absolute shows up again.

 

I'm only venturing at formatting the text with CSS at the moment. Not so good with the boxes and other goodies.

 

Thanks for the help. I shall keep playing to see what more damage I can do!

 

 

Nat

[TCH-Don]

Look good Thumbs Up

 

css can be a lot of fun.

 

I tried the floating boxes, but the do not look the same in all browsers.

And in older browsers the links dissapeared in a floating box.

 

So I will stick to tables for now.

[webgyrl]

Yeah, a few people here suggested to me that I stick to tables for now as well.

 

Seems it's a lot harder to do the CSS boxes etc and get cross-browser similar results.

 

I do like the uniformity that CSS gives the text.

 

Argh! I do have SO much to learn still.

 

S'all good tho... what is life without learning!

 

 

Nat

[Deverill]

CSS really is inconsistent in the older browsers but the latest versions seem to be coming pretty close to the standard. Consider your visiting audience and see if it is worth it to go CSS or if you need to accomodate the old-tech-hanger-ons.

 

CSS has a lot of benefits. Two are control over what the viewer sees and benefits to search engine optimization because of less <TR><TD> clutter.

 

Learning's fun! Enjoy and ask if you need anything!

[webgyrl]

What will happen to a page with CSS when someone tries to view it with an older browser?

 

Speaking of browsers... anyone know where I can get old versions of IE and Netscape to test this stuff in?

 

If I have the latest version if IE (6) on my system... what will happen if I try to install an older version of the browser?

 

Thanks

 

Nat

[LisaJill]

The easiest thing to do for that would be to sign up at www.browsercam.com. I used to use that all the time but I haven't made any layout changes lately...

 

I personally don't worry about version 4 browers - my stats show 0 users from them. But if you want to be careful with them you can use @import (instead of using link) to have older browsers ignore the css - then they'd just get an unstyled page, I believe....

[Deverill]

Depending on what you are doing with CSS you could have divs in the wrong place or overlapped or even in a string all above one another. I've seen all these myself but am by no means a CSS expert.

 

Besides, "ex" is a has-been and a "spurt" is a drip under pressure so what's that make an ex-spurt?