Why is
given a thickness in HTML different than CSS?

Question

I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.

I already tried adding a height: declaration property but it renders even thicker than I want.

Original HTML: http://jsfiddle.net/2k66T/

Modified HTML: http://jsfiddle.net/dd63m/

Edit: Here are the instructions from the professor;

Write a CSS document in order to define the style of the following web page (I refer this to as "Original HTML") in a right way. Add and erase in the original page everything you think that is necessary. Use the on-line validator of the World Wide Web Consortium to be sure that your work fulfills the standards.

what is your query here? is this your desired output http://jsfiddle.net/dd63m/6/ — Amarnath Balasubramanian, Dec 11 '13 at 05:10
@Amarnath I want the modified HTML resemble the original HTML with inline CSS — Joe Morales, Dec 12 '13 at 00:17
Have you checked my fiddle in the comments http://jsfiddle.net/dd63m/6/ — Amarnath Balasubramanian, Dec 12 '13 at 03:02

misterManSam · Accepted Answer · 2013-12-12T01:04:35.530

2

Real question is... why are you using HR?

Let's render a border on the div wrapping your logo image.

Have a fiddle! - http://jsfiddle.net/dd63m/11/

Updated fiddle - http://jsfiddle.net/8VTd8/3/

I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.

HTML

  <h1>MyTSC</h1>

<div id="logo"> 
  <a href="http://www.tsc.edu"><img src="./img/TSCLogo.jpg" alt="TSC"></a>
</div>


<h2>My courses for Fal 2013</h2>
<ul>
 <li>COSC 4330 Computer Graphics</li>
 <li>IMED 1416 Wed Design I</li>
 <li>ITNW 2413 Networking Hardware</li>
</ul>

The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.

CSS

body{
  background-color: grey;
  color: white;
}
h1{
  text-align: right;
margin-bottom: 30px;
}
div{
  text-align: center
}

ul{
  font-style: italic;
}

#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}

edited Dec 12 '13 at 01:04

answered Dec 11 '13 at 05:50

misterManSam

24,303
11
69
89

Remember that you can easily apply space by specifying margins in the CSS like margin-bottom: 20px. br tags shouldn't be needed. – misterManSam Dec 11 '13 at 05:59
Thank you! The reason I left the `
` and `
` tags was because I hadn't realized I could accomplish this with CSS; somehow I overlooked at it. My only concern now is the dimensions. Since I was using `
` to separate the image from the listing, how can I accomplish the same distance with CSS now? I have added the assignment instructions because somehow I think he wants to have the same result as the original HTML with inline CSS. – Joe Morales Dec 12 '13 at 00:02
Here's my modified file with along with your recommedations: http://jsfiddle.net/8VTd8/ - Even though the break line tags are gone, somehow I feel this was more complicated to achieve than if had I only used only the break line tags. Maybe I complicated things myself? Then at the same time I have to remind myself that `
` should be used for separating text and not content http://stackoverflow.com/questions/3937515/when-to-use-br-line-breaks-vs-css-positioning – Joe Morales Dec 12 '13 at 00:35
I introduce you to the `em` unit! :D In your original fiddle you have two `
` tags and an `
`. Each one of those gives you three lines. 3 ems is the same thing in this example. Have a look at this fiddle: [http://jsfiddle.net/8VTd8/1/](http://jsfiddle.net/8VTd8/1/) Have a look at [this for more information on ems. I can't explain them properly](http://www.impressivewebs.com/understanding-em-units-css/) – misterManSam Dec 12 '13 at 00:45
Again, look at this fiddle: [http://jsfiddle.net/8VTd8/1/](http://jsfiddle.net/8VTd8/1/) for the `em` example. I posted the wrong link on my previous comment. – misterManSam Dec 12 '13 at 00:50
No problem! I have created a final fiddle for you. This replicates exactly the look you had previously: [http://jsfiddle.net/8VTd8/3/](http://jsfiddle.net/8VTd8/3/) Much easier to learn by example :) Now... [Keep up the learning!](http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/) – misterManSam Dec 12 '13 at 01:01
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/42997/discussion-between-joe-morales-and-mistermansam) – Joe Morales Dec 12 '13 at 01:54

score 0 · Answer 2 · answered Dec 11 '13 at 05:00

0

add background: white; in your css not color:white

like this

hr{
  width: 50%;
  height: 3px;
  background: white;
}

answered Dec 11 '13 at 05:00

Aditya Ponkshe

3,840
4
39
58

I know different browsers render HTML documents differently, but is it possible to control how they render the `hr`? IE is rendering it way different than FireFox. I can even notice an inner shadow within the `hr` – Joe Morales Dec 11 '13 at 05:21
background:white or background-color:white will always work for any browser. – Aditya Ponkshe Dec 11 '13 at 05:23

score 0 · Answer 3 · answered Dec 11 '13 at 05:22

0

They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.

Code for the Test fiddle

<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">

Js Fiddle

answered Dec 11 '13 at 05:22

Vinay Pratap Singh Bhadauria

9,829
3
28
49

Why is given a thickness in HTML different than CSS?

3 Answers3

Why is
given a thickness in HTML different than CSS?