CODEWITHSUNDEEP
cssmobilefontssizewidth
Jennifer Lost
Jennifer Lost

Reputation: 11

Cross Browser Font Width. Works in IE and Chrome, but not on my mobile browser (Galaxy S2)

Help! This box is exactly the same size as the length of the text at 100% zoom on IE and Chrome. But, when viewed on my mobile phone, the box overhangs the length of the text. Is it possible to fix this?

<style type="text/css">
#box{
width:375px;
background:blue;
font-size:16px;
font-family:Courier New, Courier, monospace;
}

#textbox{
background:pink;
font-size:16px;
font-family:Courier New, Courier, monospace;
}
</style>

<html>
<head>
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</head>
</html>

Upvotes: 1

Views: 411

Answers (1)

AJStacy
AJStacy

Reputation: 5233

Firstly, browsers will interpret font widths differently. Relying on the width of fonts is not ideal.

Instead, if you want the boxes to match the same width, wrap a <div> around them and set it.

<div class="wrapper">
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</div>

A couple other problems with the code you posted.

  1. You must put your embedded styles inside of the head tags.
  2. You must never put anything before the <html> tag except <!doctype>
  3. Never put <div>'s inside of a head. They only belong in the <body>

The <head> is used to initialize data. The <body> is used to display data.

Upvotes: 1

Related Questions