HTML code not displaying correctly on my web page

#1

Hi everybody,

I have some trouble with an HTML code. The code is for a calculator and I want it to be displayed on my sidebar and inside posts.
Unfortunately, the result is awful and the calculator deformed.
Here’s the code:

<div>
	<link rel="stylesheet" type="text/css" href="css/bmr-main.css">
	<link rel="stylesheet" type="text/css" href="css/bmr-light-simplistic-grey.css">
	<div id="bmrNoScript">
		Please enable JavaScript to run this calculator
	</div>
	<!-- Begin Calculator Inputs Area -->
	<form name="bmrCalculator" class="bmrCalculator">
		<div class="bmr-calculator-container js-bmr-calculator">
			<div class="bmr-calculator-header">
				Basal Metabolic Rate (BMR)
			</div>
			<div class="bmr-calculator-item-container" id="bmrMeasurement">
				<label> Measurement units </label>
				<div class="bmr-tip">
					? <span class="bmr-tiptext">Metric (kg/cm) or
						<br>
						Imperial (lb/inch)</span>
				</div>
				<div class="bmr-calculator-item">
					<button class="bmr-split-button bmr-sb-1 bmr-active" id="bmrMeasurement1" onclick="bmrSetUnit('m', event)">
						Metric
					</button>
					<button class="bmr-split-button bmr-sb-2" id="bmrMeasurement2" onclick="bmrSetUnit('i', event)">
						Imperial
					</button>
				</div>
			</div>
			<div class="bmr-calculator-item-container" id="bmrGenre">
				<label> Genre </label>
				<div class="bmr-tip">
					? <span class="bmr-tiptext">Select your genre</span>
				</div>
				<div class="bmr-calculator-item">
					<button class="bmr-split-button bmr-sb-1 bmr-active" id="bmrGenre1" onclick="bmrSetGenre('m', event)">
						Male
					</button>
					<button class="bmr-split-button bmr-sb-2" id="bmrGenre2" onclick="bmrSetGenre('f', event)">
						Female
					</button>
				</div>
			</div>
			<br>
			<div class="bmr-calculator-item-container" id="bmrAgeContainer">
				<label> Age </label>
				<div class="bmr-tip">
					? <span class="bmr-tiptext">Enter your age</span>
				</div>
				<div class="bmr-calculator-item">
					<input type="text" value="25" class="bmr-calculator-input" id="bmrAge">
					<span class="bmr-input-label">years</span>
				</div>
			</div>
			<br>
			<div class="bmr-calculator-item-container" id="bmrWeightContainer">
				<label> Weight </label>
				<div class="bmr-tip">
					? <span class="bmr-tiptext">Enter your weight</span>
				</div>
				<div class="bmr-calculator-item">
					<input type="text" value="80" class="bmr-calculator-input bmrUnitConvertKG" id="bmrWeight">
					<span class="bmr-input-label bmrUnitKG">kg</span>
				</div>
			</div>
			<div class="bmr-calculator-item-container" id="bmrHeightContainer">
				<label> Height </label>
				<div class="bmr-tip">
					? <span class="bmr-tiptext">Enter your height</span>
				</div>
				<div class="bmr-calculator-item">
					<input type="text" value="180" class="bmr-calculator-input bmrUnitConvertCM" id="bmrHeight">
					<span class="bmr-input-label bmrUnitCM">cm</span>
				</div>
			</div>
			<br>
			<div class="bmr-calculator-item-container" id="bmrActivityContainer">
				<label> Activity level </label>
				<div class="bmr-tip">
					? <span class="bmr-tiptext">Activity level that best matches your lifestyle</span>
				</div>
				<div class="bmr-calculator-item">
					<!-- Activity level dropdown -->
					<select class="bmr-calculator-input" id="bmrActivity">
						<option value="1.2">Sedentary Lifestyle (very little exercise)</option>
						<option value="1.375">Lightly Active Lifestyle (exercise 1-3 days/week)</option>
						<option value="1.550">Moderately Active Lifestyle (exercise 3-5 days/week)</option>
						<option value="1.725">Very Active Lifestyle (exercise 6-7 days/week)</option>
						<option value="1.900">Extremely Active Lifestyle (very hard exercise)</option>
					</select>
				</div>
			</div>
			<div class="bmr-calculator-item-container" id="bmrFormulaContainer">
				<label> Calculation formula </label>
				<div class="bmr-tip">
					? <span class="bmr-tiptext">Choose which formula to use for calculating BMR</span>
				</div>
				<div class="bmr-calculator-item">
					<!-- Calculation formula dropdown -->
					<select class="bmr-calculator-input" id="bmrFormula" onchange="bmrSetFormula()">
						<option value="jeor">Mifflin St. Jeor</option>
						<option value="benedict">Harris-Benedict</option>
					</select>
				</div>
			</div>
			<div class="bmr-calculator-item-container bmr-buttons" id="bmrCalculateButtons">
				<!-- Calculate button -->
				<div class="bmr-calculator-submit" onclick="bmrCalculatorCalculate()">
					Calculate
				</div>
				<!-- Reset button -->
				<div class="bmr-calculator-reset" onclick="bmrCalculatorReset()">
					Reset
				</div>
			</div>
			<div class="bmr-calculator-results">
				<div class="bmr-calculator-item-container bmrResults">
					<div class="bmr-calculator-item bmr-calculator-value" id="bmrResult">
						-
					</div><label> BMR calories/day</label>
					<div class="bmr-tip">
						? <span class="bmr-tiptext">Basal Metabolic Rate (BMR)</span>
					</div>
				</div>`Preformatted text`
			</div>
		</div>
	</form>
	<!-- End Calculator Inputs Area -->
	<script type="text/javascript" src="js/bmr-calculator.js"></script>
</div>

Is something wrong here?
Thank you

#2

impossible to say without the css code. When making a post, ensure that whoever is helping you can replicate the problem

#3

Thank you.
But which css code do you mean?

#4

you included links:

<link rel="stylesheet" type="text/css" href="css/bmr-main.css">
<link rel="stylesheet" type="text/css" href="css/bmr-light-simplistic-grey.css">

which means there is css code present to which we have no access. Which means we don’t know what the page looks like or how its broken.

#5

Ok, here’s the link to the page http://teknutrition.com/basal-metabolic-rate-calculator/
As you can see the calculator is broken!!
Thanks

#6

for example here:

<button class="bmr-split-button bmr-sb-1 bmr-active" id="bmrMeasurement1" onclick="bmrSetUnit('m', event)"><br>
						Metric<br>
					</button>

if you give a height of 40px, and then a line height of 1.6, that is never going to fit!

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

#7

Maybe the CSS code is the one I downloaded with the calculator? In fact, I have a file with CSS text but don’t know where to put it!

#8

you are asking me? Don’t know, i have no idea what you did.

who wrote all that css then? Given where you included the link to the css files, i have a question. How much do you know about html and css?

#9

Honestly not much! I purchased the calculator and given it’s an HTML I thought to put it in the text field of my post and it will work.

#10

Do I have to put the CSS code first somewhere in my editor for the HTML to work?

#11

the fact that you have to ask this question, indicate indeed that you do not know much about html and css

html is the structure of webpage, using elements. css can be used to style and position those elements. So either your html is wrong or your css is wrong.

for example this button:

<button class="bmr-split-button bmr-sb-1 bmr-active" id="bmrMeasurement1" onclick="bmrSetUnit('m', event)"><br>Metric<br></button>

why do you use the break element? Break is a cheap and dirty hack, and should not be used.

using break elements within a button which is only 40px in height will cause massive problems

#12

Thank you for the help but I can’t figure all these out by my self. I’ll contact the person who coded the calculator.

#13

a good start would be to remove the break elements (<br>) which are nested inside the buttons

#14

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.