Help With Website Layout Correction For All Browsers

BooZker

Dec 20 2006, 07:53 AM

If you go to my site at http://boozkerstweaks.trap17.com and you look at the home page everything is fine on all browsers. Problems start to arise very soon however. Here is my list of problems and i was wondering if someone could help with just whats wrong. I have done a HTML validator and found only 3 errors and all these problems still occured. You might find more now though because i am screwing around with the code.

Here is the list of browsers and errors:

Netscape 8.1: After you click on the pulldown menu and click the only tweak avaible at the moment the page gets bigger. You can tell because the header picture no longer fits.

Safari 2.0.3: Pulldown menu pulls down, but does not send you to the page. The error does work when you click the "Top Tweaks" selection however. When you type in the URL of where it is supposed to go it appears correct though. The URL of where it is supposed to send you is: http://boozkerstweaks.trap17.com/tutorials...ws_to_vista.php

Firefox 2: Same as Netscape

Opera 9.1: None

IE 7: None

As you can see i have tested it in almost all of the main browsers. Opera, which is my personal favorite, works along with IE which most people use anyways. Firefox is my main concern.

You can find my CSS page at: http://boozkerstweaks.trap17.com/style.css

You can find my includes at: http://www.boozkerstweaks.trap17.com/inc/
The right_side.php include contains the pulldown menu along with it's javascript.

But i think it has something to do with the actual HTML not the CSS and PHP.

My site is very bare now due to the fact i need to fix these problems before i start adding more pages and getting it more stylized.

Thanks in advance.

Saint_Michael

Dec 20 2006, 09:29 AM

Your issue was simple the moment I saw it,, it was word wrap issue and I remember my P style tags. It's kind of rough but a few tweaks here and there and you should be set. Also form someone who told me about why P tag is so much better is that you get rid of the <br> tag tag in which you have lot of them.

So this rough code will help you will everything, I recommend you look at My first Part Pure CSS tutorial and try to get your self away from table set up as well. In the coming weeks I will be working on content boxes but with set by set process of the core design you can get rid of most of the tables you have.

CSS

CODE

<style type="text/css">

body {
font-size: 11px;
font-family: arial;
}

/* Header Image */
.header {
background:url("header.png");
background-repeat:no-repeat;
position:relative;
clear:both;
float:left;
width:758px;
height:168px;
margin:0;
padding:0px;
}

/* Main Content Text */ 

.date {

color:#FF6600;
font-size:10px;
font-weight:bold;
font-family:Georgia, "Times New Roman", Times, serif;
}



.title {

color:#0000FF;
font-size:14px;
font-weight:bold;
font-family:Georgia, "Times New Roman", Times, serif;
}



.tutorial_text {
color:#000000;
font-size:12px;
font-family:Verdana, Arial, serif;

}

.tutorial_credits {
color:#333333;
font-family:"Courier New", Courier, monospace;
font-size:10px;
}



/* Right Side Text */

.content_titles {
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
}


.right_titles1 {

color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}








/* The websites content */

.main {
border: 2px black;
border-top:none;
width: 758px;
background: #white;
padding: 3px;
}

.head {
background: white;
padding: 3px;
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom:none;
}

.left {
background: #bbbdbf;
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
width: 30 px;
height: auto;
}

.mid {
background: white;
padding: 0px;
border-top: none;
border-left:2px solid black;
border-right: 1px solid black;
border-bottom: 2px solid black;
width: 500px;
height: auto;
}
.p{
word-wrap:break-word;width:90%;left:0
}
.right {
background: #CFCFCF;
padding: 6px;
border-top: 2px solid black;
border-left: 1px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
width: 258px;
height: auto;
}

.foot {
background: #bbbdbf;
padding: 3px;
border-top: 2px solid grey;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
text-align:center;
}


/* Links */

a {
color: blue;
text-decoration: none;
}

a:hover {
text-decoration: none;
color: #0000FF;
}





.header {
color: #D78800;
font-size: 16px;
font-family: "arial baltic";
font-weight: bold;
font-variant: small-caps;
border-bottom: 2px solid black;
display: block;
}

input {
border: 2px solid black;
}

</style>

HTML

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>
<title>Boozker's Windows Tweaks</title>

<style type="text/css">@import "style.css";</style>




</head>
<body bgcolor="#bbbdbf">






<table class="main" align="center" border="0" cellpadding="0" cellspacing="0">

<!-- Header Include -->
<thead>
<tr>
      <td align="center" class="head" colspan="3"><div class="header"></div></td>
</tr>
</thead>

<!-- End of Header Include -->

<tbody>
<tr>      
      <td  valign="top"  class="mid"><br />
	  
	  
	  <p class="date"> November 29, 2006</p>
	  <p class="title">Change your Windows shell to look like Vista</p>  
	  <p class="tutorial_text">
	  
	  
	  
	  Want your PC to look like this?:
	  <br />
<a href="http://i41.photobucket.com/albums/e295/chuckystjoes/sc.png" target="_blank">
<img src="http://i41.photobucket.com/albums/e295/chuckystjoes/th_sc.png" alt="Desktop Picture" /></a>
<p class="p">
This tutorial will involve making your XP look like the new and upcoming Windows system, Vista. We will be changing the folders and other tweaks another day. Today however, we will be just switching the main shell and it comes with a boot screen. This is if you use the file I have provided if not, I have that covered to.
</p>
<p class="p">
Before we start read the caution statement below:
</p>
<p class="p">
CAUTION: Although I have never had any problems with changing the system setting such as the shell and boot screen, this does not mean it wont happen to YOU. Me, Trap 17, and the software creators claim no responsibility for system failures. If you ever have a system malfunction you can always try a Windows Recovery/System Restore, which will fix most problems.
</p>
<p class="p">
OK time to start.
</p>
<p class="p">
1. First thing is first. Make a folder in C:\Resources\Themes. If you do not know how to do this:
</p>
<p class="p">
*Open My Computer<br />
*Create Folder and name it Resources<br />
*Open the newly created folder, Resources<br />
*Create another new folder and name it Themes<br />
</p>
<p class="p">
2. Next you need to download a theme. The first theme is the one I chose and this tutorial will be following, but you can use ANY shell provided below as long as you follow the simple steps. I have provided you with the zipped folder of the Vista Transformation Pack 4 (VTP4).
</p>
<p class="p">
*Go here <a href="http://rapidshare.de/files/20901878/vtp4.zip.html" target="_blank">http://rapidshare.de/files/20901878/vtp4.zip.html</a> <br />
*Download it into the C:\Resources\Themes folder.<br />
*Then unzip it.
</p>
<p class="p">
You will do this for every theme you download.
</p>
<p class="p">
If you want to look at some others, here is a link you can go to and take a look at some other shells. There are some amazing looking ones here:
</p>
<p class="p">
<a href="http://browse.deviantart.com/customization/skins/windows/visualstyle/" target="_blank">http://browse.deviantart.com/customization/skins/windows/visualstyle/</a>
</p>
<p class="p">
Go there and click on a thumbnail you are interested in. Then if you like it click the download link on the left side of the screen. It looks like a computer monitor/TV screen.
</p>
<p class="p">
3. After you download a theme and unzip into the Themes folder you will need 2 other things, but first find out what service pack you are running. To do this click start then right click on My Computer and click properties.Under the general tab there should be something that says or close to:
</p>
<p class="p">
&nbsp; &nbsp; &nbsp;<i>"Windows Edition<br />
&nbsp; &nbsp; &nbsp;Microsoft Windows XP<br />
&nbsp; &nbsp; &nbsp;Media Center Edition<br />
&nbsp; &nbsp; &nbsp;Version 2002<br />
&nbsp; &nbsp; &nbsp;Service Pack 2"</i><br />
</p>
<p class="p">
Download one of these and unzip them on your desktop.
</p>
<p class="p">
*If you have Service Pack 1: <a target="_blank" href="http://www.softpedia.com/get/Desktop-Enhancements/Themes/UXTHEMEDLL-Pack-DLL-for-SP1-included.shtml">SP 1
</a>
</p>
<p class="p">
*If you have Service Pack 2: <a target="_blank" href="http://www.softpedia.com/get/Desktop-Enhancements/Themes/UXTheme-Patch-For-Windows-XP-SP2-Final.shtml">SP2</a>
</p>
<p class="p">
And then download this Replacer tool. I strongly Recommend the STABLE version: <a href="http://www3.telus.net/_/replacer/" target="_blank">http://www3.telus.net/_/replacer/ </a>
</p>
<p class="p">
After this is done downloading unzip it to the desktop. Make sure you read the "readme"
</p>
<p class="p">
4. OK time to replace the uxtheme.dll  Go to C:\WINDOWS\system32\ and find the uxtheme.dll file. It should be towards the bottom. Don't open it, just find it. Keep that window open and do the following:
</p>
<p class="p">
*Double click on the replacer tool you unzipped<br /><br />

*It will ask for the OLD UXtheme.dll file. So, drag the uxtheme.dll file you just found in the system 32 folder, and DRAG the file into the Replacer tool and press ENTER.<br /><br />

*It will now ask for the NEW uxtheme.dll file. Open the other folder you just downloaded and unzipped for your Windows XP Service Pack 1 or 2 . There should be a uxteme.dll file inside. DRAG the file into the Replacer tool and press ENTER.<br /><br />

*It will ask to confirm this. Make sure you did it right and enter Y for yes or N for no and press ENTER.

</p>
<p class="p">

All done with the hard part!
</p>
<p class="p">
--

</p>
<p class="p">

OK now to use that theme/shell you downloaded.

</p>
<p class="p">

If you have not unzipped it yet do so now. If you are using the file I provided Go to A. If your using another file go to B.

</p>
<p class="p">

A. So you picked the file I gave you? Great.

</p>
<p class="p">

*Make sure the file is in the themes folder and open it <br /><br />

*Double Click on the Vista Transformation Pack 4.o icon. <br /><br />

*Just follow the instructions and when the computer boots back up it should be different with a different boot screen and login and everything!<br /><br />

*If you want to change the Vista theme right click on desktop > properties > appearances tab > Windows and Buttons. Just scroll through. There are 4 themes that come along with it.

</p>
<p class="p">


B.  So you picked a different one? No problem just follow the steps below:

<br /><br />

*Make sure the file is in the themes folder and open it<br /><br />

*Inside of the folder, most of the time in the root of the folder, is a icon that looks like a paintbrush painting a Windows XP window. Double click it. That is a Windows Visual Style File.<br /><br />

*It should automatically open the Display Properties and then all you have to do it click Apply. If not right click on desktop > properties > appearances tab > Windows and and look for it.

<br /><br />

If you want to know what to do with the other files that you don't know why they are there, email me. Email me at <a href="mailto:boozker@gmail.com">boozker@gmail.com</a>

<br /><br />

That's it all done! You have changed you shell/theme. Try out some different ones now and then. Tomorrow we will be showing you how to change the folders to look like Vista.
</p>
<!-- End of tutorial -->
</p>
	  <p class="tutorial_credits">Tutorial written by: BooZker</p>
	 <br /> 
	  <hr width="100%" />
	  <br />
	  
	  </td>
	  
<!-- right side content Include -->

<td  valign="top" class="right">

	  
	  <p class="content_titles">Tweak Archive</p>
	  <p class="right_titles1">Top Tweaks of 2006</p>
	  
	  
	  
		  
	  <!-- Pop Up Script -->
<script type="text/javascript" language="JavaScript"> 

function openDir( form ) { 

	var newIndex = form.fieldname.selectedIndex; 

	if ( newIndex == 0 ) { 

		alert( "Please select a Windows tweak!" ); 

	} else { 

		cururl = form.fieldname.options[ newIndex ].value; 

		window.location.assign( cururl ); 

	} 

} 

</script> 

<!-- Pop Up Script End -->
	<form action="http://boozkerstweaks.trap17.com/inc/right_side.php">
	<select name="fieldname" size="1" 

				onChange="openDir( this.form )"> 

				<option>Top Tweaks</option> 

				<option value="http://boozkerstweaks.trap17.com/tutorials/2006/11/change_windows_to_vista.php">Change Windows to Look Like Vista</option>  

			</select> 	  
			</form>
	 
	 </td><!-- End of right side content Include -->

<!-- footer include -->

<tfoot>
      <tr>
	  <td class="foot" colspan="3"> &copy; Oscar Godson 2006-2007, All rights reserved
	  </td></tr>

</tfoot>


</table>

<center><a href="http://ot-design.net">OT-Design &amp; BooZker Design</a></center>



<!-- End of Footer include -->

</body>
</html>

BooZker

Dec 21 2006, 06:54 AM

Thanks SM, but actually i didnt do that haha. Kubi did and i just edited it. I did all the font stuff and links from scratch, but the tables and layout is from Kubi. thanks a lot Kubi haha just playing Kubi. Thanks SM i'll test it out.

*Bump because i tested out the code and have problems and if i edit the post no one will read it because it will get lost in all the topics*

I tested the code out and i still have the problem with Safari. It wont execute the java script. Is there something wrong with the java script or HTML?

Anyways thanks so far. I just can't wait to get these glitches out of the way so i can actually get to the designing part and then adding the tutorials i posted on my old site http://boozkerstweaks.blogspot.com .

Thanks

Do not bump your own topic or any other topic. No one topic is more urgent than another one. You can simply edit your own post if it's the last one--instead of double posting. Merged.

BuffaloHELP

Dec 24 2006, 12:13 PM

Java script should be installed between <HEAD> and </HEAD>. Try that first since Safari is very picky with the order of HTML coding.

Also check your Safari's security level and see if your Java code is tripping any security level you set--or even safely executing under Safari's security level.

Lastly, do you really need all those commands for just opening a form? Unless I misread your coding a simple window.open will do the same effect without using the Java script. And you can have

HTML

and you can open any file.php or file.html as part of options.

And never, ever bump your own topic again. If you want your topic to be noticed your topic title should be named better next time (note how I changed it), instead of 'help, don't know what's wrong...'[sic]. These are the forum rules.

EDIT: looks like this board is protecting by placing SPACE between the word java and script.

QUOTE

java script:;

is one word without a blank space.

Saint_Michael

Dec 24 2006, 12:52 PM

Buff Is correct that you want the main javascript code within the head tags now for optimization purposes it would could to use external javascript docs.

Set up is simple, this is an example of how it is done.

First you take your main javascript code you plan to use and you stripe the the beginning and the end of it like so.

CODE

Stripped javascript

CODE

Like a CSS file you need to have the doc as a javascript file or for file purposes .js.

So if you using notepad you have to do save and put the .js at the end, or if you have something like dreamweaver you can do the same thing without typing it and just select the file type and your set.

If you know how to external CSS files work it is the same thing in getting the javascript to load and so you just put this on top or below the CSS (preferably below) and use this code.

CODE

and your set, all browsers I know accept this so Safari should as well.

Of course don't forget to add the body onload code to where you want your javascript to work or it won't do what it is supposed to do.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

Help With Website Layout Correction For All Browsers - Page gets larger on Firefox 2

Help With Website Layout Correction For All Browsers - Page gets larger on Firefox 2