CSS problems...

I feel like I know CSS, but every time I go to make a page using it, I run into some weird error or another that leaves me scratching my head like an idiot.

I'm doing this page that in IE, looks fine. In Mozilla, NONE of my CSS code works at all. Why? Any ideas? Help?

The page is at:
http://www.torifest.com/temp/cecs/index.html
the CSS is at: http://www.torifest.com/temp/cecs/index.css

Thanks!
Raven

www.ravenoak.net
www.torifest.com
www.6-58.com

It's because IE is outdated, and the Mozilla browsers are much newer, and you have to update your understanding of the newer standards and such....

See CSS 2.1, Table height algorithms

In reply to:

---

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's specified 'height' and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height). CSS 2.1 does not define what percentage values of 'height' refer to when specified for table rows and row groups.

---

Oops....you have a table where you specified percentage heights on the table rows. Even if that was supposed to work, you would have had to specify a height for the table so that the math could be done...uh, whats 27% of an undefined value, after all? That can't be determined, so the rows will be as high as the content needs them to be.


You probably meant to do something like this:

/* cells in first row tall enough to keep text off busy background */
tr#firstrow td {
   height: 140px;
}

Anyways, you probably get the idea now. 1) Catch up /w the standards. 2) Stop coding for IE only. 3) Avoid using tables to layout a page...even the Mozilla browsers still have buggy table code.

Oh yeah, another thing...unless you dream in CSS, don't forget to validate your CSS at http://jigsaw.w3.org/css-validator/

It is invalid to specify commas between the margin values for the margin property:

/* INVALID */
margin: 15px, 150px, 10px, 5px; 

/* VALID */
margin: 15px 150px 10px 5px; 

Perl / MySQL / HTML CSSEdited by Atropos7 on 02/11/05 00:02 AM (server time).

After looking at it, I see several problems. I'm scratching it and trying again. Thanks for the input!

www.ravenoak.net
www.torifest.com
www.6-58.com

New problem.

First off, I NEVER code for IE, but I am also web designer enough to want to ensure that anyone can view my page despite their web browser of choice.
That being said, I redid it and it works fine in Firefox. But in IE, it inserts huge gaps.

Why?

The new page is at: http://cedar.cecs.unt.edu

Raven

www.ravenoak.net
www.torifest.com
www.6-58.com

You should start by making sure your HTML and CSS are valid. Trying the W3C validator on your site, it ran into some difficulties because you had no DOCTYPE, and you had inconsistent character encoding parameters in the HTTP headers and a META tag. (The real server-sent headers take precedence in the standards, so deep-six that META tag, which is at best an inferior imitation of a real HTTP header, and at worst an inconsistent thing that confuses rendering.)

Your links to Tiffany and Jonathan on the left edge are missing their trailing slash, which causes an unnecessary extra server redirect when they're accessed.

The CSS does validate, so you've gotten that far at least.

-- Dan

Ran the html through the validator. No errors (other than the DOCTYPE, which I fixed--I thought I had it in there and must have deleted it by accident).

Any other ideas because frankly, this one has me stumped.

It wouldn't be the common box error IE creates would it? I don't know much about that error..
Raven

www.ravenoak.net
www.torifest.com
www.6-58.com

Have you considered doing that without the use of a tables? Because using tables for layout is considered bad these days. And obviously you're going to have problems with them unless you can code around all the browser quirks.

First step would be to reduce the HTML code to what you need shown. You have a list of links, a few paragraphs and a footer. Easy enough:

	<div id="links">
		<ul>
		<li><a>link</a></li>
		</ul>
	</div>
	<div id="content">
		<p>paragraph 1</p>
		<p>paragraph 2</p>
		<p>paragraph 3</p>
	</div>
	<div id="footer">
		<p>copyright</p>
	</div>

OK now the tricky part is the background graphics. You need some elements in which they will be painted on. Let's make the canvas white, and that is the HTML element. Lets put the vertical repeating title on the BODY element, along with a bottom blue border. OK, for the horizontal repeating background, we'll make a DIV element be a 'wrapper' for the three DIV elements illustrated above. And finally, we'll make the nameplate graphic the background of our "content" DIV.

Now for the positioning. We'll float the "links" DIV to the left with an appropiate top margin to offset the list of links. The "content" DIV will then be flowed from the very top of the page, so thats why it works OK with the nameplate background. We give the "content" DIV an appropiate padding so that the paragraphs will not be too high on the page. The "footer" DIV is in flow after the "content" DIV. Both of these DIVs need padding to keep their content from being to close to the left and right sides of the page.

I've replaced the extra spaces with the CSS property for indenting the first line of text.

You can see this in action here:
http://atropos.openvein.org/web/dreamhost/cedargroup/





Perl / MySQL / HTML CSSEdited by Atropos7 on 02/12/05 11:33 PM (server time).

See, I never did it via float because everytime I did it, it bugged out. I guess I'm having trouble grasping the position: absolute, position: relative, and float codes.

I know tables are seen as bad, but I see them as better than frames, and for someone who is not conviced that CSS is better (considering all of the bugs), it's hard for me to see tables as bad, despite what the industry thinks.

I guess what bugs me is that in looking at your code, I understand it and get it. But if I had tried it, I would have screwed something up somehow. What am I missing about CSS?

Raven

(Thanks btw for helping a lot!)

www.ravenoak.net
www.torifest.com
www.6-58.com

I took atropos' html and added minimal css here to illustrate the simplicity of what you're trying to do. I have no graphic design software on this laptop but would be glad you help with the graphic part as well if this doesn't get you off in the right direction.

As atropos said tho, it's all doable using background-image, might need to add another div, ID=HEADER or somesuch...

jason

In reply to:

---

I guess what bugs me is that in looking at your code, I understand it and get it. But if I had tried it, I would have screwed something up somehow. What am I missing about CSS?

---

It's basically a paradigm shift, from going to tables to CSS. Tables are a bit easy, you split the page up into rectangles, and you can split these rectangles up further, etc. So basically you got it made if you can get the rectangles the right sizes, and the result is a bit like a mosaic.

On the other hand, CSS is a bit more sophisticated; its a bit more like a collage. You have elements that are in flow, and ones that aren't, and you can overlap them. The rectangles are still there, its just that there positions and properties are much more complicated than the tables. For example, in my version of your page, the content rectangle is on top of a wrapper rectangle, and defines the size of the wrapper rectangle; also on top of the wrapper rectangle is the links rectangle, but instead of it being adjacent to another rectangle, it is offset within a "containing" rectangle, and its size does not affect the size of the wrapper. In your page, all these rectangles are "next to each other" with extra rectangles to form a giant rectangle. In a way, my version is "3D" and yours is "2D".


Perl / MySQL / HTML CSSEdited by Atropos7 on 02/13/05 11:17 AM (server time).

oh good gravy, I didn't see that you'd done an example already. Now don't I feel silly ;)

jason