5 replies [Last post]
stevenjohn
Offline
newbie
Last seen: 16 years 50 weeks ago
Joined: 2004-03-19
Posts: 4
Points: 0

Hi there,

If anyone could help me with this problem...... I'd be immensely grateful as my doctors getting worried about my bloodpressure.....

OK, I have a site working in IE6 fine, its a liquid CSS layout - have a look at: http://www.oneworldmarket.org/demo-corporate/

The structure of the main content area of the page is:

<div id="leftbox">
<div class="design">
&nbsp;
</div>
</div>



<div id="rightbox">
<div id="searchbox">
<form action={"/content/search/"|ezurl} method="get">
<input class="searchtext" type="text" size="10" name="SearchText" id="Search" value="" />
<input class="searchbutton" name="SearchButton" type="submit" value="Search" />
</form>
</div>

<div id="infobox">
<div class="design">
<div class="advert"></div>


{let news_list=fetch( content, tree, hash( parent_node_id, 2,
limit, 5,
sort_by, array( published, false() ),
class_filter_type, include,
class_filter_array, array( 2 ) ) )}

<h3>{"Latest news"|i18n("design/corporate/layout")}</h3>
<ul>

{section name=News loop=$news_list}
{section-exclude match=$News:item.node_id|eq(135)}
<li>
<a href={concat('content/view/full/',$News:item.node_id)|ezurl}>{$News:item.name|wash}</a>
<div class="date">
({$News:item.object.published|l10n( shortdate )})
</div>
</li>
{/section}
</ul>
{/let}


</div>
</div>
</div>

<div id="maincontent">


<div id="path">
<div class="design">

{let name=Path
use_urlalias=ezini('URLTranslator','Translation')|eq('enabled')}

<p class="path">
&nbsp;
{section loop=$module_result.path}
{section-exclude match=$:item.node_id|eq(134)}
{section-exclude match=$:item.node_id|eq(135)}
{section-exclude match=$:item.node_id|eq(137)}
{section show=$:item.url}

<a class="path" href={cond( and( $:use_urlalias, is_set( $:item.url_alias ) ), $:item.url_alias,
$:item.url )|ezurl}>{$:item.text|shorten( 18 )|wash}</a>
{section-else}
{$:item.text|wash}
{/section}

{delimiter}
<span class="slash">/</span>
{/delimiter}
{/section}
&nbsp;</p>
{/let}

</div>
</div>

<div id="innercontent">
{$module_result.content}
</div>

</div>
</div>
</div>

</div>
{cache-block}

------------------------------------ END OF PAGE CODE -----------------------

and the CSS controlling these areas are:

div#path
{
margin-top: 1.7em;
margin-bottom: 1em;
font-size: 75%;
color: #FFFFFF;
}

div#path p
{
margin: 0;
font-size: 85%;
color: #FFFFFF;
}

div#path a
{
color: #FFFFFF;
font-size: 90%;
}

div#leftbox
{
margin-top: 2.9em;
margin-bottom: 2em;
float: left;
clear: left;
width: 50px;
height: 200px;
}

div#leftbox div.design
{
border: 0px solid #000000;
background-image: url(../images/navbar/demo-corp.gif);
background-position: right center;
background-repeat: no-repeat;
width: 50px;
height: 350px;
}

div#rightbox
{
float: right;
clear: none;
width: 200px;
}

div#infobox
{
margin-top: 0.7em;
margin-bottom: 2em;
float: right;
clear: none;
width: 200px;
margin-right: 1em;
}

div#infobox div.design
{
border: 0px solid #FFFFFF;

}

div#infobox div.advert
{
float:none;
background-image: url(../images/advertise-here.gif);
background-position: center center;
background-repeat: no-repeat;
width: 100%;
height: 186px;
margin-top: 5px;
border: 1px solid #FFFFFF;
background-color: #66ccff;
}

div#infobox h3
{
float:none;
width: 94%;
font-weight: bold;
font-size: 65%;
color: #66ccff;
padding-left: 3%;
padding-right: 3%;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin-top: 17px;
border: 1px solid #FFFFFF;
background-color: #006699;
}

div#infobox ul
{
list-style-type: square;
margin-bottom: 1.5em;
}

div#infobox li
{
margin-top: 1em;
margin-left: 2em;
margin-bottom: 1em;
}

div#infobox a
{
color: #000000;
}

div#maincontent
{
display: table;
position: relative;
height: 1%;
margin-bottom: 2em;
margin-left: 65px;
margin-right: 220px;
clear: top;
float: right;
float: top;
}

#index {
float:left;
width: 95%;
}

div#index div.indeximage
{
float:left;
width: 100%;
height: 182px;
margin-top: 3px;
border: 1px solid #FFFFFF;
background-image: url(../images/navbar/home-image.jpg);
}

#index2 {
float:left;
width: 100%;
margin-top: 20px;
}

div#index2 div.gutter {
float: left;
width: 3%;
height: 1px; }

div#index2 div.indextitle
{
float:left;
border: 0px solid #FFFFFF;
width: 22%;
}

div#index2 div.indextitleinner
{
float:none;
color: #006699;
width: 100%;
font-weight: bold;
font-size: 120%;
padding: 3%;
margin-top: 5px;
border: 1px solid #FFFFFF;
background-color: #66ccff;
}

div#index2 div.indexintro
{
float:left;
border: 0px solid #FFFFFF;
width: 29%;
margin-left: 3%;
}

div#index2 div.indexintroinner
{
float:none;
width: 100%;
padding: 3%;
margin-top: 5px;
border: 1px solid #FFFFFF;
background-color: #66ccff;
}

div#index2 div.indexbody
{
float:right;
border: 0px solid #FFFFFF;
width: 36%;
margin-left: 0%;
}

div#index2 div.indexbodyinner
{
float:none;
width: 100%;
padding: 3%;
margin-top: 5px;
border: 1px solid #FFFFFF;
background-color: #66ccff;
}

div#index2 div.indexboxtitle
{
float:none;
color: #66ccff;
font-weight: bold;
font-size: 65%;
padding-left: 3%;
padding-right: 3%;
padding-top: 0.2em;
padding-bottom: 0.2em;
border: 1px solid #FFFFFF;
width: 100%;
background-color: #006699;

}

If I view the page in N6 or Opera (and I suspect Safari) the middle contewnt drops down - I believe its because it being forced down by the two surrounding columns... if I look at a page with hardly any main content it renders properly in the right placei n netscape, its only when there is a lot of content that spreads out does it get pushed below the other layers.....

I can get it to work in netscape if i change the width to a small value, but it leaves loads of space around the box and looks crap.

If anyone out there can help me I will be extremely grateful.

Thanks, Steve.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Layer rendering issues in Mozilla and Netscape 6 - IE6 works

Hi stevenjohn,
First thing you should do is validate your CSS as you have a few incorrect values in there. For example "top" is not a valid value for float or clear, there may be other errors.
There are a couple of paths you could choose to fix your site.
Fisrtly you could position #maincontent absolutely that will fix most of you problems but it will also mess up your footer placement.

Or you could look at placing #maincontent before #rightbox in your source which will open you up for other options such as using percentage widths for all columns and floating them all.
Or relatively positioning the #maincontent and absolutely positioning the left and right columns.

Uhm so many choices, I'd probably go with the three floated columns with percentage widths but I'm a floater and don't have any need to provide a pixel perfect design for anyone Cool

Maybe someone else will spot something that I have missed that will fix your site without going to the extremes I have mentioned and maybe validating your CSS and HTML will help you find a solution.

Whatever happens we will try and help you where we can

stevenjohn
Offline
newbie
Last seen: 16 years 50 weeks ago
Joined: 2004-03-19
Posts: 4
Points: 0

Layer rendering issues in Mozilla and Netscape 6 - IE6 works

Tony,

Many thanks for your reply. I ended up stripping the page back down and almost starting again.... I've got it so it looks good in IE6, reasonable in Opera, and pretty bobbins in NS7...

Could someone tell me is this level of comromise normal... or is my css still pretty bad?

Cheers, Steve.

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 46 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Layer rendering issues in Mozilla and Netscape 6 - IE6 works

As Tony suggests, you should run your CSS through a validator http://jigsaw.w3.org/css-validator/ whenever your coding.

I would say this is an essential exercise when learning CSS. The output gives clear indications of where code should be corrected. Eventually, the recommendations become second-nature (as with doing the same with your XHTML/HTML).

There is always a level of compromise involved with XHTML/CSS. Mainly due to browser inconsistencies, and the realisation that you can't simply slash up and stick-together a Photoshop idea in a whatever-goes HTML manner.

This being said -- and from my own experience, as I am still very much learning... the more you work with it, the more you consider it in the initial stages of a design/development.

The next sentence is true. The previous sentence is false. Discuss...

stevenjohn
Offline
newbie
Last seen: 16 years 50 weeks ago
Joined: 2004-03-19
Posts: 4
Points: 0

Layer rendering issues in Mozilla and Netscape 6 - IE6 works

CO2,

Cheers for your reply.

The CSS validates correctly, and the xhtml is almost there.

Like you say, it seems trial and error in terms of what you'd like to do, and what you can do.

Steve.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Layer rendering issues in Mozilla and Netscape 6 - IE6 works

Hi stevenjohn,
Definitely lots of trial and error.
But if we knew all the answers it wouldn't be challenging anymore.