• 0

[CSS] IE line-height / spacing

Asked by zackiv31,

 Share

Question

Mentor

zackiv31

Posted
Posted

I have a div with css like so:

.uc_rating

{

float: right;

color: #C5C7C5;

font-weight: bold;

font-size: 70px;

line-height: 58px;

padding: 0;

margin: 0;

vertical-align: top;

border: 1px solid black;

}

Now the text in FF/IE butts up against the top of the div, while in IE6/7 the text is dropped down just like if i didn't set the line-height. How do I remove the space above the text in IE?

Link to comment
https://www.neowin.net/forum/topic/632777-css-ie-line-height-spacing/
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Mentor

zackiv31

Posted
  • Author
Posted

<div class="uc_bottom">

<div class="uc_text">Some text to the left.</div>

<div class="uc_rating">+3</div>

</div>

.uc_bottom {

overflow:hidden;

width:100%;

}

.uc_text {

border-top:medium none;

color:black;

float:left;

font-family:Arial,Helvetica,sans-serif;

font-size:12px;

padding:15px;

text-align:left;

width:70%;

}

  • 0
Mentor

zackiv31

Posted
  • Author
Posted

<div class="uc_bottom">

<div class="uc_text">Some text to the left.</div>

<div class="uc_rating">+3</div>

</div>

.uc_bottom {

overflow:hidden;

width:100%;

}

.uc_text {

border-top:medium none;

color:black;

float:left;

font-family:Arial,Helvetica,sans-serif;

font-size:12px;

padding:15px;

text-align:left;

width:70%;

}

  • 0
Collaborator

Nightburn

Posted
Posted (edited)

Here you go:

I only tested this in IE7 and firefox3 beta 5...

&lt;html&gt;
 &lt;head&gt;
   &lt;style&gt;
   body {
	background: #e5e5e5; 
   }

   #container {
	width: 400px; 
   }

   .uc_rating
   {
	 float: right;
	 height: 58px;
	 padding: 0;
	 margin: 0;
	 border: 1px solid black;
   }

   .uc_rating span {
	 font-weight: bold;
	 font-size: 70px;
	 line-height: 58px;
	 color: #C5C7C5; 
   }

   .uc_bottom {
	 overflow:hidden;
	 width:100%;
   }

   .uc_text {
	 border-top:medium none;
	 color:black;
	 float:left;
	 font-family:Arial,Helvetica,sans-serif;
	 font-size:12px;
	 padding:15px;
	 text-align:left;
	 width:70%;
   } 
   &lt;/style&gt;
 &lt;/head&gt;


 &lt;body&gt;
 &lt;div id="container"&gt;
   &lt;div class="uc_bottom"&gt;
	 &lt;div class="uc_text"&gt;Some text to the left.&lt;/div&gt;
	 &lt;div class="uc_rating"&gt;&lt;span&gt;+3&lt;/span&gt;&lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;

 &lt;/body&gt;
 &lt;/html&gt;

Edited by Nightburn
  • 0
Collaborator

Nightburn

Posted
Posted

No it's more about separating layout from content. You were basically trying to do too much in one class. It's also not correct to load the CSS in any other location other than within the <head> tag. Unless you're doing inline styling ie. <a href="#" style="padding: 10px;">blah</a>

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.