CSS - Ie Version Problems

My website is http://www.orchard-homes.co.uk/developments/ and ive noticed in some versions of safari (on a mac) a big white block covers the whole of the navigation, it only affects the 4 pages under the "Developments => Current =>" section and hovering over the word "developments" makes it disappear again.

Its driving me crazy how it works in every other browser fine, anyone have any ideas?

Thanks!

Hello

I am very new to css. Can someone tell me if css is the way to go when making a printer friendly page? or if there are any usefull tutorials on this out there that would be really helpfull. just so i know where to start from.

Thanks

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}

http://86.7.141.216/neoxios%202

Read that please. It's all explained there.

I just updated my site and it looked great in Firefox, meaning that it looked how I wanted it to.

I am using Firefox and my resolution is at 1280x1024.

I opened my site in Internet explorer and it's horrible.

Does anyone know what the problem is?

Homepage: www.stevemedleyphotography.com

In IE the picture on the left is put way down the page, in Firefox it's up towards the top.

Store Page: www.stevemedleyphotography.com/store.html

In IE the view cart button is thrown off to the left and the text is far off to the right, once again in Firefox it's positioned correctly.

Galleries: http://stevemedleyphotography.com/bwg/index.html
http://stevemedleyphotography.com/cg/index.html
http://stevemedleyphotography.com/japan/index.html
http://stevemedleyphotography.com/mg/index.html

All four photo galleries will not play the SimpleViewer gallery in IE but they work fine in Firefox.

Thank you very much for any help you can offer.

-Steve

since installing IE7 some of my images are appearing differently, for example the following is not displayed at all when i call it..

PHP Code:
.bgright {
    background: url('images/br_logo.jpg') no-repeat fixed bottom right;
} 





if i removed the "fixed" property, it works. why is this?

thanks!

like mostpeople i mademy site using FF and it worked fine till i tried it on IE.

the URL is
http://wakefieldfhs.co.uk/stu/snap/index.php

the inital problem is in F the .main class shows at 100% but in IE it shows only to the scale of the text.

also the links are in the wrong position too!

any ideas?

-----CSS-------

Code:

a:link {
	color:#0099FF;
	text-decoration:underline;
	 font-weight:bold;
	font-family :Verdana, Tahoma, Arial ;
}

a:visited {
color:#0099FF;
  text-decoration:underline;
  font-weight:bold;
}

a:hover {
	color:#0099FF;
	text-decoration:underline;
}

a:active {
	color:#0099FF;
	text-decoration:underline;
}

body
{
background-color:#CCCCCC;
font-family: Arial, Helvetica, sans-serif;
}
.header
{
	background-color:#000000;
	color:#FFFFFF;
	width:100%;
	height:15%;

}
.links
{
top:10%;

float:left;


}


.status
{
width:30%;
	background-color:#FFFFFF;
}
.main
{
background-color:#FFFFFF;
height:100%;


}

.logo
{
float:left;
position:static;
}

.footer
{
	background-color:#000000;
	width:100%;
	height:20px;
	margin: 0 auto;
	color:#FFFFFF;
	bottom:0px;
	
	
}


label
{
float: left;
width: 120px;
font-weight: bold;
}

input
{
width: 180px;
margin-bottom: 5px;
font: 11px Verdana, Sans-Serif;
}

#wrapper
{
width: 75%;
height:70%;
margin: 0 auto;
background-color:#FFFFFF;
border-color:#000000;
top:0px;
position:absolute;
left:12.5%;

}

#login-box
{

float: right;

}

Well here is the layout.. http://monarkstudios.ca/peter/

body_txt should be at the same top position as body_menu_txt.

On IE7 the layout turns out perfect (besides the above problem), but on Firefox the body tag kinda cuts out.

And lastly on IE6, it just looks messed entirely...

http://monarkstudios.ca/peter/screeen.jpg - IE6
http://monarkstudios.ca/peter/screen.JPG - IE7
http://monarkstudios.ca/peter/screenff.JPG - Firefox

I've been trying to solve these problems for quite sometime now, and just gave up.

Any help is appreciated.

Thanks,
Peter

Man I love how my site works fine in just about every browser and even across platforms in macosx and windows and yet ie still manages to royally retard my site.

http://www.unlimitedgamer.net/

Basically in IE6 there is a huge space between the search (top navigation area) and the header: wew.

Second at the end ot the news the 2 last posts, the text in the news decides it wants to travel to the magically empty space to the left and not display correctly.

I for one am beyond frustrated with trying to fix these errors, up until now i was on IE7 and just found out all these holes existed, not to mention ie6 was also pushing my navigation to the end of the page because it refuses to adhere to all the other browser standards of width and margin...

Any help I am thankful for, cause right now I have an atomic headache

I am pretty new to semantic HTML and just started. I used to put a lot of stuff in the html instead of the css.
I have now made a semantic html website which works perfectly in IE, but not in the other browsers I've tried (FF, NN, Opera). I figure the problems must be in the css, so could you please take a look at it?

In the beginning I have a DIV with a background-image, which is the banner of the page. After 160px, a horizontal menu comes on top of that and a little below there will be breadcrums.

For now there 2 things to solve:
1. IE places the background/image at the top of where the DIV starts, All the other browsers place the background/image at the first actual content of the page (which is the horizontal menu). If I add a <br> or a dot at the top of the div, the background-images is moved to the right place. But I would like to do it without a <br> or a dot. Is that possible??
2. The horizontal menu is a series of SPAN's with text in it, the width is set as 19%, and in IE this works. In the other browsers each SPAN is as wide as the text is, though it should be longer.

Could you help me find the solution to these problems?
The code is posted below,

Sjoukje

My CSS:
Code:

BODY {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0; height: 100%;}

#bgimage {
	background-image: url(images/CFD.jpg);
	width: 800px;
	height: 280px;
	margin-top: 20px}
	
#midimage {
	background-image: url(images/contentbg.jpg);
	width: 800px;
	height: 110%;
	background-repeat: repeat-y;
	overflow: hidden;}

#underimage {
	background-image: url(images/contentbottom.jpg);
	width: 800px;
	background-repeat: no-repeat;}

#margin_top {
	margin-top: 180px;}

#hoofdmenu {
	width: 100%;}

.menu_item1, .menu_item2, .menu_item3, .menu_item4, .menu_item5 {
	font-size: 10pt;
	font-weight: bold;
	width: 19%;
	height: 15px;
	text-align: center;
	vertical-align: middle; 
 	padding: 1px;
	color: black;
	text-decoration: none;}
.menu_item1 {background-color: #3CBF02; }
.menu_item2 {background-color: #0059D3; }
.menu_item3 {background-color: #FFF10C; }
.menu_item4 {background-color: #ff6c00; }
.menu_item5 {background-color: #CB0000; }

.mouseover1, .mouseover2, .mouseover3, .mouseover4, .mouseover5
{ 	font-size: 10pt;
	font-weight: bold;
	width: 19%;
	height: 15px;
	text-align: center;
	vertical-align: middle; 
 	padding: 1px;
	color: black;
	text-decoration: none;}
.mouseover1 { background-color: #45de01;}
.mouseover2 { background-color: #006cff;}
.mouseover3 { background-color: #fff998;}
.mouseover4 { background-color: #ff8400;}
.mouseover5 { background-color: #eb0101;}
	
a.menu {
	color: black;
	text-decoration: none;}
	
#breadcrums {
	float: left;
	margin-top: 35px;
	margin-right: 10px;
	margin-left: 200px;
	font-size: 7pt;
	font-weight: bold;
	text-decoration: underline; 
	text-align: left;
	color: Gray;}

p {font-size: 10pt; }

#boxes {	float: left; 
	width:200px;
	text-align:left; 
	padding: 23;
	margin-top: -23px;}
	
.box110, .sub_cfd, .sub_act, .sub_art, .sub_4, .sub_cont {
	background-repeat: no-repeat;
	padding: 6px;
	text-align: left; 
	font-size: 8pt;}
.box110 { background-image: url(images/menulinks110.jpg);	height: 120px;}
.sub_cfd {background-image: url(images/sub_cfd.jpg); 
             height: 156px;}
.sub_act {background-image: url(images/sub_act.jpg); 
            height: 156px;}
.sub_art {background-image: url(images/sub_art.jpg); height: 
             156px;}
.sub_4 {background-image: url(images/sub_4.jpg); height: 
          156px;}
.sub_cont {background-image: url(images/sub_cont.jpg); 
               height: 156px;}
	
p.box_main_text {	
	font-size: 8pt; 
	padding: 4px; 
	margin-top: -10px;}

.box_top_black, .box_top_white {
	font-size: 8pt; 
	font-weight: bold; 
	text-align: left; 
	margin-left: 5px; 
	margin-top: 8px;}
.box_top_black { color: black;}
.box_top_white {color: white;}
#spacer {height: 140px;}

ul.box_list {margin-left:6px;	list-style-type: none;}

#content {float: right;
	margin-right: 20px;
	margin-top: -4px;
	width: 570px;
	font-size: 10pt; 
	text-align: left; 
	vertical-align: top;	}

#footer {
	margin-left: 210px;
	text-align: center;
	font-size: 8pt;
	color: Gray;
	height: 30px;}

p.agenda_top {
	font-size: 14pt;
	color: black;
	text-align: left;
	vertical-align: top;}
p.agenda {
	font-size: 7pt;
	text-align: left;
	color: navy;}
ul.agenda_list { 
	list-style-type: none;
	margin-left: 0px;}

td{
	width: 13%;
	height: 50px;
	vertical-align: top;
	background-color: white;
	padding: 5px;}

The html
Code:

<HTML>
<HEAD>
<LINK rel="stylesheet" href="../simpel.css" type="text/css">

</HEAD>

<BODY>

<DIV align="center">
	<DIV id="bgimage">
		<DIV id="margin_top">
		
			<SPAN class="menu_item1" onmouseover="this.className='mouseover1'" onmouseout="this.className='menu_item1'"> <A href="../cfd/cfd.html" class="menu">CFD</A></SPAN> 
			<SPAN class="menu_item2" onmouseover="this.className='mouseover2'" onmouseout="this.className='menu_item2'"> <A href="../activiteiten/agenda.html" class="menu">Activiteiten</A></SPAN> 
			<SPAN class="menu_item3" onmouseover="this.className='mouseover3'" onmouseout="this.className='menu_item3'"> <A href="../artikelen/index.html" class="menu">Artikelen</A></SPAN> 
			<SPAN class="menu_item4" onmouseover="this.className='mouseover4'" onmouseout="this.className='menu_item4'"> <A href="" class="menu">nogiets</A></SPAN> 
			<SPAN class="menu_item5" onmouseover="this.className='mouseover5'" onmouseout="this.className='menu_item5'"> <A href="../contact/contact.html" class="menu">Contact</A></SPAN> 

		<DIV ID="breadcrums">><A href="../index.html">Home</A></DIV>

		</DIV>
	</DIV>
	

	<DIV id="midimage">

		<DIV id="boxes" > 
			<DIV align="center" class="sub_cfd">
				<DIV><P class="box_top_white">Activiteiten:</P></DIV>
				<DIV>
					<UL class="box_list">
						<LI>-CFD?!</LI>
						<LI>-Visie</LI>
						<LI>-Geloofsgetuigenis</LI>
						<LI>-3 Rotsen</LI>
					</UL>
				</DIV>
			</DIV>
			<DIV id="spacer"></DIV>

			
			<DIV align="center" class="box110">
				<DIV><P class="box_top_white">Meer CFD</P></DIV>
				<DIV>
					<UL class="box_list">
						<LI>-Webwinkel</LI>
						<LI>-HisBride Ministries</LI>
						<LI>-Forum</LI>
						<LI>-Creative Expressions</LI>
					</UL>
				</DIV>
			</DIV>

		</DIV>

		<DIV id="content">
		<H2>Content</H2>
		<P>Content (removed for now)</p>			</DIV>

	</DIV>


	<DIV id="underimage"></DIV>
	<DIV id="footer">&copy Christian Fellowship Drachten</DIV>
</DIV>



</BODY>
</HTML>

I have designed a site recently and have two small problems left to sort out.

The first is that I have a div full of thumbnails, under some of these I have a small 'new' to show that this image is new. This works fine in Safari/Firefox/Mozilla, and also works in IE 5+ with help of the box model hack, however IE6 posistions the text in the middle of the thumbnails.

You can see this at www.marcelbaker.com/portfolio.php
A sample of the html for this is
Code:

<div id="container1">
<div id="float">
<div id="drinks"><a class="selected" href="/portfolio.php?page=1&old="><br /><p class="new">new</p></a>
</div>
</div>
</div>

The css for the thumbails is:
Code:

#float {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}

#float a {
width: 45px;
float: left;
padding: 0;
margin: 0;
height: 45px !important;
height /**/:45px; /* for IE5/Win only */
}

#float a:hover, #float a.selected {
width: 45px;
background-position: -45px 0;
}

#float a:active {
width: 45px;
background-position: 0 0px;
}

.new {
text-align: center;
font-size: 9px;
color: #BB0000;
text-align: center;
margin-top: 41px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family: inherit;
margin-top: 27px;
}

With each of the thumbnails having its own rule to show its image and create a rollover effect. ie

Code:

#drinks a {
margin: 0px 17px 0px 0;
background: url(path/to/image.jpg) top left no-repeat;
margin: 0px 17px 0px 0;
voice-family: "\"}\"";
voice-family: inherit;
margin: 0px 17px 10px 0;
}
html>body #drinks a{
margin: 0px 17px 10px 0;
}

Any ideas on this?

My other problem is that on the clients section www.marcelbaker.com/clients.php
All the thumbnails appear 4 across a row (if applicable) except for Group M, here it only displays 3 on a line although the html and css is the same for all the client pages.
I've check to make sure the images aren't wider or anything like that.

This is a real head scratcher, I've been trying to figure this out for days with no luck. I really appreciate your help on these problems.

Many Thanks

Kieran

Here is the site http://www dot asylumaccess dot org slash joom

I know! I know! I should have been developing my site in multiple browsers simultaneously! But I put together a beautiful site in FF3 and then took a gander in IE6 and HOLY ****! It is just complete crap! I want to wrap my hands around the neck of Internet Explorer and choke it to death. No doubt this is not an uncommon feeling. Please help me put my mind to rest about this mess.

My specific problem: Despite having set width and height values in both the CSS and tables, IE6 is increasing the height the two cells in the right column and completely screwing my layout. I have no idea what I can do to fix this besides setting the width and height values! I have to use tables for reasons that are too long to get into right now.

What can I do to get the heights of these cells to set properly?

CSS (html follows) : Code:

/* CSS Document */
.upper-nav li {
	display: inline; /* Shows each item side-by-side */
	list-style-type: none; /* Gets rid of the bullet points */
	}
.upper-nav li a {
	color:#fff;
	/*font-size:1em;*/
  display: block;
  float: left;
  padding: 0 .25em; /* Provides horizontal separation between menu items */
  font-weight:bolder;
  font-size:12px;
}
.upper-nav ul {
margin-left:-30px;
}
li {
list-style-type:none;
}
.donate {
	border: none;
	background-color:#fff;
	/*width:370px;
	height:102px;*/
	text-align:right;
}

.container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */	
	/*height:auto; !important;  real browsers */
	/*height:100%;  IE6: treaded as min-height*/
	/*min-height:100%;  real browsers 	*/
	background-color:#fff;
	width:780px;
}


.upper-nav {
	width:370px;
	height:40px;
	background-color:#B3BB1C;
}
.main-content {
	width:350px;
	background-color:#fff;
	padding: 10px;
	font-family:"Times New Roman", Times, serif;
	height:100%;
}
.mini-col {
	width:185px;
	height:235px;
	background-image:url(../images/mini-col-bg.gif);
	background-repeat:no-repeat;
	/*background-color:#ccc;
	padding-left:10px;*/
	padding:0 5px;
	font-family:"Times New Roman", Times, serif;
}
#mini-col table {
margin-top:-10px;
}
.mini-col p {
margin-top:-10px;
}
div#side-nav {
	position:absolute;
	left:0px;
	top:400px;
	width:195px;
	background-color:#FFF;
	padding-left:5px;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers 	overflow:auto;*/
}
#side-nav h3 {
color:#0270af;
font-size:1em;
padding-left:5px;
}
#side-nav fieldset {
border:none;
}

#donate input {
padding: 20px 10px;
}

#col1 {
float:left;
width:195px;
background:#fff;
padding: 10px;
clear:left;
}
#col2 {
float:left;
width:350px;
background:#fff;
padding: 10px;
}

.moduletable_menu, .moduletable
{
color: #000;
}
.moduletable_menu h3 {
border-bottom: 1px solid #FFFFFF;
margin-bottom: 0px;
color:#0270af;
font-size:1em;
padding:5px;
}
.moduletable_menu ul {
margin-left: 20px;
margin-top: 10px;
padding: 5px;
font-size: .9em;
line-height:1.5em;
}
.moduletable div {
padding-left:10px;
font-size:8px;
}
.contentheading {
color: #F47F20;
font-size:1em;
font-weight:bold;
}
.contentpaneopen h1 {
font-size:1.2em;
border-bottom: 1px solid #244223;
/*padding: 10px;*/
}
.contentpaneopen td {
padding:0;
}
.gutter {padding:8px;}
a:link {
	color: #0270af;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0270af;
}

a:hover {
	text-decoration: underline;
	color: #B3BB1C;
}
a:active {
	text-decoration: none;
	color: #0270af;
}
img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	margin:0;
	padding:0;
	height:100%; 
	background: #000;
	background-image:url(../images/bkgd.jpg);
	line-height:1.1em;
}
.article_column {
color:#666;
}
.container-table {
	background-color:#FFF;
	margin:auto;
}
.logo{
background-image:url(../images/logo-face.jpg); /*needed for container min-height */
background-repeat:no-repeat;
border:none;
}
.mainlevel-nav {
margin-top:-10px;
}

HTML:
Code:

<table cellpadding="0" cellspacing="0" class="container-table">
  <tr>
    <td>
	<table cellpadding="0" cellspacing="0">
      <tr>
        <td height="400" width="400" colspan="2" rowspan="3" class="logo">&nbsp;</td>
        <td width="390" height="100" class="donate"><jdoc:include type="modules" name="advert1" /></td>
      </tr>
      <tr>
        <td height="40" class="upper-nav" valign="middle" width="370"><jdoc:include type="modules" name="user3" /></td>
      </tr>
      <tr>
        <td rowspan="2" class="main-content" valign="top"><jdoc:include type="component" /></td>
      </tr>
      <tr>
        <td valign="top"><jdoc:include type="modules" name="left" style="xhtml" /></td>
        <td class="mini-col" valign="top"><jdoc:include type="modules" name="newsflash" /> </td>
        </tr>
      
    </table>
	</td>
  </tr>
</table>

I'm having a problem with CSS in IE8. I'm designing a page in C# that I want to have tabs, and found a template that I made compatible with ASP.NET (albeit a bit messily). I need this to look good in Firefox 3, IE8, and Safari, and while it looks great in FF3 and Safari, IE8 is having some problems. Is there a quick hack to make it IE quality that anyone can figure out? I've been trying for awhile but I'm stumped...

The HTML/ASP.NET is:

<div id="tabbar">
<ul>
<asp:Panel ID="Panel1" runat="server" CssClass="tabitemLSel"><a><asp:LinkButton ID="LinkButton1" OnClick="ChangeView" CssClass="tabitemRSel" runat="server" Text="Live Questions" /></a></asp:Panel>
<asp:Panel ID="Panel2" runat="server" CssClass="tabitemL"><a><asp:LinkButton ID="LinkButton2" OnClick="ChangeView" CssClass="tabitemR" runat="server" Text="Ask a Question" /></a></asp:Panel>
<asp:Panel ID="Panel3" runat="server" CssClass="tabitemL"><a><asp:LinkButton ID="LinkButton3" OnClick="ChangeView" CssClass="tabitemR" runat="server" Text="Answered Questions" /></a></asp:Panel>
</ul>
</div>

and the CSS is:

#tabbar {
float:left;
width:100%;
/*background:#DAE0D2 url("bg.gif") repeat-x bottom;*/
background: url("bg2.gif") repeat-x bottom;
font-size:14px;
line-height:normal;
}

#tabbar ul
{
padding:10px 10px 0;
list-style:none;
}

#tabbar a:hover {
color:#333;
}

.tabitemL {
float:left;
background:url("left.gif") no-repeat left top;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 9px;
}

.tabitemR {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}

.tabitemLSel {
float:left;
background:url("left_on.gif") no-repeat left top;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 9px;
border-bottom: solid 1px white;
}

.tabitemRSel {
float:left;
display:block;
background:url("right_on.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color: #333;
}

I am using dreamweaver to put a spry menu bar into a page.
Until recently, the page was fine on both firefox and IE, but now, when you access the sub menu, under shop, while firefox displays the second menu in the correct place, the menu in IE displays from the top of the page, not under the original menu.

The CSS code for the nav bar..

The website is http://www.skiweb.uk.com

Sorry if this is a messy post, its my first!! Many thanks.

Code:

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 8em;
	float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 22.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #33C;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #33C;
	color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}

Hey all,

I have a small problem. In my webpage stylesheet I have set the <input> tag as having a solid border of 1 in black. Now when I do text boxes this is fine. But when i do checkboxes it looks stupid so how do it so that on some input tags it works and other input tags it doesn't.

Thanks in advance.