|
HTML - How Do I Fix Mac Rendering Issues On Html Emails?
I currently send out html emails through my esp and do several rendering checks on all major isp's such as hotmail, gmail, yahoo etc.
The email renders fine in all message previews but I do not know a way to check how the email renders for mac users. I found out recently that the emails render very poorly in macs, with images breaking throughout. I need to somehow be able to preview how the html will look like in a mac in order to test and fix these rendering issues. Similar TutorialsCan anyone expain to me why this page I am working on looks fine in both Google Chrome and Mozilla Firefox, but looks completely askew when using Microsoft Internet Explorer? Any help would be appreciated! http://imxevent.com/imx2011/Public/C...ortMenu=101005 view-source:http://imxevent.com/imx2011/Public/C...ortMenu=101005 I think it is this piece of code that is causing me problems (lines 281-287)... HTML Code: <p><font style="FONT-SIZE: 20px" color="#c00000"><strong>imX Keynote Sessions</strong></font></p> <p><span style="FONT-FAMILY: Univers 57 Condensed; COLOR: black"><font style="FONT-SIZE: 15px">An extension of the forward thinking that has defined the development of imX, these Keynote Presentations reflect imX’s position as a high-level gathering place for manufacturing thought leaders from across the country and around the world. If it’s important for U.S. manufacturing, it's discussed at imX.</font></span> </p><p><table style="width: 510px; height: 138px; " class="RadEDomMouseOver"> <tbody> <tr> <td colspan="3"> <strong>KEYNOTE SESSION - DAY ONE</strong></td></tr> <tr><td style="text-align: center; vertical-align: top; "> <img alt="Michael Molnar" src="http://www.imxevent.com/imx2011/CUSTOM/images/molnar.jpg">&nbsp;</td><td>&nbsp;</td><td style="text-align: left; vertical-align: middle; "><font><font><br><url=http://www.imxevent.com/imx2011/public/Content.aspx?ID=316&amp;sortMenu=102003 style="color: rgb(255, 0, 0); font-family: arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; ">Michael F. Molnar</a></font></font><b style="font-family: arial, Verdana, sans-serif; font-size: 14px; ">, FSME, CMfgE, PE</b><br><br><table class="RadEDomMouseOver" style="font-family: arial, Verdana, sans-serif; font-size: 14px; font-weight: bold; width: 510px; height: 138px; "><tbody><tr><td style="text-align: left; vertical-align: top; "><strong><font color="#ff0000">Date:</font></strong></td><td> </td><td style="text-align: left; vertical-align: top; ">Monday, September 12, 2011</td></tr><tr><td style="text-align: left; vertical-align: top; "><strong><font color="#ff0000">Speaker:</font></strong></td><td> </td><td style="text-align: left; vertical-align: top; ">Michael F. Molnar, FSME, CMfgE, PE</td></tr><tr><td style="text-align: left; vertical-align: top; "><strong><font color="#ff0000">Title:</font></strong></td><td> </td><td style="text-align: left; vertical-align: top; ">The U.S. Advanced Manufacturing Initiative: <br>Your Role in Public Private Partnerships</td></tr></tbody></table></td></tr><tr><td style="TEXT-ALIGN: left; VERTICAL-ALIGN: top" colspan="3"> <iframe width="480" height="315" src="http://www.youtube.com/embed/VUzBbwlpIFk" frameborder="0" allowfullscreen=""></iframe></td></tr></tbody></table></p> <p><a name="schutz"></a> www.oceangoldseafoods.com/ Im having a rendering issue with pages using this template where if it does not scale to the bottom of the browser window, it cuts off the repeating image on the left side of the page and basically breaks the flow of the footer. Any ideas on possible solutions? Thanks!!!! (This is like the last thing before the site goes public). (Edited url) Hello everybody! I am new at this forum and I am trying to learn some HTML and CSS. I wonder if there is any tutorial where I can learn how to create HTML emails and publishing templates... Thank you very much!!! Marin Hi and thanks for the help. I did a very simple test trying to send a simple HTML file with windows mail to my yahoo and my goodle mail box. The HTML file is 2 divs, one black and a smaller blue inside him. In the windows mail the preview present the HTML file correctly. In the yahoo mail i see the DIV but they are completely out of position In the google I see nothing. a blank white page. Why does it happen? How do i fix it? Thanks again Noam This is the code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #apDiv1 { position:absolute; left:72px; top:68px; width:515px; height:325px; z-index:1; font-family: Arial, Helvetica, sans-serif; background-color: #000000; } #apDiv2 { position:absolute; left:98px; top:63px; width:297px; height:178px; z-index:1; background-color: #0066FF; } --> </style> </head> I made an html email and when I sent it to myself or my other computer it opens beautifully. But when I test sent it to my friends they said all they see is code. Why??? Hi there, I am an experienced html developer but I am a novice when it comes to tables, as I hate them! I am trying to create a newsletter. You can see how it should look at: http://danielrhyshardy.com/newsletter.html. However ( I do know I am opening a can of worms here) when sent in email all of my INLINE styling is lost, well, most of it anyway. Here is the code I am using: <html> <body> <style> a { color:#333333; } a:hover { color:#ffffff; } a.top { color:#ffffff; text-decoration:none; } a.top:hover { color:#333333; } </style> <table background="http://www.danielrhyshardy.com/back.jpg" and cellspacing="0" style="margin:auto;font-family:'Myriad Pro';font-size:14px;color:#333333;"> <tr style="width:492px;height:31px;font-weight:100;"> <td style="margin-left:100px;padding-left:40px;width:121px;margin-top:40px;height:31px;float:left;line-height:31px;text-align:center;"> <a class="top" href="" >Latest Collection</a> </td> <td style="width:121px;margin-top:40px;background-color:#999966;height:31px;float:left;line-height:31px;text-align:center;"> <a class="top" href="" >Ascot Collection</a> </td> <td style="width:121px;margin-top:40px;background-color:#999966;height:31px;float:left;line-height:31px;text-align:center;"> <a class="top" href="" >Bridal Collection</a> </td> <td style="width:123px;margin-top:40px;background-color:#999966;height:31px;float:left;line-height:31px;margin-right:100px;text-align:center;"> <a class="top" href="" >Hat Parties</a> </td> </tr> <tr style="width:182px;height:25px;"> <td background="http://www.danielrhyshardy.com/top.jpg" style="margin-left:100px;width:182px;height:25px;padding-left:350px;padding-top:290px;float:left;color:#ffffff;font-size:20px;">Title text here....</td> </tr> <tr style="width:532px;height:auto;"> <td style="margin-left:100px;width:452px;padding:40px;height:auto;float:left;background-color:#999966;"> main text goes here<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</td> </tr> <tr style="width:532px;height:40px;"> <td style="margin-left:100px;width:532px;height:40px;float:left;background-color:#999966;text-align:center;font-weight:bold;"><a style="color:#333333;" href="#"> to visit the website click here</a> </td> </tr> <tr style="width:532px;height:auto;"> <td style="margin-left:100px;width:412px;padding:60px;height:auto;float:left;background-color:#999966;"> more text goes here<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</td> </tr> <tr style="width:532px;height:250px;"> <td style="margin-left:100px;width:234px;padding-top:20px;height:250px;float:left;background-color:#999966;padding-left:40px;text-align:center;"> <img src="http://www.danielrhyshardy.com/border1.jpg"> </td> <td style="width:253px;padding-top:20px;height:250px;float:left;background-color:#999966;padding-left:3px;"> <img src="http://www.danielrhyshardy.com/border2.jpg"> </td> </tr> <tr style="width:532px;height:24px;"> <td style="margin-left:100px;width:512px;margin-top:15px;height:24px;float:left;background-color:#c7c7a9;background-repeat:no-repeat;padding-left:20px;padding-top:40px;"> <img src="http://www.danielrhyshardy.com/upcoming.jpg"> </td> </tr> <tr style="width:532px;height:auto;"> <td style="margin-left:100px;width:412px;height:auto;float:left;background-color:#c7c7a9;font-weight:bold;padding-left:20px;padding-right:100px;padding-top:20px;"> date <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <p> date <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <p> date <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <p> date <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <p> date <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <p> date <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </td> </tr> <tr style="width:532px;height:230px;"> <td style="margin-left:100px;width:151px;padding-top:20px;height:230px;float:left;background-color:#c7c7a9;padding-left:20px;"> <img src="http://www.danielrhyshardy.com/bottom1.jpg"> </td> <td style="width:151px;padding-top:20px;height:230px;float:left;background-color:#c7c7a9;padding-left:10px;"> <img src="http://www.danielrhyshardy.com/bottom2.jpg"> </td> <td style="width:187px;padding-top:20px;height:230px;float:left;background-color:#c7c7a9;padding-left:10px;"> <img src="http://www.danielrhyshardy.com/bottom3.jpg"> </td> </tr> <tr style="width:532px;height:44px;"> <td style="margin-left:100px;width:530px;height:44px;float:left;background-color:#999966;"> </td> </tr> <tr style="width:532px;height:24px;"> <td style="margin-left:100px;width:530px;height:24px;float:left;background-color:#c7c7a9;margin-bottom:100px;"> </td> </tr> </table> </body> </html> Please help me as this is really annoying the hell out of me. Hoping there might be some table or email developers out there who can help me. Thanks in advance Dan Hello i have created a html page that i would like viewing in an email. so far i have successfully got it working but the only problem is when i send the email the user recieves the html email which works but they also recieve an attachment which a iwould like to get rid of, so that when i send the html email the user only gets the html email with no attachment included. has anyone got any suggestions. the html im using is as follows: <html> <head> <title>Web Mailer</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" text="#000000"> <p align=center><img src="http://www.jmp-partnership.co.uk/mailer/ethicon/web_mailer.jpg" align="absmiddle" > </body> </html> I have both the HTML and image displyed on a server and the address is shown above. the Email displays and works fine but when sending it an attachment of the jpg is also being sent which i dont want. If anyone can help would be very grateful thanks I am currently near my deadline to hand in my c/w....i have created a webpage on visual studio web developer where i have created a feedback form, however i am having problems in gettng the send button to work so that the information is sent to an email address. Any help would be much appreciated. Thank You. can someone please tell me why my code derived from a 'web site creator' software won't display properly in my 'email creator' software? i am to assume that i need look for something in the code that the email program is stripping out (color alignment, etc?) i use the website creator software because it enables more flexibility with images and overlaying texts. thanks Hi. I created html email, have all images on the server. But how do I attach my html to email so that it shows in the body of email and not as an attachement?? Thanks!!!! Hi, I'm new to HTML and my interest is purely in coding for emails. My specific challenge de jour is coding a photo into an email without it (i) needing to be on an external server or (ii) an attachment. I want the photo to travel with the email body with no external link. Is this possible and if so, can I be pointed to an example of same? Cheers. Hello, I have an html email that is being created with Cobol, then being sent via email to Outlook Express 6. When viewed, the page doesn't render correctly. Here is the page that's being displayed: 663 N. ACCESS ROAD CHICAGO IL 60666 ARRIVAL NOTICE MAWB: 933-06068274 SHIPPER SHAOXING XOUNTY YUNSHENG SHUFENG VILLAGE QIANQING SHANGHAI SH PVG CN CONSIGNEE MAJOR TEXTILE IMPORTS INC 1401 EAST 15TH STREET LOS ANGELES CA 90021 US FLIGHT DATE PIECES KILOS ORIG DEST ENTRY KZ/176 26JUN 45 500.0 NRT ORD LAX DESCRIPTION: WOVEN POLYESTER SEK STORAGE BEGINS: HAWB PCS KGS The page is built with tables, and they are supposed to line up next to one another. For example, the Shipper and Consignee Tables are supposed to be on the same table row. Here is the actual HTML code: <html> <body> <style type="text/css"> body {font-size: 11px; font-family: Verdana, sans-serif; border: 1px solid black;} table {font-size: 11px; font-family: Verdana, sans-serif; } </style> <table width="600"> <tbody> <tr> <td rowspan="3" width="150"><IMG SRC="HTTP://10.0.0.164/OPS/IMAGESX/NCA.JPG"></td> <td rowspan="3" width="100"></td> <td> <table width="350"> <tbody> <tr align="right"> <td colspan="3" width="350">445 BROADHOLLOW RD - SUITE 105</td> </tr> <tr align="right"> <td width="75%">MELVILLE</td> <td width="10%">NY</td> <td width="15%">11747</td> </tr> <tr align="right"> <td colspan="3">6314210900</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <table width="600"> <tbody> <tr> <td align="center"><h3>ARRIVAL NOTICE</h3></td> </tr> </tbody> </table> <table width="600"> <tbody> <tr> <td><h4>MAWB: 933-06068930</h4></td> </tr> </tbody> </table> <table width="600"> <tbody> <tr> <td> <table width="295"> <tbody> <tr> <td><b>SHIPPER</b></td> </tr> <tr> <td>PHOENIX INT L FREIGHT</td> </tr> <tr> <td>13TH FLOOR GREENLAND</td> </tr> <tr> <td>SHANGHAI SH PVG CN</td> </tr> </tbody> </table> </td> <td width="10"></td> <td> <table width="295"> <tbody> <tr> <td><b>CONSIGNEE</b></td> </tr> <tr> <td>PHOENIX INT L FREIGHT SER</td> </tr> <tr> <td>19701 SOUTH VERMONT AVENUE</td> </tr> <tr> <td>TORRANCE CA 90502 US</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <table width="400"> <tbody> <tr> <td colspan="7"><br></td> </tr> <tr> <td width="20%"><b>FLIGHT</b></td> <td width="16%"><b>DATE</b></td> <td width="16%" align="right"><b>PIECES</b></td> <td width="22%" align="right"><b>KILOS</b></td> <td width="12%" align="center"><b>ORIG</b></td> <td width="12%" align="center"><b>DEST</b></td> <td width="12%" align="center"><b>ENTRY</b></td> </tr> <tr> <td width="20%">KZ/108</td> <td width="16%">21JUN</td> <td width="16%" align="right">36</td> <td width="22%" align="right">621.00</td> <td width="12%" align="center">NRT</td> <td width="12%" align="center">LAX</td> <td width="12%" align="center">LAX</td> </tr> </tbody> </table> <table width="600"> <tbody> <tr> <td colspan="3"><br></td> </tr> <tr> <td width="68%"><b>DESCRIPTION: </b>CNSL BTS B</td> <td width="2%"></td> <td width="30%"><b>STORAGE BEGINS: </b>21JUN</td> </tr> </tbody> </table> <table width="300"> <tbody> <tr> <td colspan="3"><br></td> </tr> <tr> <td width="125"><b>HAWB</b></td> <td width="50" align="right"><b>PCS</b></td> <td width="70" align="right"><b>KGS</b></td> </tr> <tr> <td width="125">SHA10013627</td> <td width="50" align="right">24</td> <td width="70" align="right">211.00</td> </tr> <tr> <td width="125">SHA10013634</td> <td width="50" align="right">11</td> <td width="70" align="right">234.00</td> </tr> <tr> <td width="125">SHA10013637</td> <td width="50" align="right">1</td> <td width="70" align="right">176.00</td> </tr> </tbody> </table> </body> </html> Interestingly enough when you insert the html into Outlook Express and send it it renders perfectly. What can be causing Outlook to be rendering the HTML built by Cobol incorrectly. Thanks, Jared I am having an IE6 rendering error for http://cyanocide.com The layout is the way I want it in firefox and IE7. I am willing to change my CSS as long as I can keep this layout. can you please help me find what is wrong? I am including the css code hereunder: PHP Code: body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #708F82; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; } p { text-align: left; } .twoColFixLtHdr #container { width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ background: #8BB0A1; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 1px solid #000000; text-align: left; /* this overrides the text-align: center on the body element. */ } .twoColFixLtHdr #header { background: #DDDDDD; padding: 0px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ } .twoColFixLtHdr #header2 { background: #DDDDDD; padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ } .twoColFixLtHdr #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } .twoColFixLtHdr #sidebar1 { float: left; /* since this element is floated, a width must be given */ width: 350px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; height: 250px; } .twoColFixLtHdr #sidebar2 { float: left; /* since this element is floated, a width must be given */ width: 370px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; height: 250px; } .twoColFixLtHdr #sidebar3 { float: left; /* since this element is floated, a width must be given */ width: 250px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; height: 430px; } .twoColFixLtHdr #sidebar4 { float: left; /* since this element is floated, a width must be given */ width: 470px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; height: 430px; } .twoColFixLtHdr #sidebar5 { float: left; /* since this element is floated, a width must be given */ width: 350px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; height: 250px; } .twoColFixLtHdr #sidebar5 p { text-align: center; } .twoColFixLtHdr #sidebar5 h3 { text-align: center; } .twoColFixLtHdr #sidebar6 { float: left; /* since this element is floated, a width must be given */ width: 370px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; height: 250px; } .twoColFixLtHdr #sidebar6 p { text-align: center; } .twoColFixLtHdr #sidebar6 h3 { text-align: center; } .twoColFixLtHdr #sidebar7 { float: left; /* since this element is floated, a width must be given */ width: 750px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; height: 600px; } .twoColFixLtHdr #sidebar8 { float: left; /* since this element is floated, a width must be given */ width: 250px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; height: 650px; } .twoColFixLtHdr #sidebar9 { float: right; /* since this element is floated, a width must be given */ width: 470px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; height: 650px; } .twoColFixLtHdr #mainContent { margin: 0 0 0 0px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ background: #EBEBEB; padding: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ } .twoColFixLtHdr #footer { padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */ background:#DDDDDD; } .twoColFixLtHdr #footer p { text-align: center; margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; } div#navbar2 { height: 30px; width: 98%; margin-left: 1%; padding: 0px; background-repeat: repeat-x; text-align: center; background-image: url(navbar.jpeg); } div#navbar2 ul { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #FFFFFF; line-height: 30px; white-space: nowrap; font-weight: bold; } div#navbar2 li { list-style-type: none; display: inline; } div#navbar2 li a { text-decoration: none; padding: 0px 10px; color: #FFFFFF; font-weight: bold; } div#navbar2 li a:link { color: #FFFFFF; } div#navbar2 li a:visited { } div#navbar2 li a:hover { font-weight: bold; color: #FFFFFF; background-color: #003D6B; line-height: 30px; } div#navbar2 li a:active { font-weight: bold; color: #FFFFFF; background-color: #33CC66; } a { color: #1346C2; text-decoration: none;} a:hover { color: #AAAAAA;} I'm trying to type HTML code into a scroll box so people can copy it and paste it onto their own sites, rendering an image. Problem is, the code renders the image inside the scroll box, when I only want the code text. How do code it so that the image doesn't render, and only the code text is displayed? === I'm on a Mac and I'm noticing that the site I'm developing is having major <TABLE> issues on IE for the PC -- like seen in this Screen Shot he http://sample.studiopresence.com What it should look like is seen on this Screen Shot he http://sample.studiopresence.com/site_v2B.htm Here's the actual HTML version of the site: http://australianwellnesscentre.studiopresence.com Any help on this is GREATLY APPRECIATED!!! Thanks in advance! === Hi all, Not sure if im posting in the right place but i am having some problems, well, a lot of issues, with an email im sending in outlook. As you can see outlook has put hue gaps in before each section, although the gap in the right column is supposed to be there. Any one have any advice on how to fix this? Its works well in every other email inbox... really stumped! Thanks for any help in advance. Matt Hello all, I am having a problem which I can't seem to figure out with an html page. I sliced up a photoshop image then turned it into a web page. I took the html table from the sliced up header, and plugged it into the final web page. It looked like it was aligned properly in Dreamweaver, however when I viewed the webpage there were some alignment issues with the page. Here is the link to the misaligned page: http://test.gridpointpm.com Here is the code for part of the index page that includes the header with the alignment issues: 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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>
<body id="page1" onload="new ElementMaxHeight()">
<div class="w">
<div class="site_center">
<div class="site_center1">
<div id="header">
<div class="flash">
<!-- Save for Web Slices (indexheader.psd) -->
<table id="Table_01" width="866" height="441" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="13">
<img src="images/index_01.jpg" width="866" height="66" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="66" alt=""></td>
</tr>
<tr>
<td colspan="13"><img src="images/index_02.jpg" width="866" height="206" alt="" /></td>
<td>
<img src="images/spacerh.gif" width="1" height="206" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<img src="images/index_03.jpg" width="632" height="114" alt=""></td>
<td colspan="5">
<img src="images/index_04.jpg" width="157" height="34" alt=""></td>
<td rowspan="6">
<img src="images/index_05.jpg" width="77" height="169" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="34" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/index_06.jpg" width="157" height="95" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/index_07.jpg" width="360" height="15" alt=""></td>
<td rowspan="3">
<img src="images/index_08.jpg" width="180" height="40" alt=""></td>
<td rowspan="4">
<img src="images/index_09.jpg" width="92" height="55" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_10.jpg" width="153" height="40" alt=""></td>
<td>
<img src="images/index_11.jpg" width="42" height="16" alt=""></td>
<td rowspan="3">
<img src="images/index_12.jpg" width="9" height="40" alt=""></td>
<td>
<img src="images/index_13.jpg" width="58" height="16" alt=""></td>
<td rowspan="3">
<img src="images/index_14.jpg" width="98" height="40" alt=""></td>
<td rowspan="3">
<img src="images/index_15.jpg" width="31" height="40" alt=""></td>
<td>
<img src="images/index_16.jpg" width="44" height="16" alt=""></td>
<td rowspan="3">
<img src="images/index_17.jpg" width="7" height="40" alt=""></td>
<td>
<img src="images/index_18.jpg" width="55" height="16" alt=""></td>
<td rowspan="3">
<img src="images/index_19.jpg" width="20" height="40" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_20.jpg" width="42" height="24" alt=""></td>
<td rowspan="2">
<img src="images/index_21.jpg" width="58" height="24" alt=""></td>
<td rowspan="2">
<img src="images/index_22.jpg" width="44" height="24" alt=""></td>
<td rowspan="2">
<img src="images/index_23.jpg" width="55" height="24" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_24.jpg" width="180" height="15" alt=""></td>
<td>
<img src="images/spacerh.gif" width="1" height="15" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</div>
</div>
Any help would be much appreciated. Thanks in advance. Hi guys maybe some one could help me here iv made a template in photoshop see below now i have the header and footer stretching perfectly now the issues is when i try to insert the content in the middle (content is a thumbnail gallery script) 2 left and right sidebar disappear and they do not stretch up and down i duno what im missing ??? is there a way to do this?? iv tried using a table inbetween the top and bottom half but still i just removes the side bars... in other words im try to "make a square(theme) with content in the middle of it" if you catch my drift with the side bars streting up and down as the content grows larger i think an iframe in the middle would work but the CMS im using does not like Iframes and i know iframes are a bit outdated here is the code im using... ANy help will be very much appreciated HTML Code: <style type="text/css">
<!--
body,td,th {
color: #0F0;
}
-->
</style><center>
<style type="text/css">
<!--
body {
background-color: #0b0b0b;
}
-->
</style><table id="Table_01" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="images/steamlounge_01.png" width="213" height="185" alt=""></td>
<td background="images/steamlounge_02_STR.png" width="100%" height="185" alt=""></td>
<td colspan="2">
<img src="images/steamlounge_04.png" width="238" height="185" alt=""></td>
</tr>
</table>
<table id="Table_02" align="left" width="87" height"100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/steamlounge_05_STR.png" alt=""></td>
</tr>
</table>
<p>hgjdgjdghjjdg
hjd
ghjd
gh
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
g
gg </p>
<p>g</p>
<p>g</p>
<p>g</p>
<p>g</p>
<p> </p>
<table id="Table_02" align="right" width="87" height"100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/steamlounge_07_STR.png" alt=""></td>
</tr>
</table>
<table id="Table_01" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="images/steamlounge_10.png" width="213" height="68" alt=""></td>
<td background="images/steamlounge_11_STR.png" width="100%" height="68" alt=""></td>
<td colspan="2">
<img src="images/steamlounge_13.png" width="238" height="68" alt=""></td>
</tr>
</table>
</center>
Hello all! New to the forum here, so smack me into shape if i step outside of the rules... Have recently been attempting to maintain a (very basic) website for my parent's cottage. I aimed to keep it low maintenance in order to allow me not to have to do too much to it! The address is http://www.bettwsbach.co.uk Recently, i've been attempting to add a new 2009 price list to the website, which has come to me in the form of an excel spreadsheet. Here's how it should look: http://www.bettwsbach.co.uk/Misc/BBPrice.jpg I've used Excel's in-house save-to-webpage feature, and with a bit of jiggery-pokery to make the background come up (!!) here's how it appears as part of a frameset on my mac: http://www.bettwsbach.co.uk/Misc/BBPriceMac.jpg HOWEVER! I'm reliably informed that on various computers, the formatting gets pretty screwed. If you have time, go through the link to the website above, click on 2009 prices, and see if it's legible. I can only think it might be a browser-related issue (i'm on firefox), or perhaps a resolution issue - maybe the page is trying to sort its own sizing out for each computer. Either way, you can see that the formatting changes markedly between Excel and the HTM page it pushes out. So i guess my questions a 1) Anyone come across this before? Any idea why it's messing me around? 2) Any idea how to make it better? 3) Is there a better solution to the webpage (i.e., not using Excel altogether) that i've inadvertently disregarded? Bear in mind the whole thing has been put together by me and notepad, and i've had to teach myself HTML, with very little time dedicated to the running of the website. Many thanks in advance. Rob Hello, I designed this website http://www.aitputd.org/conference and found that it has compatibility issues when viewed with different browsers. e.g. The 'font' of the menu changes (becomes bold) when viewed in IE and Chrome browsers as opposed to FF3.5 Also The title 'sponsors' on the left does not stay at the center in IE and FF3.5 but seems good in Chrome. Is there a solution to address these problems?? Any help is highly appreciated. Regards, NP |
|||||||