CSS - Format Problems, Fine In Ff, But Problems In Ie7, Opera

the url is:
http:// jhlmc.com/JHLMC/FreshDemoFiles/CoverTToLayers_JHLMCArt.html

In IE8 beta it works perfectly.

In firefox the entire bottom section (the part under the slide show) is messed up.

In Opera there's a gap under the play controls.
If I close the gap, it messes up IE.

Getting this slide show to work was quite the task, but I'm close to having it work on the big three!

Should I just un-nest everything?

I'm hoping I can get some guidance on why I can't get this popout menu to work!

I used the code from this article to build a popout menu, but for some reason I can't get it to work in firefox. If you test their demo in Firefox but if you test mine, it looks great in Internet Explorer, but gets all messed up Firefox & Opera. If you save the page you will see there is a style sheet as well as a small Javascript file too.

If someone could check over my code for me that would be great! I have been staring at it for hours and can't seem to find the problem! This is my first project using CSS styles to control something besides the usual things like fonts, etc. so go easy on me!

Thanks in advance!

Chelsea

my layout is a left border, main content, then right border, all vertical columns. here is their code:

Code:

.left {
    background-image: url('images/obj_left.gif');
	background-repeat:repeat-y;
	width:28px;
	margin:0px;
}

.maintable {
	width: 100%;
	background-color:#FFFFFF;
	border-left:3px solid black;
	border-right:3px solid black;
}

.right {
    background-image: url('images/obj_right.gif');
	background-repeat:repeat-y;
	width:28px;
	margin:0px;
}

i also float them left, so imagine that is there.

so i have code like this

<div class='left floatleft'></div>
<div class='maintable floatleft'></div>
<div class='right floatleft'></div>

but why cant i see the images in right and left?

http://www.refinethetaste.com/step3.htm

Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help.....

s.o.s

Code:

style>
/*review order*/
#checkoutprocess	{ width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#checkoutprocess .checkoutprocess .th	{ float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px;  height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .color	{ float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .noncolor	{ float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .intprice	{ font-weight:bold; }

#checkoutprocess .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

</style>

I added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/

Hello all. I really appreciate all the help this board offers. I've finally gotten a decent handle on CSS and have decided I'm DONE with tables. I haven't used them AT ALL in my last several designs.

What I don't have a handle on is how to make my designs work with IE. In my past designs, I tested with IE as I built but later I decided, "why build a site to work with a sub-standard browser" and I moved on to test with firefox. As a result, I have to fix the "problems" inherent with IE.

Could someone please take a look at my test site and tell me what I need to fix/change in order for it to work with IE?

Thanks in advance,

Ryan

I have a div within a div, I set each to 790px wide and a border around the "container". My image is about 2px wider than the "container" width in IE. This is not the problem in firefox. If I shorten the width of the image by 2px, then it looks dumb in firfox. Any insight would be appreciated. Thanks.


<body onload="load(); load2()" id="body1">
<table class="td1" cborder=0>
<tr>
<td class="td1">
<div class="container" id="container">
<div class="banner">
<img id="index1" src="images/index1.jpg"/>
</div>
...


div.container {
position: relative;
top: -3px;
background-color: white;
text-align: left;
width: 790px;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}

.banner {
position: absolute;
width: 100%;
left:0px;
}

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've got two child divs nested in a parent div. They are shown below. The problem I am having is that in IE 5.x for Mac, the top margins do not work, while the left margins are applied properly. The following works just fine in: safari, mozilla, firefox, opera, netscape, etc. It is only in IE for mac that the top margin is not applied and the two children are positioned improperly. I had originally gone with the margin-top declaration, but it didn't work, so I did the whole margin declaration. Padding as a replacement for margin has also not worked. Not sure if this helps narrow the problem down at all. It seems that only the vertical margins are not applied and only in this set of divs... If anyone knows of any fixes, hacks, or just sees some junk in my code, please let me know. All help is greatly appreciated!


CSS

#parent
{
width: 700px;
height: 66px;
}

#child1
{
width: 288px;
height: 56px;
margin: 8px 0 0 10px;
background-image: url(whatever);
background-repeat: no-repeat;
float: left;
}

#child2
{
width: 115px;
height: 40px;
margin: 14px 0 0 165px;
background-image: url(whatever);
background-repeat: no-repeat;
float: left;
}

HTML

<div id="header">
<div id="logo"></div>
<a href="" title="View Your Shopping Cart">
<div id="shoppingCart"></div>
</a>
</div>

I am working on a website that was not planned out by me, but requires that a DHTML menu drop down over a Flash object. I have very little experience with this situation. I have been able to make the menus work almost perfectly within a PC environment (Internet Explorer, Netscape, Firefox). I don't have a MAC, but after viewing the page on a friend's MAC noticed that the menu does not show up in Internet Explorer, and drops down below the flash in Safari and Mozilla. I would really appreciate someone taking a look at this for me. The test web address is:

http://www.cityofpetal.com/jax/index.htm

Any help or tips would be very much appreciated. Thanks.

I'm making a school website; unfortunately, I'm having to work on an iMac with IE5. (I'm used to Mozilla for my own sites.)

My problem is that part of my page (a list of names and positions, formatted as a definition list) isn't showing up. The scroll bar seems to be allowing room for all the content on the page, but everything below about one and a half screen widths is invisible - no background colour, no text.

Thanks for any help.
rsm2296

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!

I am attempting to make a joomla theme and I am having some problems with my css working in ie, yet it works in the other major browsers.

the problems I am having is the h3 background image isn't displaying and a gap at the bottom of the page.

http://settoloki.homeip.net:40080/badt/ view the site here

and my css

Code:

@charset "utf-8";
/* CSS Document */

body, html{
	background:url(../images/back-grad.png) repeat-x #295171;
	margin:0px;
	padding:0px;
}

/*****************************************/
/*** Layout elements                   ***/
/*****************************************/
#content-wrap{
	background:url(../images/background.png) no-repeat top left #99CCCC;
	width:960px;
	border-left:1px solid white;
	border-right:1px solid white;
	text-align:left;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
}

#content-head{
	width:100%;
	height:230px;
	background:url(../images/header.png) no-repeat top left;
	padding-top:20px;
}
#main-content{
	width:900px;
	border-collapse:collapse;
}
	#main-content-top{
		width:900px;
		height:13px;
		background:url(../images/main-content-top.png) no-repeat;
	}
	#main-content-mid{
		position:relative;
		background:url(../images/main-content-mid.png) repeat-y;
		width:100%;
		height:100%;
		text-align:left;
	}
		#content-breadcrumbs{
			border-bottom:1px solid #FFFFFF;
			width:850px;
			margin-bottom:40px;
			margin-left:10px;
			height:15px;
			line-height:10px;
			color:#FFF;
			font-size:10px;
		}
		#content-left-side{
			width:180px;
			height:100%;
			float:left;
			padding-left:20px;
		}
		#content-main{
			width:640px;
			height:100%;
			float:left;
		}
		#content-right-side{
			width:200px;
			float:right;
			padding-right:20px;
		}
	#main-content-bottom{
		background:url(../images/main-content-bottom.png) no-repeat;
		width:900px;
		height:21px;
	}
	#main-content-footer{
		background:url(../images/footer.png) no-repeat;
		width:100%;
		height:201px;
	}

/*****************************************/
/*** Page elements                     ***/
/*****************************************/

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px;
}

/* headers */
div.componentheading {
	margin:0;
	color: #000;
	background:url(../images/content-header.png) no-repeat;
	height:37px;
	width:640px;
	line-height:37px;
	font-weight:bold;
	padding-left:15px;
	margin-left:-4px;
}

table.blog {
	background:url(../images/content.png) repeat-y;
	margin-left:-4px;
}

h1 {
	padding: 0;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 1.3em;
	line-height:19px;
	font-weight: 700;
	vertical-align: bottom;
	color: #000;
	text-align: left;
	width: 100%;
}

h2, .contentheading {
	padding: 0;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 11px;
	vertical-align: middle;
	color: #295171;
	text-align: left;
	font-weight: 700;
}

h2, a.contentheading {
	background: none;
	border: none;
	margin:6px 0;
}

h4 {
	font-family: Tahoma, Arial, sans-serif;
	color: #333;
}

h3{
	width:180px;
	height:37px;
	line-height:39px;
	color:white;
	font-weight:bold;
	background:url(../images/h3.png)no-repeat;
	font-size:12px;
	padding-left:15px;
	padding-bottom:0px;
	margin-bottom:0px;
}

div.moduletable_menu ul{
	list-style:none;
	padding:0px;
	margin:0px;
}

div.moduletable_menu ul li{
	background:url(../images/menu-link.png) no-repeat;
	height:30px;
	width:180px;
	line-height:28px;
	padding-left:22px;
}

div.moduletable_menu ul li a{
	color:#FFF;
	text-decoration:none;
	font-size:10px;
	font-weight:bold;
}

thanks in advance for any help.

I'm trying to build a menu with CSS and have some problems I can't figure out. Here's what I got so far: testsite

So I need some kind of workaround for InternetExplorer cause it doesn't display the fonts correctly, what do I need to change to get that right?

And is there a way to automatically adjust the width of the submenu fields according to the length of the text that's written within?

Here's the stylesheet:
Code:

menutext { font-family:sans-serif; font-size:25px; }
subtext { font-family:sans-serif; font-size:10px; color:#707070;}
subtext2 { font-family:sans-serif; font-size:12px; color:#707070;}
subtext2:hover { color:white;}

ul{
	list-style-type:none;
	padding:0px;
	position:relative;

}

a{
	float:left;
	width:137px;
	text-decoration:none;
	color:#27251c;	
	font-weight:bold;
	background:#e0e0e0;
	padding:5px;
	border-right:1px solid #FFFFFF;
}

li { display: inline;}

a:hover { background:#27251c; color:white; }

#navi { 
	width:888px;
	position:absolute;
	margin-left:-444px;
	margin-top:-13px;
	left:50%;
}

#navi #aktuell a{ background:#27251c; color:white; }

And here's the html:
Code:

<html>
	<head>
		<title>the artist crew</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

<body>

	<center>
		<img src="images/banner.png">
	</center>
	
<div id="navi">
  <ul>
		<li><a href="index.html"> <menutext>home</menutext> </br> <subtext>news & announcements</subtext> </a></li>
		<li><a href="projects.html"> <menutext>habitat</menutext> </br> <subtext>who we are, what we do</subtext> </a></li>
		<li id="aktuell"><a href="flow.html"> <menutext>flow</menutext> </br> <subtext>exhibitions & other works</subtext> </a></li>
		<li><a href="nexus.html"> <menutext>nexus</menutext> </br> <subtext>downloads & free stuff</subtext> </a></li>
		<li><a href="swarm.html"> <menutext>swarm</menutext> </br> <subtext>friends & affiliates</subtext> </a></li>
		<li><a href="hive.html"> <menutext>hive</menutext> </br> <subtext>where to get our stuff</subtext> </a></li>
	</ul>
	  <ul style="top:2px;">
		<li><a href="projects.html" style="width:48px;"> <subtext2>projects</subtext2> </a></li>
		<li><a href="conceptart.html" style="width:67px;"> <subtext2>concept art</subtext2> </a></li>
		<li id="aktuell"><a href="urbanart.html" style="width:53px;"> <subtext2>urban art</subtext2> </a></li>
		<li><a href="paintdraw.html" style="width:120px;"> <subtext2>paintings & drawings</subtext2> </a></li>
		<li><a href="sketches.html" style="width:53px;"> <subtext2>sketches</subtext2> </a></li>
	</ul>
</div>	

</body>
</html>

Thanks in advance!

http://www.bttfpromo.net/tb/

The bottom div...the left child div doesn't want to be the same height as the right child, no matter if I set a height percentage on it or not. Why is that?

Also, what can I do to keep IE from raping the upper right divs?