Jump to content

Layout not working in firefox

snowboard01

By snowboard01
in HTML/XHTML

 Share

Recommended Posts

snowboard01 Member

snowboard01

Posted
Posted

here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head>  <meta name="description" content="Website about dundas district me and my freinds" />  <meta name="keywords" content="Dundas, Josh, Fun, Cool," />  <meta name="developer" content="Josh Bradshaw" />  <meta name="rating" content="general" />  <meta name="author" content="Josh Bradshaw" />   <title>♫Sax World♫</title>  <!--functions script-->  <script type="text/javascript">   //key to background changer   function change()    {     document.bgColor=document.list.colors.options    [document.list.colors.selectedIndex].value;    }   function style()   {   document.getElementById("style").background.backgroundColor=document.list.colors.options   [document.list.colors.selectedIndex].value;    }  </script>  <!-- end functions script-->    <!--place stylesheet links here-->  <link href="http://www.freewebs.com/gamestrats/music_note.ico" type="image/x-icon" rel="shortcut icon"/>  <link rel="stylesheet" type="text/css" href="http://saxworld.awardspace.com/css/experiment.css" />  <!--end place stylesheet links here-->    </head> <body> <!--Big title-->   <img class="centerim" alt="title" src="http://www.freewebs.com/gamestrats/title.gif" width="100%" />  <!--end title-->  <!--Left menu--><div class="left"><b>My Site</b><br /><hr /><!--remember page break tags--><a href="http://saxworld.awardspace.com/welcome.html" target="blog">Home</a><br /><a href="http://saxworld.awardspace.com/message.html" target="blog">Message Boards</a><br /><a href="http://saxworld.awardspace.com/comment.html" target="blog">Contact</a><br /><a href="http://saxworld.phpbbnow.com/" target="_blank">My forum</a><br /><a href="http://saxworld.awardspace.com/faq.html" target="blog">FAQ</a><br /><a href="http://saxworld.awardspace.com/Guestlog.htm" target="blog">Guest Book</a><br /><a href="http://saxworld.awardspace.com/credits.html" target="blog">Credits</a><br /><a href="http://saxworld.awardspace.com/school.html" target="blog">School</a><br /><a href="http://saxworld.awardspace.com/news.html" target="blog">News</a><br /><a href="http://saxworld.awardspace.com/about.html" target="blog">About me</a><br /><a href="http://saxworld.awardspace.com/links.html" target="blog">Links</a><br /><a href="http://saxworld.awardspace.com/reflex.html" target="blog">Reflex tester</a><br /><br /><hr /></div><!--end left menu-->  <!--iframe-->  <div class="frame">  <iframe class="blog" frameborder="0" name="blog" scrolling="auto" src="http://saxworld.awardspace.com/welcome.html">Your Browser does not support Iframes or does not have Iframes enabled Upgrade it to view my blog!!!!My personal suggestion is <a href="http://www.mozilla.com/">Get Firefox</a> Or you may have them turned off.  </iframe>  </div>  <!--end iframe--><!--right menu--><div class="right"><b>Blog Entries</b><br /><hr /><!--remember page break tags--><a href="http://saxworld.awardspace.com/Blog/entry13.html" target="blog">Day 13</a><br /><a href="http://saxworld.awardspace.com/Blog/entry12.html" target="blog">Day 12</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry11.html" target="blog">Day 11</a><br /><a href="http://saxworld.awardspace.com/Blog/entry10.html" target="blog">Day 10</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry9.html" target="blog">Day 9</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry8.xml" target="blog">Day 8</a><br /><a href="http://saxworld.awardspace.com/Blog/entry7.xml" target="blog">Day 7</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry6.html" target="blog">Day 6</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry5.html" target="blog">Day 5</a><br /><a href="http://saxworld.awardspace.com/Blog/entry4.html" target="blog">Day 4</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry3.html" target="blog">Day 3</a><br /><a href="http://saxworld.awardspace.com/Blog/entry2.html" target="blog">Day 2</a><br /><a href="http://saxworld.awardspace.com/Blog/Entry1.html" target="blog">Day 1</a><br /><br /><hr /></div><!--end right menu--><div class="form">   <!--way this works: action is the change color statement in head. submit submits the option to the action then action to the function-->   <form name="list" action="java script:change()">     <!--Start Drop down list here -->     <select name="colors">       <option value="red">Red </option>      <option value="blue">Blue</option>       <option value="green">Green </option>      <option value="orange">Orange </option>      <option value="white">White</option>       <option value="#00FFFF">Cyan</option>      <option value="#000000">Black</option>      <option value="#7FFFD4">Aqua</option>      <option value="#FFD700">Gold</option>      <option value="#1E90FF">Dodger blue</option>      <option value="#8B0000">Dark Red</option>      <option value="#9ACD32">YellowGreen</option>      <option value="#COCOCO">Silver</option>      <option value="#008B8B">Dark Cyan</option>      <option value="#B22222">Fire Brick</option>      <option value="#000080">Navy</option>      <option value="#87CEEB">Sky Blue</option>      <option value="#00CED1">Dark Turquoise</option>      <option value="#00FF00">Lime</option>      <option value="#ADFF24">GreenYellow</option>     </select>      <!-- end drop down list--><input type="submit" value="Change Background color" /></form><!--valid info--><a class="w3c" href="http://validator.w3.org/check?uri=http%3A%2F%2Fsaxworld.awardspace.com%2Findex.html"><img  src="http://www.w3.org/Icons/valid-xhtml10"  alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>  <a class="w3c" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fsaxworld.awardspace.com%2Fcss%2Fhome.css&usermedium=all"> <img style="border:0;width:88px;height:31px" src="http://www.freewebs.com/gamestrats/vcss.png"  alt="Valid CSS!" /></a>  <!--end valid info--></div></body></html>

and heres the css

a{float:left;width:7em;text-decoration:none;color:blue;background-color: yellow;padding:0.1em 0em;}a:hover{color: yellow;text-decoration: underline;background-color:red;}iframe.blog{display:inline;width: 100%;height: 500px;position: relative;top: 0px;left: 0px;}.frame{border-style: solid;border-color: black;border-width: 6px;position:relative;float:left;top: 0px;width: 60%;height: 500px;}.left{background-color:yellow;position: relative;top: 0px;float: left;height: 500px;width: 15%;display:inline;}.right{background-color:yellow;position: relative;top: 0px;float: left;width: 15%;height: 500px;overflow:auto;display:inline;}.form{position:relative;top: 0%;left: 0%;background-color:yellow;width: 100%;height: 10%;}.valid{position: relative;top:90%;left: 0%;background-color: yellow;height: 5%;z-index:1;width:100%;}a.w3c:hover{background-color:yellow;color: white;text-decoration: none;}.centerim{position:relative;left:0%;height:100px;}

and heres a link to what it does I think the reason ie displays it the way i want and FF displays a blob is partailly because ie takes the top left ect. elements from the nearest element and FF goes from the edge of the screen. also ie sees iframe 100% and makes it 100% of the div. FF makes it 100% of the screen i tried fixing these but nothing changed. Oh by the way the entire purpose of the page was a page that would place the elements in a comfortable position horizontally no matter what screen size. I would also like it to be cross browser. And then ill work on making it text zoomable. any help at all would be very much appreciated. Please know I have read the tutorials and searched the forum I simply can not find what is wrong. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...