Learn VBA & Macros in 1 Week!

HTML - How Can I Add Text Line Height So Every Browser Shows It Right?

Full Excel VBA Course - Beginner to Expert

How Can I Add Text Line Height So Every Browser Shows It Right?	View Content

I'm using tables and I have text inside one table. When I add line height to text so it looks good in IE6, Safari and Google Chrome, it looks wrong in FireFox and Opera. Every line is over each other. How could I fix this?

Here is the code from start to end of the text part:

Code:

<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
<title>my site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image:url('tausta.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	line-height: 5%;
}
.style2 {color: #
	color: #999999;
	color: #999999;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; }
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; font-weight: bold; }
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="page">
<table id="Table_01" width="912" height="543" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="14" width="176" height="542" valign="top"><div align="right" class="style1">
		  <p class="style2">&nbsp;</p>
		  <p class="style2"><strong><u>FILES:</u>&nbsp;</strong><u><br>
		    </u><br>
		    <br>
		    <br>
		    <br>
		  </p>
		</div>		  
		  <p align="right" class="style5">Images:&nbsp;</p>
		  <p align="right" class="style4">images1&nbsp;<br>
		    <br>
		    <br>
		    <br>
		  </p>
		  <p align="right" class="style5">Videos:&nbsp;</p>
		  <p align="right" class="style4">video1&nbsp;</p>
		  <p align="right" class="style4">video2&nbsp;</p>
		  <p align="right" class="style4">video3&nbsp;</p>
	    <p align="right" class="style1"><span class="style2">1 - video4&nbsp;</span></p></td>

Full Excel VBA Course - Beginner to Expert

Heading Shows As One Word Per Line In Ie But Not Moxzilla, Etc

Similar Tutorials

View Content

I'm having trouble with a header in IE. I'm a beginner but modifying a webpage.

I have a header that when opened in Firefox or Chrome stretches normally across a page, e.g.

"This is the header"

However, when I open the same page in IE, I'm getting one word per line, e.g.

"This
is
the
header"

Does anyone know how to resolve this please? I'd be very grateful for any help

When Opening An Html File With My Browser, Code Shows Up

Similar Tutorials

View Content

Hi,

When I open an HTML with my browser to see how it looks, instead of what the code should look like showing showing up, the code itself shows up. Sorry if this is a stupid question, I'm quite new to HTML. I use Dreamweaver CS5. This is the code I used:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Left Sidebar Text Shows Up On Right Side

Similar Tutorials

View Content

Hello all-
This is my first post on HTML forums, and I hope ya'll can help me out with this issue. I feel really dumb...and think that my problem is probably a simple one, but I can't figure it out.

I've got a left sidebar, coded to float left in CSS, and in dreamweaver it shows up appropriately. However, whenever I look on firefox or ie, the left shows up on the right. I've also got an orange background image that DOES show up in the correct spot. I'm wondering if my problem could be related to the fact I've got the image listed under main-content, not the left sidebar. I've moved that line in the CSS, but it didn't help.

Here is a link to my problem: http://www.durhamsafekids.org/main.html

Here is my CSS code:
Code:

body {
	font-size: 62.5%;
	background: url(images/top-bdr.jpg) repeat;
}

p, li {
	font: 1.2em/1.8em Sabon, sans-serif;
	margin-bottom: 10px;
}

h1 {
	font: 2.0em "Helvetica Neue", sans-serif;
	color: white;
	height: 0px;
}

h2 {
	font: 1.8em "Helvetica Neue", sans-serif;
	color: #99cc33;
	margin-bottom: 10px;
}

h4  {
	font :Georgia, "Times New Roman", Times, serif;
	color: #0078AA;
}

h3  {
	font :Georgia, "Times New Roman", Times, serif;
	color: #333399;
}

ul {
	margin-left: 25px;
}

img {
	border: none;
}

#page-wrap {
	background: white;
    width: 960px;
	margin: 10px auto;
	}
	#page-wrap #inside {
		margin: 10px 10px 0px 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
#main-content {
	background: url(/images/left-sidebar.gif) repeat-y white;
	padding-left: 230px;
	padding-top: 20px;
}
	
#header {
	background: #ffffff;
	text-align: center;
}

#menu {
	background: #ffffff;
}

#left-sidebar {
	width: 185px;
	float: left;
	padding-left: 15px;
	padding-top: 20px;
}

#footer {
	background: #99cc33;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #006699;
	font-size: 12px;
}

.footer a:link    {
  /* Applies to unvisited links in class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  color:            #006699;
  } 
.footer a:visited {
  /* Applies to visited links in class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  color:            #006699;
  } 
.footer a:hover   {
  /* Applies to links under the pointer in class mainNav */
  text-decoration:  underline;
  font-weight:      bold;
  color:            #006699;
  } 


/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.preload1 {background: url(menu/three_1.gif);}
.preload2 {background: url(menu/three_1a.gif);}

#nav {padding-left:217px; margin:0; list-style:none; height:38px; background:#fff url(menu/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(menu/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(menu/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(menu/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(menu/three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:110px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:108px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(menu/arrow.gif) 100px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(menu/arrow_over.gif) 100px 6px no-repeat; color:#fff;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:110px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(menu/arrow_over.gif) 110px 6px no-repeat; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(menu/arrow.gif) 110px 6px no-repeat; color:#000; border-color:#bbd37e;}

And here is my HTML code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	
    
    <meta http-equiv="Content-Type" content="text/html" />
	
	<title>Durham County Safe Kids</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style-ie.css" />
	<![endif]-->
    


</head>

<body>

	<div id="page-wrap">
		<div id="inside">
			
			<div id="header"><!-- #BeginLibraryItem "/library/header.lbi" --><img src="images/Header2.jpg" alt="Durham County Safe Kids" name="headerimage" width="775" height="200" border="1" style="background-color: #CCCCCC">
<!-- #EndLibraryItem --></div>

          <div id="menu"><!-- #BeginLibraryItem "/library/menu.lbi" -->
<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
	<li class="top"><a href="library/index.html" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="#nogo2" id="safety" class="top_link"><span class="down">Safety</span></a>
		<ul class="sub">
			<li><a href="#nogo3" class="fly">Vehicle Safety</a><ul>
						<li><a href="#nogo4">Car Seats</a></li>
						<li><a href="#nogo5">Spot the Tot</a></li>
						<li><a href="#nogo6">Hyperthermia</a></li>
                        <li><a href="#nogo7">Distracted Driving</a></li>
					</ul>
            </li>

			<li><a href="#nogo8">Poison Prevention</a></li>
			<li><a href="#nogo9">Wheeled Safety</a></li>
			<li><a href="#nogo10">Firearms Safety</a></li>
			<li><a href="#nogo11">Water Safety</a></li>
			<li><a href="#nogo12">Home Safety</a></li>
			<li><a href="#nogo13">Pedestrian Safety</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo54" id="events" class="top_link"><span>Events</span></a></li>
	<li class="top"><a href="#nogo55" id="links" class="top_link"><span>Links</span></a></li>
	<li class="top"><a href="#nogo56" id="photos" class="top_link"><span>Photos</span></a></li>
	<li class="top"><a href="#nogo57" id="about" class="top_link"><span>About Us</span></a></li>
</ul>
<!-- #EndLibraryItem --></div>

<div id="left-sidebar">This Text should be in the Orange Left Sidebar.</div>
			
			<div id="main-content"><img src="images/preventingunintentionalinjury.gif" alt="" width="529" height="127" align="right" /><br /><br />
				<h2>This website is currently under construction.  Please come back soon!</h2>
				
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
			
			<div style="clear: both;"></div><!-- #BeginLibraryItem "/Library/footer.lbi" -->

<div id="footer">
<table align="center" width="50%" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <th scope="col"><span class="footer"><a href="index.html">Home</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Safety</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Messages</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Links</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Photos</a></span></th>
    <th scope="col"><span class="footer"><a href="#">About Us</a></span></th>
  </tr>
</table>
<br>
			<center><font size="+2" color="FFFFFF"><strong>Durham County Safe Kids</strong></font></center>
			</div><!-- #EndLibraryItem --></div>
		
		<div style="clear: both;"></div>
	
	</div>

</body>

</html>

As you can see from the linked screenshot, the text shows up on the right side of the page, not in the orange box.

http://www.durhamsafekids.org/dskscreen.jpg

Thanks all!

~Jeff

Adjusting Line-height In Mozilla

Similar Tutorials

View Content

If you follow this link

http://www.mm-theory.com/preliminary/preliminary.htm

in Mozilla Firefox and scroll down the page (about 9 paragraphs), you'll see a large asterix-like image on the left-hand side with the caption "A Different Kind of Electric Current".

The caption spans two lines and in Mozilla, these lines are spaced apart a little too much for my liking. Compare it with Explorer and you'll see what I mean. I know I can adjust the line-height attribute in certain tags but it doesn't seem to have any effect no matter what tag I place it in.

The code for the asterix is as follows:

Code:

<tr><td class="margin_icon">

<a class="margin_icon" target=_blank onclick="winOpen('a_different_kind_of_electric_current.htm','',600,420);return false;" href="enablejs.htm">
<img class="margin_icon" src="../icons/side.gif" alt="side.gif" border=0><br>
<span class="margin_icon">
A Different Kind of Electric Current
</span>
</a>

</td><td class="paragraph">...

The CSS for this code is as follows:

Code:

td.margin_icon {width: 10%; text-align: center; padding-right: 1%;}
img.margin_icon {}
a.margin_icon {text-decoration: none;}
span.margin_icon {font-family: times new roman; font-size: 8pt; font-style: italic;}

I tried adding line-height with various values in td.margin_icon and span.margin_icon but neither seem to have any effect. Putting it in span.margin_icon seems to work with Explorer. Why not Mozilla?

Dynamically Increasing Select Box Line Height

Similar Tutorials

View Content

I have a html form drop down menu, and I wanted to increase the line height dynamically on load of drop down. How can I achive this?
Thanks in advance.

How To Fit The Height Of A Page So It Fits The Browser Window

Similar Tutorials

View Content

Hi im aware how to fit the width of a page so it fills the browser window but im curious on how to set the height of the page?

the width works perfectly and just the height im stuck with

How To Center Text Across Page When Image Is On Same Line As Text

Similar Tutorials

View Content

here is the (ineffective) code currently:

<img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" />
<h1 style="text-align: center;">random text</h1>

the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is.

i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image.

i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon!

thanx in advance for advise/comments/feedback/help.

Deprecated <font> Element And Line-height Dont Play Nice, Possible Fix

Similar Tutorials

View Content

Hi all, long time no post for me, good to see still a vibrant forum.

I have been helping a friend with their existing site they built with Weebly. Weebly uses the deprecated html <font> tag to set the size of text the user sets via the GUI. Ive found the font tag does not play nice with line-height, I.e. when line-height is set to a value other than "normal", the actual size of the font in the <font> tags does not figure in the line-height calculation and if the font tag has a large size set, you get major bleeding - i.e. the line-height is too small. At least in Opera Chrome FF.

I came up with a solution which seems to work but I thought this should be a known problem but could not find anything. Thought Id check see, may be there is a better fix, or I m missing something. Current solution is:

font[size="1"] { font-size:xx-small; line-height:100% }
font[size="2"] { font-size:small; line-height:100% }
font[size="3"] { font-size:medium; line-height:100% }
font[size="4"] { font-size:large; line-height:100% }
font[size="5"] { font-size:x-large; line-height:100% }
font[size="6"] { font-size:xx-large; line-height:100% }
font[size="7"] { font-size:40pt; line-height:100% }

Can you see any problem with this.

Cheers,

Sam.

Text On Same Line?

Similar Tutorials

View Content

http://credmond8.awardspace.com/home.phtml

How can I get "Site Theme" and "Time" on the same line?

Keep Text In Line With A <h1>

Similar Tutorials

View Content

Hey everyone and thanks ahead of time for takin a look see at this!

I'm working on creating a headline for one of my pages that I want to have some sort of 'text' decoration on each side of it like this:

-----[blah blah]------

Now I want the title ('blah blah' in this case) to be in a <h1> tag...but not the decoration on the outside.

However when I set it up like:
Code:

----[<h1>blah blah</h1>]----

As you would guess the result is:

-----[
Blah Blah
-----]

Is there someway I can keep these inline, but still have an <h1> tag wrapped only around the title?

THANKS!!

Can We Get This Text On The Same Line

Similar Tutorials

View Content

Hi all,

I have the following code...

<BODY>
<ul>
<li><h3> hello world</h3> I love you </li>
</ul>
</BODY>

Right now this comes out on two separate lines. Is it possible for both texts to be on the same line?

Thanks.

How To Have Text On The Same Line With Images

Similar Tutorials

View Content

please, check http://members.dodo.com.au/~rouslan/...ite/index.html

I need to know how to get rid off strange effect down the bottom

and

how do I make text and image aligned on the same "line", "level"

e.g.

image image text text text text text text text text
image image text text text text text text text text
image image text text text text text text text text
image image text text text text text text text text

Text Wont Line Up!

Similar Tutorials

View Content

Hi guys,

can someone help me. I'm trying to get my text to sit like this:

however it sits like this:

www.studioeighty.co.uk

thanks
Steve

Aligning Text On The Same Line

Similar Tutorials

View Content

Hi,

I am writing various things on one line - such as Previous, Back to Main Menu and Next - but would like to align the differently e.g. I would like "previous" to be aligned to the left of the page, "back to Main Menu" in the middle and "Next" on the right side. I have tried pressing space bar - but am only able to do one space in Dreamweaver. Any ideas?

Thanks.

Center Some Text On A Line

Similar Tutorials

View Content

I am trying to do something pretty basic, but I dont understand the behavior or how to fix it.

I want something to look like (where the '*' are centered):

Code:

          *
          *
test      *
          *
          *
          *

and am using the code:

Code:

<CENTER>*</CENTER>
<CENTER>*</CENTER>
test<CENTER>*</CENTER>
<CENTER>*</CENTER>
<CENTER>*</CENTER>
<CENTER>*</CENTER>

But the output looks like:

Code:

Header, Dynamic Line Behind Text

Similar Tutorials

View Content

Hi,

I want to create a header (<h1>,<h2>,...) like on the picture (see attachment) with html and css.
It is possible to create sth like that without using pictures?

Thanks

Centralizing My Buttons In A Line With My Text Above

Similar Tutorials

View Content

Dear all,

currently i m having trouble centralizing my buttons in a horizontal line with my text above it. I m hosting my things on blogspot and on a html preview, my html code seems correct for ''my buttons in a horizontal line with my text above it''. But with blogspot, my buttons are vertical instead. My website is www.buttonsupcloset.blogspot.com

Below is the sample of my image followed by the text and buttons.

<img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/101.jpg" />

<table width="800">

<tr><td>
<p style="text-align: center;">Sweet Bustier Top (White)
<center>
<a href="http://ww12.aitsafe.com/cf/add.cfm?userid=E7247990&product= Sweet+Bustier+Tube+(White)

&price=22&return=www.buttonsupcloset.blogspot.com">
<img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/addcart.gif" border="0" /></a>
<a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com">
<img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/preview.gif" border="0" /></a>
<a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com">
<img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/checkout.gif" border="0" /></a>
</center>
</td>

<td>
<p style="text-align: center;">Sweet Bustier Tube (Purple)
<center>
<a href="http://ww12.aitsafe.com/cf/add.cfm?userid=E7247990&product= Sweet+Bustier+Tube+(Purple)

&price=22&return=www.buttonsupcloset.blogspot.com">
<img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/addcart.gif" border="0" /></a>
<a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com">
<img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/preview.gif" border="0" /></a>
<a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com">
<img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/checkout.gif" border="0" /></a>
</center>
</td>

</table>

Hoping someone could help me solve this problem.

regards,
goddha

How To Show Text On Horigzontal Line

Similar Tutorials

View Content

Hi,

I am doing a small project. In that I am displaying percentage visually with the help of horizontal line using width. when the user places cursor on that line, is there any chance to show percentage of that line.
Eagerly waiting for your replies.
Thanks in advance,

Underline Text In Multiple Line

Similar Tutorials

View Content

Hi I am having trouble on this topic, can't think of a way to clearly explain this so i ll just throw an example:

I'm aiming for this in a table:

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXX______________________________

without the need to do line break or start a new <span><div>or<td>, so basicly the text content (the "X"s) is continuous and the underline needs to fill the whole horizontal width, making <u> an invalid solution.

Does anyone know how to make this possible, Thanks in advance!

P.S. I am using query to auto fill the text content so the length of the text is not fixed and will change base on the database record

Extra Line In Preformatted Text

Similar Tutorials

View Content

I was wondering if someone could point me in the right direction here.

Given the following:

<html><body><table border=1><tr>
<td style='vertical-align: bottom;'><pre>Here is one line of preformatted text inside a td tag</pre></td>
</tr></table></body></html>

Firefox and Internet Explorer display the preformatted text with an extra blank line after the text. Safari seems to display this as I would expect (with no implicit blank line). I've tried playing around with the border, margin, and padding styles, but I can't seem to get rid of the extra blank line within the <td>. Anyone have any ideas ?

Thanks,
John