View Full Version : My layout design looks great in Chrome, but not in Mozilla or IE

08-06-2011, 03:30 PM
Hey everyone,

I am designing a site for a friend and I had everything going great until I started testing things in Mozilla and Internet explorer. A buddy of mine helped me last night to change some tags so they were up to date with HTML 4 I guess, but the real problem I think lies with how the page is coded. I use some absolute positioning in my css and those class names are being used inside tables. I don't know how messed up it is but maybe you guys can help me fix the code and make it more conventional as well as working in all browsers. Thank you!!


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="SubAud_stylesheet.css" rel="stylesheet" type="text/css">
<body bgcolor="#000000">
<!-- Save for Web Slices (LAYOUT.psd) -->
<table id="Table_01" width="750" border="0" cellpadding="0" cellspacing="0" align="center">
<td colspan="2">
<img src="images/TopBanner_01.jpg" width="750" height="310" alt=""></td>
<td width="208" height="300" class="Content_Menu">
<ul class="Content_menu">
<li><a href="#">Home</a></li>
<li><a href="#">The Crew</a></li>
<li><a href="#">Location Audio Work</a></li>
<li><a href="#">On Set Media</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Us</a></li>
<td rowspan="2" class="Content" width="542" height="470"><p class="text_pos">Content goes here. <a href="#">Link TEST</a></p>
<td width="208" class="Copyright">Copyright 2011<br> Sub Audition Sound LLC</td>
<!-- End Save for Web Slices -->

.Content {
position: static;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: top;

margin-top: 20px;

.Content_Menu {
position: absolute;
left: auto;
top: auto;
background-image: url(images/SubAud_Main_Menu.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #FFF;
text-indent: 0px;
text-align: left;
white-space: normal;
line-height: 25px;

ul.Content_menu {
margin-top: 20px;

a:link {color:#FA2223;} /* unvisited link */
a:visited { color:#999;} /* visited link */
a:hover {color:#FFF;
font-size: 14px;} /* mouse over link */
a:active {color:#FFF;} /* selected link */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

position: absolute;
margin-top: 10px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: bold;
color: #999;
letter-spacing: 2px;
top: 615px;
text-align: center;
line-height: 20px;

08-06-2011, 03:39 PM
Ok I made some other changes which helped fix most of my problems in IE Except the content text is not centered. All I did was add this to the top of my code and the little bit inside the html tag.

<!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">

However all the errors remain the same in Firefox.

08-06-2011, 03:55 PM
There are mistakes in your code. 1st validate it on http://validator.w3.org/ and rectify mentioned error.

Also don't use positing until it is too necessary. use box model for your layout. Following are some links to understand box model :)





08-06-2011, 04:15 PM
Thank you, Vicky. :)

Does that mean I can still keep my tables around as well?? I just need to fix the css values to using the box method instead of positioning?

08-06-2011, 04:21 PM
You are welcome.

I suggest you to use tableless layout instead of table... Following is the link to get answer, fi you want to know why you should use tableless layout: