Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My layout design looks great in Chrome, but not in Mozilla or IE

    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/Test...ain_ver02.html

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

  • #2
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    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">
    However all the errors remain the same in Firefox.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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/w...leless-layout/

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •