div/layer problem.

[bluntedbynature]

ok, so here is the thing, i got a client who wanted this crazy window thing, so im using layers to make the window change, well my problem is that depending on my resolution the layer keeps moving. i dont know how to keep them in 1 spot. below is the source to the div.


<div id="TradeAlerts" style="position:absolute; left:60%; top:319px; width:291px; height:293px; z-index:1; visibility: visible;" class="alertscenter">
<div><span class="828053819-29082005">Serko &amp; Simon LLP publishes four primary Trade Alerts every month, consisting of two bi-weekly Alerts, our Chemical &amp; Pharmaceutical Alert and our FDA Alert.&nbsp; In addition, the firm also publishes real-time special Trade&nbsp;Alerts, the most recent of which is sampled below:</font></span></div>
<ul>
<li>
<div align="left"><span class="828053819-29082005">August 24, 2005: "The U.S. Court of Appeals for the Federal Circuit just ruled that in particular circumstances, commercial meaning must be 'general <em>throughout the trade</em>, not throughout commerce in general."</font></span></div>
</li>
</ul>
<div class="828053819-29082005"><font size="2"><font size="1">To view this special Trade Alert in its entirety, click <u>here</u>.</font></font><font size="2"></font><font face="Arial" size="2">&nbsp;</font></div>
</div>


any help would be great, thanks in advance guys =)

[Siddan]

hi

try replacing left:60% to margin-left:40px instead

...

and while you are at it.. add a 5 px padding so the text doesn´t stress your eyes being atttached on the edge

[bluntedbynature]

thank man, now i got a problem with getting it lined up in the top. i tried margin-top like you had me do with the left but it didnt do anything. how do i get it to line up from the top now?

[Siddan]

margin-top:-15px;
or margin:-15px 0 0 40px;

Firefox reads box differently so you need to adjust the margins for both IE and FF
something like this...
margin:-14px 0 0 40px !important; margin:-15px 0 0 40px;

FF will only read the Important where IE will ignore it and read the next attribute instead

checking on your site again that box seems to be all the way down

[bluntedbynature]

yes i know thats the problem im having. i cant seem to get it back up top.

[Siddan]

but what did u do? I just changed the stuf I just posted earlier and it worked fine, use your old code and make the changes I have posted

[drhowarddrfine]

Didn't I post a while back that your code does not validate and you have several css errors? You still don't have a doctype. You have serious css errors. All this is spelled out for you in the validator.

[bluntedbynature]

yes i know about it not validating and no doctype, i will get to that, i need to have the site working properly then i will go back and clean everything up cause the code is a mess. i got this new problem though. if you go to the address you will see ALOT of dead space under the Web Log window. when i highlight and veiw source selection (FF) it says its the layers. but i have the layers positioned up top. how do i get rid of this black space?

[Siddan]

Hi

Since you are using relative positioning those divs will still take up space eventhough you have moved them up.

I can recomend you to move that code inside that TD instead and use absolute positioning, then you don´t need to adjust pixels for pixels how far up every div will be.

If you really don´t want to have those inside the TD then use Absolute positioning and play with the pixels like you have now.

[Siddan]

newsflash...

I don´t know what will happen on your end, but if I click on the other buttons then the other div will be at the very top.

so if it happens to you also then remove the top px and replace it with margin-top:-293px (the same as the height of the div)

[drhowarddrfine]

i will get to that, i need to have the site working properly How do you expect to get your site working with invalid code? Validation is not so you can just say it is. It's a form of error checking and you've got lots of 'em! You're site may not work at all if you don't use a proper doctype yet you say you are going to wait till you get it working before you use one?!

[bluntedbynature]

alright ill validate it now but can you help me figure out this dead space on the bottom?

[drhowarddrfine]

Once you fix those errors and add your doctype everyone will be more helpful.

[bluntedbynature]

ok im working on it.

[Siddan]

did u miss my post?

the validation isn´t that vicious... really. It is ok if you want a proper site that is compatible with other browsers and so it wont look like a it was made by a child.

Those adjustment he needs to make will still be there after the success validation

You can have tons of faulty validation errors and still the site may work properly.

[bluntedbynature]

ok, i got rid of most the errors. there is like 6 left and i dont know how to fix them. like height on the table tag and marginleft margintop ect, on the body tag, other than that its HTML 4.0 Trans doctyped. but it messed up the positioning of the layers i had.

[drhowarddrfine]

I'm so proud of you. :D

First, your margin-left and top values have no units in your css. You must specify px or whatever.

Second, you have some open font tags. That is, you use </font> but there is no opening <font>

Third, you don't need that margin stuff in your body tag. If you want to set margins to zero, do it in css: body{margin:0}

The ALT errors don't affect your layout and are easy to fix. We'll get to those later.

[Siddan]

lol... sorry for this is not within the subject

drhowarddrfine... that link "IE is a cancer to the web" you have there... I don´t know if it is on purpose.. but to me it actually looks better in IE than it does in FF... just small marginal details.
I just find that amusing

[drhowarddrfine]

IE covers up errors in code. It doesn't follow the standard well, hence, when you try and get modern browsers to display the bad code, they fail. IE doesn't follow standards that have been around since 1999.

Microsoft has admitted as much. While they have said they will fix many of the well known bugs in IE7, they still won't have full compliance and CSS2 is just a dream while IE is still a nightmare.

[drhowarddrfine]

But it works in IE! (http://www.howtocreate.co.uk/wrongWithIE/)

[Siddan]

.. strange, cus I think that page works better in FF....

[Siddan]

yes that was an interesting article.... but tooooo bad FF handles Iframe as z-index auto and is always on top... otherwise it would be super

[bluntedbynature]

ok so now how do i fix my layers not showin up right and all this black space on the bottom?

[Siddan]

I really have posted that already a while back... and even asked if you saw my previous post

[bluntedbynature]

Hi

Since you are using relative positioning those divs will still take up space eventhough you have moved them up.

I can recomend you to move that code inside that TD instead and use absolute positioning, then you don´t need to adjust pixels for pixels how far up every div will be.

If you really don´t want to have those inside the TD then use Absolute positioning and play with the pixels like you have now.

hey Siddan sorry i didnt see this post =( if i use Absolute then when i resize the screen its not gunna move with the resize, correct? and the space will always be there with relative? how do i add the div to the TD, cause if you view the source to the site, you will see that im using layers that become visible/hidden depending on the button you click. can i do that if i put the 4 layers in the TD still?

[Siddan]

yes you are correct....

so instead of explaining you can view this code,,,
Enter this....

<DIV class=alertscenter id=TradeAlerts
style="Z-INDEX: 1; VISIBILITY: visible; MARGIN-LEFT: 10px; WIDTH: 291px; HEIGHT: 293px">
<DIV><SPAN class=828053819-29082005>Serko &amp; Simon LLP publishes
four primary Trade Alerts every month, consisting of two bi-weekly
Alerts, our Chemical &amp; Pharmaceutical Alert and our FDA
Alert.&nbsp; In addition, the firm also publishes real-time special
Trade&nbsp;Alerts, the most recent of which is sampled
below:</FONT></SPAN></DIV>
<UL>
<LI>
<DIV align=left><SPAN class=828053819-29082005>August 24, 2005:
"The U.S. Court of Appeals for the Federal Circuit just ruled that
in particular circumstances, commercial meaning must be 'general
<EM>throughout the trade</EM>, not throughout commerce in
general."</FONT></SPAN></DIV></LI></UL>
<DIV class=828053819-29082005><FONT size=2><FONT size=1>To view this
special Trade Alert in its entirety, click
<U>here</U>.</FONT></FONT><FONT size=2></FONT><FONT face=Arial
size=2>&nbsp;</FONT></DIV></DIV>
<DIV class=alertscenter id=BiWeekly
style="Z-INDEX: 1; VISIBILITY: hidden; MARGIN-LEFT: 10px; margin-top:-293px; WIDTH: 291px; POSITION: absolute; HEIGHT: 293px">Bi
Weekly Alerts go gere ! </DIV>
<DIV class=alertscenter id=ChemPharm
style="Z-INDEX: 1; VISIBILITY: hidden; MARGIN-LEFT: 10px; margin-top:-293px; WIDTH: 291px; POSITION: absolute; HEIGHT: 293px">Chem
&amp; Pharm Alerts go here!</DIV>
<DIV class=alertscenter id=FDA
style="Z-INDEX: 1; VISIBILITY: hidden; MARGIN-LEFT: 10px; margin-top:-293px; WIDTH: 291px; POSITION: absolute; HEIGHT: 293px">FDA
ALerts goes here! </DIV>



inside this TD marked with red

<table width="374" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="374" valign="top"><div align="center"><br>
<table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" bgcolor="#666666"><img src="images/tradealerts.gif" width="330" height="63" border="0" name="window_tabs" usemap="#window_tabsMapMap" id="window_tabs"></td>
</tr>
<tr bgcolor="#666666">
<td width="5"><img src="images/left.gif" width="4" height="290"></td>
<td width="321">&nbsp;</td>
<td width="4"><img src="images/right.gif" width="4" height="290"></td>
</tr>
<tr>
<td colspan="3" bgcolor="#666666"><img src="images/bottom.gif" width="330" height="15"></td>
</tr>
</table>


.. or at least tried to mark it with red
You don´t need the first div to be positioned at all

Have a try

P.S
You have to remove your old divs ofcourse...

[bluntedbynature]

omg i love you! i would so go to sweden and kiss if i could!!!!11!!one!!!! one little problem is the margins, you can see it here, www.serkoandsimon.com/index_test.php i want a 0 margin all around. how do i go about doing this?

[bluntedbynature]

it works amazingly well in FF, but IE hates it.

[Siddan]

hehe lol :)

but that is strange... it looks fine for me in both IE and FF... I always make sure it works in both before i post... but i am on a quick hurry here right now and cannot check your code but try this all and change the links for images


<TABLE cellSpacing=0 cellPadding=2 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top width=554>
<DIV align=left><IMG height=276 src="serko-part2-filer/citys.gif"
width=550><BR></DIV>
<TABLE class=maintxt cellSpacing=0 cellPadding=2 width="98%"
align=center border=0>
<TBODY>
<TR>
<TD vAlign=top>
<P align=justify><IMG height=31 src="serko-part2-filer/s.jpg"
width=26 align=absBottom>erko &amp; Simon LLP is an
internationally recognized law firm concentrating in Customs
and International Trade Law with more than 30 years of service
to the trade community. &nbsp;</P>
<P align=justify>The firm provides the highest level of
dedicated, professional service to a broad spectrum of
industry participants including: importers, exporters, foreign
manufacturers, Customs Brokers, freight forwarders, shippers,
sureties, trade associations, foreign governments and
individuals.</SPAN></FONT> &nbsp; </P>
<P align=justify>The firm also provides services related to
U.S. Customs audits, maritime law, food and drug law regarding
Customs issues, antidumping and countervailing duties and
other Customs and IPR issues.&nbsp; </P>
<P align=justify>Our experience, industry knowledge and
government service makes Serko &amp; Simon LLP uniquely
qualified to help our clients manage the complexities of a
rapidly changing global economy and the legislative and
judicial decisions affecting their businesses.
</P></TD></TR></TBODY></TABLE></TD>
<TD vAlign=top width=430>
<TABLE cellSpacing=0 cellPadding=0 width=374 border=0>
<TBODY>
<TR>
<TD vAlign=top width=374>
<DIV align=center><BR>
<TABLE borderColor=#666666 cellSpacing=0 cellPadding=0
width=100 align=center border=0>
<TBODY>
<TR>
<TD bgColor=#666666 colSpan=3><IMG id=window_tabs
height=63 src="serko-part2-filer/tradealerts.gif"
width=330 useMap=#window_tabsMapMap border=0
name=window_tabs></TD></TR>
<TR bgColor=#666666>
<TD width=5><IMG height=290
src="serko-part2-filer/left.gif" width=4></TD>
<TD width=321>


<DIV class=alertscenter id=TradeAlerts
style="Z-INDEX: 1; VISIBILITY: visible; MARGIN-LEFT: 10px; WIDTH: 291px; HEIGHT: 293px">
<DIV><SPAN class=828053819-29082005>Serko &amp; Simon LLP publishes
four primary Trade Alerts every month, consisting of two bi-weekly
Alerts, our Chemical &amp; Pharmaceutical Alert and our FDA
Alert.&nbsp; In addition, the firm also publishes real-time special
Trade&nbsp;Alerts, the most recent of which is sampled
below:</FONT></SPAN></DIV>
<UL>
<LI>
<DIV align=left><SPAN class=828053819-29082005>August 24, 2005:
"The U.S. Court of Appeals for the Federal Circuit just ruled that
in particular circumstances, commercial meaning must be 'general
<EM>throughout the trade</EM>, not throughout commerce in
general."</FONT></SPAN></DIV></LI></UL>
<DIV class=828053819-29082005><FONT size=2><FONT size=1>To view this
special Trade Alert in its entirety, click
<U>here</U>.</FONT></FONT><FONT size=2></FONT><FONT face=Arial
size=2>&nbsp;</FONT></DIV></DIV>
<DIV class=alertscenter id=BiWeekly
style="Z-INDEX: 1; VISIBILITY: hidden; MARGIN-LEFT: 10px; margin-top:-293px; WIDTH: 291px; POSITION: absolute; HEIGHT: 293px">Bi
Weekly Alerts go gere ! </DIV>
<DIV class=alertscenter id=ChemPharm
style="Z-INDEX: 1; VISIBILITY: hidden; MARGIN-LEFT: 10px; margin-top:-293px; WIDTH: 291px; POSITION: absolute; HEIGHT: 293px">Chem
&amp; Pharm Alerts go here!</DIV>
<DIV class=alertscenter id=FDA
style="Z-INDEX: 1; VISIBILITY: hidden; MARGIN-LEFT: 10px; margin-top:-293px; WIDTH: 291px; POSITION: absolute; HEIGHT: 293px">FDA
ALerts goes here! </DIV>



</TD>
<TD width=4><IMG height=290
src="serko-part2-filer/right.gif" width=4></TD></TR>
<TR>
<TD bgColor=#666666 colSpan=3><IMG height=15
src="serko-part2-filer/bottom.gif"
width=330></TD></TR></TBODY></TABLE><BR>


I couldn´t fit the whole source... so i took everything within that table.. I suppose

[bluntedbynature]

this is what it looks like with that code, i dont know how to make it work right in IE. here is the address http://www.serkoandsimon.com/index_test.html

[Siddan]

<TABLE cellSpacing=0 cellPadding=0 width=374 border=0>
<TBODY>
<TR>
<TD vAlign=top width=374>
<DIV align=center><BR>
<TABLE cellSpacing=0 cellPadding=0 width=100 align=center
border=0>
<TBODY>
<TR>
<TD bgColor=#666666 colSpan=3><IMG id=window_tabs
height=63 alt="" src="serko-part3-filer/tradealerts.gif"
width=330 useMap=#window_tabsMapMap border=0
name=window_tabs></TD></TR>
<TR bgColor=#666666>
<TD width=5><IMG height=290 alt=""
src="serko-part3-filer/left.gif" width=4></TD>
<TD width=321>


<DIV align=center>

that´s the villain

[bluntedbynature]

ummmmm ok? how do i get rid of this villian? i aint got no super heros lol.

[Siddan]

Sorry, I was not on computer the whole weekend...

but you just have to delete that tag... that is all. And also delete the closing tag for that Div.

It is centering the Layers so it won´t align to the left