divs laid out like a table!?

[ober0330]

I have a table currently that I use to display somewhat of a menu. I was wondering how you get divs to display in the same format. And this is more of a question of how to do it for this one page. I want to know this in general.

So how do I get, for example,

<div align="center">
<div align="center"><?php include("specRep3.php"); ?></div>
<div align="center"><?php include("specRep4.php"); ?></div>
<div align="center"><?php include("specRep5.php"); ?></div>
</div>

to appear in a row as if I was using a table row, with what I would call "cellpadding"?

[ober0330]

Ok, I've made some progress. I'm using this:

<div class="specmenu" onclick="gotosect(1);">Header Info</div>
<div class="specmenu" onclick="gotosect(2);">Restrictions/Fuel Temp Setpoints</div>
<div class="specmenu" onclick="gotosect(3);">Heat Rejection Coefficients</div>

with the following CSS:

.specmenu {
	color: Navy;
	background-color: #E7E7E7;
	border: 8px solid white;
	font-weight: bold;
	cursor: pointer;
	width: 32%;
	float: left;
	vertical-align: middle;
	height: 50px;
}

I have 2 problems.

1) In Firefox (1.0PR) and Netscape (7.1), it only puts 2 per line. In Opera 7.54 and IE 6, it puts 3 per line.

2) It won't vertically align the text in the div in any of the browsers.

Help?

[ober0330]

I've changed the CSS to this, and now it is centered and spaced ok in Opera and IE, but FF and Netscape make the divs twice as tall and it is still bumping the 3rd div down to the next line.

I'm gettin desperate here people...

.specmenu {
	color: Navy;
	background-color: #E7E7E7;
	border: 8px solid white;
	font-weight: bold;
	cursor: pointer;
	width: 33%;
	text-align: center;
	float: left;
	vertical-align: middle;
	height: 46px;
	padding-top: 8px;
	padding-bottom: 8px;
}

[dj4uk]

Mozilla adds padding and borders to the width of a div.

In other words if you set the width of a div to 100px and then add 10px padding, the true width is 120px (100 + 10(left padding) + 10(right padding). Hence your 3 divs width totals over 100% and therefore wraps over the page.

The same applies for height.

I tend to use a different style sheet for IE cos it doesn't match web standards well.

HTH

DJ

[ober0330]

What the hell? Why would they do that?

[Jop]

Because that's how it's specified in the specs, padding is applied inside the box, margins are applied outside of it. The width you specify is the space you have for the content, not how much space it takes up on screen.

[McCain]

Take a look at the specs:
w3c box model

[ober0330]

Ok... well if I understand you correctly, I have to specify everything about the box for it to work correctly? Or am I missing something. I understand the padding and margins and all that and I understand where they are, but I don't get what I'm doing wrong and why Netscape and Firefox are making my divs twice as tall and why they are wrapping.

Is it because I'm not specifying the padding on the left and right? Is it because I'm not specifying the margins? Throw me a bone here.

[dj4uk]

Simple as this IE and Mozilla interpret the same CSS code in different ways. IE is reckonised to be crap in this respect.

IE:
Padding is included within the width.

Mozilla:
Padding is not included in the width, the width is the width for the content only!

As you have 3 divs that should fit to 100% of the page with when you add padding in Mozilla it pushes the total width over 100% and therefore it wraps.

Make sense?

DJ

[ober0330]

Yeah... I'm reading the link McCain gave and I'm trying out the Tan Hack... hopefully this will solve my problems.

Thanks for the help. I knew IE was screwed up... but I didn't know Opera was off on this one too.

[ober0330]

AHHHHHH... this sucks. I can't even do that. I have other divs on the page and using the Tan Hack will screw up those divs. I guess I could use another block element, but what a freakin pain in the arse. I might as well go back to tables for this page .

[dj4uk]

Are you writing a static HTML page or a dynamic ASP, PHP page?

DJ

[ober0330]

It's static.... I'm just setting up a menu of sorts.

4 rows, first two with 3 elements, last two with only 2 elements.

It feeds a bunch of other dynamic PHP pages, and this is just an include page that I drop in as a menu.

[ober0330]

This is how I want it to look. That is in Opera. This would be all fine and dandy if I could specify a width for the div in absolute values, but I want to use percentages. I want it to scale. Is that too much to ask!?

[dj4uk]

If it to be used with PHP pages you could add a browser "sniffer" that uses a different style sheet according to the browser. That way it would work for everything and there would need to be very few differences between the 2 style sheets.

DJ

[ober0330]

Yeah, but that would mean that I'd have to keep 2 CSS files up to date. No thanks. My CSS file is quite complex as I use it for about 8 database interfaces (all with the same look and feel, but all with different needs).

[dj4uk]

Like I said the only differences would be the widths so you could have a general CSS and then layout_ie.css and layout_moz.css that only contain the div styles. Once setup you wouldn't have to tinker unless the divs changed. I do it all the time and it ain't difficult to keep up with.

DJ

[Jop]

I suggest not using the tantek hack, use conditional statements to specify special widths for IE 5 (IE 6 renders boxes correct, as long as it's not in quirksmode - so a correct doctype as the first line of the document):

	<!--[if ie 5]>
		<link rel="stylesheet" type="text/css" href="css/ie5.css">
	<![endif]-->

The only thing you specify in that css is the new width for IE5.

so if you have in your general css:

.box{
	width: 100px;
	padding: 10px;
/* so many more lines */
}

You specify

.box{width: 120px;}

in your ie5.css

And that for each box that uses a width and padding.
That's it, the boxmodel works well in IE 5.

[Ecniv]

This was hammered up in ten mins - is by no means finished... but may give you an idea?

I'l look again tomorrow


Vince

[ober0330]

Ok, let me throw another monkey at the wrench. The website is in a controlled environment. It is on our intranet. Everyone is using either Netscape 7.1+ or IE 6+.

Is there something I need to specify in the heading of the document to make the model work correctly without a hack in those 2 browsers?

I'm currently using this header:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

[dj4uk]

No because that is a document type declaration which states you are using HTML 4.0 Transitional for the webpage which isn't related to CSS at all.

DJ

[CornedBee]

Actually, dj4uk, it is, because browsers use the doctype to decide whether they should be in Standards-compliant or Quirks mode - and that VERY MUCH influences CSS.

Try changing the DOCTYPE to a HTML 4.01 Strict and see if that solves your problem. Of course, you may only do this if you actually conform to that doctype.

[dj4uk]

I stand corrected CornedBee - you learn a new thing every day!

[ober0330]

Originally posted by CornedBee
Try changing the DOCTYPE to a HTML 4.01 Strict and see if that solves your problem. Of course, you may only do this if you actually conform to that doctype.

Ok... and by "conforming to that doctype", you mean? Making the document complient with the strict standards?

[Jop]

Yes, follow the rules as specified by the w3c specs, and validate your documents to see if it compies.