HTML - Header Tags And 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...

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

Hello. First time here asking for help. Hope there's a solution!

The site in question is http://www.jason-bradbury.com/Design.html. It's my first attempt at web design and I'm stumped.

The goal is to present my art portfolio in a horizontal scrolling layout with a fixed header and footer. Ideally it would look identical across the many browser platforms.

On a Windows laptop, my page looks and functions as it should in the latest browser versions of Safari, Google Chrome and Firefox as long as there aren't a stack of toolbars enabled. If toolbars are present (mostly in Firefox), the footer gets truncated and the page will not vertical scroll to allow it to be seen.

So my first problem is getting the vertical scrolling (for the entire page including header and footer) to appear only when necessary in that situation.

On my Mac Pro (I have not been able to test a Macbook yet) the page appears normal across the board with Safari and Firefox (have not tested Chrome or IE)

The second problem is that in all versions of IE (and older versions of Firefox prior to 4.0) the page is displayed incorrectly.

In IE, the header is missing, the left margin is way off and a vertical scrollbar is present for the body (again, if the vertical scrolling was for the entire page it wouldn't be so bad). As for the horizontal scrolling, it is very sluggish in IE.

Firefox only has the vertical scrollbar in the body problem and since the header is shown in that browser, the body overlaps it when scrolled up.

The page was originally designed in iWeb and then I had to tweak the code in Dreamweaver to get the fixed header and footer.

Hope someone can help me out here! Cheers, Jason.

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 Everyone,

hoping someone can help me here, i'm totally new to html. i work in digital advertising and project manage web development, but i don't know how to troubleshoot html problems, particularly across browsers.

The website in question is
www.forbetterorpurse.com
I built it using the sitebuilder provided by the hosting company.

I have two problems (that i know of anyway haha!)
1. The table to the left has somehow increased in width. I don't think I altered anything but no doubt it's something small
2. if you compare the site from IE to Firefox, the background of part of the content area is yellow compared with grey. It's supposed to be grey.

if anyone has any ideas or can point me in the right direction, it'd be greatly appreciated!

Thanks

i'm looking for a cheap way out of making collapse/expand code.
i've learned a lot of 'ghetto' techniques n thought mayb i can use
something similar to the html tricks i've learned in the past.

the theory i have is.. i use the title of the collapse/expand text as a link to the text below it to open and close by using the navigating tags:
Code:

<a name="content">opening/closing text here</a>

and the title above the content:
Code:

<a href="#content">Title</a>

to open the area of text.

now my idea of a shortcut around the whole css/html/javacript combo is to make the text below it use a
Code:

<font size=0>content</font>

at default and have the href title link change the font size to the default 9pt but I don't know if that's even possible.
Is it possible with the Code:

<div>

tags? and if so, using that, would i still b able to make a link like that?

Is it possible to trigger the action of a form with a submit button that's outside the form tags? If so, how should this example be rescripted to make the input tag work outside the form tags?
[/code]
<html>
<body>

<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>


</body>
</html>

[/code]

Hey, im trying to find out why the header on my website isnt at the top of the page. it also moves sometimes even though the code appears to be all the same.

the address is www.themonsterbox.com

thanks in advance for any help.

this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html

there are several things I would like to happen.
1. the right collumn background to be where the right collumn should be(so other links in navbar)
2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see)
3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does.
4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle.
5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns?
don't worry about the colors I will be changing them soon

First post on here, but I'm not really new to HTML. I just have a problem with the placing of a picture on a page.

My website is www.fcumania.co.uk, which was created mainly with the use of a website designer - though these days I just edit it through Notepad. I have a problem whereby I need to add a small picture in the box where the crude "Hi-Resolution pictures" form is located. I can't seem to be able to edit the code, and the div tags in order to do this.

I know it has something to do with the CSS, and so presuming you can view the source code on the main site, the CSS files are located he

www.fcumania.co.uk/index_p.css
www.fcumania.co.uk/index_g.css

I'm sure all of you on here will be able to resolve this, and TIA if you can.

Alastair.

hello,

I have a html file that contains many lines.
I want add a tag in every line so that I can display them with different color.

How to do it?

Thanks

Hi all,

I'm working on a wordpress site with nextgen plugin (not really important)
My problem is this:
Let's say i have this structu
HTML Code:

<p>
  <a href="">
    <img src="" />
  </a>
</p>

Now if my img is 100px height, the <p> still stays 0px, and i think that's because of the <a> tag.
But the <p> has to adjust its height to whatever height the <img> is.
How can i achieve this?

I hope you understand what i mean here
Thanks already.

hi

my name is salil. m working on a website completely in .jsp

all the links are called in div containers.

so just wanted to ask if is it possible to use the back button of the browser in that case... if yes how can we use it?
currently when i click on the back button of the browser then i go to the previous visited site.

thanking all of you for your feedbacks.
salil

Should be something simple to figure out, I know... but I'm having some trouble with the div tags in a section of my site.

What I'm trying to do is place a few images side by side, 160 pixels from the top and center alignment.
It places the images 160px from top but not in the center...

This is the code I'm using:
<div
style="
top: 160;
position: absolute;
z-index: 1;
visibility: show;
align: center; ">

Why won't it work???