CSS - Frames Alternative?

I'm trying to force table cells to wrap their contents by using max-width, only to find out that IE doesn't support it. Are there any alternatives to this?

It is my understanding that the EMBED tag is not XHTML compliant correct? If so, how can you get around it as i also understand that without the EMBED tag within the OBJECT, mozilla fails to pick up the content.

In my website i have used a minus value for three div tags with absolute positions contained in a parent div.

i have done this to allow me to use multiple background images in an automatically heighten content wrapper. image on top, image below and repeating image between.

you can see for yourself at imatechi.co.uk, its the writen block inside the box.

apparently using neg values in the z-index causes problems with various browsers, so im wondering if there is another way to do this.

thank you

flos

Hello,
I was wondering if there is any good alternative to faux columns to make a 2 column layout, where the 2 columns extend from the top to the bottom of the screen (without a footer). The basic structure looks like this: Code:

<div id="main_container">
	<div id="navigation_menu">
		This div is set to float left with a width of 20% (assuming there's no margin, border and padding)
	</div>
	<div id="contents">
		This div is set to float left with a width of 80% (assuming there's no margin, border and padding)
	</div>
</div>

I want the right side of the navigation div to have a dashed border. Probably this could be achieved by using faux columns, but it's too much of a hassle in my opinion. Whenever I want to change the color or column size of the navigation bar, I have to alter the faux-image. Also when i use this dashed border the faux-image has to be larger than 1 pixel height. It would have to be around 10 pixels (5pixels for the part where the dash is showing and 5 pixels for the part where there's no dash.

Is there really no easier way to extend the color of the navigation div all the way down to the page?

Thanks in advance

I have worked as a web developer for two years now, and yet I still have not found a satisfactory solution to the problem of table-less layouts. Table-less layouts always end up needlessly complicated or full of CSS and other hacks.

Here is the challenge for you all. I have a very simple table layout with header, left nav, main content, and footer:
http://brentonboy.com/misc-pages/layouttest.html I am trying to figure out if there is a way to replace the table with CSS stuff only while meeting all of the following requirements:
Must be a simple solution with as few HTML elements as possible. Must look and behave the same as the example table. Thus: When the content area is taller than the left nav, the blue of the left matches the height of the content exactly, and the footer drops down nicely below. When the left nav area is taller than the content area, the green of the content area matches the height of the left nav exactly, and the footer drops down nicely below. The solution uses new HTML and new CSS only... not looking for a javascript solution or something else. Do not make use of CSS hacks or any other hacks. All code must be valid. Do not make use absolute positioning: in case I need to center it or do some other fluid thing later. Also avoiding relative positioning would be great too. Must work flawlessly in every browser, just as the table does. Basically, I don't think it's possible to meet all of those requirements, which means that layout tables are better. Please prove me wrong!

using the sibling selector like this

Code:

p, h3
{
margin-bottom: 1em;
}

p + h3
{
margin-top: 2em;
}

should produce output like this (taking mrgin collapsing into consideration)
Code:

first h3 at top of page

paragraph


h3 with 2em gap to preceding paragraph

paragraph

secondary paragraph with 1em gap to preceding paragraph


h3 etc

but alas, the sibling selector does not work in IE6! so how do i do it otherwise, whilst retaining simple markup?

Hello! Is it possible to get iframe fully fill the div when div is in the middle of the screen and it is absolutely positioned and left,right,top,bottom: 100px;

Hello,

I am using a series of nested ULs to display information in a kind of tree structure with some DHTML involved to make it behave pretty. What I am trying to achieve is to have the information in the LI elements well spaced apart, using <span>s. Since these elements are inline I cannot give them a specific width. A workaround that solves the problem in using the property display:table-cell and then I can give it a width. Of course this doesn't work in IE. Could someone please suggest an alternative way of achieving the following:

Code:

<ul id="tree">
<li id="node1">
  <a href="#">
    <span>CB200801</span>
    <span>02/03/2007</span>
    <span>IPS20003</span>
    <span>17.58</span>
    <span>3.08</span>
    <span>0.00</span>
  </a>
  <ul>
    <li id="node2">
      <a href="#"><span>12028077</span></a>
    </li>
    <li id="node3" >
      <a href="#"><span>12046086</span></a>
    </li>
  </ul>
</li>

etc etc

and then I give the <span> the display:table-cell and a width.

In Firefox this is giving me the visual layout I require. Can something be done to help IE?
Thanks in advance
Andy

When a user has the text display options set to big, the text gets out of the box. Does anybody have an idea to fix this or any alternative I can use so that this doesnt happen? I know its not the best design or css implementation but its my first css website:

http://aplistia.com/unitedTours/UnitedTours.php
(look at the white box surrounding the links: home, reserve, contact etc in the left side of the website.)

the css is he
http://aplistia.com/unitedTours/booksite.css

Hi all,

I was wondering if someone could help me, or point me in the right direction.

I am working on a site where I want to use a list based menu for the navigation structure. The first level is vertical on the left hand side of the page, the second level horizontal, and third level drops down vertically underneath.

The main content currently is in an Iframe taking up most of the page.

The system displays properly in Netscape, and still has a few problems in IE.

However my main problem is this. When the menu crosses the IFrame it displays, but then when the mouse moves over the menu/iframe, the Iframe takes the focus and the menu disappears. Setting the Z-index has no effect.

Is there a way to fix this, or an alternative to the IFrame?

Thanks
Wedgetail

Hello,
Is there a method by which we can use position:fixed in Internet Explorer 5.5 and 6.0 ?
I have searched google but did not find anything really useful.
Please help me.

I'm into redesigning our web shop, and am thinking about navigation. Today we have a 30-item tree menu, "norton commander"-style. I'm looking for a modern, user-friendly alternative.

I've understood that top menus are very "in" now, so I have concidered that, but failed to narrow down the menu items.
I need a vertical menu that can hold many items, but also is user friendly. this menu is good, but I would like to load the submenu items via ajax. Anybody know if anyone has done that?

Can anybody point me in the right direction of any blog/article/script about how to deal with the navigation problem?

I'm wondering what's the alternative to the "MARGIN: 0px auto;" where I need the -1px for the margin-left and margin-right as oppose to auto for margin-left and margin-right??

Code:

  MARGIN: 0px auto;

Thanks,
FletchSOD

Hi, i wonder how to get a table behav like this (example: http://help.live.com) what is this layout called??? css frames? or something else? only css can do the job or we will need javascript as well??? You got link to ne tutorial or ne working example?? please help

thnx

Hi:

What I need to do is to have a 3 column design, left column should contain the navigation and the center main content. When the user clicks on the navigation boutton it should bring a set of thumnails of images in the right column. And clicking on any thumbnail should bring a larger image and detail of that image in the center column. I could do this using frames but I want to avoid using frames. I never used CSS before and read lot about positioning layers but couldn't quite figure out how I can target the links to open in the same page as I wanted. The way I have it opens in a new window which is not what I wanted. I want the navigation, center and right column to be visible all the time. What should I do in the following html or CSS to achieve that.

Code:

<html>
<head>
<title> Testing</title>
<link rel="stylesheet" type="text/css" href="./test.css">

<script language="javascript">
new Image().src="./QTimages/image2b.jpg";
</script>

</head>

<body>

<div id="header">

<img src="../QTimages/banner8.jpg"
 width="300" height="50" alt="header image">
</div>

<div id="menu">
<br><br><br><br><br><br><br>
<a href="./images.html"><img name="imagebutton" id="imagebutton" src="../QTimages/image2.jpg" onMouseOver="document.images['imagebutton'].src='../QTimages/image2b.jpg'" onMouseOut="document.images['imagebutton'].src='../QTimages/image2.jpg'" border="0"background="transparent"></a>
</div>

<div id="content">
<h1>Welcome to my site...</h1>
</div>

<div id="thumbnail">
Testing
</div>

</body>
</html>

CSS code:

Code:

#header { position: absolute; top: 0px; left: 350px; }
#menu {  position: absolute; top: 0px; left: 10px;
  width: 0px; height: 100%;}


#content { position: relative; top: 60px; left: 180px;
  width: 80%; height: 100%; background-color: #FFFAAA;
  color: #000EED"}

#thumbnail { position: absolute; top:50px; right:0px;
  height: 100%;
  background-image: url("../QTimages/background.jpg");
background-repeat: repeat-y
z-index: 3;
}

And also the right column is not positioning right.. Any help is greatly appreciated. Thanks

mayflower