I'm building a webpage using DreamWeaver from scratch (no template). It's for a school project.
My DIV formatting was fine until I tried to embed the YouTube video. Why is my YouTube video stuck directly beneath the header? Also, the DIV/Table on the right side of the page is also out of whack. It just want the YT video on the left and the table on the right, and I want them to line up horizontally.
Thanks for any assistance. Click to view the Webpage, with obvious errors.
CODE:
HTML-
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="FamilyBookMain.css">
</head>
<title>FamilyBook.com</title>
<body>
<div id="top">
</div>
<div class="video-container">
<iframe width="560" height="315" src="//www.youtube.com/embed/MQgdE1_lHnA?rel=0" allowfullscreen></iframe>
<div class="famtree">
<img src="images/fambooktree.png" width="705" height="221"/>
</div>
</div>
<div id="body">
<table style="border-collapse:collapse;">
<thead>
<h1>Your Ancestors Are Dead.</h1>
<h1>But Here, They're Still Alive.</h1>
<br>
</thead>
<tbody>
<tr>
<td style="padding:10px">
<p class="table"><br>Welcome to the world's <strong>largest</strong> online resource for social media profiles and data from the twenty-first century. FamilyBook.com is home to billions of profiles from MySpace, FaceBook, Twitter, Instagram, and more. <br> <br>
We are the <strong>leading provider of social media data</strong> from the early 2000s, including searchable image tags, status updates, relationship histories, friendships and family networks. Our mission is to link people to the personal histories of their ancestors- one social media profile at a time.</p></td> </tr>
<tr><td style="padding:10px">
<p class="table">
Imagine the stories that you'll uncover as you explore your loved one's Facebook timeline and likes, private messages and chat logs, Twitter conversations, and Instagram uploads. The <strong>secrets</strong> that you uncover may even surprise you.<br>
<br> Simply start with a name and <strong>we'll do the rest.
</strong> Discover your ancestor's past. Learn where you came from. <br>
</p></td>
</tr>
</tbody>
<thead>
<tr>
<th class="head" colspan="2">
<strong>Our services are coming soon!</strong><br><br>
</tr>
</thead>
</table>
</div>
<div class="footer">
<p id="footer"><img src="http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png" width="139" height="25"/>
<br>Jessica E. Tompkins 2014 | About
</p>
</div>
</body>
</html>
CSS-
#charset "UTF-8";
/* CSS Document */
body {
background-color:#EEEEEE;
position: fixed;
}
#top {
width: 100%;
height: 60px;
background- image:url('http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png');
background-color:#FFF;
background-repeat:no-repeat;
background-position:60px bottom;
border-bottom-width:thin;
border-bottom-color: #333;
border-bottom-style:solid;
position: fixed;
top: 0px;
}
#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: relative;
left: 650px;
bottom: 215px;
}
h1 {
color: #333;
font-family: Arial, Verdana, sans-serif;
text-align: center;
margin: 0px;
top: 10px;
position: relative;
}
.video {
position: relative;
left:170px;
top: 170px;
}
ul.crap {
color: #333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
}
#video {
color: #99aacc;
font-family: Arial, Verdana, sans-serif;
text-align: center;
height: 200;
width: 450;
margin: 350px 0px 0px;
position: absolute;
}
.table {
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:14px;
color: white;
}
.head {
color: #333;
font-family: Verdana, Geneva, sans-serif;
font-size:16px;
padding: 15px;
font-weight:100;
}
.footer{
width: 100%;
height: 60px;
background-color: #99aacc;
border:1px solid #333;
position:fixed;
bottom:0px;
}
#footer{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
padding:5px;
color: white;
text-align:center;
}
a {
text-decoration:none;
}
First of all, welcome to StackOverflow. I only spent about a minute looking over and editing your code, but I think I get the gist of what you want to do. Please see the code below:
Change your #body element to match the code below: (I positioned the div absolutely.)
#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: absolute;
left: 650px;
top:65px
}
Paste this into your CSS:
.video-container{
width:auto;
height:auto;
margin-top:75px;
}
Now, let me just say that your HTML kind of messy and could be streamlined quite a bit. As #Havard Brynjulfsen pointed out, there are a few IDs and classes that remain unused. In any case, the code above, should yield the desired results, but what you are trying to do could be accomplished much more elegantly if you are willing to change up your HTML structure.
Also, there are some bugs in your HTML. I would highly suggest validating your code with the official W3C validator.
There are too many issues for me to list here without going off-topic, but here are the biggies:
Your doctype declaration is incorrect, it should be <!DOCTYPE html>.
Your <title> should be in the <head> of your document.
Related
I am in need of moving a set of tables up in my current document.
I have tried adjusting the margins in the CSS but cannot seem to get it right.
This is what I have:
This is what I am trying to achieve:
The max-width must be 700 px. I have it all set up, apart from the positioning of the tables (images) needing to be moved up onto the background image.
#charset "UTF-8";
/* CSS Document */
body {
margin-top:0;
padding-top:0;
background:#fff;
/*JTL ADDED - Limit container max width within BB Content Area*/
max-width:700px;
text-align:left;
margin-left:auto;
margin-right:auto;
/*End JTL */}
.background-pic {
background-image: url("Image Background.png");
height: 450px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: -100px;
max-width: 700px;
}
h1{
padding-top: 50px;
text-align: center;
font-family: "bebas-neue";
font-weight: normal;
font-size: 50px;
color: #fff;
}
.col-welcome-1 {
float:left;
margin-left: 25px;}
.col-navmenu-1 {
float:right;
width: 250;
height: 255;
margin-right: 25px;
border-radius: 10px;
background: #252525;}
h2 {
color: #FFFFFF;
text-align: center;
font-weight: 200;
font-size: 24px;
font-family: Gotham, "Helvetica Neue", Arial, "sans-serif";
}
.navbuttons {
padding-left: 45px;
}
#footer {clear:both;text-align:left;padding:0 12px 2px 12px;background:#eee;
border-top:1px solid #502e74}
.redline {
border-bottom-style: solid;
border-bottom-color: #502e74;
border-bottom-width: 1px;
}
table { border-spacing: 0px; } /*JTL Added whole section*/
th, td { /*JTL Added whole section*/
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
} /*JTL Added whole section*/
a:link {color:#502e74}
a:visited {color:#036}
a:active {color:#502e74}
a:hover {color:#000;background:#ffc;text-decoration:none}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html PUBLIC>
<html lang="en">
<link href="Professional Development Getting Started Template Style.css" rel="stylesheet" type="text/css">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://use.typekit.net/mlt2oco.css">
<title>Professional Development Overview Template</title>
</head>
<body>
<div class="main-content">
<div id= "banner">
<div class="background-pic">
<h1>Professional Development<br>Overview</h1></div>
<table style="margin-left:auto; margin-right: auto; padding-bottom: 25px;">
<tbody>
<tr>
<td><div class="col-welcome-1"><img src="Welcome Video.png" alt="welcome video" class="rounded" width="320" height="255">
</div></td>
<td>
<div class="col-navmenu-1">
<blockquote>
<h2>NAVIGATION</h2>
</blockquote>
<div class= "navbuttons">
<img src="How to Navigate button.png" alt="How to Navigate Training " class="rounded" width="175" height="45">
<img src="track my progres button.png" alt="Track My Progress" class="rounded" width="175" height="45">
<img src="faq button.png" alt="How to Navigate Training " class="rounded" width="175" height="45">
<img src="access modules button.png" alt="How to Navigate Training " class="rounded" width="175" height="45">
</div>
</div>
</td>
</tr>
</tbody></table>
</div>
</div>
<div class="resource-content">
<table style="margin-left:auto; margin-right: auto;">
<tbody>
<tr>
<td>
<div class="col-resource-1"> <img src="FightforFreedom.png" alt="Salvation Army Justice Action Plan" class="rounded" width="165" height="97"></div></td>
<td><div class="col-resource-2"><img src="TNU Graduate Programs.png" alt="Link to Trevecca Gradate Programs" class="rounded" width="165" height="97"></div></td>
<td><div class="col-resource-2"> <img src="Trevecca's Master's in Organizational Leadership Program.png" alt="Trevecca's Organizational Leadership program" class="rounded" width="165" height="97"></div></td>
</tr>
</tbody></table></div>
<div id="footer">
<p class="xsmall"><strong>Trevecca Nazarene University</strong></p>
<p class="xsmall">Helpdesk Support Contact:Online Course Technical Support Site</p>
</div>
</body>
</html>
what I see is that your table content is outside your div class="main-content". I would suggest you to
put the table content inside class="main-content" by removing a closing div after h1 tag Professional DevelopmentOverview
delete closing div before class="resource-content".
rename css .background-pic to .main-content - that styling will make more sense.
But overall I think you have trouble with proper divs - thats causing a lit of trouble in your site and headache in styling process.
One option if you want your table overtop of other content is to change the position to absolute and adjust the top/right/bottom/left as you wish. For example:
.col-navmenu-1 {
position: absolute;
bottom: 20px;
left: 500px;
float:right;
width: 250;
height: 255;
margin-right: 25px;
border-radius: 10px;
background: #252525;}
Keep in mind you will have to adjust your media queries.
This book is so confusing... I'm back with yet another question.
The book shows a picture of the chapters final look, and obviously I'm having problems with it.
Issue 1: I need to center a picture (I know how to do this) but what I don't know is how to left align a sentence after the picture. By after, I mean it would look like this picture:
But the centered text needs to be left aligned to the image, and when it reaches the end of the page, it starts the text under the picture instead of centered.
I'm pretty sure this has something to do with my wrapper, but I'm not 100% sure on what it is.
CSS file that controls most of the visual things below:
header {
background-color: #ccaa66;
color: #000000;
text-align: center;
}
h1 {
line-height: 200%;
}
body {
background-color: #ffffaa;
color: #330000;
font-family: Verdana;
background: url(background.gif);
padding: 25px;
}
nav {
text-align: center;
}
footer {
background-color: #ccaa66;
color: #000000;
font-size: 0.60em;
font-style: italic;
text-align: center;
padding: 5px;
}
#wrapper {
background-color: #ffffaa;
margin-right: auto;
margin-left: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
}
h2 {
background-color: #ccaa66;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
.details {
padding-left: 20%;
padding-right: 20%;
}
img {
border: 0px solid;
}
Now, the html page I'm loading that is having issues, is a "music" page, and since I can't really upload all of the necessary items you would need to fully construct the page, I'm going to have to go by word of wise.
The music.html page is coded like this:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="javajam.css">
<header>
<title> JavaJam Coffee House Music</title>
<meta charset="utf-8">
<h1><img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="119" width="619"></h1>
</header>
<nav>
Home
Menu
Music
Jobs
</nav>
<body>
<div id="wrapper">
<p> The first Friday night each month at JavaJam is a special night. Join us from 8pm to 11pm for some music you won't want to miss! </p>
<h2> January </h2>
<p align="center"><img src="melaniethumb.jpg" alt="Melanie Morris">Melanie Morris entertains with her melodic folk style. <br> Check out the Podcast! CDs are now available.</p>
<h2> February </h2>
<p align="center"><img src="gregthumb.jpg" alt="Tahoe Greg">Tahoe Greg's back from his tour. New songs. New stories. CD's now available. </p>
</div>
</body>
<footer>
<em>Copyright © 2014 JavaJam Coffee House</em> <br>
Johnathon#Olivas.com
</footer>
</html>
What I'm really looking for is just a way to make the picture show up have the text follow the bottom right of the picture, and when it reaches the "end" of the page, it wraps back and stars under the picture instead of being center aligned. Namely where that <br> is, would be nice to have the text star back under the picture again.
If you need more info I'll try my best to provide it, but as I said earlier, I'm unable to give the actual pictures in the assignment.
I found some errors in the markup of the Web page.
This is the correction of your HTML.
I added a div tag with content class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title> JavaJam Coffee House Music</title>
</head>
<body>
<header>
<h1><img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="119" width="619"></h1>
</header>
<nav>
Home
Menu
Music
Jobs
</nav>
<div id="wrapper">
<p>
The first Friday night each month at JavaJam is a special night. Join us from
8pm to 11pm for some music you won't want to miss!
</p>
<h2> January </h2>
<div class="content">
<p><img src="melaniethumb.jpg" alt="Melanie Morris">Melanie Morris entertains with her melodic folk style. <br> Check out the Podcast! CDs are now available.</p>
</div>
<h2> February </h2>
<div class="content">
<p><img src="gregthumb.jpg" alt="Tahoe Greg">Tahoe Greg's back from his tour. New songs. New stories. CD's now available. </p>
</div>
</div>
<footer>
<em>Copyright © 2014 JavaJam Coffee House</em> <br>
Johnathon#Olivas.com
</footer>
</body>
</html>
I've added a css class «.content» to center the content.
header {
background-color: #ccaa66;
color: #000000;
text-align: center;
}
h1 {
line-height: 200%;
}
body {
background-color: #ffffaa;
color: #330000;
font-family: Verdana, sans-serif;
background: url(background.gif);
padding: 25px;
}
nav {
text-align: center;
}
footer {
background-color: #ccaa66;
color: #000000;
font-size: 0.60em;
font-style: italic;
text-align: center;
padding: 5px;
}
#wrapper {
background-color: #ffffaa;
color: inherit;
margin-right: auto;
margin-left: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
}
h2 {
background-color: #ccaa66;
color: inherit;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
.details {
padding-left: 20%;
padding-right: 20%;
}
img {
border: 0px solid;
}
.content {
margin: 0 auto;
width: 600px;
}
I hope this helps you.
This should help you out. http://codepen.io/anon/pen/wKKLjG. the image is marked as display:inline-block and float:left. Refer more on cssfloat property. http://www.w3schools.com/css/css_float.asp.
Is it possible to position a link or text dynamically based on the content present above.
For example, I have a page as follows:
Dashboard.xhtml
<div id="innerContainer">
<p:dataTable id = "adminDataTbl" value="#{userAdminMB.userRoles}" var="userList" selectionMode="single" selection="#{userAdminMB.selectedUser}" rowKey="#{userList.ntId}" styleClasses="order-table,table" headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row" >
<p:column styleClass="table-data">
#{userList.ntId}
</p:column>
<p:column styleClass="table-data">
#{userList.roleList}
</p:column>
</p:dataTable>
</div>
<div id="userLink">
<h:commandLink action="#{userAdminMB.addUser}">
<h:outputText value="Add a User to the Admin Tool"/>
</h:commandLink>
</div>
styles.css
#outerContainer{
width: 100%;
height: 500px;
top: 150px;
border: 1px thin;
}
#innerContainer{
width:100%;
height:400px;
text-align: right;
margin-right: 9px;
font-family: Arial;
font-size: 16px;
border: 1px thin;
}
#addUserLink{
font-family: Arial;
font-size: 16px;
float: left;
top: 550px;
position: inherit;
}
.editUserLink-data{
font-family: Arial;
font-size: 16px;
float: right;
top: 175px;
}
The data in <p:dataTable> may be different based on the DB hit that is made. I need the addUser link to be positioned accordingly.
Please help. Any help will be much appreciated.
If I am understanding you correctly then what you want to do is:
<div sytle="textalign: right" id="firstLink">Link1</div>
<div id="dynamicContent">
dynamic content here
</div>
<div id="link2">Link2</div>
If you want to add relative positioning between the dynamicContent and link2 divs you can do so.
Using the above code the link two will fall below the dynamic content on your page
I'm trying to make the footer stay at the bottom using CSS, - sticky footer:
.wrapper {
margin: 0 auto;
padding: 0 0 0 0;
width: 100%;
text-align: left;
background: #F5F5FF;
}
.page .footer {
left: 0;
width: 100%;
min-width: 300px;
position: fixed;
margin-top: -150px;
}
.tfoot {
background: #3E5C92;
color: #E0E0F6;
}
.smallfont {
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
And here's the HTML of the thing:
<div class="wrapper">My stuff</div>
<div class="footer">
<div class="tfoot" align="left" style="padding:6px">
<div class="smallfont" style="float:right">
About Extranet Changelog </div>
<div style="color:white">
<small>Copyright © 2009 Radon Systems | Shamil Nunhuck | <?php echo($product.' | '.$version.' | '.$build); ?>
</div></div></small></div>
But it's not sticking to the bottom, at all. What's wrong with it?
Try this method (its the only one I've found consistently works):
http://www.cssstickyfooter.com/
If you want for example .footer to stick to bottom try the following :
.footer { position:fixed; bottom:0; width:100%; height:110px;}
Of course i made the width and height up so change as you require.
Hope this helps!!
You do not have bottom: set.
Dup: HTML footer problem
I have a webpage and files that show up fine in the latest version of IE. Need it to show up the same in the latest version of Firefox and Safari.
The webpage and supporting files are archived for review. I'll paste the page below followed by the CSS. It is easier to see with images.
HTML
<!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>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><img src="top.jpg" width="800" height="115" /></div>
<div id="wrap">
<div id="left">
<div id="left_top">
<div id="left_grey">
<h1 class="lb_blk_hdr">Water. Pure and Simple</h1>
<p class="text">United Distributors, Inc. is the region’s top provider of Water Treatment Solutions and Supplies. For over 30 years, you have trusted us to provide the latest in water treatment technology and related products. We have met your needs through a broad range of products that provide you the purest of water for use in your Home, Office, Restaurant /Food Service and Medical Facilities and Commercial/Industrial facilities. </p>
<p class="text">Call us today. With over 80 years combined experience, our Certified Staff can be called upon to share their experience and expertise with you. At United Distributors we not only provide you with water solutions, our Certified Staff accurately installs your treatment equipment and ensures your system is maintained for the highest level of quality water.</p>
<p class="text">Let us help you enjoy the healthy benefits of safe, pure water.</p>
<h1 class="lb_blk_hdr">Our Promise to You...</h1>
<p class="text">We are committed to market innovative and creative water treatment and water related products to meet and fulfill your needs. We’ll provide you with experienced and educated service professionals who proudly represent our company, products, business associates and community. </p>
</div>
</div>
<div id="left_bot">
<p><span class="lg_blue_hdr">Our Guarantee</span></p>
<p class="text"> United Distributors, Inc. guarantees your customer satisfaction. Our water treatment solutions are manufactured by some of the most trusted companies in the water treatment industry.</p>
</div>
</div>
<div id="right">
<div id="fla"><img src="fla.gif" width="430" height="380" /></div>
<div id="right_bot"><img src="bbb_logos.gif" width="430" height="160" vspace="50" /></div>
</div>
<div id="bottom">Content for id "bottom" Goes HereHereContent for id "left_bot" Goes HereContent for id "left_bot" Goes HereContent for id "left_bot" Goes Here </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
body {
background: #EEEEE4;
}
.lg_blue_hdr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000066;
line-height: 10px;
}
.lb_blk_hdr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
line-height: 10px;
}
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #000000;
}
a.text:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366;
text-decoration: underline;
}
a.text:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #009900;
text-decoration: underline;
}
#wrap {
background: url(blue_white_bkgd.gif) repeat-y 50% 0%;
margin: 0px auto auto;
padding: 0px;
width: 800px;
}
#top {
margin: 0px auto;
padding: 0px;
width: 800px;
}
#left {
margin: 0px;
padding: 0px;
float: left;
width: 370px;
background: url(none);
}
#left_top {
background: D9DAD5 repeat-y 50% 0%;
margin: 0px;
padding: 0px;
width: 370px;
}
#left_grey {
background: #D9DAD5;
margin: 0px;
padding: 15px;
width: 340px;
}
#left_bot {
margin: 0px;
padding: 15px;
width: 340px;
}
#right {
margin: 0px;
padding: 0px;
float: right;
width: 430px;
}
#bottom {
background: #000000;
float: left;
width: 770px;
margin: 0px;
padding: 15px;
}
It would help greatly if you could point us to a live version of the page. There's a lot of things that can affect the display of pages in browsers (standards or quirks rendering mode, doctypes, valid/invalid HTML and CSS, etc.)
As it stands, there's not enough information in your question to let people accurately pinpoint the source of your problem.
Also, keep in mind that Firefox and Safari are most likely rendering your page "correctly". But because you've been coding it for IE, you've probably coded your CSS to make it look good in IE at the expense of standards-compliant browsers.
EDIT: With the properly formatted code above, I refactored your code a bit. When writing HTML, it's a considered a best-practice to use class and id attributes that describe what it's content is, not what it looks like. So "header" instead of "top" and "content" instead of left.
This simpler code should also make it easier to debug.
HTML:
<!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>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><img src="top.jpg" width="800" height="115" /></div>
<div id="wrap">
<div id="content">
<div id="left_top">
<h2>Water. Pure and Simple</h2>
<p>United Distributors, Inc. is the region’s top provider of Water Treatment Solutions and Supplies. For over 30 years, you have trusted us to provide the latest in water treatment technology and related products. We have met your needs through a broad range of products that provide you the purest of water for use in your Home, Office, Restaurant /Food Service and Medical Facilities and Commercial/Industrial facilities. </p>
<p>Call us today. With over 80 years combined experience, our Certified Staff can be called upon to share their experience and expertise with you. At United Distributors we not only provide you with water solutions, our Certified Staff accurately installs your treatment equipment and ensures your system is maintained for the highest level of quality water.</p>
<p>Let us help you enjoy the healthy benefits of safe, pure water.</p>
<h2>Our Promise to You...</h2>
<p>We are committed to market innovative and creative water treatment and water related products to meet and fulfill your needs. We’ll provide you with experienced and educated service professionals who proudly represent our company, products, business associates and community. </p>
</div>
<div id="left_bot">
<h2 class="blue">Our Guarantee</h2>
<p> United Distributors, Inc. guarantees your customer satisfaction. Our water treatment solutions are manufactured by some of the most trusted companies in the water treatment industry.</p>
</div>
</div>
<div id="images">
<img src="fla.gif" width="430" height="380" />
<img src="bbb_logos.gif" width="430" height="160" vspace="50" />
</div>
<div id="footer">Content for id "bottom" Goes HereHereContent for id "left_bot" Goes HereContent for id "left_bot" Goes HereContent for id "left_bot" Goes Here </div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
body {
background-color: #EEEEE4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #000000;
}
h2 {
font-size: 15px;
line-height: 10px;
}
h2.blue {
color: #000066;
}
a:link {
font-size: 12px;
font-weight: bold;
color: #003366;
text-decoration: underline;
}
a:hover {
font-size: 12px;
font-weight: bold;
color: #009900;
text-decoration: underline;
}
#wrap {
background: url(blue_white_bkgd.gif) repeat-y 50% 0%;
margin: 0px auto;
padding: 0px;
width: 800px;
}
#header {
margin: 0px auto;
padding: 0px;
width: 800px;
}
#content {
margin: 0px;
padding: 0px;
float: left;
width: 370px;
background: url(none);
}
#left_top {
background: #D9DAD5;
margin: 0px;
padding: 15px;
width: 340px;
}
#left_bot {
margin: 0px;
padding: 15px;
width: 340px;
}
#right {
margin: 0px;
padding: 0px;
float: right;
width: 430px;
}
#footer {
clear: both;
background: #000000;
width: 770px;
margin: 0px;
padding: 15px;
color: white;
}
I created an HTML file, added the CSS, and created dummy images to replace the ones that should be there. Here's a screenshot of the Mac Firefox 3.0.6 overlaid on the IE 7:
http://s622.photobucket.com/albums/tt302/ellen898945/?action=view¤t=Firefox_IE.png
The file looks almost exactly the same to me, using the code that you sent, minus some text rendering differences. Can you provide a better description of the problem you're having, or provide visual examples? You're not using any CSS that's particularly tricky, or which is poorly-supported on any of the major browsers; it's hard for me to understand what your concern is.
Generally you have to accept that you don't have full control over the pages that you're sending out. You could have a user who sets their text size larger or smaller than the default, or who always sets the page background to white and ignores your colors. If the rendering is off by a couple of pixels in different browsers on different operating systems, it's not a big deal. And realistically, no users are going to (a) open the same page in two different web browsers side by side (b) notice that they're a tiny bit different and (c) care.