2 Replies - 484 Views - Last Post: 28 July 2014 - 11:25 AM

#1 CMcCracken  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 28-July 14

Can't get font to change size in CSS

Posted 28 July 2014 - 11:10 AM

I have tried putting in code in the #left_menu .home_menu {font-size: 100px; }. I can't get the font to change size. I have also tried just putting it in the #left_menu code as well. Still nothing works. Any ideas of what I may be doing wrong?

This is my master_pg code:
<%@ Master Language="vb" AutoEventWireup="false" CodeBehind="master_pg.master.vb" Inherits="TPSWeb.master_pg" %>

<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxCallback" TagPrefix="dxcb" %>
<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxTimer" TagPrefix="dxt" %>
<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxLoadingPanel" TagPrefix="dxlp" %>
<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxMenu" TagPrefix="dxm" %>
<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>

<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Transportation Motorpool System</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="~/Content/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <form id="form1" runat="server">
        <div id="topContent">
            <asp:Image class="icon_img" ImageUrl="~/Resources/red beetle.jpg" runat="server" />
            <a href="Default.aspx" class="title">Transportation Motorpool System</a>
        </div>

        <div runat="server" id="left_menu" style="float: left;">
            <%-- Home --%>
            <dxm:ASPxMenu runat="server" ID="home_menu" CssClass="home_menu" ClientIDMode="AutoID" >
                <Items>
                    <dxm:MenuItem  text="Home">
                        <Items>
                            <dxm:MenuItem NavigateUrl="Home.aspx" Text="Welcome"></dxm:MenuItem>
                            <dxm:MenuItem NavigateUrl="Home.aspx" Text="Preferences"></dxm:MenuItem>
                        </Items>
                    </dxm:MenuItem>
                </Items>
            </dxm:ASPxMenu>

            <%-- Administration --%>
            <dxm:ASPxMenu runat="server" ID="admin_menu" CssClass="admin_menu" ClientIDMode="AutoID">
                <Items>
                    <dxm:MenuItem Text="Administration">
                        <Items>
                            <dxm:MenuItem NavigateUrl="Home.aspx" Text="Users"></dxm:MenuItem>
                            <dxm:MenuItem NavigateUrl="Home.aspx" Text="News"></dxm:MenuItem>
                            <dxm:MenuItem NavigateUrl="Home.aspx" Text="Errors"></dxm:MenuItem>
                        </Items>
                    </dxm:MenuItem>
                </Items>
            </dxm:ASPxMenu>

            <%-- Reports --%>
            <dxm:ASPxMenu runat="server" ID="report_menu" CssClass="report_menu" ClientIDMode="AutoID">
                <Items>
                    <dxm:MenuItem Text="Reports">
                        <Items>
                        </Items>
                    </dxm:MenuItem>
                </Items>
            </dxm:ASPxMenu>

            <%-- Vehicles --%>
            <dxm:ASPxMenu runat="server" ID="vehicle_menu" CssClass="vehicle_menu" ClientIDMode="AutoID">
                <Items>
                    <dxm:MenuItem Text="Vehicles">
                        <Items>
                            <dxm:MenuItem NavigateUrl="Home.aspx" Text="All Vehicles"></dxm:MenuItem>
                        </Items>
                    </dxm:MenuItem>
                </Items>
            </dxm:ASPxMenu>

            <%-- Reservations --%>
            <dxm:ASPxMenu runat="server" ID="reservation_menu" CssClass="reservation_menu" ClientIDMode="AutoID">
                <Items>
                    <dxm:MenuItem Text="Reservations">
                        <Items>
                            <dxm:MenuItem NavigateUrl="Home.aspx" Text="All Reservations"></dxm:MenuItem>
                            <dxm:MenuItem NavigateUrl="Home.aspx" Text="New Reservation"></dxm:MenuItem>
                        </Items>
                    </dxm:MenuItem>
                </Items>
            </dxm:ASPxMenu>
        </div>
    </form>
</body>
</html>



This is the CSS I have
body {
    margin: 0px;
    font-size: 100px;
    background-color: #C5d5e5;
}

h1, h2 {
    margin: 0px;
}

#topContent {
    margin-top: 0;
    text-align: left;
    color: black;
    background-color: #15293d;
    font-size: 30px;
    font-family: 'Bradley Hand ITC';
    border-bottom: none;
    margin-bottom: 0px;
}

    #topContent a {
        align-items: center;
        text-decoration: none;
        background-color: transparent;
        color: #C5d5e5;
    }

    #topContent .icon_img {
        width: 150px;
        height: 100px;
    }

    #topContent .title {
        padding-left: 20px;
    }

#left_menu {
    background-color: #15293d;
    width: 160px;
    height: 2000px;
}

    #left_menu .home_menu {
        font-size: 100px;
        color: #fff;
        background-color: transparent;
        border: none;
    }

    #left_menu .admin_menu {
        color: #fff;
        background-color: transparent;
        border: none;
    }

    #left_menu .report_menu {
        color: #fff;
        background-color: transparent;
        border: none;
    }

    #left_menu .vehicle_menu {
        color: #fff;
        background-color: transparent;
        border: none;
    }

    #left_menu .reservation_menu {
        color: #fff;
        background-color: transparent;
        border: none;
    }




Is This A Good Question/Topic? 0
  • +

Replies To: Can't get font to change size in CSS

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4360
  • View blog
  • Posts: 12,179
  • Joined: 18-April 07

Re: Can't get font to change size in CSS

Posted 28 July 2014 - 11:19 AM

Well when you show it in a browser, run your developer tools on the menu element. This will show you the styles being applied to the element. You will probably see the font-size style in the #left_menu .home_menu is crossed out. Look for element where font-size is not crossed out. That will tell you which element is overriding your font size.

:)
Was This Post Helpful? 1
  • +
  • -

#3 CMcCracken  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 28-July 14

Re: Can't get font to change size in CSS

Posted 28 July 2014 - 11:25 AM

That worked perfectly!! Thank you so much. My theme that I was using through Devexpress was over riding my font I was trying to add. I didn't even know about the developer tools in the browser. Thank you for teaching me something new!!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1