CSS - Ie :last-child 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.

I need to create a page that has a header that takes up 20% of the page and the other 80% of the page will be tables. The issue is that the header must not move and the other 80% will be scrollable.

I know how to implement this with frames but I understand that frames are looked down upon now in proper html/xhtml design. Can this be accomplished using css? If so how?

Thanks in advance.

Hi guys,

I've recently been updating a flash games site, but i ran into a little problem. Check out this page:

Spank the monkey

The size of the game is so big in width, that it overlaps the "Related" box. (I currently have overflow set to "hidden", so you cant see it now). Back when a table was used for that portion of the site, whenever a game was too big, it pushed the "Related" box outside of the main container.

How can i achieve a similar effect with CSS?

Regards,

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!

I'm working on a web app that includes a wysiwyg html/css editor. The idea is that people can use the editor to create a webpage. Seems simple enough.

The trick is that I want all webpages created to have a small header at the top. Basically a 15-20px tall navigation strip. Currently, I have it setup so that people can create pages using the editor, but as it is now, the header is simply inserted as an 'included document' when they view the page they created.

Depending on the complexity of the page they make, they CSS, and formatting of the banner could affect how their page is displayed. Even as simple as pushing their content down 15pixels and mis-aligning content they may have set against their background. I'd also like to try and prevent user code from affecting how the header is rendered.

I'm hoping there is a way to seperate the rendering of the header and the user content in the browser. Basically, I'd like the css rendering of the user's content to start BELOW the header, rather than the header being combined with the user content. If a user creates a page that has their own header and it's set to be fixed to the top, it would basically cover up my header. I'm hoping that any element they would fix to the top would be fixed BELOW the header I insert.

This almost seems like a job for 'html frames'. With HTML frames, I could basically split the page into two rendered browser pages. Is there a CSS alternative to this?

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 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

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.

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,

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

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?

How do I distinguish <li> that have child from the one that does not in an unordered list, using CSS?