CSS - Trouble With Ie7 & Ie6 - Css

Hi, I got a very basic problem here. my site http://www.destroyclothing.com/destroy.htm

what im tryen to do is move that top image, with the logo on the left, to go down to be even with the black bar. ive tried padding and margin, but it wont go down. i tried moving the black bar up with margin and padding also. nothing seems to work. ive even tried z-index properties. I dont get it. I dont want to use position relative. i dont even know if that will work either. someone know?
Thanks

Hi:

I've been trying to format the following code to create nice column headings:

Code:

#f1 {width: 75%;height: 15px;border: 1px ridge #777;padding: 10px;margin: 2px auto;text-align:center;float: center;}

and:
Code:

theading {font-family: Arial;font-weight: bold;font-size: 12px;text-align: center;cellspacing: 10px;color:#000000;}

Here is the column headings data that I'm trying to work on:
Code:

<div id="f1">
			<theading>ORDER NO</theading>
			<theading>DATE RECEIVED</theading>
			<theading>DATE PRE ORDERED</theading>
			<theading>REQUIRED BY</theading>
			<theading>DESIGNED BY</theading>
		</div>

The problem is that I don't know if I'm using the correct method to display the column headings each one in its respective cell with equal spacing between cells. The data that follows will be formatted so that it is displayed below its respective column heading. I've already spent half a day trying but it doesn't display the way it should. Also, it tends to center, thus bunching up. It should spread evenly.

Can someone please help? Thanks!

Hi Everyone,

I have a page I am working on that works perfect in IE, but having a little trouble with Firefox. The Navigation menw lines up perfect in IE, but seems to "fall off the edge" in Firefox.....haven't checked the other browsers, but I'm sure it would be the same....the width is set to 100%....

I would post the link, but this forum won't let me.....I got the script from Dynamic Drive and it was called: Solid Block Menu

Style sheet for Menu:

.menu {
margin: 0;
float:left;
font: bold 14px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #66FFFF;
border-width: 1px 0px;
background: url(images/menu_back.gif) center center repeat-x;
}

.menu li {
display: inline;
}

.menu li a {
float: right;
color: white;
padding: 7px 12px;
text-decoration: none;
}

.menu li a:visited {
color: #000000;
}

.menu li a:hover, .menu li .current{
color: #FFFFFF;
background: transparent url(images/menu_back_over.gif) center center repeat-x;
}


CODE in HTML:

<ul class="menu">
<li><a href="URL HERE">Frosty Questionnaire</a></li>
<li><a href="URL HERE">Board of Directors</a></li>
<li><a href="URL HERE">Sponsorship & Volunteer Opportunities</a></li>
<li><a href="URL HERE" class="current">Home</a></li>
</ul>
<br style="clear: left" />





Thanks!

Hey there.

A friend of mine was giving me a hand with the coding for http://myspace.com/457343540 but unfortunately I can't get in contact with him atm, so I thought I'd as here.

As you can see in the link provided, firefox display the margins I want, but IE throws them off a bit. I've tried a few different things, but after a couple hours I've given up trying on my own lol.

Another issue is the page is obviously stretching off the page (?idk) as the scroll bar goes off the side.

Code:

<style>
{ Music Player Properties } 
.i {display:none;}
table table td.text div object {position:absolute; top:1140px; left:50%; margin-left:-30px;}
table table td.text div object object {position:static; margin-left:0px;}
	
	
{ Background Properties } 
table, tr, td { background-color:transparent; border:none; border-width:0;} 

body { 
background-color:000000; 	background-attachment:scroll;	background-position:top center;   background-repeat:no-repeat;   background-image: url(http://bnesfinest.net/tomm/myspace/tioc/bg.jpg); 
border-top-width:0px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px; border-color:none; border-style:solid; padding-left:0px; padding-right:0px;} 

.samohtlogo{
position:absolute; width: 100px; top: 20px; left: 20px; text-align: left; z-index: 10;}


.menu{ 
       width: 959px;  height: 136px;  position: absolute; top: 591px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}

.header {
	width: 959px; 	height: 422px;	position: absolute;	top: 169px; margin-left: -480px; z-index: 0;	overflow: visible;	left: 50%;}
	   
.memberstop {
	width: 959px; 	height: 403px;	position: absolute;	top: 727px;	margin-left: -480px; z-index: 0;	overflow: visible;	left: 50%;}

.thealbum{ 
       width: 422px;  height: auto;  position: absolute;  top: 1130px;  z-index: 2;  overflow: visible;  margin-left: -480px;  left: 50%;}
	   
.musicbg{ 
       width: 541px; height: auto;  position: absolute;  top: 1130px;  z-index: 0;  overflow: visible;   margin-left: -62px;  left: 50%;}
	
.shows{ 
       width: 959px; height: auto; position: absolute;  top: 1513px;  z-index: 0;  overflow: visible;   margin-left: -480px;  left: 50%;}

.reverbshows{ 
width: 959px; height: auto; position: absolute; top: 1550px;  z-index: 2; overflow: visible; margin-left: -445px; left: 50%;}
	   
.featvideo{ 
width: 959px; height: auto; position: absolute; top: 1535px; z-index: 2; overflow: visible; margin-left: -50px; left: 50%;}
	   
.R { Div Counter Acts }
.friendSpace div { overflow:visible !important;   height:auto !important;   position:static !important;   background:none !important; }

.friendsComments div { overflow:visible !important;   height:auto !important;   position:static !important;   width:auto !important;   background:none !important; }	
	

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td{ 
background-color: !important; text-align: left; vertical-align: top; overflow: visible !important; font-size: 11px !important; line-height: 12px !important; 
text-transform: none !important; text-align: justify; letter-spacing: 0px; color: e7e2c5!important; margin: 10px !important; padding: 20px 20px 12px 0px; 
border-bottom: 1px dotted dimgrey !important; border-color: 50433d!important; _line-height: 16px !important; } 


html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td table tr td table tr td a{
	width:  110px !important;	overflow: hidden;	letter-spacing: 0px;	font-size:  10px !important;	line-height: 12px;	display:  block;	color:50433d!important;
	margin: 0 !important;	padding: 0 !important;	text-align: center !important;	margin-left: 1px !important;}


.friendSpace {
position: absolute !important;  z-index: 4 !important;  width: 800px !important;  margin-left: -320px;  _margin-left: -400px;  top: 0px !important;          margin-top: 1860px !important;
}




.friendsComments {
position: absolute !important;  z-index: 6 !important;   margin-left: -35px;  _ margin-left: -400px;  width: 833px !important;  top: 0px !important;  margin-top: 2755px !important;
}





.friendsComments a img {border: 3px; border-color: 50433d; border-style: solid;} 

.friendsComments table {width: 800px; align: justify;    position:relative;   left:0px;  }


.friendSpace a img {border: 4px; border-color: 50433d; border-style: solid;}
</style>

In the header section design, I have three parts. Menu; upper left, gallery; lower left and Logo right. So in my stylesheet, I created three parts. The problem I am having is logo is not centered as in the design (check the attachment). I could not figure why not. Looking for suggestions.

http://www.refinethetaste.com/AT/

I just finished coding a new layout but it seems to collaspe in IE even though it displays perfectly in firefox and netscape (almost). The link to the layout is:
URL

and the link to style sheet is:
URL

Also another thing I can't seem to get my container div background to repeat all the way through even though its set on repeat-y.

Anyone have a idea on how to fix one of these problems?

Thanks

Hi All,

Just in the middle of designing a website for my personal hobbies.

I have used alot of CSS to create the layout of the page.

The problem being it looks perfect in Firefox, Opera, Seamonkey etc etc BUT NOT IE!!!

In IE it is all over the place, nothing is where it should be.

I checked my CSS against w3 validator, and it came back with a few errors, so i decided to fix them... it then looked even worse... in ALL BROWSERS! So i decided to go back to how i had it originally.

The site in question is my username.

You can access the css stylesheet file by adding /test.css to the end of the domain name.

Any information, or anyone else had problem like this?

All the best for now,

Mike

Hi,

I am having some trouble laying out this page:

http://209.123.229.141/racing_profile.php?user=2
(Username: devshed Password: css)

I want the 'Latest Media' Box positioned in the middle of the left hand side, the 'Latest Replays' box in the middle of the right hand side and the 'Latest Events' box below both.

I have floated them to the left and right and cleared the floats for the 'latest events' div, but the media and replays div won't floar in the "middle" of each side.

The CSS for the page is: http://209.123.229.141/css/racing_profile.css

Hi, i have a simple bit of code which is a div that contains lots of rectangular images in one big row. I was these images to flow through the div so that they appear above and below each other if need be.

Quote:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="testcss.css" />
</head>

<body>
<div id="wall2">
<a href="index.php?page=unsold&bid=6"><img class="unsold" alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a> <!-- ........ (and so on for a abitary number of images) -->
</div>
</body>

</html>


And the css....

Quote:
body{margin:0px;padding:0px;background:white;color:black;font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif; width:1024px; border-right:dotted 1px #DE7008;}
a{color:blue; border:0; padding-bottom:0px; padding-top:0px;}
a:hover{color:#DE7008;}
img { border:0; padding-bottom:0px; padding-top:0px;}
div#wall2{top:30px;left:90px; width:900px; height:600px; position:absolute; float:right; padding:0px; }
img#unsold {border:0px; padding:0px; margin:0px;}


The code above works great with Firefox, but with IE6 it loops the pictures fine until the last line where it inserts a padding between the top of the last images and the bottom of the last but one row.

Ive searched and googles but cant figure it out. Anyone got any ideas how i can get this to appear correct for both browsers.

The code is XHTML and CSS validated.

Gareth.

Using javascript, I have been trying to make a semi-transparent page with a login form on appear ontop of my website. It works fine in FF and Opera and worked fine in IE too, but now it does not anymore. It seems to refuse to recognize the fixed div for some reason. Hopefully someone can spot something I have missed. If you want to see it, go to zeff.biz/jsenabled.php and type "admin". The box should then appear. View it in FF to see what it is meant to look like and in IE to see what my problem is.

The CSS:
Code:

#admin_login {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 2;
display: none;
}

	#fade {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: #000000;
	opacity: 0.15;
	filter:alpha(opacity=15);
	khtml-opacity: 0.15;
	moz-opacity: 0.15;
	z-index: 1;
	}

	#admin_box {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	}

	#admin {
	position: relative;
	top: -75px;
	left: -100px;
	height: 150px;
	width: 200px;
	background-color: #FBFF9F;
	border: 1px solid #000000;
	z-index: 2;
	}

		#admin_form {
		position: relative;
		height: 150px;
		width: 140px;
		margin-top: auto;
		margin-bottom: auto;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
		line-height: 30px;
		}

		#username {
		position: relative;
		right: -20px;
		width: 120px;
		}

		#password {
		position: relative;
		right: -20px;
		width: 120px;
		}

		#submit {
		position: relative;
		right: -95px;
		width: 50px;
		}

	#admin_fill {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	height: 150px;
	width: 200px;
	}

The HTML:
Code:

<div id="admin_login">

	<div id="fade" onclick="exit_admin()">
	</div>

	<div id="admin_box">
	<div id="admin">
		<form id="admin_form" action="">
			<div>Username:</div>
			<div><input type="text" name="username" id="username" onkeyup="check()" /></div>
			<div>Password:</div>
			<div><input type="password" name="password" id="password" onkeyup="check()" /></div>
		</form>
	</div>
	<div id="admin_fill" onclick="exit_admin()">
	</div>
	</div>

</div>

hi I have this..
http://www.thehundreds.com/thewall/index.php

as u can see the threads to the right are acting up once the float
of the login is done, because the height is not the same.. is there
anyway to force the threads div to continue to line up, or better yet, have that div to the right of the login without using a float??

Hey guys
I have a page I am working on and I am running into a little problem. I created a navigation bar using css and now I want to link up the navigation bar. The problem is when I link it it turns it to a blue hyperlink. I know I can change the css to get rid of that, but I also want part of the page to look like and be set up like a regular blue hyperlink. How can I get around this. Here is the page I am working on
(URL address blocked: See forum rules)
I want the positive and negative tests to be normal hyperlinks but I want the nav bar to stay in the css I set up
thanks for the help
Sean

ok im having some trouble with the layout of some stuff. i have my webpage set up so i have a <div> floating to the left and a content area to the right. in my "content" area, i have an img where i used "float:left;" so i can have text to the right of it. but now after that, i have <br clear='left' />. the problem is that when i put that break in there, it clears the float for the first <div>. is there anyway around this? here is some sample code.

Code:

<html>
<head>
<style type="text/css">
div{
float:left;
width:150px;
color:red;}
</style>
</head>
<body>
<div>
<p>text</p><p>text</p><p>text</p><p>text</p>
</div>
<img scr='fake.jpg'>
<p>text</p>
<br clear='left' />
<p>text under thats not susppose to clear float to the left</p>
</body>
</html>

hey i need some help. the website and the css is good and works normally...however when i edited the website file through Dreamweaver MX, it got distorted!!!...the only thing I changed was the "page properties title name" and that was it and after that the right side of the frame shifted below the menu which was on the left side!!!!

i even went back to change the title name back but it wouldn't go back to its original left right style. what do i do?

i have a small image in a big div, and when one rolls over any part of the image or the div the background color of the div changes and the image swaps out. i dont know why, but im having a hard time getting this done. i feel like its simpler than i am envisioning it. any help would be much apreciated.

ben