CSS - Problem With My Css Code In Ie7

Hello everyone, I am hoping I could get some help on this.

I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that.

So, the issue lies within this example page:
tinyurl.com/rediculouswebsite


The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox.

I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue.

Thank you all very much.

Hi guys
I've a website, pure css, tableless
It looks good in Firefox, Opera, etc. etc.
It looks VERY bad in IE

Look:

Firefox
http://img465.imageshack.us/img465/4333/shot14jr.png

Internet "Explorer"
http://img378.imageshack.us/img378/8224/shot22cv.png

Website files for download here...
http://rapidshare.de/files/11673865/website.zip.html

Does any1 know how to fix css or web to look good in IE also ?

Thanks a lot in advance

I am trying to make this header menu go horizontal but I can't get it to do anything but be vertical. You can see what is happening by visiting SodShopWichita.co m The green buttons. Anyones help would be greatly appreciate as I have spent hours trying to figure it out. I'm new to CSS. Here is the code:



/******************************** Main Navigation ******
* Global topmenu navigation, degrades gracefully to css
* if Javascript is disabled. Else applies fade effect.
*/

#navcontainer {
height:50px;
float: right;
width:1014px;
position:relative
}

/* Menu Body */
ul#navigation {
height:35px;
list-style:none;
float:left;
padding:0px 1px 0px 0px;
margin:0px 0px 0px 10px;
float: left;

}
/* Float LI Elements - horizontal display */
ul#specialnav li {
float:left;
display: block;
}


/************ SPECIAL NAV ************************/

#specialnav {
height:50px;
width:185px;
position:relative;

}
/* Link - common attributes */
#specialnav a {
background:url('specialnav.png') no-repeat scroll top left;
display:block;
height:35px;
width:185px;
position:relative;
z-index:10;
line-height:2.5em;
font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
color:#fff;
font-size:14px;
text-align:center;
text-decoration:none;
padding-left: 0px;
padding-right: 0px;
}
/* Specify width and background position attributes */
#specialnav li.isactive a {
background:url('specialnav.png') no-repeat scroll 0 -105px; bottom left repeat-x
display:block;
height:35px;
width:185px;
position:relative;
z-index:10;
padding-left: 0px;
padding-right: 0px;
}

/* Link (on hover) - common attributes */
#specialnav li.highlight a:hover {
background:url('specialnav.png') no-repeat scroll 0 -35px;
display:block;
height:35px;
width:185px;
line-height:2.5em;
position:relative;
z-index:10;
padding-left: 0px;
padding-right: 0px;
}
/* Link - common attributes */
#specialnav li.highlight a:active, #specialnav li.highlight a:focus,
#specialnav li a:active, #specialnav li a:focus {
background:url('specialnav.png') no-repeat scroll 0 -70px;
display:block;
height:35px;
width:185px;
position:relative;
z-index:10;
padding-left: 0px;
padding-right: 0px;
}

/* fade effects start here */

/* Span (on hover) - common attributes */
#specialnav a span.animate {
background:url('specialnav.png') no-repeat scroll 0 -35px;
display:block;
position:absolute;
line-height:2.5em;
top:0;
left:0;
height:100%;
width:100%;
z-index:10;
cursorointer;
}

/* Shift background position on hover */
ul#navigation li a span {
background-position:0px -35px;
}
/* Shift background position on hover for the class: "isactive" */
ul#navigation li.isactive a span {
background-position:0px -35px;
}
span.trans {display:none;}

hi...

what does this css code mean..

body table table table table#plv table td{color:#fff}


? and how would the html code look like? is this for tables with no class tags attach to it..

I often see css code with "greater than" sign like this:

html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}

what does this mean? What is the difference with
body #centercontent {
margin-left: 201px;
margin-right:201px;
}

Thanks for the enlightment.

Greetings everyone!

I'm quite new for css positioning, less than 2 weeks, but I can tell you I feel like a young man entering puberty again just knowing I'll have myself free from tables very soon.

My question is an easy one. I would like to know if isnt it more correct to leave some styles outside the css file when we are using it particularly only one time. Lets say Ill use 2 distinguished boxes in the "contact" session, then would it be ok to just use "<div style="etc">content</div>" instead of building it inside the css?

Thanks in advance!

- Dehumanizer

i am trying to put a semi-transparent bg on an iframe and some cells of a table. i've been given lots of advice, none working so far. and i know its possible. is there anyway sum1 could try this or even edit my code? but mostly what im looking for is also where to put things in codes. please and thank u!!

what would happen if i assigned an iframe to "itself" w/ a colored background, and then put in a CSS declaration w/ opacity?

how do i input filters?

how do i input tablelayout(like CSS or HTML)?

where do i insert tags for the scrollbar, which also has not worked for me?

Code:

<style type="text/css">
<!--
@import url("semitransparent.css");
@import url("chromafilter.css");
body,td,th {
	font-family: Herculanum;
	color: #000000;
}
a {
	font-family: Herculanum;
	font-size: 12pt;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFF00;
}
a:hover {
	text-decoration: underline;
	color: #E05D52;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
.style3 {font-size: 12px}
BODY{ scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#CCCCCC; scrollbar-base-color:#993300; 
scrollbar-darkshadow-color:#660000; scrollbar-face-color:#990000; scrollbar-highlight-color:#CC0000; scrollbar-shadow-color:#666666; }
-->
</STYLE>
</head>

<body>
<map name="booster" id="booster">
  <area shape="rect" coords="126,87,249,107" href="boosterclub.htm" target="iframe2" onMouseOver="filter:glow(color=#FFFF99,strength="5");">
  <area shape="poly" coords="75,49" href="#">
  <area shape="rect" coords="345,82,499,108" href="Danceprogram.htm" target="iframe2">
  <area shape="rect" coords="588,87,711,106" href="dancecamp.htm" target="iframe2">
  <area shape="rect" coords="783,84,971,107" href="fly.htm" target="iframe2">
  <area shape="rect" coords="131,42,209,77" href="index2.htm" target="iframe2">
</map>
<table width="1134" height="717" border="0" cellspacing="10">
  <tr>
    <th height="174" colspan="2" scope="row"><img src="logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
  </tr>
  <tr>
    <th width="235" height="37" scope="row" bordercolor="#FFE4E0" border="1">About us </th>
    <td width="865" rowspan="3"><iframe frameborder="1" name="iframe2" src="index2.htm" allowtransparency="30" width="750" height="432" scrolling="yes"></iframe></td>
  </tr>
  <tr>
    <th height="211" scope="row">&nbsp;</th>
  </tr>
  <tr>
    <th height="175" scope="row"><table width="235" height="173" border="1" bordercolor="#FFA2A2" bgcolor="#FFE2CB" id="pink">
      <tr>
        <th width="198" height="18" scope="row">New Events!!! </th>
      </tr>
      <tr>
        <th height="128" scope="row"><p>1- We are having a competition this weekend in Portland, OR. Wish our tap girls good luck
          </p></th>
      </tr>
    </table></th>
  </tr>
  <tr>
    <th height="32" scope="row">&nbsp;</th>
    <td align="center"><b>Designer:</b> Melody Shinyama <b>Date Published:</b> January 25, 2006
	<br><b>Host:</b><a href="http://www.freewebs.com/"> www.freewebs.com</a><br> 
	<b>Last Updated:</b> January 25, 2006
    </td>
  </tr>
</table>
<p><br>
  <br>
</p>
</body>
</html>

this is also an attached code. btw i am working w/ dreamweaver.

Code:

<style type="text/css">

tbody {background-color:#FF6971;
	width: 300px;
	margin: 0 50px;
	border: 2px;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
	}

body,td,th {
	font-family: Herculanum;
	color: #000000;
}
a {
	font-family: Herculanum;
	font-size: 12pt;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFF00;
}
a:hover {
	text-decoration: underline;
	color: #E05D52;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
.style1 {
	color: #000000;
	font-family: Herculanum;
}
#transbox {
	width: 300px;
	margin: 0 50px;
	background-color: #CF0000;
	border: 2px solid;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
	}
	#bg {
	width: 400px;
	height: 300px;
	background: url(redbg.jpg);
	background-repeat: repeat;
	border: 0;
	}
#transbox div {
	font-weight: bold;
	color: #000000;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
	position: relative;
	visibility: hidden;
	}

</style>

this is the last one
Code:

table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000; 
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}	
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color: 
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}

For some reason, the following code displays perfect in firefox, but its atrocious in IE. Im doing this for a client, so i need it to display correct in all browsers...can anyone pinpoint what i am doing wrong?

here is the code:
Code:
css

*
{
	margin: 0px;
	padding: 0px;
}
html
{
	width: 100%;
	height: 100%;
}
body
{
	height: 100%;
	width: 100%;
	background-color: /*#E0F8F7 */#989B9F;
	margin: 0px;
	padding: 0px;
}
#login_box
{
	background: url( '../images/login2.png' ) no-repeat center center;
	position: fixed;
	width: 319px;
	height: 417px;
	top: 50%;
	left: 50%;
	margin-top: -209px;
	margin-left: -160px;
}
#input_div
{
	position: fixed;
	width: 103px;
	height: 38px;
	margin-top: 230px;
	margin-left: 55px;
}
#lock
{
	border: none;
	position: fixed;
	background: url( '../images/lock.png' ) no-repeat;
	width: 10px;
	height: 13px;
	margin-top: 287px;
	margin-left: 270px;
}
#forgot
{
	position: fixed;
	margin-top: 362px;
	margin-left: 50px;
}
#login_box h1
{
	color: #EDF2F7;
	font-size: 10px;
	text-align: left;
	font-family: arial, sans-serif;
}
.input
{
	width: 200px;
	font-size: 12px;
	text-align: left;
	font-family: arial, sans-serif;
	border: solid 1px #85b1de;
	background: url( '../images/gr.png' ) repeat-x #EDF2F7;
	background-position: top;
	padding: 4px;
}
input[type="text"]:focus, input[type="password"]:focus
{
	border: solid 1px #31677B;
}
#login_box p
{
	font-weight: bold;
	color: #478FAB;
	font-size: 12px;
	text-align: left;
	font-family: arial, sans-serif;
}
#button_div
{
	position: fixed;
	width: 103px;
	height: 38px;
	margin-top: 360px;
	margin-left: 190px;
}
.button
{
	border: none;
	width: 103px;
	height: 38px;
	text-indent: -1000em;
	cursor: pointer;
	background: url( '../images/login_button.png' ) no-repeat center center;
}

in Internet Explorer:
Incorrect

in Firefox, Opera, Chrome... ( Any code compliant browser )
Correct

....Any help please?

I am building a new navigation menu which works fine as you can see below:
http://www.hotlinkhosting.com/test/menu.php

However, the following version does not:
http://www.hotlinkhosting.com/test/menu.php?.

The difference between the two is that the first one doesn't have a doctype set. The second version has a xhtml doctype. All my documents are written in xhtml so it must be done. I see that the problem occurs with my resizing of the <h1> and <h2> tags with css. After resizing the space the heading tags normaly take up is still their. Feel free to take a look at the source code and I hope you can help.

Btw, I know the nav menu doesn't look right in ie, but that isn't my fault now is it? I can't help it ie can't read code correctly. Anyways After I get the menu working with "real" browsers I'll fix the ie errors.

I'm a bit new to the CSS scene, but I do know my fair share of it. Unfortunately, I've run into a huge problem: Our menu bar takes up a lot of code that we DON'T want to have to repeat on EVERY page.
So, my question is: Is there any code/way we can retrieve data from another source file and have it pulled into our original code? Like an img src=, only with a file.

Thanks in advanced!

Sorry....wrong info here....been up too long.
I'll regroup and repost this with hthe correct info.

Greetings,
I don't know how is this possible. Please, take a look at these 2 pages:
Correct: http://83.208.191.102/bio/Sources/M...t.modified.html
Screwed: http://83.208.191.102/bio/Sources/M...modified02.html

It's no browser-specific problem, it does the same in both IE and FF .I must be missing something really basic, but I can't see any difference

Have some problem with my css. Would appreciate some comments on how to do this:

Here is the code: with explanation of what's not working:
It's a small "complete" htm file.....

Code:

<html>
<head>
<style>
.outer  {
	display: block;
	background-color: #bbb;
	border: 0;
	padding: 0;
	text-align: center;
	
	font-family: Arial,sans-serif;
	font-size: 12px;
	color: #000;
	text-decoration: none;
	font-weight: normal;
}

.outer a  { 
	display: block;
	color: #000;
	text-decoration: none;
	font-weight: normal;
}

.outer a:hover { 
       text-decoration: underline; color: #fff; 
}
.outer a:hover .text-top  { 
       text-decoration: none; color: #000; 
}
</style>
</head>

<body style="background-color:#888;">

<br><br> Why is the top text underlined with a white line when hover and text itself is black?<br>

I want it to work like this:<br>
When I hover over any area inside the outer div then I want<br>
Bottom text: white and underlined<br>
Top text: no change<br><br>

NN 7.2: Same problem as above<br>
FF 1.04: same problem as above<br>
Opera 8: same problem as above<br>
&nbsp;&nbsp;In opera 8 there is also some small underline below image: How do I get rid of that?<br><br>
IE 6: Works as it should<br><br><br>

<center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
	<tr>
		<td>
			<div class="outer">
				<a href="#">
					<div class="text-top">
						<br>Top text<br><br>
					</div>
					
					<div class="text-img">
						<img src="snake.jpg" height="100px" width="100px" alt="" border="0">
					</div>
					
					<div class="text-bot">
						<br>Bottom text<br><br>
					</div>
				</a>
			</div>
		</td>
	</tr>
</table>
</center>
</body>
</html>

Hi:

I'm new to HTML so you would imagine what was my dilemma when I was asked to use CSS on my forms. Can someone add the CSS code to the following code along with some tips on how to make it more pleasing? If you look at it now its dull, dull, dull.

<FORM METHOD="POST" ACTION="login.php">
<TABLE border="7" CELLPADDING="3" CELLSPACING="10" BORDERCOLOR=BLACK>
<tr><th colspan=2><FONT size="5"><B><center>MAIN LOGIN FORM</B></FONT></th></tr>
<TR><TD><B>USERNAME:</B></TD><TD><input type="Text" name="username"></TD></TR>
<TR><TD><B>PASSWORD:</B></TD><TD><input type="password" name="secret"></TD><TD>
<input type="submit" name="submit" value="LOGIN"></TD><TR>
</form>
</TABLE>

Also thanks in advance.