CSS - Looks Good In Firefox But Is Messed Up In Ie 6&7

I'm having a lot of trouble getting a couple of final things to work on this CSS template design I'm doing for one of our stores.

http://www.thescriptstation.com/catalog/index.php?tplDir=CSS-fluid-1
(the ?tplDir=CSS-fluid-1 is necessary to see the developing template instead of the live one)

It's all looking pretty much how I want it, with a couple of exceptions, and I'd love some help with what I'm doing wrong here.

Issue 1
Links in the top green bar and bottom green bar on the page - earlier I had them looking fine in FF (using margins, positions, and padding), but looked in IE and it was a big mess. So I backed up and worked on it in IE, and now its looking OK there, but in FF, I'm losing the links after the first one - it seems like they are displaying underneath one another, which is below the size of the containing style.

Issue 2
In the same areas, For the life of me I can't find a way to vertically align those links inside those areas. They just go to the top no matter what I've tried.

If anyone could look over the styles and see what I've done I'd be forever grateful:
http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/stylesheet.css
http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/main_layout.css

Many Thanks

Hello,

I have this layout in CSS for my website www.websitemeester.nl , in Firefox it looks perfect, but IE ****s the whole thing up. Who knows why that is? How can I make it a lil better for IE?

Thx,
Jules


#top {
margin: 0px 0px 0px 0px;
padding: 10px;
border-bottom: 0px solid black;
background: #efefef;
height: 100px;
voice-family: "\"}\"";
voice-family:inherit;
height: 40px;
}
html>body #top {
height: 40px;
}
#left {
position: absolute;
top: 60px;
left: 0px;
margin: 0px;
padding: 10px;
border-right: 0px dotted black;
border-bottom: 5px solid yellow;
background-color: orange;
width: 170px;
voice-family: "\"}\"";
voice-family:inherit;
width: 150px;
}
html>body #left {
width: 150px;
}
#middle {
padding: 10px;
border-top: 5px solid orange;
background: white;
margin: 0px 150px 0px 170px;
}
#right {
position: absolute;
top: 60px;
right: 0px;
margin: 0px;
padding: 10px;
border-left: 5px solid orange;
border-bottom: 15px solid orange;
background: #efefef;
width: 150px;
voice-family: "\"}\"";
voice-family:inherit;
width: 130px;
}
html>body #right {
width: 130px;
}

None of the browsers are looking correctly except Firefox actually. The worst is the rendering in IE. In Mac (5.x) it's the worst but in the Windows version my global navigation bar goes off the right side (XP Pro). In Mac/Safari the drop down items don't show only the divider | does though the links are hot. I haven't even tried Opera or Netscape. Anyone have a clue at all? I should have stuck to tables! Ugh.

http://www.blaynecooper.com

Steph

Hello all, I recently redesigned my site from table layout to css layout. when viewed in ie it looks good however when viewed in anything else the layout falls apart. the link is:
Benefit Solutions, Inc
Do i need to copy the css to the site? I'm not too sure how to go about getting the help i need. any opinions would be appreciated. thanks in advance

OK, I've been working with Firefox for a long time, and it usually serves me well for all browsers except IE.
Now my design/CSS only looks good in firefox 4.0.1 and not Safari, Opera, or Google Chrome, and I'm really upset. Why are the other browsers displaying my CSS improperly? Is there a hack for all browsers now?

OK, here's the site: http://www.caillouette.com/Diesel_site7/
Any info or insight is greatly appreciated.

thanks
-S

Hi all,

My first post, a request for help please! I have been designing a site and checking in Safari, just come to check in IE7 and its all over the place. I get the feeling that there is a simple bug fix I need to add, but with deadline approaching fast (tomorrow am client reviews the site) my mind is all over the place!

If anyone would be kind enough to view:
cavendish-cs.co.uk/beta/

You will see in IE7 the top image will not sit next to the navigation. Check in Safari or Firefox and you can see how it should look

Any help greatly appreciated

Thanks

Craig

Oh, to say I'm gutted is under-rated, I thought I had mastered what is CSS design for one of my sites, that was until I decided to test it at work on FireFox, Netscape and Mozilla. For a start the content isn't in the center of the page, and some of the div's seem to be constrained into the right hand column, not sure why.

The page looks perfect in IE. But messed up in the others, I am kicking myself I have left it so late to check.

If any very nice person/people can help me sort this out I would be sooo happy, especially if I can understand why it is so messed up. I'm not really that technical, I'm a graphic designer so if you can help, keep it fairly simple please.

The link is: http://www.gladiatorszone.co.uk/main_new1.shtml

I think it might be a position element wrong or a float?

Does anyone have any idea what could be happening to my main menu - it dissappears in Safari!

Hobo

I don't have a Mac but a buddy of mine that does said the dropdowns for this site are completely screwed up on it.... does anyone know why?

Thanks for any help....

http://yourthreshold.com/staging/Chiro/

Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE

http://drowninginmytears.org/store/blah.html

thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how..

this is my css:
Code:

body
    {
	margin: 0px auto;	
    background-color: #BFD1E1;
    text-align: center;
    padding: 0px;
	background-position: top;
    }

#wrap
    {
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 679px;
    }
	
#hearts
	{
	background-image: url(hearts.jpg);
	height: 44px;
	width: 43px;
	position: absolute;
	margin-left: 490px;
	}
	
#girl
	{
	background-image: url(girl.jpg);
	margin-top: 190px;
	height: 358px;
	width: 142px;
	margin-left: 10px;
	}
	
h4 {
	font-family: Arial, verdana, tahoma;
	text-transform: uppercase;
	font-size: 1.0em;
	text-align: right;
	font-weight: bold;
	color: #5886B2;
	letter-spacing: 0px;
	padding: 10px 20px 0px 0px;
	margin: 0;
}

h5 {
	font-family: verdana, Arial, tahoma;
	text-transform: uppercase;
	font-size: 0.7em;
	text-align: right;
	line-height: 5px;
	font-weight: bold;
	color: #C3D4E3;
	letter-spacing: 3px;
	padding-right: 17px;
	margin: 0;
}

#navigation
	{
	font-family: verdana, Arial, tahoma;
	text-transform: uppercase;
	font-size: 0.54em;
	text-align: left;
	font-weight: bold;
	color: #769DBF;
	letter-spacing: 1px;
	margin-top: 25px;
	margin-left: 20px;
	position: absolute;
}
	
#toptitle
	{
	background-position:top;
	height: auto;
	width: 768px;
	background-image: url(bg.jpg);
    padding: 0px;
	margin: 0px;	
	}
	
#blueline
	{
	height: 6px;
	width: 752px;
    background-color: #D8E8F8;
    margin-top: 8px;
	margin-left: 8px;
	margin-right: 0px;
	position: absolute;
	}
	
#headerimage
	{
	height: 173px;
	width: 752px;
	background-image: url(main.jpg);
    margin-top: 15px;
	margin-left: 8px;
	position: absolute;
	}

#main {
	margin-top: 100px;
	width: 768px;
	margin: 20px 0;
	margin-left:40px;
	display: inline;
}

#header
    {
	background-image: url(top.jpg);
	vertical-align: bottom;
    height: 10px;
    width: 768px;
	margin-top: 20px;
    padding: 0px;
    }
	
#bottom
    {
	background-image: url(bottom.jpg);
	vertical-align: bottom;
    height: 17px;
    width: 768px;
	margin-top: 0px;
    padding: 0px;
    }
	
p
    {
	text-align: justify;
    color: #555;
    margin-top: 0px;
    margin-bottom: 9px;
    }

.caps
    {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    }

ol
    {
    margin: 0;
    padding: 0;
    }
    
ul, li
    {
    color: #666;
    list-style-type: none;
    border: 0;
    margin: 0;
    padding: 0;
    }

a:link, a:visited
    {
    color: #FA65CD;
    text-decoration: none;
    }

a:hover
    {
    color: #FD92E0;
    }

a:active
    {
    color: #FB7FD7;
    }
	
#container
    {
    position: relative;
    margin: 0 auto;
    text-align: left;
    background: url(bgfront.gif) repeat-y;
    width: 679px;
    }

#content
    {
    padding: 28px 20px 0 20px;
    min-height: 200px;
    }

can anyone help? thanks!

On the right column of my website NashvilleDesignz dot com the form is all the way at the bottom right of the page in Internet Explorer...I checked all the margins and padding yet either seems to check out ok. Any ideas on how to get this to work correctly in IE please let me know...all other browsers are working correctly

http://www.lovemeforme.org/test/index.html

works perfect in FF, but in IE, the sidebar is further down than I want.

How do I fix this?

There is a problem with What's New section's appearance (right bottom). I want it appear just like here

http://aslanyurek.com/atolye/index.asp

but instead, it appears as.

http://www.refinethetaste.com/html/



Style I created for the whole right block.
PHP Code:
/*right block*/
#rblock .notice    { width:375px; height:30px; font-size:13px; line-height:30px; color:#f3f2f1; background:#5f5548 url(../images/isaret_2.gif) no-repeat 1% 55%;  text-indent:15px; }
#rblock .search    { width:325px; margin-top:1px; background:#9e0b0e url(../images/icon_arama.gif) 3% 50% no-repeat; padding:5px 5px 5px 45px;}
#rblock .search span { color: #FFFFFF; font-size:9px;}
#rblock .news    { width:375px; border-bottom:1px dotted #CCCCCC;}
#rblock h1    { font-size: 14px; color:#716759; background:#ece7d1; text-indent:15px; line-height:25px;}
#rblock .news h2    { font-size: 12px; color:#534741;}
#rblock .news p    { font-size: 10px;}
#rblock img#news{    float:left; margin:10px; height: 60px; width: 66px; border:1px solid #b39f87; padding:1px; background:url(../images/load.gif) center no-repeat;    }
#rblock .clear { clear:both; height:1px; width:1px; overflow:hidden; } 

I've created a 3 column layout and it works fine. But on some pages including links,banners... the whole of the right column is positioned wrongly. It even works fine in Firefox. Any idea what the problem could be? Any advice would be appreciated. The link by the way is here

Thanks,
Sunny Patel