trouble with div layers

[Nate12o6]

Im having a little trouble getting something to render the same in FF
and IE.

Here is a link to the problem page:

http://70.154.152.139/custSelect.php

FF renders it perfectly but IE will not layer the loading divs on top
of the client list.
Anyone know how to fix this?

Thanks in advance!

 

[Jonathan N. Little]

Im having a little trouble getting something to render the same in FF
and IE.

Here is a link to the problem page:

http://70.154.152.139/custSelect.php

FF renders it perfectly but IE will not layer the loading divs on top
of the client list.
Anyone know how to fix this?

First you need to fix your markup:

http://validator.w3.org/check?verbose=1&uri=http://70.154.152.139/custSelect.php
Result for http://70.154.152.139/custSelect.php - W3C Markup Validator

Even before running the validator I noticed stuff like this:


<span style="position: relative; top: 35%; text-align:center; font-size:
3em; font-weight: bold;">
<p><center>Select Customer</center></p>
</span>

SPAN is an inline element cannot contain a block element like P, and
CENTER, well...

On a design note: making text go 'bold' on rollovers can cause
layout-jump such as yours. It looks really bad. If you insist on doing
it you must take care on the sizing of the containing element to
accommodate the text change without resizing...

 

[Bernhard Sturm]

Im having a little trouble getting something to render the same in FF
and IE.

Here is a link to the problem page:

http://70.154.152.139/custSelect.php

FF renders it perfectly but IE will not layer the loading divs on top
of the client list.
Anyone know how to fix this?

There are various flaws in your design:

- your document structure suffers a bit from divitis, meaning: reduce
the amount of stacked divs.

- you are mixing structure with design. You have placed styles in your
document. this is a no, no, and makes bugfixing extremely difficult. get
rid of those "style='xxx'" attributes.

- You might considering using position:absolute; for the positioning of
your div-containers

I can make it work by using this in orderEntry.css:

/* --- loader ---*/

#clientsDiv {
height:478px;
position:absolute;
}
#clients {
position:absolute;
}


#loaderContainerClients {
position:absolute;
background-image: url(semi-transparent.gif);
z-index: 1001;
width: 100%;
height: 478px;
}

#loaderContainerClients div {
margin:175px auto 0px auto;
width:32px;
position:relative;
}


/* --- loader ---*/

However this is not perfect, but you really need to look at your
stacking orders of your divs... I would redesign the entire page (there
are too many floating-divs)

HTH
bernhard

 

[Nate12o6]

First you need to fix your markup:

http://validator.w3.org/check?verbose=1&uri=http://70.154.152.1...
Result forhttp://70.154.152.139/custSelect.php- W3C Markup Validator

Even before running the validator I noticed stuff like this:

<span style="position: relative; top: 35%; text-align:center; font-size:
3em; font-weight: bold;">
<p><center>Select Customer</center></p>
</span>

SPAN is an inline element cannot contain a block element like P, and
CENTER, well...

On a design note: making text go 'bold' on rollovers can cause
layout-jump such as yours. It looks really bad. If you insist on doing
it you must take care on the sizing of the containing element to
accommodate the text change without resizing...

Thanks for you help jonathan, I got it to validate, but IE still does
not like it. Any other ideas?

 

[Nate12o6]

There are various flaws in your design:

- your document structure suffers a bit from divitis, meaning: reduce
the amount of stacked divs.

- you are mixing structure with design. You have placed styles in your
document. this is a no, no, and makes bugfixing extremely difficult. get
rid of those "style='xxx'" attributes.

- You might considering using position:absolute; for the positioning of
your div-containers

I can make it work by using this in orderEntry.css:

/* --- loader ---*/

#clientsDiv {
height:478px;
position:absolute;}

#clients {
position:absolute;

}

#loaderContainerClients {
position:absolute;
background-image: url(semi-transparent.gif);
z-index: 1001;
width: 100%;
height: 478px;

}

#loaderContainerClients div {
margin:175px auto 0px auto;
width:32px;
position:relative;

}

/* --- loader ---*/

However this is not perfect, but you really need to look at your
stacking orders of your divs... I would redesign the entire page (there
are too many floating-divs)

HTH
bernhard

--www.daszeichen.ch
remove nixspam to reply

Thanks for the help bernhard. Everywhere i turn I am reading to use
div over tables. Am i just using two many divs or should I use a
hybrid of both?

 

[Bernhard Sturm]

Thanks for the help bernhard. Everywhere i turn I am reading to use
div over tables. Am i just using two many divs or should I use a
hybrid of both?

your approach ist okay, but there are too many nested divs. for instance
you have a construct like this:

<div id="clients">
<a ...
<a ...
</div>

(this can be solved as a <ul> list without the div-container:

<ul id="clients">
<li><a href="..." title="..." /></li>
<li>...
</ul>


then:
<div id="loaderContainerClients">
<div id="loaderClients">
<img... />
</div>
</div>

could be solved as:

<div id="loaderContainerClients">
<img... />
</div>

You need to semantically structure your (X)HTML-documetns

cheers
bernhard