...

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



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

http://www.subauditionsound.com/TestSite/SubAud_Main_ver02.html



<html>
<head>
<title>LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="SubAud_stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#000000">
<!-- Save for Web Slices (LAYOUT.psd) -->
<table id="Table_01" width="750" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2">
<img src="images/TopBanner_01.jpg" width="750" height="310" alt=""></td>
</tr>
<tr>
<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>
</ul>
</td>
<td rowspan="2" class="Content" width="542" height="470"><p class="text_pos">Content goes here. <a href="#">Link TEST</a></p>
</td>
</tr>
<tr>
<td width="208" class="Copyright">Copyright 2011<br> Sub Audition Sound LLC</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>




.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;
}

p.text_pos
{
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 {
list-style-type:square;
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;}

.Copyright
{
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;
}

cssnewb1988
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.

vikram1vicky
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 :)

http://css-tricks.com/2841-the-css-box-model/

http://www.quirksmode.org/css/box.html

http://www.brainjar.com/css/positioning/

http://www.w3.org/TR/WD-positioning

cssnewb1988
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?

vikram1vicky
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:

http://www.inspiredbuddy.com/xhtml/why-tableless-layout/

http://www.hotdesign.com/seybold/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum