Strange Behavior w/ Positioning

Question

kkemerait 0 Newbie Poster

15 Years Ago

I have reduced the problem to the smallest code required to reproduce it. It consists of a menu using an unsorted list <ul> in my MasterPage.master file with some css in the stylesheet.css (there are images referenced in the code, but not required to see the problem).

Here is what happens. When the project is run .. everything is fine, but in design mode (VS 2008) the menu is left-aligned in the masterpage (like is should be) but the menu appears right-aligned in any content page that uses that master page! There is NO other code in the content pages ... try it out, and if you can help I'd really appreciate it, I might even get some sleep tonight!

StyleSheet.css

#header{BACKGROUND:url(images/menu/bg.gif) #dae0d2 repeat-x 50% bottom;FLOAT:left;FONT-SIZE:93%;LINE-HEIGHT:normal;WIDTH:100%}
#header #current{background:url(images/menu/left_on.gif)}
#header #current A{background:url(images/menu/right_on.gif);COLOR:rgb(51,51,0);PADDING-BOTTOM:5px}
#header A{BACKGROUND:url(images/menu/right.gif) no-repeat right top;COLOR:rgb(102,85,0);DISPLAY:block;FLOAT:left;FONT-WEIGHT:bold;padding:5px 15px 4px 6px;TEXT-DECORATION:none}
#header A{FLOAT:none}
#header A:hover{COLOR:rgb(51,51,0)}
#header LI{BACKGROUND:url(images/menu/left.gif) no-repeat left top;FLOAT:left;font:small/1.1em Georgia,Serif;MARGIN:0px;padding:0px 0px 0px 9px}
#header UL{list-style:none;MARGIN:0px;padding:10px 10px 0px}
UNKNOWN{FONT-SIZE:small}

MasterPage.master code

<body>
            
    <form id="form1" runat="server">
    <center> 
     
        <asp:Panel ID="c2panel"  runat="server">

            <div id="header" >
                <ul>                
                    <li><a href= "../admin/default.aspx">Admin</a></li>                
                    <li><a href="">Inventory</a></li>
                    <li><a href="">Manufacturing</a></li>
                    <li><a href="">Quality</a></li>
                    <li><a href="">Purchasing</a></li>
                </ul>
            </div>
          

            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
                                                            
        </asp:Panel>
    
    </center>     
    </form>
    
</body>

Thanks all!

asp.net

2 Contributors
5 Replies
84 Views
9 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by sknake

sknake 1,622 Senior Poster

15 Years Ago

To be honest I think you need to finish with threads you have started before you expect more help (http://www.daniweb.com/forums/thread196736.html). The same advice I gave you in the previous thread about staying away from IDs will also fix your problem here.

Think about what VS is doing in the core while rendering and look at IDs in content pages descended from master pages.

sknake 1,622 Senior Poster

15 Years Ago

This works... IDs get hairy altogether when using master pages so I would advise staying away from them wherever possible.

<form id="form1" runat="server">
    <center> 
     
        <asp:Panel ID="c2panel"  runat="server">

            <div id="header" class="head">
                <ul class="head">                
                    <li><a href= "../admin/default.aspx">Admin</a></li>                
                    <li><a href="">Inventory</a></li>
                    <li><a href="">Manufacturing</a></li>
                    <li><a href="">Quality</a></li>
                    <li><a href="">Purchasing</a></li>
                </ul>
            </div>
          

            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
                                                            
        </asp:Panel>
    
    </center>     
    </form>

.head{BACKGROUND:url(images/menu/bg.gif) #dae0d2 repeat-x 50% bottom;FLOAT:left;FONT-SIZE:93%;LINE-HEIGHT:normal;WIDTH:100%}
.head #current{background:url(images/menu/left_on.gif)}
.head #current A{background:url(images/menu/right_on.gif);COLOR:rgb(51,51,0);PADDING-BOTTOM:5px}
.head A{BACKGROUND:url(images/menu/right.gif) no-repeat right top;COLOR:rgb(102,85,0);DISPLAY:block;FLOAT:left;FONT-WEIGHT:bold;padding:5px 15px 4px 6px;TEXT-DECORATION:none}
.head A{FLOAT:none}
.head A:hover{COLOR:rgb(51,51,0)}
.head LI{BACKGROUND:url(images/menu/left.gif) no-repeat left top;FLOAT:left;font:small/1.1em Georgia,Serif;MARGIN:0px;padding:0px 0px 0px 9px}
.head UL{list-style:none;MARGIN:0px;padding:10px 10px 0px}
UNKNOWN{FONT-SIZE:small}

Also I did not think you had changed what you were doing since I still see #current in your markup. You may want to change your CSS to reflect the updates.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kkemerait 0 Newbie Poster · Answer 1 · 2009-06-11T02:47:09+00:00

To be honest I think you need to finish with threads you have started before you expect more help (http://www.daniweb.com/forums/thread196736.html). The same advice I gave you in the previous thread about staying away from IDs will also fix your problem here.

Think about what VS is doing in the core while rendering and look at IDs in content pages descended from master pages.

Well, let's ignore the snippit of sarcasm for the moment ... in the first post you suggested staying away from "Changing" ID, that is not the case here .. nothing is being dynamically changed and if the IDs were somehow being "lost" in the content page then I would think they would lose all the formatting associated with that ID not just the positioning. I am not an expert at this which is why I come here for help. Regarding the first post... I changed what I used so it was no longer a problem.

Thanks

kkemerait 0 Newbie Poster · Answer 2 · 2009-06-11T03:06:52+00:00

This works... IDs get hairy altogether when using master pages so I would advise staying away from them wherever possible.

<form id="form1" runat="server">
    <center> 
     
        <asp:Panel ID="c2panel"  runat="server">

            <div id="header" class="head">
                <ul class="head">                
                    <li><a href= "../admin/default.aspx">Admin</a></li>                
                    <li><a href="">Inventory</a></li>
                    <li><a href="">Manufacturing</a></li>
                    <li><a href="">Quality</a></li>
                    <li><a href="">Purchasing</a></li>
                </ul>
            </div>
          

            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
                                                            
        </asp:Panel>
    
    </center>     
    </form>

.head{BACKGROUND:url(images/menu/bg.gif) #dae0d2 repeat-x 50% bottom;FLOAT:left;FONT-SIZE:93%;LINE-HEIGHT:normal;WIDTH:100%}
.head #current{background:url(images/menu/left_on.gif)}
.head #current A{background:url(images/menu/right_on.gif);COLOR:rgb(51,51,0);PADDING-BOTTOM:5px}
.head A{BACKGROUND:url(images/menu/right.gif) no-repeat right top;COLOR:rgb(102,85,0);DISPLAY:block;FLOAT:left;FONT-WEIGHT:bold;padding:5px 15px 4px 6px;TEXT-DECORATION:none}
.head A{FLOAT:none}
.head A:hover{COLOR:rgb(51,51,0)}
.head LI{BACKGROUND:url(images/menu/left.gif) no-repeat left top;FLOAT:left;font:small/1.1em Georgia,Serif;MARGIN:0px;padding:0px 0px 0px 9px}
.head UL{list-style:none;MARGIN:0px;padding:10px 10px 0px}
UNKNOWN{FONT-SIZE:small}

Also I did not think you had changed what you were doing since I still see #current in your markup. You may want to change your CSS to reflect the updates.

Thanks ... works great .. I stand corrected and I do appreciate the help... Thanks again

sknake 1,622 Senior Poster Featured Poster · Answer 3 · 2009-06-11T04:20:16+00:00

You're welcome and good luck.

Please mark this thread as solved if I have answered your question.