Help with browser probs

**adammc** · Oct 12, 2006 20:21

Hi folks,

I am having trouble getting the header of my site to show correctly in IE & Firefox.

Below is the css code and html for my logo and flash slideshow that sits next to it. They equal a total width of 770px
This loads perfectly in IE but in Firefox it puts the flash on a new paragraph (sees it as being too wide)

Can anyone possible help me solve this?

Code:

  
#wrapper - main table
{
	background:#FFF;
	text-align:left;
	margin:auto;
	width:770px;
	border:1px solid #FFFFFF;


#banner
{
	border-top:1px solid #FFFFFF;

}

Code:

<div id="banner" align="top" align="left">

<img src="main.jpg" alt="" width="400" height="172" />

<object type="application/x-shockwave-flash" data="flash/SlideShow.swf" width="370" height="172">
<param name="movie" value="flash/Slideshow.swf" />
<param name="quality" value="high" />
<a title="You must install the Flash Plugin for your Browser in order to view this movie"  href="http://www.macromedia.com/shockwave/download/alternates/"></a>
</object>

</div>

**Dan Schulz** · Oct 12, 2006 20:47

- main table

needs to be commented. It should look like:

/* - main table */

**Dan Schulz** · Oct 12, 2006 20:48

Also keep in mind I just glanced at it.

**adammc** · Oct 12, 2006 20:50

Hi Dan,

the text - main table doesnt exist in my code, I just popped it in so people on the board would know what it is for.

Any other ideas?

**Dan Schulz** · Oct 12, 2006 20:52

Can you show me the full HTML and CSS for the page?

**adammc** · Oct 12, 2006 20:57

Sure

Header part of html

<body>

Code:

<div id="wrapper">
	<div id="header">
		<div id="logo"><a href="index.html"><img src="images/header-text.gif" alt="" /></a></div>
		
<a href="#skiptonav" class="hideme">Skip to Navigation</a></div>


	<div id="banner" align="top" align="left">

<img src="images/main.jpg" alt="" width="400" height="172" />

<object type="application/x-shockwave-flash" data="flash/SlideShow.swf" width="370" height="172">
<param name="movie" value="flash/Slideshow.swf" />
<param name="quality" value="high" />
<a title="You must install the Flash Plugin for your Browser in order to view this movie"  href="http://www.macromedia.com/shockwave/download/alternates/"></a>
</object>

	</div>


	<div id="container">
		<div id="main">
			<div id="content">
				<h1>Welcome</h1>

relevant css

Code:

body
{
	font-size:80%;
	background:#669966 url("images/header-background.gif");
	background-repeat:repeat-x;
	color:#000;
	font-family:arial,verdana,helvetica,sans-serif;
	text-align:center;
	margin:0;
	padding:0;
}

#wrapper
{
	background:#FFF;
	text-align:left;
	margin:auto;
	width:770px;
	border:1px solid #FFFFFF;
}
#header
{
	background-image:url("images/header-text-bg.jpg");
	background-repeat:repeat-x;
	height:55px;
}

#container
{
	background-image:url("images/navigation_bg.gif");
	background-repeat:no-repeat;
	width: 100%;
	float:left;
}

#banner
{
	border-top:1px solid #FFFFFF;

}


#main
{
	width: 100%;
	float: right;
	margin-left: -230px;
	padding:0px 0px 20px 0px;
}
#content
{
	margin-left: 220px;
	padding:1px 15px 15px 15px;
	font-family:verdana, arial, helvetica, sans-serif;
	line-height:1.8em;
	font-size:0.85em;
}

#content a, #content a:visited, #footer a, #footer a:visited
{
	color:#093280;
}

#content a:hover, #footer a:hover
{
	color:#009933;
}

#contentleft
{
	float:left;
	width:240px;
}

[/code]

**adammc** · Oct 12, 2006 21:03

Dan... I fixed it

I removed the space between:

<img src="main.jpg" alt="" width="400" height="172" />

and
<object type="application/.....

result:
<img src="main.jpg" alt="" width="400" height="172" /><object type="application/...

Looks perfect in IE 7 and Firefox

User Tag List

Thread: Help with browser probs

Thread Tools

Display

Help with browser probs

Bookmarks

Bookmarks

Posting Permissions