HTML (YES HTML) and CCS troubles...

Trip

Trip

Registered
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. :(
 
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.
 
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. :)
 
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!)!
 
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 :rolleyes:

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. :D

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. :D
 
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.
 
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/tutorials/box_lesson/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.
 
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.
 
uoba, you could use Tantek's mid pass to filter ie5mac problems... www.tantek.com

Also, I've looked your site, you don't need any table here, come on... that's simple to do !

<div id="top"></div>
<div id="content"></div>

#top { height: /* your image height + your text's height + a few pixels */;
background: url(your_picture.jpg) no-repeat left bottom; }
#content { margin: 10px; background: #999; }
body { background: #fff; }
 
Fix the height yourself (height: unit) and/or tell the float to shut up if the text wraps (float: none).
 
Trying to fix the height as so it sticks to 10px away from the bottom of the screen at all times just doesn't work. This is what I was trying to achieve (which I've done with the current site)... the bottom positioning property works on every browser except... _ _ _ _ _ _ _ _ _ _

You've got 3 guesses ;) :)
 
I'd say MSIE because of Big John : www.positioniseverythig.net I think the URL is. Doesn't fit your gaps, but still. Get the last line of your code with a big padding-top to throw it downscreen, that should do. But this problem does have a non-table solution. I recommend asking the css-discuss.com (or .org) list.
 
Not sure if you guys got that CSS layout to work. if not, give this a shot should work for you.

CSS Code:
Code: 
body {
	height: 100%;
}
.matte
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #300;
}
.header
{
	width: 100%;
	height: 150px;
	background-color: #eee;
}
.main
{
	color: #fff;
}

HTML Code
Code: 
<body>
<div class="matte">
	<div class="header">
		header
	</div>
	<div class="main">
		body
	</div>
</div>
</body>
 
uoba said:
Almost... don't work in IE5 Mac :(

Roll up, roll up... next! :)
Click to expand...

Oh well, I got a work around that works if you are javascript fluent. If the position of the .matte class is relivent the code works on IE 5, for Mac, BUT... breaks the other browsers.

Code: 
Opera/NS/Safari code

.matte
	{
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #300;
	}

IE 5 modification

.matte
	{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #300;
	}

So what you can do is have a browser detect for IE5 and have it just doa document write and swap out absolute to relative... hope that makes sense. Seems that there is just a bug with IE 5 on this issue with it basically doing all its formatting from the top
 
You must log in or register to reply here.
Back
Top