CSS - Sizable Layer Fine In Ie, Not In Mozilla, Why?

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

I thought I could make it, but what I got so far is jumping over the screen, so please a need some help.

I got a image with two transparant shapes.
Behind those shapes I would like to show 2 other images.

|-------1-------|
| |-----| |----| |
| |...2..| |..3..| |
| |____| |____| |
|_____________|

Image 1 should be on top z-Index
Image 2 should under image 1, a part of the image should be visible.
Image 3 should under image 1, a part of the image should be visible.

Now the issue, image 2 and 3 should be dynamically replaceable.

Please help

Thanks

I just uploaded this to my server, don't know what happend. It looked fine.

The original question I had was how to fix the "right bar" to line up vertically, correctly with the left menu and center text...(something to do with the positioning).

Either way, can someone help me out here...as you'll see I am not the best at CSS. Thanks.

Code:

<div style="position:absolute; left:207px; top:210px; width:427px; height:850px; z-index:3" id="center">
<div class="rightbar" style="position:absolute; left:649px; top:210px; width:140px; height:850px; z-index:4">

finally got everything lining up correctly in IE, but now the background color in not showing up in FF, but it does in IE

here is my code and the bit in bold is what has the problem with the background color in FF

also, is there a way to make the page end when the content ends?

/* CSS Document */
/* basic elements */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #545838;
background-color: #e9ebdc;
background-image: url(images/bg.jpg);
margin-top: 0px;
}
/* specific divs */

#page {
background-color: #fdfdfb;
width : 750px;
padding : 0;
margin : 0 auto;
text-align : left;
height : auto;
border-left : 1px solid #000000;
border-right : 1px solid #000000;
}

#headerimg {
background-image : url(images/callmefarms.jpg);
margin : 0 auto;
width : 750px;
height : 280px;
padding : 0;
}

#topbar {
background-image : url(images/header1.jpg);
margin : 0 auto;
width : 750px;
height : 85px;
padding : 0;
}
#content {
float : left;
width : 500px;
height : auto;
}

#sidebar {
float : left;
width : 243px;
height : auto;
}
#currentevents {
background: #fdfdfb url(images/currentevents.jpg) no-repeat top left;
margin-top: 0px;
width: 500px;
height: 75px;
}
#publications {
background: #fdfdfb url(images/publications.jpg) no-repeat top left;
margin-top: 0px;
width: 500px;
height: 100px;
}
#footer {
background: #a2a876 url(images/footer.jpg);
width : 750px;
padding : 0;
height: 75px;
}
#innercontent {
float : left;
width : 750px;
height : auto;
padding : 0;
}

#resources {
background: #e9ebdc url(images/resources.jpg) no-repeat top left;
width: 243px;
height: 60px;
text-align: center;
}

/* specific classes */


.clear {
clear:both;
font-size:0;
line-height:0px;
height:0;
}

i have a thick left hand border that does not show in firefox, the css is...


Code:

#container{
	margin: 0 auto;
  background-color:#ffffff;
  width:465px;
  border-left:335px solid #8FADB4;
  border-right:1px solid #8FADB4;
  border-top:1px solid #8FADB4;
  border-bottom:1px solid #8FADB4;
  background:  url('images/br_logo.jpg') no-repeat bottom right;

}

does anybody know why the left border does not show?

thanks

See here

The center column title. It is aligned properly in Firefox but is shifted in Internet Explorer. Ive been trying to figure out various way to fix the problem but cannot find the solution.

Any tips ?

The code below works perfect in FF2/FF3 and IE6 ...

In IE7 the first UL is perfect, but the 2nd UL is vertical (not horizontal)

If you have any suggestions on how to improve my CSS that would be appreciated to. Its kind of a mess because I have been pulling my hair out for the last 3 hours trying to get the 2nd UL to render horizontally rather than vertically.

Code:

<title>Untitled Document</title>

<style type="text/css">
	body 
	{
	margin: 0 auto;
	padding: 0 auto;
	}
	#lottoNumbersWrapper
	{
		float: left; 
		width: 700px;
		height: 118px;
		background-image: url(images/structural/lottoNumbersBG2.jpg);
		background-repeat: no-repeat;
		border: 0px solid black;
	}

		.lottoNumbers
		{
			margin: 0;
			margin-right: 20px;
			margin-top: 10px;
			padding: 0;
			border: 0px solid black;
		}
			.lottoNumbers li {
				list-style: none;
				list-style-type: none;
				float: left;
				font-size: 13px;
				height: 40px;
				width: 45px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
				margin-left: 0px;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				background-position: center;
				background-repeat: no-repeat;			
				border: 0px solid black;
				cursor: pointer;
			}
				.lottoNumbers li.white
				{
					background-image:url(images/whiteDot.gif);			
				}
				.lottoNumbers li.blue
				{
					background-image:url(images/BlueDot.gif);			
				}
			.lottoNumbers li span {
				display: block;
				margin-top: 12px;
				text-align: center;
				font-size: 16px;
				font-weight: bold;
				color: #000;
			}
</style>
</head>

<body>
            <div id="lottoNumbersWrapper">
              
 
<div style="float: right; border: 0px solid black">
                <ul class="lottoNumbers">
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>4</span></li>
                    <li class="white"><span>9</span></li>
                    <li class="white"><span>12</span></li>
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>18</span></li>
                    <li class="white"><span>20</span></li>
                    <li class="white"><span>21</span></li>
                    <li class="blue"><span>26</span></li>
                    <li class="white"><span>33</span></li>
                </ul>
</div>
<br />

<div style="float: right; border: 0px solid black">
                <ul class="lottoNumbers">
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>4</span></li>
                    <li class="white"><span>9</span></li>
                    <li class="white"><span>12</span></li>
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>18</span></li>
                    <li class="white"><span>20</span></li>
                    <li class="white"><span>21</span></li>
                    <li class="blue"><span>26</span></li>
                    <li class="white"><span>33</span></li>
                </ul>
</div>            
            </div> <!-- END LOTTO NUMBERS WRAPPER -->
</body>
</html>

site
css

View the index in IE and FF... It is centered how I want it in IE (directly under the picture), but not in FF.

How can I fix this? (I realize it's most likely a bug in IE that allows it to display the way I thought it was supposed to, so what's the right way to get this to work?)

Thanks
Enjoy your weekends
Bryan

First off, i'd like to say:

So here's the code i'm screwin' with:

ul.navlinks {
font-weight: bold;
background-color: #d7d7d7;
margin: -5px -10px 0px -10px;
padding: 0px 10px 1px 10px;
border-bottom: 1px solid #2169AD;
}

Looks great in firefox (color fills the whole div) but in IE (i'm using 6.0), there's about 20 pixes to the right that arn't colored.

Any suggestions?

Thanks

Hi!

Does anybody have some great link or book advice about all the properties of the DIV and/or LAYER - tags? Inspiring examples with javascript to this are also welcome. I will use it to build advanced layer functionality.

Regards
Bjorn

Well, I can't post links so this is going to be hard as hell to type out. I have a layer within that page that I want in a certain position, yet when I move the width of my browser the layer does not stay where I want it. Obviousely, this does not make any sense because its something you have to see.

I checked the rules for the forums and I can't find where it states anything about URLs, if someone would be so kind to show me, I'd appericiate it.


Not that it matters witout seeing it on the page but my code for this layer is:

Code:

<div id="Layer1" style="position:absolute; left:848px; top:85px; width:118px; height:167px; z-index:1">    
	  <div class="mltop">schedule +4hrs </div>
	  <p>00:00 - Music <br>
	    01:00 - Music <br>
	    02:00 - Music <br>
	  03:00 - <a href="">BRR</a></p>
	  <p><b>Current time: 00:00</b><br>
	    Times in CST/CDT
	    <br>
      </p>
	</div>

Hi Guys,

Basically I'm having trouble with getting the 'Content' div layer to wrap around the switching div layers.

The grey background colour represents the 'Content' div layer which wraps around the button menu OK but doesn't wrap around the layers which switch.

The bodged way of doing it is to have a fixed height but then it leaves a blank area underneath the divs that are short of text...If you get what I mean?

Code:

<div id="content_test">
	<div id="rollovercontentwrapper">

		<div id="tabwrapper">
			<ul id="tabmenu">
				<li><p><a href="#" onClick="javascript:showTabContentOne('TabContentOne')">Summary</p></a></li>
				<li><p><a href="#" onClick="javascript:showTabContentTwo('TabContentTwo')">Benefits</p></a></li>
			</ul><!--TABMENU-->
		</div><!--TABWRAPPER-->

		<div id="TabContentOne" class="TabContentOne" style="visibility: hidden">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus, 
						porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus, 
						et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies 
						urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu 
						cursus nisi interdum.</p>
						<br>
						<p>In hac habitasse platea dictumst. Sed vulputate auctor cursus. Morbi ac 
						ullamcorper dui. In sem velit, pulvinar sit amet cursus id, vulputate fringilla 
						erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
						cubilia Curae; Sed lorem urna, imperdiet eget fringilla eget, molestie nec justo. 
						Fusce diam nulla, fringilla a sodales at, rhoncus vitae massa. Donec tincidunt, 
						leo quis fermentum venenatis, purus elit tincidunt ipsum, vitae sollicitudin nulla 
						orci nec arcu. Sed non neque neque, ac pharetra lectus. Donec a massa mauris. Sed 
						vel magna eget tellus commodo placerat in quis risus. Aenean velit lectus, aliquam 
						quis dictum ac, pellentesque sed diam.</p>
		</div><!--TabContentOne-->
		<div id="TabContentTwo" class="TabContentTwo" style="visibility: hidden">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus, 
						porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus, 
						et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies 
						urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu 
						cursus nisi interdum.</p>
		</div><!--TabContentTwo-->

	</div><!--ROLLOVERCONTENTWRAPPER-->
</div>	<!----CONTENT_TEST---->

<div id="onebyone" style="visibility:hidden;">
<img src="onebyonepixel.gif" onLoad="javascript:showTabContentOne('TabContentOne')" width="1" height="1">
</div>

Code:

div#rollovercontentwrapper {
	float: left;
	width: 630px;
	background-color: #E9E9E8
}

div#tabwrapper {
	width: 630px;
}

ul#tabmenu {
	display: block;
	float: left;
	width: 630px;
	list-style-type: none;
	border-bottom: 1px solid #0048A7;
}

ul#tabmenu li {
	display: block;
	float: left;
	background-color: #E9E9E8;
}

ul#tabmenu li a {
	display: block;
	float: left;
	padding: 10px;
	background-color: #E9E9E8;
	border-top: 1px dashed #0048A7;
	border-right: 1px dashed #0048A7;
}

ul#tabmenu li a:focus {
	display: block;
	float: left;
	padding: 10px;
	background-color: #3383CD;
	border-top: 1px dashed #0048A7;
	border-right: 1px dashed #0048A7;
}

#TabContentOne {
	float: left;
	position: absolute;
	top: 350px;
	width: 628px;
	z-index: 1;
	padding-top: 10px;
	padding-bottom: 10px;
}

#TabContentTwo {
	float: left;
	position: absolute;
	top: 350px;
	width: 628px;
	z-index: 1;
	padding-top: 10px;
	padding-bottom: 10px;
}

div#onebyone {
	float: left;
}

div#content_test {
	float: left;
	width: 900px;
	padding: 20px;
	background-color: #CCCCCC;
}

Can anybody help me out on this?

Many thanks,

Mark

Hi. Any help would be appreciated. I am trying to cut down on my image sizes on my website: http://toptiertemplates.com, but i am having a few difficulties. I have this table which was created in photoshop which is off to the side. I would like to take just a slice of the table and repeat the image the full length of the table's original length. The page is written by placing everything with divs. I know how to set the image as a background and all and repeat it, however, when i do so, it replaces my website's background and just shows up as a white space.

So i am wondering if I have to use layers of some sort or anything else. I'd appreciate some help. Thanks.

Hi all,

I'm trying to center a CSS layer, and have tried everything google and I can find on the web about CSS centering, but none work. I simply cannot get the following "menu" to center horizontally in a browser window [note: I *can* get it to center if I set the left and right margins of the "menu" layer to the same value, but that stretches the "BDB76B" colored background out, which I don't want to do]. Any help appreciated - thanks in advance to any takers!

Here is the relevant code in the html document:

<div id="menu">
<a href="index.html" class=menu_link>home</a>
<a href="services.html" class=menu_link>services</a>
<a href="hosting.html" class=menu_link>hosting</a>
<a href="testimonials.html" class=menu_link>testimonials</a>
<a href="tips_tools.html" class=menu_link>tips & tools</a>
<a href="contact.html" class=menu_link>contact</a>
</div>

and here is the relevant code from my style sheet:

#menu {
background: #BDB76B;
position: absolute;
top: 85px;
height: 15px;
width: 800px;
padding-bottom: 5px;
z-index: 100;
}

a.menu_link, a.menu_link:visited{
font-size: medium;
color: #808000;
font-family : "Gill Sans MT", "Gill Sans", GillSans, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-variant: small-caps;
margin: 0px;
padding: 2px 5px 4px 5px;
text-decoration: none;
}

a.menu_link:hover{
font-size: medium;
color: black;
font-family : "Gill Sans MT", "Gill Sans", GillSans, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-variant: small-caps;
margin: 0px;
padding: 2px 5px 4px 5px;
text-decoration: underline;
}