Placement issues...

[Whatknows]

So I am really struggling with a redesign. I create the redesign using tables ( http://www.arts.uci.edu/artsbridge/n...dex.php?page=6 ) until it was quite clear that the tables were giving me more trouble than they were worth.

So I have been learning CSS in a few days here. I have created a new CSS based site at http://www.arts.uci.edu/artsbridge/n...ex4.php?page=6 and everything is great with the exception of one item: the grey bar between the menu and content is missing. I have tried everything I can think of to get it there, but if it ever does end up in the right place, it screws up the content.

This may seem complicated, and I suppose it is. The menu's placement has to be absolute due to the JavaScript magic it uses (I don't really understand it, and so I am not willing to attempt to reprogram it). The page content on the other hand has to just sit to the right of the menu via margin (as apposed to being defined by position: absolute) so that the "clear: both" command for the bottom black strip will keep the content text from overlapping the strip. Giving the content a float command is not a possibility because it throws the menu into chaos.

So I have tried floating and fixing an image of the bar. Floating for some reason always pushes the content lower, and when fixing the image the "left" command is ignored, or the bar just disappears. It would be nice to just give the page content a left border, but the margin or padding (I have tried both) places the line on the far left where the margin/padding starts, and floating it to the right is not an option as it screws up the menu.

Is there any way to fix this nightmare? Does CSS has a way to just dray an arbitrary line somewhere on your page?

Thanks in advance!

[hurricane.uk]

Using absolute positioning takes content out of the flow of the rest of the page, so you may get overlapping elements that could be hiding your grey bar. Also, the missing grey bar isn't the only issue - in Firebird your menu text is overflowing into the page content.

At the moment it's quite difficult to troubleshoot your CSS due to you using a combination of inline styles and embedding styles inside the head. Get all of that into an external style sheet and things will become a lot easier for you.

For the absolute positioned elements - you can position them absolutely inside a relative positioned container - that would allow them to enter the flow of the rest of the page, and so may help with the issues that you're having.

You also need a doctype declaration - without it your page will be rendered in browser quirks mode and so you won't be able to predict how it will look.

[Paul O'B]

Hi,

For a quick fix you could try the following code.

.tier1 {height:30px;width:220px;;border-right:2px solid #000;}

However it would also be good to follow Hurricane's advice above .

Paul