CSS - Dynamically Creating Divs, Need Some Help Getting Them Positioned Right...

I have a Calendar of Events that I actually made quite a while ago, and it works great, but now I'm incorporating it into a different site... I used to handle the events on the calendar with absolutely positioned spans, but I'm going to try and do something a little different (being able to have tooltip like hovers with the possibility of using lists in the hover), and you can't do that with spans... but my css doesn't seem to be behaving properly.

I've got some example data, the event(bitcalevent) is supposed to sit on the bottom of the day(bitweek div), but it doesn't... when it was a span it did (though I had to add border:0 and width:100%)... maybe there is another rule that I'm not seeing that isn't letting this happen???

[edit]Note that I made the bottom -10px just so it looks ok for now... but it's like it's not separating the bottom from the top... [/edit]

We don't use position absolute for anything else on our site, but it seems that our drop down still goes under some content.

Here is the css:

Code:

#nav {
	background-image: url('../images/nav-full-bg.jpg');
	background-repeat: repeat-x;
	width: 967px;
	height: 69px;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display:block;
	padding: 11px 12px 13px 12px;
	font-weight:bold;
	font-size: 13px;
	font-family: "Trebuchet MS", Bitstream Vera Sans, Verdana;
	color: #626262;
	margin: 0;
	text-decoration: none;
}

#nav li { /* all list items */
	float: left;
}

#nav li ul { /* second-level lists */
	position:absolute;
	width: 200px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	border-bottom: 2px solid #808080;
	background-image: url(../images/davidpng2.png);
	z-index: 900;
}

#nav ul li {
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */

}

#nav li ul li a{
	padding:5px;
	display: block;
	width: 190px;
	color: #000;
	font-weight:normal;
	font-family:verdana;
	font-size:11px;

}

#nav li ul li a:hover{
	background-color:#a2c9f4;

}

#nav li ul ul { /* third-and-above-level lists */
	margin: -23px 0 0 200px;
;
}

#nav li ul li ul li a{
	display: block;

}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;

	
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;

}

Hello all,

I dont understand why the image placed inside the right column appears incorrect here. Please check the attachment or the following website and you will understand what I am refering.

http://www.refinethetaste.com/yk/clients.asp

Code:

#content { float:left; width: 956px; min-height:800px; background:url(images/bg_content.gif) 0px 0px #e2eceb no-repeat; }
#content #lcolumn { float:left; width:401px; }
#content #lcolumn .logo { float:left; width:100%;  }
#content #lcolumn img.logo { float:left; width:401px; height:104px; border:0px }
#content #lcolumn .head { float:left; width:100%; height:20px; background:#99adcc; }
#content #lcolumn .head .text { float:left; width:100%; text-align:center; font-size: 13px; font-weight:bold; line-height:20px; color:#083684;  }
#content #lcolumn .main { float:left; width:361px; padding:20px; }
#content #lcolumn p { font-size:15px; }


#content #rcolumn { float:left; width:555px; height:505px; }
#content #rcolumn img { float:left; border:0px; }

Hey all,

I am creating a site which sells Three 3G Mobile Phones and at the bottom of the pages i have a footer which is included into each page, see here.

If you view the site in Firefox then the footer is in the correct place and rests just where the main content finishes. However in IE the footer is miles down the page creating a box effect arround the content which to be honest looks crap.

If anyone would be so kind as to give me an idea why this is happening then i would be very grateful.

Also, there are many sites around which give tutorials etc about text decoration and such with CSS, but i am yet to find a really good begginers tutorial on how to layout a page with CSS and Divs, does anyone know of one?

Thanx for reading.

CSS Code (siteInfo is the footer in question:
Code:

#masthead{
	padding: 0px 0px 0px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
}

#navBar{
	float: left;
	width: 15%;
	margin: 0px;
	padding-right: 2px;
	height: 100%;
}

#headlines{
	float:right;
	width: 45%;
	padding-right: 2px;
}

#content{
	float: left;
	width: 70%;
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
	position: inherit;
}
#siteInfo{
	clear: both;
	font-size: 75%;
	color: #FFFFFF;
	padding: 10px 10px 10px 10px;
	text-align: center;
	background-color: #CCCCCC;
	border-top: 1px solid #107FA4;
	position: relative;
	font-weight: bold;
}

Edited to add CSS.

hey guys

JonnoWalmsley.com is giving me grief. I have a nav bar which is position:absolute; bottom:0px (so stuk to the bottom of the screen at all times, with the appropriate z-index etc).

It works fine on FF, but IE seems to be starting from the center of the page, which effectively pushes the nav bar over to the right, and partially off the screen on smaller screens.

Code:

<div style="position:fixed; bottom:0px; background-color:#0a2a1a; width:899px;">...nav links...</div>

I need IE to render the same as FF, and start the nav panel from the left.

Any ideas?

IE Screenshot
FF Screenshot

Hi

I've come up on the old <select> elements showing through <div>s that are made visible on top of them.

What I want to do is find out the id's of the select elements under my <div> so that i can hide them using CSS / Javascript.

The basic layout of my page is a grid of <select> elements, each one of these would have a hidden <div> layer associated with it containing extra information etc.

By the side of each of the <select> elements is a little image / button that the user will click and the layer with the extra stuff in is made visible. The layer will overlap a number of <select> elements (not the parent <select> element).

Each <div> pops up in a different position (calculated dynamically as an x,y offset from the parent) can I find the Ids of the elements it overlaps?

Hope this is clear, and thanks in advance.

flipflops.

I'm trying to place an absolutely positioned layer over other layers. It works in everything but Windows IE (surprise). If you remove the 'main' <DIV> it works fine (unfortunately, that is not an option).

http://www.tuttobellotrouve.com/newsite/tuttobello/testpage.html

CSS is internal. You SHOULD be able to see a small frame with a gift package in it, floating over a narrow horizontal box.

Ideas?

Thanks, Brad

I have created a 2-column liquid layout that works perfectly in Safari, FF(Win & Mac), Netscape(Win & Mac), IE5(Mac) and IE6(Win).

In IE5 and 5.5 (Win) I don't get any images. the images are all position:absolute, with their containers set to position: relative. I tried them at first as simple image tags with a class assigned. I then tried to wrap them in Divs with ids. I also messed a little with the z-indexes. Nothing has worked so far.

The HTML...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen"><!-- @import url(css/base.css); --></style>
<style type="text/css" media="print"><!-- @import url(css/print.css); --></style>	
</head>

<body>
<div id="container">
<div id="head">
<div id="headerTitle"><img src="images/headerTitle.gif" alt="Ken Dalton" height="100" width="325" border="0"/></div>
<div id="headerGraphic"><img src="images/headerGraphic_Home.gif" alt="Header Graphic" height="100" width="400" border="0"/></div>
</div>
<div id="leftColumn">
<img src="images/typewriter_Home.gif" alt="typewriter" height="220" width="120" border="0"/>
<p class="linkSelectedTop1">Welcome</p>
<p class="link1"><a href="bio.php">Biography</a></p>
<p class="link1"><a href="blog.php?category=">Musings</a></p>
<p class="link1"><a href="guestBook.php">Guest Book</a></p>
<p class="link1"><a href="links.php">Links</a></p>
<p class="link1"><a href="mailto:ken@kendalton.com">Contact</a></p>
</div>
<div id="rightColumn">
<div id="rightPages48"><img src="images/rightPages48.gif" alt="graphic" height="600" width="48" border="0"/></div>
<div id="krdPortrait"><img src="images/krdPortrait.gif" alt="Portrait of Ken Dalton" height="200" width="175" border="0"/></div>
<h1>Welcome</h1>
<p class="clear">&nbsp;</p>
</div>
<div id="footer"><p>&nbsp;</p></div>
</div>
</body>
</html>

The CSS...

html {
height: 100%;
margin: 0 auto;
padding: 0;
text-align: left;
background-color: #000000;
}

body {
height: 100%;
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 80%;
background-color: #000000;
}


a {
text-decoration: none;
color: #A50023;
}

#container {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
}

* html #container {
height: 100%;
}

#head {
position: relative;
background-image: url("../images/headerBlend.gif");
background-repeat: repeat-x;
background-position: 0 0;
text-align: left;
margin: 0;
padding: 0;
height: 100px;
}

#headerTitle {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

#headerGraphic {
position: absolute;
top: 0;
right: 0;
z-index: 9;
}

#rightPages48 {
position: absolute;
top: 0px;
right: 0;
z-index: 10;
}

#krdPortrait {
position: absolute;
top: 0px;
right: 64px;
z-index: 10;
}

#leftColumn {
float: left;
top: 100px;
left: 0;
z-index: 10;
width: 120px;
margin: 0;
padding: 0;
background-color: #000000;
text-align: right;
}

#leftColumn p {
font-weight: bold;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

#leftColumn a {
color: #BFA673;
}

#leftColumn a:hover {
color: #A50023;
}

.link1 {
border-top: 1px solid #606880;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

.linkSelected1 {
color: #A50023;
border-top: 1px solid #606880;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

.linkSelectedTop1 {
color: #A50023;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

#rightColumn {
position: relative;
min-height: 100%;
margin: 0;
margin-left: 120px;
padding: 0;
background-image: url("../images/rightColumnFill48.gif");
background-repeat: repeat-y;
background-position: 100% 0%;
background-color: #FFFFFF;
text-align: left;
}

* html #rightColumn {
height: 100%;
}

#rightColumn h1, h2, h3, h4, h5, h6, p {
margin-left: 36px;
margin-right: 320px;
margin-top: 0px;
margin-bottom: 0px;
}

#rightColumn h1 {
font-size: 200%;
color: #606880;
padding-top: 36px;
}

#rightColumn p {
color: #333333;
margin-top: 9px;
}

#clear {
width: auto;
height: 500px;
margin-right:48px;
margin: 0;
padding: 0;
margin-right:48px;
background-color: Transparent;
}

#footer {
width: auto;
height: 72px;
margin: 0;
padding: 0;
background-color: #000000;
}

#footer p {
margin-top: 36px;
}

I'm make a simple display:hidden , display:visiable "pop up" div box. The popup works wonderful in FF but IE, the button does not display.

Here is my full page (short and simple)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
function DIVshow(div_id)
{
	var popUp = document.getElementById(div_id);
	popUp.style.visibility = "visible";
}

function DIVhide(div_id)
{
	var popUp = document.getElementById(div_id);
	popUp.style.visibility = "hidden";
}
</script>

<style type="text/css">
#popupcontent {
 position: absolute; top: 50%; left: 50%;
 width: 300px;
 height: 200px;
 margin-left: -150px;
 margin-top: -100px;
 visibility: hidden;
 overflow: hidden;
 background-color: #F6F6BB;
 border: 1px solid #333;
 padding: 5px;
}
</style>
</head>

<body>

<p><a href="#" onClick="DIVshow('popupcontent');">Click here</a> to open the popup.</p>

<div id="popupcontent">
	<p>This is a popup window!</p>
	<input type="button" value="close" onClick="DIVhide('popupcontent');" />
</div>

</body>
</html>

Working sample can be seen he

Click Here

It works in both IE and FF if I write my hidden div tag like this:

Code:

<div id="popupcontent">
<div>
	<p>This is a popup window!</p>
	<input type="button" value="close" 
onClick="DIVhide('popupcontent');" />
</div>
</div>

Obviously I want to avoid the extra div tags if possible. Anybody know what happening here and how to fix it?

Thanks!

Hi all,

I want to place a piece of text directly below an item that has a 'position: absolute' style on it, but when I put a div in there for the new text, it just places the text at the top of that absolute positioned item. Is there any way to get past this apart from floating the item?

Cheers.

Hi,

I have to managed site looking like this http://www.kuczyn.com/ using css. Now, I have only one problem left that I cant fix by myself - the ^&%$# footer positioning. It seems to work ok in IE (staying always at the bottom of the page, and if the content is stretching the page, then staying at the bottom of it) but it fails to work in Firefox win 1.06 and Opera win 8.

Please, help me if you can, because Im going to crash my head on the wall with this bug

Thanks for any advice!

hi,

I've run into a bit of a problem... I'm trying to set up a drop down menu in my navigation bar.

I'm using the method from www.gazingus.org/html/menuDropdown.html

it works except for the fact that it hides behind a relatively positioned element - sa-ewb.org.uk/trial/about_us.htm

can I use z-index to fix this?

I'd really appreciate some help on this!

thanks,

Jim.

I'm getting a strange interaction between a CSS-positioned image and a widget placed farther down the page. I've tested it in FF3.5.7 and IE8, and everything works fine until I test it in Compatibility View in IE. The widget takes a few seconds to load; once it's loaded the image at the top of the page disappears. The layout is basically this:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<table>
  <tr>
    <td><div style="position:relative;margin:50px 0 0 0">
      <table>
        <tr>
          <td>Some content</td>
          <td rowspan="2"><img style="position:relative;margin:-50px 0 0 0" src="#" width="250" height="375" /></td>
        </tr>
        <tr>
          <td>Some content</td>
        </tr>
      </table>
      <table>
        <tr>
          <td>Some content</td>
          <td><img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNzY2NTc4MzAyNzAmcHQ9MTI3NjY1ODUyNzM1MiZwPTEwODQwMDEmZD*mZz*yJm89MDQ2ZDg3MzBjNDc4NDExZTkw  /YTVmZDcxNzhiYmQ1MGYmb2Y9MA==.gif" /><object width="394" height="350" id="W4afb54b3f6d091a24b057108737c9fbe" data="http://www.5lovelanguages.com/widget/5LL-assesment-widget.swf" type="application/x-shockwave-flash">
            <param value="http://www.5lovelanguages.com/widget/5LL-assesment-widget.swf" name="movie"/>
            <param value="transparent" name="wmode"/>
            <param value="all" name="allowNetworking"/>
            <param value="always" name="allowScriptAccess"/>
          </object></td>
        </tr>
      </table>
      <table style="position:absolute;left:0;top:-50px">
        <tr>
          <td>Some content</td>
        </tr>
      </table>
    </div></td>
  </tr>
</table>
</body>
</html>

I don't know anything about how the widget works. Can anyone help me fix this problem?

The form elements (<select> specifically) on a background layer seem to be showing through a <div> layer positioned above it (at least in IE.)

Does anyone know a trick or some such to stop the form elements from the background from showing through the <div>?

t h a n k s