CODEWITHSUNDEEP
htmlcss
innomotion media
innomotion media

Reputation: 922

HTML font appears to be different when used in table compared to when used outside of table

I am currently building my first webpage using a custom font from the CSS. This looks like this:

  @font-face {
      font-family: "Baiti";
      src: url("./fonts/baiti.ttf");
    }
    body { font-family: "Baiti", serif }



.navbar 
{
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

/* Links inside the navbar */
.navbar a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}

/* Main content */
.main {
  margin-top: 30px; /* Add a top margin to avoid content overlay */
}

.container{
    width:900px;
    margin:auto;
}

.box-2 /*targeting class from HTML*/
{
    border:8px dotted #ccc;
}

I am now putting some text into my page. Some is inside a table while other is outside of a table:

   <html>

    <head>
        <title>innomotion media</title>
    
        <!--reference CSS file, will only affect CSS PART, HTML comes first-->
        <link rel="stylesheet" 
          type"text/css" 
          href="styles.css">              
    </head>

    <body>
    
        <!--NavBar-->       
    
        <div class="navbar">
            <a href="#missing">Contact</a>
            <a href="#missing">What we do</a>
            <a href="#missing">Who we are</a>
            <a href="#missing">Home</a>
        </div>
        
        <!--Heading-->      
        
        <div class="container"> <!--width set in css-->
        
            <div align="center" style="padding-top: 50px">          
                <img 
                    src="./img/banner_top.jpg"
                    width=100%
                </img>  
            </div>
    
            <div align="center" style="padding-top: 10px" > 
                <font color="#534f4f" size="+1">    
                    <h1>Hello, friend.</h1>
                </font>
            </div>
            <div align="justify">   
                <font color="#534f4f" size="+2" >   
                    <p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
                        We offer you the cheapest but also the quickest way of getting your app or game finished and monetized. 
                        Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
                        shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.           
                    </p>        
                </font>
            </div>


            <div align="center" class="box-2">
                <div align="center> 
                    <font color="#534f4f" size="+1">    
                        <h1>Who we are</h1>
                    </font>
                </div>
                <div style="padding-left: 15px; padding-right: 15px">   
                    <table border="0">
                        <tr> <!--tablerow-->
                            <th width=400px>
                                <div align="center">    
                                    <img 
                                        src="./img/me.png"
                                        width=60%
                                    </img>  
                                </div>
                            </th>   
                            <th width=400px>
                                <div align="justify">   
                                    <font color="#534f4f" size="+2" >   
                                        <h3>Julius Tolksdorf</h3>
                                        <p>CEO of innomotion media and head of software developement.<br>
                                            He will be your primary contact during the planning and developement processes.
                                            Julius has already finished about 20 apps & games and has years of experience being an Android developer.
                                        </p>
                                    </font>
                                </div>
                            </th>   
                        </rt> <!--for padding-->
                            <tr height=20px/>
                        </rt>
    
                    </table>
                </div>
            </div>


        
        </div>

    </body>
    
</html>

But the result looks like this:

enter image description here

So, if my eyes aren't deceiving me, both texts don't look the same, or do they? To me, the one inside the table seems to be "bolder" or "bigger" in a way? or maybe even a bit darker. However, this cannot be from the HTML code I wrote, or am I just blind here?

Upvotes: 0

Views: 475

Answers (3)

Tyler Sells
Tyler Sells

Reputation: 503

If you use the dev tools in Chrome to inspect the element, you will see that the font-weight is being inherited from the th cell. You should not be using table headers this way.

I would strongly recommend against using table-based layouts in modern web development, but in this instance, you should be putting your header on one row and move your image and paragraph to a new row, using proper td table cells.

[Edit]

To elaborate further, tables are the old way to achieve a small part of what the modern grid properties achieve. To achieve the desired layout, you will need to use two rows, the first of which should span both columns:

.center{
text-align:center;
}
<table border="0">
    <tr>
	<th colspan=2>
	    <h1>Julius Tolksdorf</h1>
	</th>
    </tr>
    <tr>
	<td class="center"> 
           <img 
            src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
            width=60%
           />
        </td>  
        <td class="center">
	<font color="#534f4f" size="+2" >   
	     <p>CEO of innomotion media and head of software developement. 
		<br>
		He will be your primary contact during the planning and developement processes.
		Julius has already finished about 20 apps & games and has years of experience being an Android developer.
	     </p>
	</font>
</td>
      </tr>

</table>

Upvotes: 1

nvioli
nvioli

Reputation: 4209

The problem is that you are using a th tag, which applies the style font-weight:bold (in my browser at least, and presumably yours).

One simple solution is to add a css rule to override this browser default. A better solution is probably to change the ths (table header) to tds (table cell).

I was able to find this problem by copying your html into the stack editor, then right clicking on the bold text, choosing Inspect, then going to computed properties and looking at the applied properties. I suggest you get comfortable with the inspector; it's invaluable in debugging webpage problems.

th {
  font-weight:normal;
}
<div class="container"> <!--width set in css-->

            <div align="center" style="padding-top: 50px">          
                <img 
                    src="./img/banner_top.jpg"
                    width=100%
                </img>  
            </div>

            <div align="center" style="padding-top: 10px" > 
                <font color="#534f4f" size="+1">    
                    <h1>Hello, friend.</h1>
                </font>
            </div>
            <div align="justify">   
                <font color="#534f4f" size="+2" >   
                    <p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
                        We offer you the cheapest but also the quickest way of getting your app or game finished and monetized. 
                        Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
                        shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.           
                    </p>        
                </font>
            </div>


            <div align="center" class="box-2">
                <div align="center> 
                    <font color="#534f4f" size="+1">    
                        <h1>Who we are</h1>
                    </font>
                </div>
                <div style="padding-left: 15px; padding-right: 15px">   
                    <table border="0">
                        <tr> <!--tablerow-->
                            <th width=400px>
                                <div align="center">    
                                    <img 
                                        src="./img/me.png"
                                        width=60%
                                    </img>  
                                </div>
                            </th>   
                            <th width=400px>
                                <div align="justify">   
                                    <font color="#534f4f" size="+2" >   
                                        <h3>Julius Tolksdorf</h3>
                                        <p>CEO of innomotion media and head of software developement.<br>
                                            He will be your primary contact during the planning and developement processes.
                                            Julius has already finished about 20 apps & games and has years of experience being an Android developer.
                                        </p>
                                    </font>
                                </div>
                            </th>   
                        </rt> <!--for padding-->
                            <tr height=20px/>
                        </rt>

                    </table>
                </div>
            </div>

Upvotes: 2

Donny
Donny

Reputation: 487

You are applying size = "+2" to all the text and not just the title

Change this:

<font color="#534f4f" size="+2" >   
     <h3>Julius Tolksdorf</h3>
     <p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes.  Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
 </font>

To this:

<font color="#534f4f" size="+2" >   
     <h3>Julius Tolksdorf</h3>
 </font>
     <p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes.  Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>

Also, check class="box-2" which is assigned only to the first text

Upvotes: 0

Related Questions