locked
cutoff w in css RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User702049738 posted

    Hello experts;

    In the following code below, how do i prevent the "w" from being cutoff

    https://jsfiddle.net/a1sbtttd/6/

    Friday, March 9, 2018 3:19 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User2103319870 posted

    how do i prevent the "w" from being cutoff

    You are trying to apply padding to main div with width set as 100%. Width property specifies the size of the content area. Padding, borders, and margins are added to it.

    As a solution add the padding to inner anchor tag as well like  below

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
#bottomframe {
            background-color: black;
            height: 20px;
            padding: 5px;
            border-top: 1px solid #ABABAB;
            ;
            left: 0;
            bottom: 0;
            width: 100%;
     }

a.paddingstyle
{
  padding: 5px;
}
</style>
</head>
<body >
   <div id="bottomframe" align="right" Style ="color:white;">
     <a class="paddingstyle" href="www.google.com"> go home right now </a>
   </div>
</body>
</html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 9, 2018 6:09 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User2103319870 posted

    how do i prevent the "w" from being cutoff

    You are trying to apply padding to main div with width set as 100%. Width property specifies the size of the content area. Padding, borders, and margins are added to it.

    As a solution add the padding to inner anchor tag as well like  below

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
#bottomframe {
            background-color: black;
            height: 20px;
            padding: 5px;
            border-top: 1px solid #ABABAB;
            ;
            left: 0;
            bottom: 0;
            width: 100%;
     }

a.paddingstyle
{
  padding: 5px;
}
</style>
</head>
<body >
   <div id="bottomframe" align="right" Style ="color:white;">
     <a class="paddingstyle" href="www.google.com"> go home right now </a>
   </div>
</body>
</html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 9, 2018 6:09 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1838255255 posted

    Hi olybobo,

    According to your description and code, i make a modify based on your code through your needs, please check:

    Sample Code: 

    <head runat="server">
    <title></title>
    <style>
        #bottomframe {
            background-color: black;
            height: 20px;
            padding: 5px;
            border-top: 1px solid #ABABAB;
            ;
            left: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="bottomframe" align="right" style="color: white;">
                <a style="margin-right: 10px;" href="www.google.com">go home right now </a>
            </div>
        </div>
    </form>
</body>

    Best Regards,

    Eric Du 

    Monday, March 12, 2018 2:50 AM