HTML Forum

**Silver Fox** · 01:55 PM

I created this using notepad and was checking it in Firefox, but when i finished and checked it in IE it looks like crap. I even opened up Dreamweaver and it shows it looking great. I can't find what is causing it. I have double, triple checked to make sure that all my ", <, >, tr, td, etc. are opened and closed properly. Please can anyone help? Thanks in advance.

Here is my code:

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>DirectTV</title>
<style type="text/css">
<!--
A {color: #6599c9; background: transparent none; text-decoration: underline;}
A:link {color: #6599c9; background: transparent none; text-decoration: underline;}
.pricetable {
border-top-width: Medium;
border-right-width: Medium;
border-bottom-width: Medium;
border-left-width: Medium;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #1C6A9B;
border-left-color: #1C6A9B;
font-size: small;
color: #0092CD;
}
.pricetableleft {
border-top-width: Medium;
border-right-width: none;
border-bottom-width: Medium;
border-left-width: Medium;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #1C6A9B;
border-left-color: #1C6A9B;
color: #245397;
}
.pricetableright {
border-top-width: Medium;
border-right-width: Medium;
border-bottom-width: Medium;
border-left-width: none;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: none;
border-right-color: #1C6A9B;
border-left-color: #1C6A9B;
font-size: small;
color: #0092CD;
}
.pricetablebottomleft {
border-top-width: Medium;
border-right-width: none;
border-bottom-width: Medium;
border-left-width: Medium;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #1C6A9B;
border-right-color: #1C6A9B;
border-left-color: #1C6A9B;
font-size: small;
color: #0092CD;
}
.pricetablebottomright {
border-top-width: Medium;
border-right-width: Medium;
border-bottom-width: Medium;
border-left-width: none;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #1C6A9B;
border-right-color: #1C6A9B;
border-left-color: #1C6A9B;
font-size: small;
color: #0092CD;
}
.hotpassleft {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: Medium;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #BBBBBB;
border-right-color: #BBBBBB;
border-left-color: #1C6A9B;
border-top-color: #BBBBBB;
font-size: small;
color: #0092CD;
}
.hotpassright {
border-top-width: thin;
border-right-width: Medium;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #BBBBBB;
border-right-color: #1C6A9B;
border-left-color: #BBBBBB;
border-top-color: #BBBBBB;
font-size: small;
color: #0092CD;
}
.hotpassmiddle {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #BBBBBB;
border-right-color: #BBBBBB;
border-left-color: #BBBBBB;
border-top-color: #BBBBBB;
font-size: small;
color: #0092CD;
}
.hotpassbottom {
border-top-width: Medium;
border-right-width: Medium;
border-bottom-width: Medium;
border-left-width: Medium;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #1C6A9B;
border-right-color: #1C6A9B;
border-left-color: #1C6A9B;
font-size: small;
color: #0092CD;
}
.hotpasstop {
border-top-width: Medium;
border-right-width: Medium;
border-bottom-width: Medium;
border-left-width: Medium;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #1C6A9B;
border-right-color: #1C6A9B;
border-left-color: #1C6A9B;
font-size: small;
color: #0092CD;
}
.credit {
font-size: x-small;
color: #777777;
}
.font {
font-family: "Verdana";
font-size: small;
}
.font2 {
font-family: "Verdana";
font-size: x-small;
}
-->
</style>
</head>
 
<body class="font">
<table width="630px" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" class="font">
If you can't see the email below, <a href="">click here</a>
</td>
</tr>
<tr>
<td bgcolor="#003d69" width="15px">
&nbsp;
</td>
<td>
<table width="600px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="136">
<img src="racecar.jpg" alt="Racecar" width="401" height="136" border="0" />
</td>
<td rowspan="2" valign="top">
<img src="racecar2.jpg" alt"Racecar" width="203" height="276" border="0" />
<table width="100%" border="0">
<tr>
<td bgcolor="#BBBBBB" width="100%">
Your Questions on HotPass<br />
Have any good thoughts about NASCAR HotPass?
</td>
</tr>
<tr>
<td bgcolor="FFFFFF" align="center">
<br />
<div align="right"><img src="price.jpg" alt="price" border="0" width="189" /></div>
<table width="83%" align="center" cellpadding="2" cellspacing="0">
<tr>
<td class="pricetable" colspan="2">
OVER <font color="#245397">185</font> CHANNELS INCLUDING LOCALS
</td>
</tr>
<tr>
<td class="pricetable" colspan="2">
ALL THE BEST<br /> <font color="#245397">HD CHANNELS</font>
</td>
</tr>
<tr>
<td class="pricetableleft" style="border-right-width: none">
PLUS
</td>
<td class="pricetableright" align="right" style="border-left-width: none">
<img src="hbo.jpg" alt="HBO" border="0" />
</td>
</tr>
<tr>
<td class="pricetablebottomleft" style="border-right-width: none">
<font color="#245397">3 FREE MONTHS OF</font><br /> HBO and Cinemax
</td>
<td class="pricetablebottomright" align="right" style="border-left-width: none">
<img src="cinemax.jpg" alt="Cinemax" border="0" />
</td>
</tr>
</table>
<div align="left"><font class="credit">Price reflected includes a $10 bill credit per month for 12 consecutive months after mail-in redemption.</font></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td rowspan="2" valign="top">
<table width="100%" border="0" bgcolor="#FFFFFF" class>
<tr>
<td>
Ready for heart-pounding NASCAR action? NASCAR HotPass lets you ride shotgun with this week's top drivers at the <font color="#245397">Lowe's Motor Speedway</font> in Concord, North Carolina. Be sure to catch the action on NASCAR HotPass.<br />
<br />
<strong>Sunday, May 27 :: 5:35 pm ET/2:35 pm PT</strong><br/>
<br />
<div align="right"><a href="">2007 NASCAR Race Schedule</a></div>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td colspan="4" align="center" bgcolor="#245397" class="hotpasstop">
<font color="#FFFFFF">NASCAR HotPass - Race Thirteen*</font>
</td>
</tr>
<tr bgcolor="#669acc">
<td class="hotpassleft">
<font color="#FFFFFF">NAME*</font>
</td>
<td class="hotpassmiddle">
<font color="#FFFFFF">CAR</font>
</td>
<td class="hotpassmiddle">
<font color="#FFFFFF">2007 CURRENT RANKING</font>
</td>
<td class="hotpassright">
<font color="#FFFFFF">CHANNEL</font>
</td>
</tr>
<tr bgcolor="#e0f0ff">
<td class="hotpassleft">
Matt Kenseth
</td>
<td class="hotpassmiddle">
17
</td>
<td class="hotpassmiddle">
3rd
</td>
<td class="hotpassright">
795
</td>
</tr>
<tr>
<td class="hotpassleft">
Tony Stewart
</td>
<td class="hotpassmiddle">
20
</td>
<td class="hotpassmiddle">
6th
</td>
<td class="hotpassright">
796
</td>
</tr>
<tr bgcolor="#e0f0ff">
<td class="hotpassleft">
Jimmie Johnson
</td>
<td class="hotpassmiddle">
48
</td>
<td class="hotpassmiddle">
2nd
</td>
<td class="hotpassright">
797
</td>
</tr>
<tr>
<td class="hotpassleft">
National Race Broadcast
</td>
<td class="hotpassmiddle">&nbsp;
 
</td>
<td class="hotpassmiddle">&nbsp;
 
</td>
<td class="hotpassright">
FOX
</td>
</tr>
<tr>
<td colspan="4" class="hotpassbottom">
&nbsp; 
</td>
</tr>
</table>
<br />
<strong>We Heard You</strong><br />
<font color="#245397">Team only audio</font> has been added to NASCAR HotPass. Listen in on one of three audio streams: Team and Announcer, Team Only or National Broadcast. Interactive box* customers can use the yellow button on the interactive menu. If you don't have an interactive receiver, you can change audio using your remote's Audio or ALT Audio option of your Menu.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
</table>
</td>
<td bgcolor="#003d69" width="15px">
&nbsp;
</td>
</tr>
<tr>
<td bgcolor="#003d69" width="15px">
&nbsp;
</td>
<td>
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="2" colspan="2">
<tr>
<td align="center">
<a href="">My Account</a>
</td>
<td align="center">
<a href="">Pay Bill Now</a>
</td>
<td align="center">
<a href="">TV Listings</a>
</td>
<td align="center">
<a href="">Pay Per View Movies</a>
</td>
<td align="center">
<a href="">Add Programming</a>
</td>
</tr>
</table>
</td>
<td bgcolor="#003d69" width="15px">
&nbsp;
</td>
</tr>
<tr>
<td bgcolor="#003d69" width="100%" colspan="3">
<br />
<table width="100%" border="0">
<tr>
<td rowspan="2" width="10px">
</td>
<td>
<a href="" width="20%">Privacy Policy</a>
</td>
<td align="center">
<font color="#777777">|</font>
</td>
<td align="center">
<a href="" width="20%">Customer Care</a>
</td>
<td align="center">
<font color="#777777">|</font>
</td>
<td width="20%" align="center">
<a href="">Unsubscribe</a>
</td>
<td width="40%" align="center">
&nbsp;
</td>
</tr>
<tr>
<td colspan="6" class="font2">
<font color="#777777">Please don't respond to this email. If you have questions or concerns, contact</font> <a href="">Customer Care</a>.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

**Paramiliar** · 08:45 AM

well first of all if you do post code please post it in the CODE tags [ code ] but without the spaces, makes it easier for us.

Second of all yikes that is a lot of CSS that could easily be narrowed into a few lines

third of all have you got a link that we can see? again easier for us to debug

Well i fixed you problem, on line 192 (once you set dreamweaver to format the code) you have the following

Code:

                    <td rowspan="2" valign="top"><img src="racecar2.jpg" alt"Racecar" width="203" height="276" border="0" />

you need to change the rowspan to 3

**crandall87** · 07-27-2007, 10:37 AM

All of your border code for each class could be on one line.

**Paramiliar** · 07-27-2007, 11:58 AM

Yep as crandall87 said a lot of the CSS could be streamlined

**Silver Fox** · 07-27-2007, 01:43 PM

I am pretty new to CSS, as you probably could tell, but I have the different CSS classes because they each have borders on different sides. How could i streamline that?

**Paramiliar** · 07-27-2007, 02:37 PM

as an example you have

Code:

border-right-style: solid;
border-right-width: Medium;
border-right-color: #1C6A9B;

now that could easily be

Code:

border-right: Medium solid #1C6A9B;

**Y-aji** · 07-27-2007, 02:41 PM

hmm. for example, try this out.
instead of the following lines:

Code:

.pricetable {
border-top-width: Medium;
border-right-width: Medium;
border-bottom-width: Medium;
border-left-width: Medium;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #1C6A9B;
border-left-color: #1C6A9B;
font-size: small;
color: #0092CD;
}

you can do virtually the same thing with:

Code:

.pricetable {
border: 3px solid #1c6a9b; 
font-size: 10px;
color: #0092cd;
}

now, 10 lines become 3.
watch for things that repeat. what you were using could be useful if all sides were different colors and sizes. But, because all the sides are exactly the same, you can just merge them all into one item with the border property.
this will make your webpage unbelieveably smaller, too. especially if you have 10, 20, 50, 100 divs like this, as i think you may.

hope this helps, someone correct me if i'm wrong.

**Y-aji** · 07-27-2007, 02:42 PM

oh no! Paramiliar, you beat me to the punch.

**seowebdesigner** · 07-27-2007, 03:09 PM

Well I must say please compress the styles on css like you place borders for for corners and so on long blah blah coding.....

if you are designing the web page using table it looks fine in every browser, but if you using div please have a good skills on that....

remember the floats n positions while using div. I hope this help you more to understand the problem with browser.....

Regards,
MowgliTech.com