Me again (:

I need to get the space inbetween the lines to be consistant across browsers.

IE & Firefox look like the top one, while Chrome and Safari look like the bottom one.

http://www.ritch.pwp.blueyonder.co.uk/tekin.html

Just wondering how i acheive this?

This is what ive got so far…

<p class=“escdiscrip”>Feature 1 Feature 1 Feature 1 Feature 1</p>
<p class=“escdiscrip”>Feature 1 Feature 1 Feature 1 Feature 1</p>
<p class=“escdiscrip”>Feature 1 Feature 1 Feature 1 Feature 1</p>
<p class=“escdiscrip”>Feature 1 Feature 1 Feature 1 Feature 1</p>
<p class=“escdiscrip”>Feature 1 Feature 1 Feature 1 Feature 1</p>
<p class=“escdiscrip”>Feature 1 Feature 1 Feature 1 Feature 1</p>
<p class=“escdiscrip”>Feature 1 Feature 1 Feature 1 Feature 1</p>
<p class=“escdiscrip”>Feature 1 Feature 1 Feature 1 Feature 1</p>
<p class=“escdiscrip”>Feature 1 Feature 1 Feature 1 Feature 1</p>
<p class=“escdiscrip”>Feature 1 Feature 1 Feature 1 Feature 1</p>

p {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#CCC;
}

.escdiscrip {
margin-left:186px;
font-size:10px;
line-height:2px;
}

Thanks (:

I didnt miss it Paul i was just busy trying what you guys said, was just about to report back :smiley:

Ive made the middle one a list instead like you said (im a poet and i didnt kn…) :stuck_out_tongue:

Anyway ive tested it in all browsers and its a much better solution and is more consistant, thank you :slight_smile:

Only i have a new problem haha :smiley: The list is not sitting against image, well i want it 5 pixels to the right of it, either way its no where near.

Any ideas?

http://www.ritch.pwp.blueyonder.co.uk/tekin.html

<ul class="esclist">
  <li>Feature 1 Feature 1 Feature 1 Feature 1</li>
  <li>Feature 1 Feature 1 Feature 1 Feature 1</li>
  <li>Feature 1 Feature 1 Feature 1 Feature 1</li>
  <li>Feature 1 Feature 1 Feature 1 Feature 1</li>
  <li>Feature 1 Feature 1 Feature 1 Feature 1</li>
  <li>Feature 1 Feature 1 Feature 1 Feature 1</li>
  <li>Feature 1 Feature 1 Feature 1 Feature 1</li>
  <li>Feature 1 Feature 1 Feature 1 Feature 1</li>
  <li>Feature 1 Feature 1 Feature 1 Feature 1</li>
  <li>Feature 1 Feature 1 Feature 1 Feature 1</li>
</ul>  
.esclist li{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height:10px;
	color:#CCC;
	list-style-type:none;
	margin:0px;
	padding:0px;
}

Without the line-height set to very small value the gaps between the lines are even worse, although they become identical across the browsers.

Im not expecting everything to come out exactly the same on all browsers but going back to the first image its quite a big difference!

Originally i had ‘feature 1’ text in 3 seperate divs and it all worked out fine untill it came to validation. Because there were 3 lots of text with the same div they said to use a class instead. I almost settled, but it was bugging me that it wouldnt pass the validator and hey… id have learnt nothing.

Hi,

As xhtmlcoder said you are using a line-height smaller than the element but you have not controlled the bottom margin so you are taking away with the line-height and then adding back on with the margin.

IE7 won’t let the element get smaller than the font-size and then just adds the default margin back on to create a bigger gap.

Use a suitable line-height and then reduce the margin to zero.

e.g.


.escdiscrip {
    font-size:10px;
    [B]line-height:1.2;
    margin:0 0 0 186px;[/B]
}


Why are you using multiple p elements here;


<p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
                <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
                <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
                <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
                <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
                <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
                <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
                <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
                <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
                <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>

Is that supposed to be a list?

If so wrap it in a ul and use list elements. You won’t need any of those classes because you can apply styles via the ul container instead saving loads of extra code.

ul.escdiscrip li {styles…}

Make sure that when you use an element such as heading element h1- h6, a paragraph, a list etc. then at the same time you reduce the margins and padding to zero (or set the exact margin that you want).

Browsers differ greatly and you need to take explicit control to make things look much the same.

It is likely to be an inherited margin value. The line-height is rather too small since the font has been suggested as 10px and you have line height of 2px, which is smaller than the font itself.

Posting the CSS and HTML was just surplus to requirement since you had a live URL in the first place that is assuming you kept it freshly updated.

You cannot expect the lines to be exactly the same because the browsers use different rendering engines albeit you can suggest similarities using the CSS shorthand ‘font’.

When you were referring to “[…]divs of the same kind” it was the fact an ID is a unique value nothing really to do with a division itself but I believe you figured that part out.

You missed my post :slight_smile: You only have space because of the default margin of the p element. Without that margin the text would overlap each other.

You will very rarely ever set the line-height to less than the font-size as that would cause the text to bleed into adjoining line-boxes.

http://reference.sitepoint.com/css/line-height

http://www.w3.org/TR/CSS2/visudet.html#line-height

Adding 0 padding & margin bunched everything up like so

If i change them to divs it doesnt pass xhtml1.0

It says divs of the same kind cant be used more than once per page and that you should use class.

Different browsers might have different default margins and paddings for <p>'s

Try either changing the <p>'s to <div>'s or set the margin and padding for <p>'s to 0

 
p {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px}

Thanks for all your help Paul thats spot on mate :slight_smile:

I just added the text align and it worked, but then i put it all in how you did it as i remember you saying you have to take explicit control.

Thanks again, im sure ill be back :wink:

Hi,

You have some styles already defined for uls within #sidebar so you will need to be more specific.

Like this :slight_smile:


[B]#content ul.esclist{
    list-style:none;
    padding:0;
    margin:0 0 0 186px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
}
#content ul.esclist li{
    font-size:10px;
    line-height:10px;
    color:#CCC;
}[/B]


Using class instead of id is not cheating, that is how you save a bunch of code. Any time you have styles that you want to use multiple times, you make it a class and it works great.

I posted what i thought would be relevant…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>&amp;&amp;&amp;&amp; - Tekin</title>
<link href="proj.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<div id="headerimage"><a class="pictures" title="pictures" href="pictures.html"></a></div>

<a class="logoroll" title="Welcome to &amp;&amp;&amp;&amp;" href="index.html"></a>

<div id="main">

<div id="sidebar">

<ul>
<li><h1><a href="gmracing.html" title="GM Racing">GM RACING</a></h1></li>
<li><h1><a href="hobbywing.html" title="Hobbywing">HOBBYWING</a></h1></li>
<li><h1><a href="speedpassion.html" title="Speed Passion">SPEED PASSION</a></h1></li>
<li><h1><a href="teamwave.html" title="Team Wave">TEAM WAVE</a></h1></li>
<li><h1><a href="tekin.html" title="Tekin">TEKIN</a></h1></li>
<li><h1><a href="contact.html" title="Contact">CONTACT</a></h1></li>
</ul>



<div id="content">

  <h1>Tekin</h1>
  <hr />
  <a class="date">Updated: 17:58 Friday 20th August 2010</a>
  <p>Please select your ESC to access setup sheets.</p>
  
  <a class="escspacing" href="rs.html"><img src="images/rspro.gif" width="177" height="134" alt="Tekin - RS Pro" /></a>
  
  <h2 class="esctitle"><a href="rs.html">RS Pro</a></h2>

  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>

  <a class="escspacing" href="rs.html"><img src="images/rs.gif" width="177" height="134" alt="Tekin - RS" /></a>
  
  <h2 class="esctitle"><a href="rs.html">RS</a></h2>

  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  
  <a href="rx8.html"><img src="images/rx8.gif" alt="Tekin - RX8" width="177" height="134" class="escspacing" /></a>
  
  <h2 class="esctitle"><a href="rx8.html">RX8</a></h2>
  
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  <p class="escdiscrip">Feature 1 Feature 1 Feature 1 Feature 1</p>
  
</div>
</div>
</div>
</div>

</body>
</html>



@charset "utf-8";
/* CSS Document */

p {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#CCC;
}

h1 {
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
}    

h2 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

hr {
    background-color:#FFF;
    height:1px;
    border:none;
    margin-bottom:4px;
}

a:link, a:visited {
    color:#CF0;
    text-decoration: none;
}

a:hover {
    color:#FFF;
}

a:active {
    color:#FFF;
}

img {  
    border-style: none;
}

body {
    margin: 0;
    padding: 0;
    background-color:#bab9b1;
    background-image:url(images/background.gif);
    background-repeat:repeat-x;
}

#wrapper {
    margin:auto;
    padding:0px;
    width:600px;
    margin-top:20px;
    margin-bottom:5px;
}

#main {
    width: 100&#37;;
    position:relative;
}

#headerimage {
    background-color:#333;
    float:right;
    width:470px;
    height:124px;
}

#content {
    position:absolute;
    top:0;
    right:0;
    width:460px;
    background-color:#333;
    height:auto;
    padding-left:5px;
    padding-right:5px;
    margin:0;
    border:0;
}

#sidebar {
    width: 125px;
    padding:0;
    margin-top:5px;
    border:0;
}

#sidebar ul {
    list-style:none;
    padding:0;
    margin:0;
    text-align:center;
}

#sidebar li a{
    background-color:#333;
    height: 35px;
    display:block;
    text-decoration: none;
    background-repeat:no-repeat;
}

#sidebar li h1{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    margin:0 0 5px 0;
    line-height:34px;
}

a.logoroll {   
display: block;   
width: 124px;   
height: 124px;   
background: url(images/fibre9roll.png) no-repeat 0 0;
}
  
a:hover.logoroll {
background-position: 0 -124px;   
}

a.pictures {  
display:block;
margin:73px 0 0 425px;
width: 36px;   
height: 37px;   
background: url(images/camera.png) no-repeat 0 0;
}

a:hover.pictures {
background-position: 0 -37px;   
}

#table{
    margin:0;
    border-collapse:collapse;
}

th{
    border: 1px solid black;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#FFF;
    background-color:#666;
}

td{
    border: 1px solid black;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;
    background-color:#FFF;
    color:#333;
}

td a:link{
    color:#CC0000;
}

.date{
    font-family:Arial, Helvetica, sans-serif;
    font-size:9px;
    color:#FFF;
}

.grouped_elements{
    margin:0;
    border:0;
    padding:0;
}

.grouped_elements img{
    border-style:solid;
    margin-right:1px;
    margin-bottom:1px;
    border-width:2px;
}

.grouped_elements_right img{
    border-style:solid;
    margin-right:0;
    padding:0;
    margin-bottom:1px;
    border-width:2px;
}

.escspacing {
    float:left;
    border-style:solid;
    border-width:2px;
}

.esctitle {
    margin-left:186px;
}

.escdiscrip {
    margin-left:186px;
    font-size:10px;
    line-height:2px;
}

div class is a new one to me not quite sure about what you mean there, think i need to read up some more.

But yes ill be using the same thing at least 3 times on the same page. When i originally made it with divs i did consider renaming them but i felt like i was cheating a bit :smiley:

I think you missed something mentioned earlier. You can use DIVs if you want, but each ID must be unique. If you have more than one DIV that you want to be styled using the same CSS, use CLASS. That would look something like:

<div class=“escdiscrip”> code here </div>
<div class=“escdiscrip”> code here </div>
<div class=“escdiscrip”> code here </div>

The key is to use class when it is something you will use more than one time on a page.