Home/ Questions/Q 8527933
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T08:41:21+00:00

The problem that i am facing is that text inside the a tag is

  • 0

The problem that i am facing is that text inside the a tag is not adjusting on a single line.

Here’s my html.

<html>
    <head>
        <link rel="stylesheet" href="style5.css" type="text/css">
    </head>

    <body>

    <div id="outer">

        <ul>
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">content</a></li>
            <li><a href="#">search</a></li>
            <li><a href="#">more</a></li>
        </ul>

        <div id="homepage">

            <a href="#">Set as Homepage</a>

        </div>

        <div id="clear">
        </div>

    </div>

    <div id="wrapper">

        <div id="pic">
            <img src="logo.png">
            <div id="content">
                <p> Secure Search </p>
            </div>
        </div>

        <div id="forms">

            <form>
                <input type="text" name="submit" size="70" style="font-size:20pt;"/>
            </form>
            <div id="pic_2">
                <img src="powerd-by-google.png">
            </div>

        </div>

        <div id="footer">
            © 2012 - <a href="#">We Respect your Privacy</a> - <a href="#">About AVG Secure Search</a>
        </div>
    </div>

    </body>


</html>

and here’s my css.

body
{
    margin: 0;
    padding: 0;
    background-color: white;
}

h1,h2,h3
{
    margin: 0;
    padding: 0;
}

p,ul,ol,li
{
    margin: 0;
    padding: 0;
}

#outer
{
    background-color: rgb(67,68,71);
}

#outer ul
{
    list-style: none;
    margin-left: 5px;
    border-left: 1px solid;
}

#outer li
{
    float: left;

}

.current
{
    background-color: rgb(56,63,137);
}

#outer a
{
    width: 90px;
    display: block;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    color: white;
    border-right: 1px solid;
    padding: 5px;
}

#outer a:hover
{
    color: black;
    background-color: white;
}

#outer .current a:hover
{
    color: white;
    background-color: inherit;
}

#homepage a
{
    float: right;
    font-weight: none;
    color: white;
    background-color: rgb(67,68,71);
    display: inline;
    text-transform: lowercase;
    border-right: none;
}

#homepage a:hover
{
    color: white;
    background-color: inherit;
}

#clear
{
    clear: both;
}


#wrapper 
{
    width: 960px;
    margin: 0 auto;
    overflow: auto;
}

#pic
{
    margin-top: 100px;
    margin-left: 389px;
    position: relative;
}

#content
{
    position: absolute;
    top: 60px;
    left: 90px;
}

#forms
{
    margin-top: 50px;
    position: relative;
}

#pic_2
{
    position: absolute;
    top: 0px;
    left: 867px;
}

#footer
{
    width: 500px;
    margin: 375px auto 0px;
}

#footer a
{
    text-decoration: none;
}

now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.

Any suggestions in this matter would be really helpful.

thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m assuming you’re talking about the ‘set as homepage’ button.

    If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.

    You can fix this by simply adding the css style width: inherit; to #homepage a

    Example:

    • 0