HTML (YES HTML) and CCS troubles...

Trip · #1 November 9th, 2003, 02:22 PM

Ok, i'm working on my website using basic HTML mixed with some CSS styles and elements. I created the website and using Safari under OS X it looks perfect. Using Internet Explorer 5.2.3 under any OS and the site looks like crap.

Basically what I've found the problem is that the website is loading the CSS style for the background, but it is not loading the color for the background. I can't really explain it, so go look at it (the source) and tell me what you can make out.

http://www.TannerSite.com/preview (one page only)

I'm thinking of restarting everything with an EXTREMELY simple design using XHTML. But it will be really boring if I do that.

uoba · #2 November 9th, 2003, 03:47 PM

Trip, you don't need to give the body a class (i.e. .bg)... just give the body its own CSS... as such in your CSS style tag:

body {
background-color: #E7E7CD;
background: url(images/background.gif) repeat-x;
padding: 0;
margin: 0;
}

This way, you can leave your <body> tag alone.

Trip · #3 November 9th, 2003, 03:49 PM

So do I need to make a seperate CSS page for just the body? Or can I just put that code directly into my page and everything will work out happily?

BTW I've scratched this project. But I still want to know for future projects.

Trip · #4 November 9th, 2003, 04:10 PM

Also uoba: On your website, there's that main grey square in the center. Usually I'd use HTML tables to create something like that, I'm assuming you didn't. How *EXACTLY can I create something like that without using tables? Or do I have to use tables but just edit them to suit CSS/XHTML styles...like you explained above?

Thanks for all the help btw, you may have saved my life (litteraly!)!

Darkshadow · #5 November 9th, 2003, 04:35 PM

No, you don't have to have a separate page. Just replace the .bg with body, and take out the class="bg" in your body tag. That simple.

He used tables for that, actually, Trip. You must have missed the thread where we were trying to find a way to totally do it in CSS.

I think I came the closest (maybe not, mr. K had put something up, but his server was never accessible, so I dunno if that one panned out...), but uoba needed it to work in pretty much all (newer) browsers on all systems, and the CSS I put up didn't work in IE 6 on the PC. Go figure

And yes, not all browsers support CSS the same way. That would be the browsers' fault, but if you're planning compatibility, you'll have to know about that. The ability to actually test it out on different platforms would be the best way, but not everyone has a bunch of computers sitting around.

Um, here's the code I did that has the gray box in the middle...done completely with CSS: Border Test take a look at the source for the XHTML and the CSS (the very bottom thing on the page is a link to the CSS).

Hmm, just a note, the font-adjust-size property I have in the CSS doesn't actually work on any browser as of yet...I was testing to see if maybe Safari did it.

Pengu · #6 November 9th, 2003, 07:21 PM

Check out my site. www.quackingpenguins.uni.cc
I'm not sure if you wanted the grey part centered vertically, but getting a CSS "box" is quite simple when you look at it laterally. feel free to look at the code on my page and the attached css. I also had a simmilar style with the center box containing an iframe, without major problems.
Hope this helps.

toast · #7 November 10th, 2003, 03:29 AM

Hi Trip,

Uoba told you important stuff. You can style elements without declaring a class. For example,

body { color: #300; }

will style all your body text to dark red. See, no need to tell it's a class, it's just about styling default elements. Without this, CSS would be a pain. CSS is about separating content from presentation.

Now, you had a question about boxes. My site is all contained into a box, after all: www.phnk.com .

In XHTML/CSS, <div> replaces complex heavy tables. For example, check this:

body { padding: 20px;}

and your whole page has a new margin ! Same, check this:

body { padding: 20px 5% 20px 5%; border: 1px dotted #333; }

and your whole page is within a grey box. You really want to know what div's are about ? Check this: http://thenoodleincident.com/tutoria...son/boxes.html . This page is just damn excellent. You'll be amazed how handy CSS are to get rid of tables. In a month, you'll even ask yourself why you've used tables for so long.

uoba · #8 November 10th, 2003, 03:51 AM

Some great advice here trip... Darkshadow... yep, yours didn't work on IE6 PC... but was the closest. I had to use tables I'm afraid, but only one... which beats the untold amount of nested tables I used to work with!

Saying this, the tables where bare (or was it the cupboards!)... all styled with CSS.

However, I am planning a redesign of my site again since I think I got too contrived with the current one (still doesn't work in IE5 Mac... but have a great php script which detects and changes the stylesheet accordingly).

Trip, as you can see with the way things are going with me, it ain't easy, but just knowing what you are trying to achieve, will keep you ahead of the game in years to come... and I personally think you have enough talent to make a good web design should you decide to so.