PDA

Click to See Complete Forum and Search --> : make it align

two4god07
01-21-2009, 12:27 PM
<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>

Weclome to the Faith Miracle Ministry web site!

</title>

<link rel="stylesheet" type="text/css" href="style.css" />





</head>

<body>
<div id="body">
<img src="indexbanner.jpg" id="banner" alt="Faith Miracle Ministry" />



<div id="toc">

<a href="index.html">Home</a> <br />

<a href="about.html">About Us</a> <br />

<a href="staff.html">Our Staff</a> <br />

<a href="events2.html">Upcoming Events</a> <br />

<a href="events.html">Outreach</a> <br />

<a href="counsel.html">Counseling</a> <br />

<a href="sermons.html">Sermons</a> <br />

<a href="contact.html">Contact Us</a> <br />

<a href="prayer.html">Prayer Requests</a> <br >

<a href="newsletter.html">Newsletter</a> <br />

<a href="http://www.faithmiracle.net/blog1">Pastor Speaks</a>

</div>



<div id="content">







<p>Please enjoy the following audio sermons from past services. We hope that they help you build your relationship with our Lord and Savior, Christ Jesus.</p><hr />



<div id="c1">

<p class="size"><span class="sermons">Sermons</span><br />

Moving Further<br />

From Glory to Glory<br />

What Do They See?<br />

Crossing the Red Sea of Impossibility<br />

Overcoming Giants</p></div>



<div id="c2"><p class="size"><span class="sermons">Date</span><br />

1/18/2009 PM<br />

1/18/2009 AM<br />

1/11/2009 PM<br />

1/11/2009 AM<br />

1/4/2009 PM</p></div>





<div id="c3"><p class="size"><span class="sermons">Audio</span><br />

<a href="movingfurther.wma"><img src="note.gif" id="note" border="no" height="15px" width="15px" /></a><br />

<a href="glorytoglory.wma"><img src="note.gif" id="note" border="no" height="15px" width="15px" /></a><br />

<a href="whattheysee.wma"><img src="note.gif" id="note" border="no" height="15px" width="15px" /></a><br />

<a href="crossingjordan.wma"><img src="note.gif" id="note" border="no" height="15px" width="15px" /></a>

<br />

<a href="overcominggiants.wma"><img src="note.gif" id="note" border="no" height="15px" width="15px" /></a></p></div></div>
</div>
</body></html>


I have columns made with CSS. But my CSS isn't the issue.

The image "note.jpg" needs to be straight across from the sermon title and date. When I change the size of the image to make it align correctly on EI, it is too big on FF and doesn't align. If I make it small enough so it will line up on FF, it's too small on EI.

How can I make it so it will directly line up no matter what size the image is without using a table?
peteincali
01-22-2009, 12:19 PM
This is hard to answer without seeing the page itself, and the css. You might want to look into conditional css statements, and make it look exactly how you want in each browser. If you want some help with that let me know. Also, floating and negative margins are something that I sometimes have to revert to.
two4god07
01-22-2009, 01:44 PM
i never did understand conditional statements. I always just edited my pages to look the same on all browsers and if something worked on one but not the other, I removed it.
peteincali
01-23-2009, 05:36 PM
Yes I understand what you mean. They can be awkward and sometimes cause more of a headache than what its worth.

However, in this case it should be pretty simple to do. Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>


<body>
<!-- This image will be displayed in IE -->

<!--[if IE]>

<img src="note.jpg" width="20" height="20" alt="IE image">

<!-- This image will be displayed in all other browsers in IE -->

<!--[if !IE]>

<img src="note.jpg" width="200" height="200" alt="Not IE image">
<![endif]-->


</body>
</html>

Pretty self explanatory, any code entered between <!--[if IE]> <![endif]-->
Will display only in IE.

The ! mark means NOT (in IE) so any code entered between <!--[if !IE]>

<![endif]--> Will be displayed in any other browser than IE.

Just change the width and heights to the appropriate dimensions.

btw: I saw some note.gif files but no .jpg just make sure it is in fact .jpg
two4god07
01-29-2009, 02:03 PM
Thanks for this. I'm sorry I didn't say thanks sooner, but it hasn't been notifying me of replies.