HTML - Resolved Tables & Browser Problems

I'm almost done with my new website's main template. Now, the only thing that remains is that my website looks exactly how I want it in IE and total crap in Firefox. I was wondering if anyone could help me out/figure out what's going on. The URL is www.smbmovie.com...

Hello, Well ive been having this problem with my website: http://www.ngrock.com

When i visit the website using Firefox it looks just perfect but when i use IExploer, the sidebar doesn't seem to work, instead of it being on the LEFT side of the website, parallel to the content. It displays Below the content, aligned left. What can i do to get the sidebar in its place on all browsers.

Thank You.

Claudio-

Hey guys, haven't built a website for a while and when I did build them I didn't really have a clue.
I've built this page which comes up great in safari but Firefox and Ie show jack.

What could be the problem?

Check: www.goldensparrowstudios.co.uk


thanks so much.

Hello,

I am making this site on a Mac and having no problems with it, untill I look at it in Explorer on Windows PC, where it shows strange gaps in the layout of the tables. Sometimes I solve these problems by changing the background colour or moving an element to the top, but I think Im just busy covering up the main problem and not really solving it. So my question is: Does anybody have an idea what causes this problem, aside from the fact that these are different types of computers, and how to solve it, if there is a common solution to it?

http://dixdesign.net/dixdesign/pentecost/index.html

If anyone could have a look at it, would be much appreciated.
Thanks in advance,

Dix

Could somebody help me out in trying to put a separate image beside a table? Every time I try it the image ends up below the table rather than next to it.

The table is surrounding a song lyric box. I want to put an image (of Ellla Fitgerald) beside the table. The image has a border that looks like the table.

The combinded width of table and image is around 520px and I want about a 20px space between the two. That's a total width of 540px. It's to go on my LJ profile page. I fairly sure that's not too wide for the page.

The code for the table and a screenshot of table/lyric box is below.



The image that I'm trying to put next to it is:



The outcome that I'm looking for is:



Thanks in advance.

I've been designing this site on a mac, and have tested it on several mac compatible browsers without much trouble. I just tried it on IE and a some things are messed up.

http://www.jonniedredge.com

First, all my images look really grainy and gross in IE (not just the ones on the home page). Anyone know why that is?

Next, on the home page is a .swf file that has a black background, but the background appears white in IE.

Also that .swf is in a table cell that should make up just the top corner of that main div, with a height of 50 pixels. But in IE, and FF, this cell takes up about 2/3 the height of the div.

Here's my CSS in case that helps:


Code:

/***************Body, etc.*****************/

body {
	background-color: #000000;
	font-family: times, serif;
	
}

#container {
	margin: 0 auto;
	width: 750px;
	padding-bottom: 5px;
	/***** for layout development background-color:#FFEEEE; *******/
}


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

a:visited {
	color: #b0b0b5;
}
	
a:hover {
	color: #475890;
}

.blank {
	height: 100px;
}

.blank2 {
	height: 50px;
}





/***************Bottom Links*****************/
.linksBot {
	border: 0px;
	background-color: transparent;
	color: #c0c0c8;
	/***background-color: #CCFF66;****/
}

p.linksBot {
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}


a.linksBot {
	color: #c0c0c8;
	text-decoration: underline;
}

a.linksBot:hover {
	color: #475890;
}




/***************Banner*****************/

.banner {
	padding: 0px;
	margin: 0px;
	margin-bottom: 75px;
	background-color: black;
	color: #b0b0b5;
	font-size: 20px;
	font-family: copperplate, times, serif;
}


td.current {
	text-decoration: underline;
}





/***************Home*****************/


#home {
	border: 0px;
	font-family: copperplate, times, serif;
}

#main {
	color: #c0c0c8;
	width: 750px;
	font-size: 20px;
	text-align: center;
	outline: 3px solid  #222530;
	border: 0px;
}

#pno {}

#welccell {
	background-color: #444550;
	width: 250px;
	
}

#welcome {
	margin: 18px;
	color: #d0d0d5;
	font-family: times, serif;
	font-size: 17px;
	text-align: left;
	vertical-align: top;
}






/**************Bio*****************/

#headshot {
	float: left;
	margin-right: 30px;
	margin-bottom: 10px;
	border: 5px solid #d8d8e0;
}

#bioContainer {
	background-color: #6080a2;
	color: #d8d8e0;
	padding: 20px;
	height: 300px;
}

p.bio:first-line {
	text-indent: 2em;
}



/***************Audio*****************/
#audioContainer {
	margin: auto;
	width: 650px;
	background-color: #6080a2;
	color: #d8d8e0;
	padding-bottom: 7px;
	padding-top: 7px;
	margin-bottom: 75px;
	
	
}

.audioClips {
	
	background-color:transparent;
	margin:auto;
	width: 620px;
	
}

caption {
	font-size: 46px;
	line-height: 1;
	text-align: left;
	font-family: copperplate, serif;
	
}

.sngDesc {
	font-size:13px;
	
}

.sngDesc:first-line {
	font-weight: bold;
	width: 300px;
	font-size:15px;
}

.sng {
	text-align: right;
}





/***************Video*****************/
#vidLeft {
	float: left;
	width: 225px;
	height: 350px;
	background-color: #6080a2;
	color: #d8d8e0;
	margin-bottom: 75px;
	
}

#vidOutCont {
	float: right;
	width: 525px;
	height: 350px;
	background-color: #6080a2;
	margin-bottom: 75px;
}
	
.vidDesc {
	font-size: 12px;
	margin: 15px;
	margin-top: 50px;
}

p.vidDesc:first-line {
	font-size: 20px;
}

embed.vid {
	margin-left: 22px;
	margin-right: 23px;
	margin-top: 32px;
}


#vidContainer {
	background-color: #333333;
	margin:auto;
	margin-top: 32px;
	width: 480px;
	height: 286px;
}


/************Contact*************/

#contactPic {
	float: right;
	padding: 20px;
}

#contact {
	padding: 30px;
	height: 280px;
	background-color: #6080a2;
	color: #d8d8e0;
}

Ideas? This is my first site, so sorry if I'm a little slow with it.

Often when I need to test a page in a browser the changes I made to the page dont happen because of th browser caching the page. With Chrome I'm able to hit ctrl F5 but with firefox its hit and miss. Regardless I would like to not have to worry about it at all. Is there some sort of solution to this problem?

thanks

I have a music blog on blogger (http://mildtowild.blogspot.com) and I recently found out using browser shots that my site does not look right in IE. (CURSE YOU IE!). I have a lot of code and css, and am not quite sure where to start looking. I do not believe my page is html or xhtml compliant, but I'm pretty sure it's impossible to make any blog from blogspot 100% compliant. I'm pretty sure I have closed all my tags properly and my css is correctly structured. I am just puzzled as to how it can look so perfect in firefox and safari, and then be radically different in all IE versions.

I have included screenshots of what it looks like in both browsers, also feel free to view the source on my page, and if any of you have any suggestions as to what to check or try, please be my guest. Thanks for looking!

IE: http://img360.imageshack.us/img360/9...be72325hn9.png
Firefox & Safari: http://img370.imageshack.us/img370/8250/ffkl6.jpg

hi,
i've designed a website mainly in photoshop and sliced up and exported the finished images. However after adding headers(<H1>etc) in the main column, when testing the site in Firefox the graphics, flashmovies etc are pushed down the page and now unaligned with the background images by the header text because it is also now starting lower down the page than it did before in Explorer, which basically makes it look crap.
The whole thing is working perfectly in Explorer but when opened in Firefox becomes unaligned and unusable.
any help most appreciated
many thanks

Hi guys,

I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html

Anyway, I've got three problems, and appreciate any help anyone can offer on any of them:

1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all.

So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for.


2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas?


3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now:

<script type="text/javascript">
function goToPage(dd) {
var ind = dd.selectedIndex;
if (ind == 0) { return; }
var url = dd.options[ind].value
document.location=url;
}
</script>


<form>
<select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY:
arial; FONT-SIZE: 15px; font-weight: bold;">
<option value="">Bowl Events</option>

<option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option>

<option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option>

<option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option>

<option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option>

<option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option>

<option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option>

<option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option>

<option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option>

<option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option>

</select></form>

thanks for helping me

Hi!

I was wondering whether someone could enlighten me (or do it for me), as to how I use URL Parameters. I don't understand javascript, or much html for that matter. I have a page, 'http://goldenlightsoft.org'. I want to set it up so if someone types in 'http://goldenlightsoft.org/index.htm?page=downloads.htm', they would see the normal page, except that the iFrame in the middle ('I1'), would be pointing to downloads.htm of the site, not the normal home.html.

I would prefer this system to work without compatibility issues with other browsers, and also I am not sure of the hosts capabilities. I know html and javascript work fine.

Can someone help me with this?
Thanks,
dawmail333

Someone on another forum figured it out for me, thanks, please delete this.

So i decided the other day to redo my website. I hopped on to Notepad++ and got the home page done. However, when i went to test it, all i got were the top four links. Can anyone spot any errors, or tell me why it isn't working?
Thanks

<html>
<body>
<style type="text/css">
b
{
background-color:black;

text-color:green;
}
p
{
text-color:red;
}
</style>
<a href="home.htm">Home</a>
<a href="blogish.htm>Blogish</a>
<a href="links.htm">Links</a>
<a href="currentguns.htm>Currunt Guns</a>
<br/>
<br/>
<br/>
<br/>
<br/>
Hello, welcome to my extreamly lame webpage...
<br/>
<br/>
Here i will tell you what guns i currently have, and equiptment for them (hoppers, tanks, tank covers, upgrades, etc.).
<br/>
I will also have a mini blog were i will post updates after every major event at Hell Survivors Inc. I will also put up my war stories.
<br/>
<br/>
<br/>
<br/>
<br/>
<p>
WARNING!!! DO NOT PLAY PAINTBALL, You WILL be addicted immediatly, and won't be able to stop. It will drain your funds, and you will
<br/>
come home every day bleeding and in pain.
<br/>
<br/>
<br/>
In other words, its a good thing pballers are crazy and think that the pain is fun, and can go for weeks without eating so they
<br/>
can afford there 1200 dollar markers...
</p>
<br/>
<br/>
<a href="home.htm">Back to Top</a>
</body>
</html>

Hello I have an issue with a rollover on my page. I'm building a website for AS level media coursework and need help with a code. The rollover is part of a table and is aimed to play music when the mouse hovers over it, while at the same time switching the image to another...

The code for the rollover itself is:
Code:

<a href="#" onMouseOut="MM_swapImgRestore()""stopSound(0);" onMouseOver="MM_swapImage('Image9','','piece1.jpg',1)""playSound(0);"><img src="piece1hit.jpg" name="Image9" width="156" height="156" border="0"></a>

The bad javascript for the image swap is:
Code:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

And finally the even worse coding for the sound is:
Code:

<SCRIPT LANGUAGE="JavaScript"><!--


var aySound = new Array();

aySound[0] = "Kylie.mp3";
aySound[1] = "fseven.mp3";


IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;

function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//--></SCRIPT>

I hope someone can resolve my issue for me, for I'm absolutely stumpted by this. I have very limited expertise in coding (as you can see) and would greatly appreciate any help I can recieve.
Thank you for your time.