CSS - Small Fix Required For Ie

HI hope someone can help me with this its been driving me mad for a couple of days now.

Have desiged a site with css layout but I want to center it in a page so when I resize the browser window it will stay in the middle of the page. I know its a bit long winded but I would greatly appreciate the help.

I've used the css sheet and html bellow

Thanks




---------------------------css---------------------------------

body
{
text-align: center;
background-color:#000000;
}

#container
{
margin-left: auto;
margin-right: auto;
width: 65em;
text-align: left;
}



#pageContent {
height: 100px;
width: 100%;
background-color:#000000;
border:solid #000000 thin;

}


/*Headings*/

h1{

}

h2{
font-size:16px;
font-weight: bold;
color:#ff0000;
padding-left: 0em;

}

h3{

}


/*Div id's*/


/* --------------------------------------------------title------------------------------------------------------- */

#title {
position:absolute;
width: 429px;
height: 162px;
left: 194px;
top: 25px;
z-index:1;
}

/* --------------------------------------------------titleImage------------------------------------------------------- */

#titleImage {
position:absolute;
width: 358px;
height:180px;
left: 670px;
top: 7px;
z-index:2;

}

/* --------------------------------------------------navLeft------------------------------------------------------ */


#navLeftContainer {
position:absolute;
top: 188px;
left: 194px;
width: 154px;
height: 405px;
background-color:#ffffff;
z-index:3;

}

#navLeft {
position:absolute;
top: 2px;
left: 3px;
width: 145px;
height: 395px;
background-color:#FFFFFF;
border: solid #cccccc 2px;
overflow:auto;

}

/*
#navLeft ul {
list-style:none;
padding-top: 0em;
padding-left: 0em;
}

#navLeft li {
padding-bottom: .2em;

}


#navLeft a {
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#999999;
font-weight:800;


}


#navLeft a:hover {
color:#ff0000;


}


/* --------------------------------------------------navTop------------------------------------------------------ */

#navTop {
position:absolute;
top: 188px;
left: 346px;
width: 670px;
height: 24px;
background-color:#000000;
font-family: Arial, Helvetica, sans-serif;
border: solid #ff0000 2px;
overflow:hidden;
z-index: 4;

}

#navcontainer
{

padding: 0;
height: 22px;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #000000;
width: 223px;
height: 24px;
border-top: 0px solid #000000;
border-left: 0px solid #000000;
border-bottom: 0px solid #000000;
border-right: px solid #000000;
padding: 0;
margin: 0 0 10px 0;
color: #ffffff;
text-decoration: none;
display: block;
text-align: center;
font: normal 16px/18px Arial, Helvetica, "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #ffffff;
background: #ff0000;
}

#navcontainer a:active
{
background: #c60;
color: #fff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
}



/* --------------------------------------------------navBargains-------------------------------------------------- */

#navBargainsContainer {
position:absolute;
top: 594px;
left: 194px;
width: 154px;
height: 158px;
background-color:#ffffff;
z-index:5;
}


#navBargains {
position:absolute;
top: 0px;
left:2px;
width: 146px;
height: 150px;
background-color:#000000;
font-family: Arial, Helvetica, sans-serif;
border: solid #ff0000 2px;
overflow:auto;
padding-left: 0px;
color: ff0000;

}



/* -----------------------------------------------------contents---------------------------------------------------- */

#contents {
position: absolute;
left: 348px;
top: 217px;
width: 672px;
height: 535px;
background-color: #FFFFFF;
overflow:auto;
z-index:6;

}

#triangle {
position: absolute;
right: 0px;
bottom: 0px;
z-index:7;


}




/* -----------------------------------------------------html------------------------------------------------------*/




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="container">



<!-- ****************************************************title******************************************* **** -->

<div id="title">
<img src="test/images/Dark-Logo.jpg" />
</div>

<!-- ****************************************************titleImage************************************** ********* -->
<div id="titleImage"> <img src="test/images/titleImage.jpg" width="353" height="180" /> </div>
<!-- ****************************************************navLeft***************************************** **** -->
<div id="navLeftContainer">
<div id="navLeft">
<h2>Menswear</h2>

<ul>
<li><a href="linked.htm">Jackets </a></li>
<li><a href="linked.htm">Jeans</a></li>
<li><a href="linked.htm">T-shirts</a></li>
<li><a href="linked.htm">Polos</a></li>
<li><a href="linked.htm">Jumpers</a></li>
<li><a href="linked.htm">Hodies & Sweats</a></li>
</ul>



<h2>Womenswear</h2>

<ul>
<li><a href="linked.htm">Going out Tops </a></li>
<li><a href="linked.htm">Day Tops</a></li>
<li><a href="linked.htm">Shirts & Blouses</a></li>
<li><a href="linked.htm">Jeans & Denim</a></li>
<li><a href="linked.htm">Knitwear</a></li>
<li><a href="linked.htm">Polos</a></li>
</ul>
</div>
</div>


<!-- ****************************************************navTop****************************************** **** -->

<div id="navTop">

<div id="navcontainer">
<ul id="navlist">
<li id="active">
<li><a href="#" id="current">Menswear</a></li>
<li><a href="#">Womenswear</a></li>
<li><a href="#">Junior</a></li>
</ul>
</div>
</div>


<!-- ****************************************************navBargains************************************* **** -->

<div id="navBargainsContainer">
<div id="navBargains">
<h2>Items in Focus</h2>
<ul>
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>
</div>

<!-- ****************************************************contents**************************************** ***** -->


<div id="contents">



<div id="triangle">
<img src="test/images/triangle.gif" width="55" height="55" />
</div>


</div>

</div>




</body>
</html>





/* Links End */

Hi all

I'm just wondering if anyone can help me with a few corrections I need to make on a site I'm developing ?

I've recently developed a site on Mac OS X and been viewing it using Firefox whilst working on it, the site should look like this : http://www.timetraveltours.net/firefox.jpg

However when viewed in Safari I have found that there is a problem with the menu bar as seen here : http://www.timetraveltours.net/safari.jpg

To add to that I have noticed that there is also a problem at the bottom of the page, as seen here : http://www.timetraveltours.net/explorer.jpg

I'm guessing that I just have to change some of the positioning or something in the CSS but don't really want to it without some help/advice first incase I mess the whole thing up.

The CSS code can be found here http://www.timetraveltours.net/base.css

Other style sheets are :
http://www.timetraveltours.net/ie5mac.css http://www.timetraveltours.net/ie5win.css
http://www.timetraveltours.net/netscape.css
http://www.timetraveltours.net/screen.css
http://www.timetraveltours.net/style.css
(if needed)

I'm also wondering if these problems appear in 3 different browsers on a Mac what problems there are when viewed with various browsers on Windows and would very much appreciate anyone to beta test the site for me on the Windows platform.

I hope that I have explained myself cleary and given the correct information ? Many thanks in advance

The site can be found at : http://www.timetraveltours.net

Hi,

i need a simple, clear and easy to understand explanation of the parameters given to the CSS 'clip' property.

i understand what the clip property does in essence - basically clips a rectangle from the given image - but i do not understand how the points given to the rect() function work - i cannot visualise it.

My book does not describe it very well and the websites i have visited dont either. Therefore id be grateful if someone could give me a simple explanation

Thanks

Hi,

I recently started migrating from a table layout to a css based one. I've probably made the classic mistake of using IE to develop only to find it looks awful in other browsers e.g. firefox.

Being relativity new to CSS I've looked at various websites and if I understand the issue correctly some browsers like firefox adhere strictly to the CSS standard whereas IE doesn't.

My question is would I be better developing separate CSS files for each browser type and use a script to determine which one?

If anyone can point me at a resource that points out the differences between IE CSS standards and other browsers I'll be internally grateful.

Regards

Paul

Howdy folks. If you check http://www.clansunited.net/ and http://www.clansunited.net/phorum/read.php?55,20178,20178#20178 you will notice that it doesnt really appear as it should as in IE. Now there are 2-3 small minor errors left otherwise everything is valid.

How do I make the space between the menu and the rest of the site appear as in IE without messing it up in IE?

Any feedback is welcome.

Hi,
I'm new to using forums, and need a little help trying to fix an IE6 problem.
My code is all valid, and i'm using xhtml strict. my page works fine in all the main browsers (including ie:7/8) just not ie6.

Here is the problem i have. I have a div (links) which is 956px wide and i am floating 5 other divs (1-5) within the links div.

The widths and padding for all of the 5 divs equals 956px's
But for some reason the last div (lower5) is dropping out of alignment, it looks like ie6 thinks there is not enough room for all of the 5 divs to fit within the outer div.
As you can see i have tried using line height:0; and that did not help.

Here is my code...........Any idea's

HTML:

<div id="lower-links">
<div id="lower1"></div>
<div id="lower2"></div>
<div id="lower3"></div>
<div id="lower4"></div>
<div id="lower5"></div>
</div>

CSS:
#links {
margin:0;
padding:0;
background-color: #FFFFFF;
width: 956px;
height:374px;
float: right;
line-height:0;
}

#lower1,#lower3 {
background-color: #FFFFFF;
width: 161px;
height:308px;
float: left;
padding-top:33px;
padding-left:15px;
padding-right:15px;
line-height:0;
}
#lower2,#lower4 {
background-color: #FFFFFF;
width: 162px;
height:308px;
float:left;
padding-top:33px;
padding-left:15px;
padding-right:15px;
line-height:0;
}
#lower5 {
background-color: #FFFFFF;
width: 160px;
height:308px;
float: right;
padding-top:33px;
padding-left:15px;
padding-right:15px;
line-height:0;
}

battleglory.mattaproductions.com/layout

Somewhere in the coding I made a issue somewhere and I don't know where. In firefox the layout shows up fine, but in Internet Explorer there is like a pixel gap between the top content image and the text. Appreciate anyone's help....thanks.

Matta

EDIT: Special thanks to ryan-reese-09 and kk5st for the wonderful support they both gave.

What happen was a gap below the images in IE and firefox displayed just fine. I added:

img{
vertical-align: bottom;
}

Fixed the issue immediately. But than my images were to close so than I added:

#special_feature_btm img {
padding: 0px 0px 10px 0px;
}

#content_btm img {
padding: 0px 0px 10px 0px;
}

This gave a 10px space to the bottom of the images. Remember top, right, bottom, left (clockwise). So the rest I didn't need to change. I hope I summarized this up well and hope it helps you guys out sometime. Thanks again!

Matta

Well I got sick of reading through tons of <td> and <tr> tags today so I sat down and tried to write my first CSS script ever. I got the basic idea of it and tweaked it using Firefox/Firebug to get it working great. The problem was I checked back in IE (since most people use it =/...) It looked all messed up and I tried changing a lot of things around and I just got frustrated. Since I am new to this whole thing with CSS, I don't know what to look for or change. I know that the top links are messed up but I will fix those after I get my layout working in both browsers. Can anyone help me out?

www.etwcweb.com/ETWC.html

Here is the CSS code also:

Code:

/* Main Part */

body {
     font-family: Arial, Helvetica, sans-serif;
     background: #333333 url(Images/mainbacknew.png) repeat-y;
     font-size: 14px;
     margin: 0px;
}

h1 {
   font-size: 115%
   font-weight: bold;
   color: #000000;
}

p, ol, ul {
   line-height: 145%
}

a {
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
	color: #CCCCCC;
	font-weight: bold;
	text-decoration: none;
}


ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0pt;
padding-left:0pt;
}

ul li {
list-style: url(Images/bluearrow.png);
padding-left:15px;
}

img {
border:medium none;
}
img.left {
float:left;
margin:5px 9px 0pt 0pt;
}
img.right {
float:right;
margin:5px 9px 0pt 0pt;
}

hr {
display:none;
}


/* Floating part of Page */

#main_content {
	      width: 800px;
	      margin: 0pt auto;
	      background: url(Images/bg_content.jpg) repeat;
}

#main_content a {
	      color: #000000;
	      text-decoration: underline;
}

#main_content a:hover {
	      color: #666666;
}


/* The Top Picture */

#top_area {
	  background: url(Images/CSSHeader.png);
	  height: 433px;
	  width: 100%;
}

#top_area li {
	  display: block;
}

#top_area a {
	  color: #FFFFFF;
	  display: block;
	  float: left;
	  padding: 40px 20px 0pt;
	  text-decoration: none;
}


/* Search Form */

.search {
	float: right;
	padding-right: 20px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.search h1 {
	color: #FFFFFF;
	font-size: 150%;
}

/* Top Links */

#main_links {
	   /* background-color: #000000;
	    opacity: 0.7; */
	    width: 800px;
	    margin: 0pt auto;
}

#main_links ul {
	    list-style-image: none;
	    list-style-position: outside;
	    list-style-type: none;
	    margin-left: 0pt;
	    padding-left: 0pt;
}


/* Right Side of Floating Page */

#stories {
	 background: transparent url(Images/bg_content.jpg) repeat;
	 width: 535px;
       	 padding: 30px;
       	 float: right;
	 margin: 0pt auto;
}

#stories h2 {
	 padding-left: 20px;
	 padding-top: 15px;
}

/* Left Side */

#left_bar {
	  background: transparent url(Images/bg_content.jpg) repeat;
	  float: left;
	  width: 205px;
	  margin: 0pt auto;
}

.left {
      padding-right: 10px;
      padding-top: 0px;
}

.left_list {
	   padding: 20px;
}

.left_list ul li {
	   border-top: 1px solid #CCCCCC;
	   padding: 10px 15px;
}

#left_bar h1 {
	  background: url(Images/LeftHeaders.png) repeat-x;
	  padding-left: 20px;
	  padding-top: 5px;
	  color: #FFFFFF;
}

/* Message */
#top_footer {
	    width: 800px;
	    margin: 0pt auto;
	    background-color: #666666;
	    color: #FFFFFF;
	    font-size: 90%;
	    font-weight: bold;
	    padding-top: 4px;
	    padding-bottom: 4px;
	    text-align: center;
	    line-height: 150%;
}

/* Bottom Links */
#links {
       width: 800px;
       margin: 0pt auto;
       text-align: center;
       background: #000000;
       color: #FFFFFF;
       font-size: 90%;
       line-height: 160%;
       padding-top: 8px;
       padding-bottom: 3px;
}

#links a, #links a:hover {
       text-decoration: none;
       font-weight: bold;
}

#links .contact {
}

#links .contact a, #links .contact a:hover {
	       text-decoration: underline;
	       color: #0000CC;
}

Thanks in advance guys and sorry if this is already posted here, but my brain is frazzled and I couldn't find it with a quick search or three

So I made a test design for a site, which I uploaded for testing HERE.

The problem is that for a few borders to the navbar and such, an image needed to overlap them, so instead I made them very short div's and cut the image to fit inside the div, about 2px in height. Although this displays fine in firefox, in IE the small images do not show.

At first it looked even worse in IE, until I implemented overflow: hidden; to make the div shrink to its actual size.

Any recommendations? Is there a better way to do this, or an easy fix?

Thanks in advance

moved on....

hey just got a small problem i dont know hw to fix, take a look at my site
http://funnyguys99.tripod.com/index.htm
if u hover over the links on the left side of the page, the border around them is not even. I want the border to end at the same spot when u hover over them, no matter how many more letters there are in the link.
Here's the Css for the left bar, please fix it

[CODE]
div#menubar
{
padding-right: 0.5em; padding-left: 0.5em;
padding-bottom: 20%;
margin: 120px 0px 0px 0px;
padding-top: 0.5em;
left: 0px;
width: 8em;
top: 0px;
height: auto;
position:absolute;
background:#FFFFFF;
border-right:1px solid black;
border-bottom:1px solid black;
border-top:1px solid black;
}
div#menubar ul
{
padding-left:0px;
padding-top:0px;
list-style:none;
line-height: 85%;
margin:0px;
}

div#menubar a
{
font-weight: bold;
text-decoration: none;
font-size:0.6em;
padding-right:7.5em;
padding-top:0px;
padding-bottom:0px;
}

div#menubar a:link
{
color: #ffa500;
}
div#menubar a:visited
{
color:dark red;

}
div#menubar a:active
{
font-weight: normal;
}
div#menubar a:hover
{
color: white;
background:#999999;
border:1px solid black;
}
[CODE]

Hi everyone,

I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet.

I would post a link but can't because i'm too new.

I'm new to this, so be kind on my coding

The code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title>
	<style type="text/css" media="screen">
body		
		{
			margin: 0;
			padding: 0;
			text-align: center;
		}
		
div#container		
		{
	
	width: 100%;
	
	background-color: #EAFBFF;
	width:760px;
	height:220px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #0066FF;
	border-right-color: #0066FF;
	border-bottom-color: #0066FF;
	border-left-color: #0066FF;
		}
div#container2		
		{
	width: 760px;
	background-color: #ddd;
	width:760px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0033FF;
	border-right-color: #0033FF;
	border-bottom-color: #0033FF;
	border-left-color: #0033FF;
	padding-top: 15px;
	padding-bottom: 15px;
		}
div#container3		
		{
	width: 760px;
	background-color: #666666;
	width:760px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #0033FF;
	border-right-color: #0033FF;
	border-bottom-color: #0033FF;
	border-left-color: #0033FF;
	padding-top: 13px;
	padding-bottom: 10px;	
		}
#container {
}
    #Layer1 {
	position:absolute;
	width:760px;
	height:115px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
#container2 {
}
    #Layer2 {
	position:relative;
	width:760px;
	height:600px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
#container4 {
	font-family: Arial, Helvetica, sans-serif;
	width: 500px;
	font-size: 14px;
	font-style: normal;
	color: #DDDDDD;
	text-decoration: none;
	text-align: left;
	margin-right: 110px;
	margin-left: 125px;
	background-color: #999999;
	border: thin solid #999999;
	padding-left: 15px;
}


    #Layer3 {
	position:relative;
	width:200px;
	height:600px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
    .style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
    .style2 {
	font-family: Arial, Helvetica, sans-serif; 
	color: #FFFFFF;
}


    #navbar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #666666;
	margin: 0px;
	padding: 0px;
	height: 20px;
}
    #navbar ul {
	padding: 0;
  	margin: 0;
  	list-style: none;

}
    #navbar li {
	float: left;
	text-align: center;
	background-color: #666666;
  	position: relative;
  	width: 130px;
}
	#navbar li ul{
	position: absolute;
	display: none;
	text-align: center;
	line-height: 25px;
	padding-top: 7px;
}
	#navbar li > ul {
	top: auto;
	left: auto;
}
	#navbar li:hover ul { 
	display:block;
	text-align: center;
	text-indent: 0;
}
	#content {
	clear: left;
}

    
    #mainphoto {
	padding: 0px;
	float: right;
	border: 1px solid #0066FF;
	margin-top: 20px;
	margin-right: 30px;
	margin-bottom: 30px;
	margin-left: 30px;
}
    
    #container6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	padding-right: 30px;
	padding-left: 30px;
}
    .style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
    .style4 {color: #000000}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
    a {
	font-size: 12px;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #CC6600;
}
a:active {
	text-decoration: none;
	color: #CCCCCC;
}
    </style> 
</head>
<body>
<div id="container">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220">
    <param name="movie" value="(URL address blocked: See forum rules)">
    <param name="quality" value="high">
    <embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed>
  </object>
</div>
<div class="style2" id="container3">
<div id="navbar">
<ul>
  <li><a href="(URL address blocked: See forum rules)">Home</a></li>
  
   <li>About the Office
    <ul>
      <li><a href="">Meet Dr. Toolson
        </a></li>
      <li><a href="">Meet the Team</a></li>
      <li><a href="">Office Tour</a></li>
	  <li><a href="">Location</a></li>
    </ul>
  </li>
  
  <li>About Orthodontics
    <ul>
      <li><a href="">Adults</a></li>
      <li><a href="">Children</a></li>
		</ul>
	</li>

  <li>Life with Braces</li>

  <li>Contact Us
    <ul>
	  <li><a href="">Contact Information</a></li>
      <li><a href="">Request Appointment</a></li>
	  <li><a href="">Location</a></li>
    </ul>
  </li>
</ul>
  </div>
</div>
<div id="container2">
  <div id="container4">
    <p class="style3">Contact Information Form</p>
	
    <form action="(URL address blocked: See forum rules)" method="post" class="style4">
      <span class="style1">
      <label>Name
        <br>
        <input type="text" name="Name">
      </label>
      </span>
    
      <span class="style1">
	  <br>
	  <br>
      <label>Email
        <br>
        <input type="text" name="Email Address">
      </label>
      </span>
    
      <span class="style1">
	  <br>
	  <br>
      <label>Phone Number
        <br>
        <input type="text" name="Phone Number">
      </label>
      </span>
   
        <span class="style5">
		<br>
		<br>
        <label><span class="style4">Description (if neccessary)</span> </label>
      </span>
        <span class="style4">
		
        </span>
	
      <label><br>
        <textarea name="Description" rows="5"></textarea>
      </label>
  
    
      <label>
	  <br><br>
      <input name="Submit" type="submit" class="style1" value="Submit">
      </label>
      <label>
      <input name="Reset" type="reset" class="style1" id="Reset" value="Reset">
      </label>
      <input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com">
	  
	  <input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)">  
    
	</form>
  </div>
</div>
  
<div class="style1">
Copyright Toolson Orthodontics 2009 </div>
<p>&nbsp;</p>

</body>
</html>

Hi! In this page [www].bezlica.ru/chat/sample.php , left bottom flash window is 3 pixels up of its normal position. In Firefox it renders well. Is there any way to fix in IE, while not affecting Firefox?

Hello,

I couldn't think of a more appropriate title, so I apologize - but as it says, I have a series of small questions regarding my CSS layout and would be most grateful if someone could assist me.

I'll start with the biggest one. (See Image)

http://img379.imageshack.us/img379/9779/46432769lm3.png

As you can see, when viewing my layout in Google Chrome or Safari, everything in between the header and the footer gets caught on my top menu. I tried to correct it, but I am really unaware of the problem's source; if anyone knows I'd appreciate it.

The topmenu CSS is he
Code:

.topmenu {
  float:left; 
  padding:0; 
  margin:0;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
  width:898px; border:solid 1px #363636;
  clear:both;
} 


.topmenu  a, .topmenu a:visited {
  font-family:Arial, Helvetica, sans-serif;
  font-style:normal;
  font-weight:bold;
  font-size:12px;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
  text-decoration: none;
}


.topmenu ul {
  list-style-type:none;
  padding:0; 
  margin:0;
}


.topmenu ul li {
  float:left; 
  position:relative; 
  z-index:auto !important /*Non-IE6*/; 
  z-index:1000 /*IE6*/; 
  border-right:solid 1px #363636; 
}


.topmenu ul li a {
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
  float:none !important /*Non-IE6*/; float:left /*IE-6*/; 
  display:block; 
  height:30px; 
  line-height:30px; 
  padding:0 10px 0 10px; 
  text-decoration:none; 
}


.topmenu ul li ul {
  display:none; 
  border:none;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
}


.topmenu ul li:hover a {
  background-color:#008000; 
  text-decoration:none; 
  color:#FFFF00;
} 


.topmenu ul li:hover ul {
  display:block;  
  position:absolute; 
  z-index:999; 
  top:29px; 
  margin-top:1px; 
  left:0;
}


.topmenu ul li:hover ul li a {
  display:block; 
  width:12em; 
  height:auto; 
  line-height:1.3em; 
  margin-left:-1px; 
  padding:5px 10px 5px 10px; 
  border-left:solid 1px #363636; 
  border-bottom: solid 1px #363636; 
  background-color:#0000FF;  
  color:#FFFFFF;
} 


.topmenu ul li:hover ul li a:hover {
  background-color:#CA0000; 
  text-decoration:none;
  color:#FFFF00;
} 


.topmenu table {
  position:absolute; 
  top:0; 
  left:0; 
  border-collapse:collapse;
  color: #FFFFFF;
  background: #0000A0 url(/menbg.png);
}


.topmenu ul li a:hover {
  background-color:#008000; 
  text-decoration:none;
  color:#FFFF00;
} 


.topmenu ul li a:hover ul {
  display:block; 
  width:12em; 
  position:absolute; 
  z-index:999; 
  top:29px; left:0; 
}


.topmenu ul li a:hover ul li a {
  display:block; 
  width:12em; 
  height:1px; 
  line-height:1.3em; padding:4px 16px 4px 16px; 
  border-left:solid 1px #363636; 
  border-bottom: solid 1px #363636; background-color:#0000FF;  
  color:#FFFFFF;
} 


.topmenu ul li a:hover ul li a:hover {
  background-color:#CA0000; 
  text-decoration:none;
  color:#FFFF00;
} 

The next two things aren't really significant. (See Image)

http://img73.imageshack.us/img73/1725/50804367ww7.png
(Shown in red)

If possible, I would like to remove that space in the center column and expand the width of the blockquote section in my sidebar, but I can't seem to find out how.


Website: http://banjouniverse.110mb.com/css2.php
CSS: http://banjouniverse.110mb.com/master2.css