<div> based layouts with position:absolute property

[kaa64]

Hello

I designed the attached xhtml page using nested <div> tags absolute positioning. I have few problems, help is appreciated.

1. Most important: layout renders well with the three major browsers, but the print preview messes up the div positioning as specified. Any know solution to controlling print view.

2. Also important: I found that using absolutely positioned <div>s require either inline style attribute or if style is to be kept in css file, must use the div id and not class attribute. Of course it is not practical because would need to define a separate style for each actual div element, whereas in principle and aside from positioning there is much in common that should be contained in a common css class. Any informed insight??

3. The <li> bullets do not appear at the dreamweaver page "Live view" neither when displayed at FF or Opera. They only render to IE7. Any known cause to bullet problems.

The html and css are attached. Thanks in advance for any help.

 

[Vragabond]

Your file didn't get uploaded. There's no upload service to this website. The attachment only creates a link to a document that already exists on the web.

Second, using absolute positioning is not the best way to create layouts for pages. Sure, it can be very beneficial for certain elements, but since absolutely positioned elements are taken out of the document flow and do not interact with each other, websites laid out strictly using that will be difficult to manage.

On your questions:

1. You can create a separate css file for printing. Note that pixel widths and heights do not work on printer and should be converted to percentages or inches (centimetres).

2. Your assumption is wrong. Absolute positioning can use classes, ids, inline style, descendants or any other CSS selector. There's no limit to that. If your classes do not work, then there's a problem somewhere else in your code.

3. Since the upload didn't work, we cannot find out what is the issue with your bullets or how the error manifests itself. The only thing I can tell you is that margins and paddings on list items are handled differently in different browsers (namely IE vs the rest).


[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[kaa64]

Thank you for the valuable input. I'm not a pro web developer, I had the feeling that there must be a downside to absolute positioning. So, I'd suppose you recommend may be striving for using relative positioning instead.

What I would like to ask you is how to tag the separate css for printing? This sounds really important and I wonder if it is the common practice -- I mean designing a separate style sheet for printing.

WRT classes; what didn't work was something like this:
<div id="box4" style="position:absolute; background-color:#FFEEBF; left: 13px; top: 434px; width: 561px; height: 113px;">. When i took all inline style to the CSS, they didn't render. But when using #box4 as in place of the class in CSS, everything rendered OK. The idea is to keep all common properties among boxes in one class because I cannot tie in the id's.

Thanks again.

 

[BigRed1212]

<link rel="stylesheet" type="text/css" href="print.css" media="print" /> and read this Eric Meyer article

http://www.alistapart.com/articles/goingtoprint/

Putting

.box {general rules about boxes}

#box4 {specific rules about box #4}

in a style sheet and

<div class="box" id="box4">

should work.

If you want you can take the box specific rules out of the stylesheet and just do

<div class="box" style="specific rules">

Declarations specified inline will overrule declarations in a sheet.