Help with designing header for site in ASP and VB

easyeman

Active member
Joined
Nov 16, 2005
Messages
28
Location
Decatur, AL
Programming Experience
1-3
Hey, I am trying to design a header for our web site...and I'm having a little trouble. I basically have it looking how I want to, but for some reason it doesn't want to display right. I mean that in the program I'm using (Visual Web Developer) the design looks good, but when I switch to code and back, the words get jumbled up, but when I simply put a space and delete it, it all returns to normal. But it keeps doing that and I guess something in the code is making it do that so after it is saved and I try to preview it, it looks nothing like it should.

I'll attach the two pictures and code below so you can see what I'm getting and what I have coded. I just need help to see what is going on and why it is doing it. I've looked at everything and tried a few things, and I know it cannot be that hard since it is simple HTML, but for some reason I just cannot get it to appear right. So any help would be great, and hopefully someone can fix it and show me what was wrong. I greatly appreciate it.

http://www.nafeco.com/images/header_goal.jpg
http://www.nafeco.com/images/header_now.jpg

The first is how I want it to look and it does in the program, but then it ends up looking like the second picture when I switch to code and back and also in the previews in browser.

And here's the code that generates that header. Again, I greatly appreciate the help as I can't seem to get this looking right and have tried researching and different things, but I either butcher it more or it just ends up the same...
VB.NET:
<%@ Master Language="VB"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>NAFECO header</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table background="http://www.nafeco.com/images/header.jpg" width=772>
            <tr>
                <td rowspan="2">
                <asp:HyperLink id="HyperLink1" runat="server" ImageUrl="http://www.nafeco.com/images/NAFECO_header_main.jpg" NavigateUrl="~/default.aspx"></asp:HyperLink></td>
                <td colspan="6" style="height: 20px">
                </td>
                <td border="0" colspan="2" style="width: 10px; height: 20px;">
                </td>
                <td background="http://www.nafeco.com/images/header_menu.jpg" colspan="11" style="text-align: right; width: 194px; height: 20px;">
                    <span style="font-family:Arial"><asp:HyperLink id="HyperLink2" runat="server" NavigateUrl="~/default.aspx" CssClass="HeaderLink" Font-Size="10pt">Home</asp:HyperLink> 
                    <asp:HyperLink ID="MyAccountLink" runat="server" CssClass="HeaderLink" NavigateUrl="~/Account/MyAccount.aspx" Font-Bold="False" Font-Size="10pt">My Account</asp:HyperLink> 
                    <asp:HyperLink ID="HyperLink4" runat="server" CssClass="HeaderLink" NavigateUrl="~/info/ContactUs.aspx" Font-Size="10pt">Contact Us</asp:HyperLink> 
                    <asp:HyperLink ID="HyperLink6" runat="server" CssClass="HeaderLink" NavigateUrl="~/info/AboutUs.aspx" Font-Size="10pt">About Us</asp:HyperLink> 
                    <asp:HyperLink ID="HyperLink8" runat="server" CssClass="HeaderLink" NavigateUrl="~/info/FAQ.aspx" Font-Size="10pt">Help</asp:HyperLink> 
                    <asp:HyperLink ID="SignInHL" runat="server" CssClass="HeaderLink" Font-Size="10pt">Log In</asp:HyperLink> 
                        <asp:HyperLink ID="HyperLink3" runat="server" CssClass="HeaderLink" NavigateUrl="~/ShoppingCart.aspx" Font-Size="10pt">Cart</asp:HyperLink><asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="http://www.nafeco.com/images/viewcart.gif" NavigateUrl="~/ShoppingCart.aspx"></asp:HyperLink></span></td>
            </tr>
            <tr>
                <td colspan="1" style="height: 35px">
                </td>
                <td colspan="5" style="width: 15px; height: 35px;">
                    <br />
                    <span style="font-size: 8pt; color: #ffffff; font-family: Arial"></span>
                    <strong><span style="font-size: 7pt"><span style="font-family: Verdana"><span style="color: #ffffff">
                        </span></span></span></strong>
                    </td>
                <td colspan="5" style="text-align: left; height: 35px;">
                    <strong><span style="font-size: 8pt; color: #ffffff; font-family: Arial">
                        <br />
                        North America
                        Fire Equipment Company</span></strong></td>
                <td colspan="6" style="text-align: right; height: 35px;">
                        <asp:label id="LoginLabel" runat="server" font-names="verdana,arial" font-bold="True" font-size="6pt"
                                            forecolor="white">You Are Not Signed In</asp:label><br />
                    <span style="font-size: 8pt; color: white; font-family: Arial"><strong>
                        Product Search: 
                    </strong></span>
                    <input id="Text1" maxlength="30" name="txtSearch" size="14" align="right" style="font-size: 7pt;
                        width: 130px; font-family: Verdana, Arial; height: 16px" type="text" />
                    <input id="Image1" runat="server" src="http://www.nafeco.com/images/go.gif" type="image" style="width: 16px; height: 16px" /></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
 
Just find this line
VB.NET:
< td background="[URL="http://www.nafeco.com/images/header_menu.jpg"]http://www.nafeco.com/images/header_menu.jpg[/URL]" colspan="2" style="text-align: right; width: 194px; height: auto;" >
and change the width property to auto width: auto;
Btw, remove those colspans except leave for the cell where all these links are stored ;)
Regards ;)
 
kulrom said:
Just find this line
VB.NET:
< td background="[URL="http://www.nafeco.com/images/header_menu.jpg"]http://www.nafeco.com/images/header_menu.jpg[/URL]" colspan="2" style="text-align: right; width: 194px; height: auto;" >
and change the width property to auto width: auto;
Btw, remove those colspans except leave for the cell where all these links are stored ;)
Regards ;)

Awesome! Thanks a lot. Yeah just changing that one width thing to auto helped it. It's not bunching it up but it stayed the same. I just need to update the image a bit since it looks like that circle thing is off haha, but that's no big deal.

Yeah I was doing it all in WYSIWYG mode, which is always a lie since it's never 100% what you get. So I guess it added all those colspan things in there. I'll remove them except for the one that's with all those links and see what it does. Hopefully that'll make it work perfectly. I appreciate the help...I figured I was just overlooking something and thought I had that width set to auto...I guess setting a fixed width on that and having colspan was causing it to conflict and mixing the words up. Again thanks
 
Back
Top