View source for User:Eabrace/Hidden Overlaps

Trying to find out why NavFrame divboxes overlap other boxes and how to prevent this from happening.

== Experiment One ==
{{Zone
|{{Hero Hazard Zone}}
|Zone Name=Firebase Zulu
|Zone Map=Map_FirebaseZulu.jpg
|Type of Zone=Hero Hazard Zone
|Level Range=40-44
|Trainer=''none''
|Task Force Contact=[[Dr. Quaterfield]]
|Event=''none''
|Exploration Badges=''none''
|Plaques=''none''
|Day Jobs=[[Dimensional Explorer Badge|Dimensional Explorer]]
|Enemies=[[Crey]], [[Nemesis]], [[Soldiers of Rularuu|Rularuu]], [[Shadow Shard Reflections|Shadow&nbsp;Shard&nbsp;Reflections]]
|Connecting Zones=[[Cascade Archipelago|Cascade&nbsp;Archipelago]], [[The Chantry|Chantry]], [[Peregrine Island|Peregrine&nbsp;Island]], [[The Storm Palace|Storm&nbsp;Palace]]
|Lines=''none''
|VidiotMaps File=firebase_zulu
}}

Placing some text here to bump the NavFrame down a bit.

This should make it easier to see the overlap against the Zone infobox on the right side of the page.

<div class="NavFrame" style="border:none;">
<div class="NavHead" style="font-weight:bold; background-color:transparent; text-align:center; background: #CCCCFF; border: solid 1px #222299;">Header Text</div>
<div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div>
</div>

{{clr}}

== Experiment Two ==
{{Infobox Contact
|name=Shadowstar
|image=Shadowstar.jpg
|img_capt=Warshade Facilitator
|zone=[[Galaxy City]]
|x=696.5|y=64|z=-953
|levels=1-50
|introed=[[Coyote]]
|intros=[[Kip Cantorum]]
|enemies={{Enemy Circle of Thorns}}
{{Enemy Clockwork}}
{{Enemy Council}}
{{Enemy Freakshow}}
{{Enemy Hydra}}
{{Enemy Outcasts}}
{{Enemy Trolls}}
{{Enemy Vahzilok}}
}}

Placing some text here to bump the NavFrame down a bit.

Using a contact infobox this time to see whether the overlapping behavior is identical or if it's something peculiar to the interaction with zone infoboxes.

<div class="NavFrame" style="border:none;">
<div class="NavHead" style="font-weight:bold; background-color:transparent; text-align:center; background: #CCCCFF; border: solid 1px #222299;">Header Text</div>
<div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div>
</div>

{{clr}}

== Experiment Three ==

[[File:Crnout tapestry01.png|right|200px]]

Placing some text here to bump the NavFrame down a bit.

Checking to see if the NavFrame will overlap an image this time.

<div class="NavFrame" style="border:none;">
<div class="NavHead" style="font-weight:bold; background-color:transparent; text-align:center; background: #CCCCFF; border: solid 1px #222299;">Header Text</div>
<div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div>
</div>

{{clr}}

== Experiment Four ==

[[File:Crnout tapestry01.png|right|200px]]

<div style="float:left">
Placing some text here to bump the NavFrame down a bit.

All content between the image and the end of the NavFrame are enclosed in a float:left divbox this time.

<div class="NavFrame" style="border:none;">
<div class="NavHead" style="font-weight:bold; background-color:transparent; text-align:center; background: #CCCCFF; border: solid 1px #222299;">Header Text</div>
<div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div>
</div>
</div>

More text to see where the boundaries are on the region that seems to have been created in between the image and the NavFrame.
{{clr}}

== Experiment Five ==

[[File:Crnout tapestry01.png|right|200px]]
{{clrl}}<div style="float:left; border:solid 1px #000000">
Placing some text here to bump the NavFrame down a bit.

Border added to float:left divbox this time.

<div class="NavFrame" style="border:none;">
<div class="NavHead" style="font-weight:bold; background-color:transparent; text-align:center; background: #CCCCFF; border: solid 1px #222299;">Header Text</div>
<div class="NavContent" style="font-weight:normal; background-color:transparent; text-align:left; display:none; padding: 5px; border: solid 1px #222299; border-top: 0px;">Content text.</div>
</div>
</div>

<div style="border:solid 1px #000000;">More text to see where the boundaries are on the region that seems to have been created in between the image and the NavFrame.  This time this text is enclosed in its own divbox with a border.  This border seems to span the entire width of the page, overlapping both the image and float:left box.  I'm finding it particularly odd that the text does not overlap the right and left floating boxes, but the boundary of the box itself does.</div>
{{clr}}

Observations:
* When viewed with ?action=render, the layout looks different from what I get on the wiki.
* Checking the generated source code, I find that the divbox containing the image is not created with style="float:right", but is instead created with class="floatright".  I didn't expect that.