CSS - General Question About Style Edits Not Showing Up

I've said this before, on he I'm old and trying to ween myself off tables. I'm re-doing a site for a mattress store (I did one for the owner a number of years ago) and I absolutely want to ditch the archaic code.... But, I've got a very basic question about laying things out with CSS - and I'm going to post a picture because - I think - it may explain my question best. In short, I have a DIV that's centered in the middle of the page called "container". It has a javascript slider at the top, that kinda fills the area in terms of width, and below it I want two columns. I have no idea - using strict CSS and no tables - how this would be done. I mean, I suppose you could use DIVs and absolute positioning but it seems like that might cause problems - I mean, heck...I don't know - maybe not. I just want to know what the best approach would be. Here's a graphic:



I don't think it matters, but you can see the whole page (and examine the code), here (just a parking spot on my own server):

http://www.guymerritt.net/xdog2/

Any help - as always - would be greatly appreciated.

Okay, I'm trying to create dynamically sized blocks that can be pretty much and width and height, while maintaining these fancy corners I'm using. If you look closely, each of the corners have a little inner curve in them... Here is how I did it in HTML/CSS....

1. I spliced it up so there is an image for each of the four corners (10x10), two background images for the top and bottom bars (1x10) and two background images for the left and right bars (10x1).

2. Created the structu
[html]
<div class="block-top">
<div class="block-tl"></div>
<div class="block-tr"></div>
</div>
<div class="block-content">
<div class="block-ml">
<div class="block-mr">
<div class="block-center">
<p>this is some content</p>
</div>
</div>
</div>
</div>
<div class="block-bottom">
<div class="block-bl"></div>
<div class="block-br"></div>
</div>
[/html]

3. Created the CSS
[css]
.block-top, .block-bottom {
height:10px;
line-height:0;
font-size:0;
}
.block-tl, .block-bl {
float:left;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-tr, .block-br {
float:right;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-center {
padding:0 10px;
background-color:red;
}
.block-content {
clear:both;
}

.block-top {
background-image:url(../images/block-light-TM.jpg);
}
.block-tl {
background-image:url(../images/block-light-TL.jpg);
}
.block-tr {
background-image:url(../images/block-light-TR.jpg);
}
.block-ml {
background-image:url(../images/block-light-ML.jpg);
background-repeat:repeat-y;
background-position:left;
}
.block-mr {
background-image:url(../images/block-light-MR.jpg);
background-repeat:repeat-y;
background-position:right;
}
.block-bottom {
background-image:url(../images/block-light-BM.jpg);
}
.block-bl {
background-image:url(../images/block-light-BL.jpg);
}
.block-br {
background-image:url(../images/block-light-BR.jpg);
}
[/css]

In all browsers except IE6 it displays fine, except for one little problem. If I put anything in the content area that has a margin, the margin puts spacing above and below the whole block-content area for some reason. I don't understand that at all, because the margin'ed element is within all those nested divs. I thought it should then just expand that inside div to fit?? Nope...

In IE6 the ML and MR backgrounds don't appear at all.

What am I dong wrong here? Hope this wasn't too complicated to understand.

NOTE: I have zero padding and margin on all the elements as well.

Hi,

I have a style shete which contains multiple styles for differnet devices - however i am habing problems with the "handheld" media type - it wil lonly display the 1st style of the sheet (if you know what i mean).

I have enclosed my code
Code:

@media handheld
{

	.frmInput
	{
		width: 1em;
		height: 1.3em;
		border: 0.1em solid #00004F;	
		background-color: #F2F2FF;
		color:#000000;
	}
		body
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.2em;
		font-weight:bold;
		background-color: #000033;
		color:#000000;
	}

} 

If testing it using visual studio.net 2005's pocket pc 2003 emulator.

Can anybody help ??

thanks in advance

Andy

I purchased a WordPress theme from Orgnanic Themes(who are no longer providing assistance) a few weeks ago and wanted to make a few minor changes(literally, all I did was replace images(header, slider prev/next buttons, background, footer, and the logo). In doing so, I went astray somewhere and messed up. I'm more of a designer than a developer so I'm at a complete loss now. How do I fix it?? Any help or advice would be greatly appreciated.

Original theme-
www . organicthemes . com/themes/block-theme/

My version-
www . whskytngfxtrt . com

W3 Validation Errors-
jigsaw . w3 . org/css-validator/validator?uri=http%3A%2F%2Fwww . whskytngfxtrt . com&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en#css

(For whatever reason I was unable to insert my css in the forum, however it can be seen at the bottom of the W3 Validation.)


Again, any and all help would be greatly appreciated.

So the basic rules a

1) Author style sheets
2) User style sheets
3) Default browser sheets

Now when you get into Author style sheets...

You have: inline styles, header style information (<style type="text/css"> </style>), external style sheets and imported style sheets.

I created a little example for myself to figure out the precedence. So that if all of these methods controled the same element, which method's style would come out the winner.

To my suprise, the order in which you include them in the HTML document has an impact on the precedence. How so? Up until now I thought that the order of precedence was: inline styles, imported styles, external style sheets (<link />), and header style information.

Code:

<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>

<body>
<p style="color: green;">What am I?</p>
</body>

</html>

As expected, the inline style wins.

Code:

<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>

<body>
<p>What am I?</p>
</body>

</html>

The header style information wins. (regardless of position of @import)

Code:

<html>
<head>

<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
<link href="link.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p>What am I?</p>
</body>

</html>

External style sheet wins (<link />).

How does position influence precedence of: external style sheets (Both @import and <link />) and header style information?