Databases
StackOverflow2013
Postsdbo
POStrange CSS behavior
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStrange CSS behavior
    primarykey
    data
    text
    <p>Sorry for the length of the post. This is quite a weird problem and I want to give as much info as possible. </p> <p>I have the following css rules I am using for a horizontal navigation menu. The menu is created using ASP:repeaters and a database table of items. </p> <pre><code>#nav { margin: 0px; padding:0px; list-style-type: none; height: 20px; margin-right:auto; margin-left:auto; width:726px; } #nav &gt; li { margin:0px; padding:0px; display:inline-block; color: #FFFFFF; height:17px; border:0px; width:90.75px; text-align:center; position:relative; float:left; } #nav &gt; li &gt; ul { margin:0px; padding:0px; position: absolute; left: -999em; display:block; overflow:visible; z-index:100; width:150px; background-color:#eee; } #nav &gt; li:hover &gt; ul { left:0px; z-index:100; box-shadow: 0px 0px 5px #555; -moz-box-shadow: 0px 0px 5px #555; -webkit-box-shadow: 0px 0px 5px #555; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 5-7 */ filter: alpha(opacity=80); /* Netscape */ -moz-opacity: 0.8; /* Safari 1.x */ -khtml-opacity: 0.8; /* Good browsers */ opacity: 0.8; } #nav &gt; li &gt; ul &gt; li { left:0px; display:block; color:#333; width:150px; text-align:left; height:auto; } #nav a, #navbottom a { line-height:20px; display:block; height:20px; border-bottom:2px solid #0c1b53; } #nav a:link, #navbottom a:link, #nav a:visited, #navbottom a:visited { border-bottom:2px solid #0c1b53; color: #FFFFFF; text-decoration: none; } #nav a:hover, #navbottom a:hover { border-bottom:2px solid #fff; } #nav a:active, #navbottom a:active { border-bottom:2px solid #fff; color: #FEFFBD; text-decoration: none; } #nav &gt; li &gt; ul &gt; li a:link { margin:10px; line-height:15px; height:auto; color:#444; border-bottom: 1px solid #777; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 5-7 */ filter: alpha(opacity=100); /* Netscape */ -moz-opacity: 1.0; /* Safari 1.x */ -khtml-opacity: 1.0; /* Good browsers */ opacity: 1.0; } #nav &gt; li &gt; ul &gt; li a:hover { color:#222; border-bottom: 1px solid #555; } </code></pre> <p>The HTML it produces is below:</p> <pre><code>&lt;ul id="nav"&gt; &lt;li&gt; &lt;input type="hidden" name="ctl00$TopNavRepeat$ctl01$LinkIdField1" id="ctl00_TopNavRepeat_ctl01_LinkIdField1" value="1" /&gt; &lt;a id="ctl00_TopNavRepeat_ctl01_HyperLink1" title="Home Page" href="../default.aspx"&gt;Home &lt;/a&gt; &lt;ul&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;input type="hidden" name="ctl00$TopNavRepeat$ctl02$LinkIdField1" id="ctl00_TopNavRepeat_ctl02_LinkIdField1" value="10" /&gt; &lt;a id="ctl00_TopNavRepeat_ctl02_HyperLink1" title="News from the IMA" href="../news/list.aspx"&gt;News &lt;/a&gt; &lt;ul&gt;&lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;input type="hidden" name="ctl00$TopNavRepeat$ctl03$LinkIdField1" id="ctl00_TopNavRepeat_ctl03_LinkIdField1" value="11" /&gt; &lt;a id="ctl00_TopNavRepeat_ctl03_HyperLink1" title="About the IMA" href="../organisation/history.aspx"&gt;Organisation &lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl01_HyperLink1" title="about the IMA" class="dropdown_Item" href="../organisation/history.aspx"&gt;About &lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl02_HyperLink1" title="This is a description" class="dropdown_Item" href="list.aspx?type=all"&gt;Members &lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl03_HyperLink1" class="dropdown_Item" href="../Boats/list.aspx#"&gt;Boats&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;input type="hidden" name="ctl00$TopNavRepeat$ctl06$LinkIdField1" id="ctl00_TopNavRepeat_ctl06_LinkIdField1" value="14" /&gt; &lt;a id="ctl00_TopNavRepeat_ctl06_HyperLink1" href="../adverts"&gt;Ads &lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl01_HyperLink1" title="All For Sale Items" class="dropdown_Item" href="../adverts/list.aspx?type=sale"&gt;For Sale &lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl02_HyperLink1" title="All Wanted Items" class="dropdown_Item" href="../adverts/list.aspx?type=wanted"&gt;Wanted &lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl03_HyperLink1" title="Advertise with the IMA" class="dropdown_Item" href="../adverts/edit.aspx?action=New"&gt;Post an Ad &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>The Menu this produces (some list items have been omitted for shortness) is below. Despite the two item "Organisation" and "Ads" each having three child items and despite each child item seeming to be identical the second item in organisation displays with the rules for nav > li a instead of nav > li > ul > li a. </p> <p><a href="http://dl.dropbox.com/u/4913815/Untitled.png" rel="nofollow noreferrer">As the menu displays http://dl.dropbox.com/u/4913815/Untitled.png</a></p> <p>I've been going through it and as far as i cant tell what is happening. Can anyone explain this?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMichael Allen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POStrange CSS behavior
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POStrange CSS behavior
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI don't know how this could cause the problem, but I noticed Members is the only URL out of those you show that doesn't have a reference to the parent directory "../". As a test, maybe try changing the URL of members to "../organisation/history.aspx", even though that is not what you want it might reveal some strange quirk if it works that way.
      singulars
      1. POStrange CSS behavior
      1. USAaronLS
    2. COWhen I paste this code and CSS into Firebug, it comes out correct. The Members item gets the same nav > li > ul > li a CSS applied to it as the other items. If you load your site in Firefox with the Firebug plugin you can look an see if Members is inheriting some styles form something else.
      singulars
      1. POStrange CSS behavior
      1. USAaronLS
    3. COfound it, it was because the members link was defining itself as active and inheriting from the #nav a:active, which somehow overwrote the #nav > li > ul > li a:link rule. Thanks for the help
      singulars
      1. POStrange CSS behavior
      1. USMichael Allen
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload