|
HTML - Center Align Table - Firefox/ie Problem
Not a major programmer but I needed to make a website.
I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered. In IE the tables align center on each page. But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center. Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem. Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn. Similar TutorialsI apologize if it is improper protocol to post a link rather than the actual code but since View>Source exists for seeing both the html and css code and there is a fair amount of code...here is the link: http://nicolemuller.com/IMS/FINAL/ne...al/signin.html I don't know what I'm doing wrong but I cant get all the elements in the 2 rows to align and center with the rule of the menu strip. Any help would be great-thanks! Ok, i have a table and there two images in two different frames next to each other. Sence one is taller than the other, the smaller one is centered in the middle of the <td> I want to have the tops of the images aligned, do you know how to do that? Hi there, After HOURS of battling with what I thought should be so simple I have given up and registered for help! The very basic form of my problem is I want a table with 3 cells, The first two cells (one black, one blue) I want to be left aligned and simply as wide as the cell contents. I then want the 3rd cell to be right aligned, and fill up the rest of the row before reaching the text. So the 3rd cell spans from the 2nd cell all the way to the right of the table. I have uploaded 2 images. One is the rough design that I'm trying to achieve, the other shows my results. what I want: http://imageshack.us/photo/my-images/705/hopez.png/ (the 'music videos' would be in a separate cell as the background will be blue as you can see in my tests below) actual: http://imageshack.us/photo/my-images/830/problemue.png/ It either ends up as above or with hours of fiddling I did somehow have it over at the right, but only behind the text was black, there was just open space between the blue cell and the right aligned cell. So frustrated, better go to bed, haha. Hello Guys, I have made some page with nested div's. I made it's width to 80%. I want that to be completely aligned to center of the page. I tried with css and with html and with parent div. But some thing makes it not to work. Can you see the below code and please suggest me to get that to center. HTML Code: <style type="text/css">
.nm-left { text-align:left; vertical-align:text-top; }
.nm-left .nm-video, .nm-right .nm-video-reverse, .nm-left .nm-avatar, .nm-left .nm-avatar-wrapper, .nm-left span.nm-button, .nm-left #user-form input#submit { float:left; }
.nm-right { text-align:right; vertical-align:text-top; }
.nm-right .nm-video, .nm-left .nm-video-reverse, .nm-right .nm-avatar, .nm-right .nm-avatar-wrapper, .nm-right span.nm-button, .nm-right #user-form input#submit { float:right; }
.nm-wrapper { clear:both; font-size:14px; line-height:21px; margin:20px 0; padding:0px; }
.nm-wrapper div { background-position:99% 10px; background-repeat:no-repeat; margin:0; padding:0; }
.nm-wrapper div div { }
.nm-wrapper div div div { overflow:hidden; }
#ninjamonials .nm-wrapper div div div div { background:transparent; padding:20px;}
#ninjamonials .nm-wrapper div div div div div { padding:0; }
blockquote.nm-summary div, blockquote.nm-testimonial div, blockquote.nm-summary, blockquote.nm-testimonial, blockquote.nm-summary p, blockquote.nm-testimonial p { background:transparent; border:none; padding:0; margin:0; text-decoration:none; font-style:normal; }
span.nm-button, #user-form input#submit { margin:5px; }
#user-form { background-position:left bottom; background-repeat:repeat-x; clear:both; font-size:14px; line-height:21px; margin-top:20px; padding:5px; }
.nm-testimonial, .nm-summary, .nm-author { padding-left:140px }
.nm-summary { font-weight:bold; }
.nm-author { display:block; font-size:12px; }
.nm-name { font-weight:bold; padding-right:5px; }
.nm-video, div.nm-video-reverse { margin:10px !important; }
.nm-audio, .nm-author { padding:5px !important; }
.nm-audio { display:block; }
.nm-name { font-style:italic; }
/* Oceanic Avatar-Specific CSS */
.nm-avatar { }
.nm-avatar img { background-color:#F7F7F7; border:1px solid #DBDBDB; margin:10px; padding:5px; }
/* Oceanic Module-Specific CSS */
.nm-module { overflow:hidden; margin: 5px; padding:4px!important; }
.nm-module div.nm-avatar img { }
.nm-module div.nm-avatar { }
/* Blue Style */
.nm-right.nm-oceanic-blue.nm-module, .nm-right.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-blue.nm-module, .nm-left.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat; color:#666; }
.nm-oceanic-blue .nm-wrapper div { background:url(oceanic_blue_tr.png) no-repeat 100% 0; }
.nm-oceanic-blue .nm-wrapper div div { background:url(oceanic_blue_bl.png) no-repeat 0 100%; }
.nm-oceanic-blue .nm-wrapper div div div { background:url(oceanic_blue_br.png) no-repeat 100% 100%; }
.nm-oceanic-blue #user-form { background-color:#EFF8FF; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-blue .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_blue_quote.png) no-repeat 10px 10px !important; }
/* Green Style */
.nm-right.nm-oceanic-green.nm-module, .nm-right.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-green.nm-module, .nm-left.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat; color:#666; }
.nm-oceanic-green .nm-wrapper div { background:url(oceanic_green_tr.png) no-repeat 100% 0; }
.nm-oceanic-green .nm-wrapper div div { background:url(oceanic_green_bl.png) no-repeat 0 100%; }
.nm-oceanic-green .nm-wrapper div div div { background:url(oceanic_green_br.png) no-repeat 100% 100%; }
.nm-oceanic-green #user-form { background-color:#EBF4D7; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-green .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_green_quote.png) no-repeat 10px 10px !important; }
/* Grey Style */
.nm-right.nm-oceanic-grey.nm-module, .nm-right.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey.nm-module, .nm-left.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat; color:#666; }
.nm-oceanic-grey .nm-wrapper div { background:url(oceanic_grey_tr.png) no-repeat 100% 0; }
.nm-oceanic-grey .nm-wrapper div div { background:url(oceanic_grey_bl.png) no-repeat 0 100%; }
.nm-oceanic-grey .nm-wrapper div div div { background:url(./images/oceanic_grey_br.png) no-repeat 100% 100%; }
.nm-oceanic-grey #user-form { background-color:#EFEFEF; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(./images/oceanic_grey_quote.png) no-repeat 10px 10px !important; }
/* White Style */
.nm-right.nm-oceanic-white.nm-module, .nm-right.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_tl.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white.nm-module, .nm-left.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_nq.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_tl.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_nq.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-oceanic-white .nm-wrapper div { background:url(oceanic_white_tr.png) no-repeat 100% 0; }
.nm-oceanic-white .nm-wrapper div div { background:url(oceanic_white_bl.png) no-repeat 0 100%; }
.nm-oceanic-white .nm-wrapper div div div { background:url(oceanic_white_br.png) no-repeat 100% 100%; }
.nm-oceanic-white #user-form { background-color:#FFF; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_white_quote.png) no-repeat 10px 10px !important; }
.nm-audio1 {padding:5px !important; }
.nm-summary1 {padding-left:140px }
</style>
<div id="ninjamonials" class="nm-oceanic-grey nm-left" style="width:80%">
<!--bof nm-wrapper -->
<div class="nm-wrapper">
<div>
<div>
<div>
<div class="nm-content">
<div class="nm-avatar-wrapper">
</div>
<blockquote
class="nm-testimonial">
<p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p>
<p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p>
</blockquote>
<div class="nm-author">
<span class="nm-name">Name</span>
(Website<span class="nm-title"></span>
~ <span class="nm-auth-url"><a
href="http://www.google.com/">www.google.com</a></span>
, <span class="nm-location">Mine</span>
) </div>
<!--eof nm-author -->
</div>
<!--eof nm-content -->
<!--eof wrapper -->
</div>
</div>
</div>
</div>
<div class="nm-wrapper">
<div>
<div>
<div></div></div></div></div></div>
Waiting for your solution. Thanks in advance! Hi! I've been struggling with a problem how to align a div to center and top of browser, but just simply can't seem to find a working solution. Here's an example page where I have aligned the site to top but it is not centered. http://www.marufox.net I am not working on that current site now, but still something similar, so the code can differ from what you see there. Any help will be greatly appreciated! I can't get my whole nav bar to align to the center of my sidebar 1 div. Check it out please. http://northwindappaloosas.com I have got a menu working but i don't know how to align it to the left center of the screen. at the moment it is at the top left of the screen. here is the code that i have got so far: HTML Code: <head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Demo Menu 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<link rel="stylesheet" type="text/css" href="sddm.css" >
<title>JSwitch Slide Menu</title>
</head>
<body>
<div class="navbar" style="width: 148; height: 253;">
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 1</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:inline;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Tool Box</a></div>
<div class="subItem"><a href="#">Contact Us</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
<div class="subItem"><a href="#">Sub Menu 5</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<br>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 2</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:none;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Sub Menu 2</a></div>
<div class="subItem"><a href="#">Sub Menu 3</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<script type="text/javascript" src="xpmenuv21.js"></script>
</div>
<p> </p>
</body>
i'm having no luck vertically aligning the text in the MIDDLE within the <td>. Notice how it is aligned TOP in the rollover state. See code below, please help. --- <!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"> <head> <title>javascript free td link</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> #cell { width:278px; height:25px; } #cell2 { width:278px; height:25px; } a#roll { display:block; width:278px; height:25px; background:#FFFFFF; text-align:left; text-decoration:none; font-family:arial; font-size:14px; color:#FF0000; } a#roll:hover { background:#FF0000; color:#FFFFFF; } </style> </head> <body> <table border="0" cellpadding="1" cellspacing="0"> <tr> <td id="cell"><a id="roll"href="http://www.google.com"> HOME</a></td> </tr> <tr> <td id="cell2"><a id="roll"href="http://www.google.com"> ABOUT</a></td> </tr> </table> </body> </html> Hi Everyone, I can't seem to figure out how to make my pages horizontaly align to the center of the screen. Seemed easy enough but can't seem to make it work. Here is one of those pages : http://www.ruze.ca/Kunstler/Homepage.html It would be amazing if one of you could tell me how to fix this. I'm by no means a web guy, I'm just trying to put up a temporary version of the site I'd like to have made by a real pro when I can afford it. Thanks! D. As You Can see that the url i am providing includes stuff which is aligned left and i want to align it to center how can i do it . Guide me if there is an appropriate way to align it to center without changing the whole of the style sheet. http://www.ims-sc.org REGARDS Hello, I am newbie, just has started my adventure with html. I tried to make an easy static site, without any additional thingd, but it occured a problem. 1. I mean, as I put table in table because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise) 2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?) -probably it is not this- because I have just changed into gif, and it is still the same 3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website? Here I post my website: http://members.lycos.co.uk/aniaacolgate/ Could someone take a look on the code, and will be so kind to correct me? It is a basic easy site of very begginger I just wanted to make a shape like this: - top: a banner - buttons in horizontal and vertical way - under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons Thank you so much in advance for reply Sorry for mistakes in language With the align attribute of <img> deprecated, can anyone tell me what the correct way of center-aligning an image should be? Thanks, James Hi there i am trying to center align and image and text as well as float the text to the left of the image. It seems I can only manage to do one or the other, the code below floats the text to the left of the image, but the two elements sit to the left on page. How can i center this? HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <center> <div id="spacer"></div> <div id="header"></div> <div class="row"> <div class="left"> <img src="ripple.jpg"/> </div> <div class="right"> <p class="bio">After leaving school I studied graphic design at Kingsway College of Art in London. During this time I learned the basics of the profession.</p> </div> </div> <ul id="minitabs"> <li><a href="Home.html">Home</a></li> <li><a href="Biography.html">Biography</a></li> <li><a href="Portfolio.html">Portfolio</a></li> <li><a href="Contact.html">Contact</a></li> <li><a href="About.html">Links</a></li> </ul> <div id="underline"></div> </center> </body> </html> CSS: Code: row { position: center; width: 800px;}
.left { width:400px; height: 330px; float: left; }
.right { width: 400px; height: 330px; float: left; }
#spacer {
width:800px;
height:12px;
background-color: #3366ff;
}
#header {
position:center;
width:800px;
height:75px;
background-image:url('images/portfolio.gif');
background-repeat:no-repeat;
}
/* Styles for nav bar */
#minitabs {
clear: both;
padding: 25px 0 14px 10px;
width: 800px;
}
#minitabs li{
margin-left: 0px;
padding: 0px;
display: inline;
list-style: none;
}
#minitabs a{
line-height: 14px;
font-weight: bold;
font-family: verdana;
margin: 0 10px 4px 0px;
text-decoration: none;
color: #777777;
}
#minitabs a.active,
#minitabs a:hover {
border-bottom: 10px solid #3366ff;
font-weight: bold;
padding-bottom: 5px;
color #ff6600;
}
/* Styles for images on Portfolio page */
#images1 {
clear: both;
margin-top: 25px;
padding: 0px 0px 10px 0px;
width: 800px;
}
#images1 li{
margin-left: 0px;
padding: 5px;
display: inline;
list-style: none;
}
#images2 {
clear: both;
margin-top: 25px;
padding: 0px 0px 10px 0px;
width: 800px;
}
#images2 li{
margin-left: 0px;
padding: 5px;
display: inline;
list-style: none;
}
#underline {
margin: -16px 100px;
width: 800px;
border-bottom: 1px solid;
color: #777777;
}
p.bio {
text-align: center;
width:500px;
font-family: verdana;
}
Any suggestions? Thank you Jackie Hello this is going to sound really basic so any way How do you style font to appear in the middle of your page using CSS as im aware you can either float left or right, am i right in saying you have to use padding? margins? to get it to be where u want it to sit? All I want is to have my image placed in the center of my web page... Every code I try doesn't work. The image is either at the top of the page or it doesn't stay in the center at different resolutions. Can someone help me? Hi, I created a table with rounded corners and I'm having a white-space problem in the inner bottom and top part of the table while using the MOZILLA FIREFOX browser. The URL below will show you what I'm talking about. I've spent many hours trying to get rid of those white spaces but cant figure out. http://www.imageenvision.com/test.html Code: <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" href="/css_style_sheet.css" type="text/css">
</head>
<body>
<table align='center' width='500' height='0' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td width='0' height='0'><img src='/pics/top_left_rounded_corner.gif' height='9' width='9' border='0'></td>
<td width='100%' height='0'><img src='/pics/top_middle.gif' height='9' width='100%' border='0'></td>
<td width='0' height='0'><img src='/pics/top_right_rounded_corner.gif' height='9' width='9' border='0'></td>
</tr>
<tr>
<td colspan='3' height='100' align='center' bgcolor='#F8F8F8'><!--MAIN TABLE STUFF--></td>
</tr>
<tr>
<td width='0' height='0'><img src='/pics/bottom_left_rounded_corner.gif' height='9' width='9' border='0'></td>
<td width='100%' height='0'><img src='/pics/bottom_middle.gif' height='9' width='100%' border='0'></td>
<td width='0' height='0'><img src='/pics/bottom_right_rounded_corner.gif' height='9' width='9' border='0'></td>
</tr>
</table>
</body>
</html>
Thanks in advance for your help. Kenny Adams Image Envision Hi Can anyone solve this problem. Here is my code. <!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=iso-8859-1" /> <title>Hide/Show Test!</title> <style> .myclass1 { background-color:#CCCCCC; display:block; } .myclass2 { display:none; } </style> </head> <body> <script> function hideNshow(){ var e1=document.getElementById('A1C1_1'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } e1=document.getElementById('A1C1_2'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } } </script> <!-- <input type="button" name="myBtn" value="Click Me!" onclick=" hideNshow();"/>--> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td><a href="#" onclick=" hideNshow();">Row1/Cell1</a></td> <td >Row1/Cell2</td> <td>Row1/Cell3</td> </tr> <tr id="A1C1_1" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr id="A1C1_2" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr> <td>Row3/Cell1</td> <td>Row3/Cell2</td> <td>Row3/Cell3</td> </tr> <tr> <td>Row4/Cell1</td> <td>Row4/Cell2</td> <td>Row4/Cell3</td> </tr> <tr> <td>Row5/Cell1</td> <td>Row5/Cell2</td> <td>Row5/Cell3</td> </tr> </table> </body> </html> It is working fine in IE. When I click the link It displays the hidden rows and hides when I click the link agian. But in Firefox it is giving error. It is adding empty rows. How to prevent that. Thanks in advance. Hi, In our header he http://www.weddinginvitationsandfavors.com/, to the right of the bride and groom, please notice the 2 table cells: one with our guarantee, and one with credit card and shipping co. logos. These display centered in the old Firefox and IE browsers, but not the new upgrades. The table data displays in the new Firefox as justified right, and in the new IE as justified left. I have tried many things to center them, but have failed. Do you know how to center them in all browsers? Here is the code... TABLE#header TD.guarantied { width: 22%; font-family: Arial, sans-serif; font-size: 10pt; padding: 0px; margin: 0px; text-align: center; vertical-align: center; } TABLE#header TD.guarantied IMG { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; text-align: center; } TABLE#header TD.creditCards { width: 22%; border-right: 1px solid #000; font-family: Arial, sans-serif; font-size: 10pt; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; text-align: center; vertical-align: center; } TABLE#header TD.creditCards IMG { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: center; vertical-align: center; } <tr> <td class="ourphoto"><img src="http://www.weddinginvitationsandfavors.com/images/photo.jpg" alt="" /></td> <td class="guarantied"><img src="http://www.weddinginvitationsandfavors.com/images/guarantied.jpg" alt="" /> <br />"Feel 100% content with the<br>beauty, quality and delivery<br>time of your invitations, or <br>return them for a full refund" </td> <td class="creditCards"><img src="http://www.weddinginvitationsandfavors.com/images/CreditCards.jpg" alt="" vspace="0" /> <img src="../../images/logos-5.jpg" alt="UPS" /><br />Worldwide shipping to U.S.,<br />Europe, Asia, Australia, etc.,<br />delivered in 4-7 business days. </td> </tr> </table> Thank you for your help, Greg I am building a web site for one of my friends. The address is www.lawlessbullies.com . I can't get the middle section to remain centered on both Firefox and IE. It looks perfect in IE, but not in Firefox. I'm not sure if I need to edit my html, or the css. Can someone take a look and help me out? i've been trying to find a solution for weeks and this is my last resort. Its probably something small, and easy. I'll post my index.html and my style.css |
|||||||