CSS - Absolute Positioning Of Div Fails

Good morning,

I've been working on my site, and it's in its final stages, but I'm experiencing a problem I can't figure out.

I have a floating bar with all of my navigation links in it which is absolutely defined with the following code:

Code:

#headerBar { /* sets position of floating bar */
	position: absolute;
	clear: both;
	top: 57px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	width: 100%;
	filter: alpha(opacity=50);
	-moz-opacity: .50;
	opacity: .50;
		}

The problem I'm experiencing is that in Firefox, Safari, and Opera, the bar appears magically in the perfect position, however, in Internet Explorer, the bar is 5-10 pixels higher than it should be.

The url is: http://www.alokw.com

Any suggestions?

Thanks!

I think the best way to explain this is by example, if you go to this page:

http://lifeyouwant.workinprogress.co.uk/how-we-work

You will notice the drop down menu works fine in Firefox, Safari, Opera etc. However when it comes to IE7 the drop down menu is positioned too far to the right.

Has anyone got any ideas how I can get this to display correctly in IE7 (like it does in Firefox).

I would prefer to try not to use a hack for IE7.

ANy ideas would be great! Thanks.

Hello All.

I have very little experience with coding and the likes so i don;t even think I'm allowed to post on these forums? hehe

BUT, I have ran into a problem on myspace with code.

I am trying to create a linkable image I believe it would be called.

<a href="website url">
<img src="wouldnt let me post url's" />
</a>

Thats what i have so far. I beleive that means when the image is clicked it takes y ou to the homepage. (I dont even know if that is CSS, so i apologize if this is the wrong forum I'm posting on.)

I am trying to get the image to appear around 300 pixels from the left and 400 pixels from the top. I had looked on google for a solution of some code to help me out and all I found was thing saying how 'Absolute Positioning' was what was needed. I tried adding various bits of code I had found to the code i currently had, and some of them would almost work, but text would appear after the image and it would be clickable also.

I was just wondering how I could place the image were I want it and when it is clicked on, it takes you to the homepage.

Thanks in advance to anyone who replies, and also apologies for my incredible noobness.

-Connor

For a search tool, I have a "results toolbar", horizontally across the top of the results page. Within this toolbar (position: relative) I have a span containing the current page, absolutely positioned at top: 8px; left: 5px;

What I get when rendering however, is the following:
Right: http://tim.komta.com/images/css/Firefox.gif
Wrong: http://tim.komta.com/images/css/IE.gif

More accurately, I should say that I get what I expect in Firefox, and not what I expect in IE, which is not overly surprising.

Anyway, what am I doing wrong?

If I change the text-align of the box from right (current) back to left, it's still overlaid on top of the images, but on the left, like it's supposed to be. It kinda seems like IE is making the images the bounding box for absolute positioning.

Any thoughts?

MPEDrummer

I have my website at omel.co.cc I have a menu that I positioned absolute, but when I view in a different resolution the menu changes position, I have put a parent div positioned relative but every time I scroll the menu moves which I do not want to, when positioned fix, the position of the menu goes off, on different resolutions and when I resize the window, I have googled these, hope someone could help, or I just did not googled enough?

K...I have an absolutely positioned toolbar in a search tool page.

There are instances where the toolbar (on the left) is longer than the actual (non-absolute) results. When this happens, IE refuses to scroll for the absolutely positioned content!

Anyone know what I can do about this? It's a little...crappy.

MPEDrummer

I am working on a site laid out with divs. I am having trouble with one in particular: shopping basket div.

If you go to
http://www.refinethetaste.com/html/

At the header section you will see a shopping basket right on top of the logo. I want it stand on the navigation section but I want it float to right. I have tried several different things with its positioning, I just cant get it right.

Hey people.

I'm kind of new to CSS (well not new, just unfamiliar), and I need to ask the old question about absolute positioning, which I haven't managed to find a satisfactory answer to on the net.

I downloaded a script for a drop down menu. The page on which it appears is made up of a table, and the headers of menu is in a row across the top. The menu items are in their own tables:

<div id="dropdown1" style="left: 257; visibility: hidden; width: 81; position: absolute; top: 299; height: 53">
<table class="popup" onmouseover="clearTimeout(timerID)" onmouseout="timerID=setTimeout('closeall()',200)" cellspacing="0" cellpadding="2" width="79" height="15" border="1">

<tbody><tr><td>Item 1<br>Item 2</td></tr> </tbody></table>
</div>

And as you can see, they use absolute positioning.
Unfortunately, this means that when I change the text size on my browser, the menu headers and the menu items are not aligned. I tried using table id=dropdown1, but this resulted in a huge gap between the menu headers and the rest of the page, where the hidden menu items were.

I realise changing text size will always be a problem when using absolute positioning in CSS, so I was wondering if anyone had any suggestions on an alternate method? Or if not, atleast what text size most people use, so I can set it to align for the majority of viewers? Or if it's possible to do a similar menu in a different (understandable) language?

I appreciate any help,

MKK

(Before you ask, no, the page is not online. I know this makes it harder to find a solution, but my webhosting company just disappeared - "failed to pay server bills", so I currently have no web space)

I have a button that when you click it a div appears. This div is absolutely positioned.

In Firefox the margin of the absolute positioned div is from the top of the UL element.

In IE6/7 its from the bottom of the UL element... Help?

CSS:
Code:

#sitenav { border-bottom: 1px solid #d6d6d4; border-left: 1px solid #d6d6d4; border-right: 1px solid #d6d6d4; width: 958px; background-repeat:no-repeat; margin-bottom: 2px; overflow: auto;}
#sitenav ul { margin: 0; padding: 0; margin-left: 40px; list-style: none; }
#sitenav ul li { float: left; margin: 0; width: 100px; padding: 0px 10px; font-size: 14px; font-weight: bold; text-align: center; padding-top: 6px; }
#sitenav .active-top { background-image: url(../images/tabs/topNavTab.jpg); height: 22px; }
#sitenav #nav-products {  clear: both; position: absolute; margin-top: 30px; margin-left: 40px; width: 450px; height: 225px; background-color: #fff; border: 1px solid #333;  }

HTML:
Code:

    <div id="sitenav">
        <ul>
            <li class="active-top">Products</li>
            <li>Solutions</li>
            <li>Partnerships</li>
            <li>Technology</li>
        </ul>
        <div id="nav-products"></div>
    </div> <!-- END SITENAV -->

Example:
http://www.nwkeeley.com/test2.html

FYI:
this line: #sitenav #nav-products the margin-top: 30px is great on FF, but it has to be margin-top: 2px to look good in IE
Thanks for any help!

Ok, ive got the footer bar that should be at the bottom of content, in FF it displays perfect, but in IE it disappers http://fasttracksites.com/new%20layout/

heres the css
Code:

html, body {height: 100%;}
body {
	background: #beb185 url('images/bggrad.gif');
	background-attachment: fixed;
	font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #000;
	padding: 0px;
	margin: 0px;
	text-align: left;
}

/*==============================
	Layout 
==============================*/
div#container {
	background: #fff;
	width: 961px;
	height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: left;
	float: left;
	z-index: 1;
}
div#page {
	height: 100%;
	float: left;
	z-index: 2;
}
#left-col {
	background: #121212 url('images/leftcolgrad.jpg');
	color: #fff;
	width: 190px;
	min-height: 100%;
	height: 100%;
	padding: 0px 5px 0px 5px;
	border-right: 10px solid #13496e;
	float: left;
	z-index: 3;
}

#right-col {
	color: #000;
	width: 750px;
	height: 100%;
	padding: 0px;
	border-right: 1px solid #121212;
	float: right;
	z-index: 4;
}

div#header {
	background: #fff;
	width: 740px;
	height: 78px;
	margin: 0px;
	padding: 0px 5px;
	text-align: left;
	float: left;
	z-index: 5;
}

div#content {
	background: #fff;
	width: 740px;
	padding: 0px 5px 0px 5px;
	float: left;
	clear: both;
	z-index: 6;
}

div#footer {
	position: absolute;
	bottom: 0px;
	background: #000 url('images/footergrad.jpg');
	width: 740px;
	height: 180px;
	padding: 0px 5px 0px 5px;
	float: left;
	/*clear: both;*/
	z-index: 7;
}

Hey,

I have a bit of a problem and am very new to using CSS. On a web site I am making I have used a CSS style sheet to position a table on the page. This what the coding on the sheet is like:

table {
position: absolute;
top: 117px;
left: 120px;
width: 167px;
}

However, I have a second table that I wish to position using absolute positioning, but I have no idea how the browser can tell the difference between the two. As you can see above, the first table has been identified as 'table', but what can I call the second table so that I can use different pixel settings without effecting the first?

Hello

Can anybody explain me the difference between the absolute and the relative positioning methods?

If i use nested <span> elements in a table row which one is suitable?

And also what the "Z-index" property tells us?

I am so confused with these terms nowadays.And waiting your help.

Thank You Very Much...

IE absolutely sucks (pun intended). Or mayhaps its the developer. In any case:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>My site</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <style type="text/css">
       #top_main_content { width: 955px; }
       #top_main_content ul {
         float: left;
         list-style-type: none;
         border-spacing: 0;
         margin: 0;
         padding: 0;
         text-align: right;
         border-top: 1px solid #f1f1f1;
         height: 243px;
         width: 266px; } /* end #top_main_content ul */
       #top_main_content ul li {
         vertical-align: middle;
         margin: 0;
         padding: 0;
         border: 0;
         color: #686868;
         width: 266px;
         border-bottom: 1px solid #f1f1f1; } /* end #top_main_content ul li */
       #top_main_content ul li a { 
         line-height: 26px;
         display: block;
         margin-right: 5em;
         color: #686868;
         width: 266px; } /* end #top_main_content ul li a */
       .indent { padding-right: 1.5em; }
       #top_main_content ul li a:hover {
         background: #cfcf00; 
         color: #000000; } /* end #top_main_content ul li a:hover */
       #top_main_content #rotating { 
         float: right;
         width: 687px;
         height: 242px;
         border-bottom: 1px solid #f1f1f1;
         border-top: 1px solid #f1f1f1;
         text-align: right; } /* end #top_main_content img */
       #default_div { 
         position: absolute;
         visibility: visible; } /* end #default_div */
       #div_a { 
         position: absolute;
         visibility: hidden; } /* end #div_a */
       #div_b { 
         position: absolute;
         visibility: hidden; } /* end #div_b */
       #div_c { 
         position: absolute;
         visibility: hidden; } /* end #div_c */
       #div_d { 
         position: absolute;
         visibility: hidden; } /* end #div_d */
       #div_e { 
         position: absolute;
         visibility: hidden; } /* end #div_e */
       #div_f { 
         position: absolute;
         visibility: hidden; } /* end #div_f */
       #div_g { 
         position: absolute;
         visibility: hidden; } /* end #div_g */
       #div_h { 
         position: absolute;
         visibility: hidden; } /* end #div_h */
       #div_i { 
         position: absolute;
         visibility: hidden; } /* end #div_i */
    </style>
  </head>
  <body>
    <div id="logo_search">
      <div id="logo_container">
        &nbsp;
      </div>
    </div>
    <div id="base">
      <div id="main_block">
        <div id="main_content">
          <div id="top_main_content">
            <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
              <li><a href="#">Link 5</a></li>
              <li><a href="#">Link 6</a></li>
              <li><a href="#">Link 7</a></li>
              <li><a href="#">Link 8</a></li>
              <li><a href="#">Link 9</a></li>
            </ul>
            <div id="rotating">
              <div id="default_div"><img src="images/test_image_main.gif" alt="" /></div>
              <div id="div_a"><img src="images/test_image_a.gif" alt="" /></div>
              <div id="div_b"><img src="images/test_image_b.gif" alt="" /></div>
              <div id="div_c"><img src="images/test_image_c.gif" alt="" /></div>
              <div id="div_d"><img src="images/test_image_d.gif" alt="" /></div>
              <div id="div_e"><img src="images/test_image_e.gif" alt="" /></div>
              <div id="div_f"><img src="images/test_image_f.gif" alt="" /></div>
              <div id="div_g"><img src="images/test_image_g.gif" alt="" /></div>
              <div id="div_h"><img src="images/test_image_h.gif" alt="" /></div>
              <div id="div_i"><img src="images/test_image_i.gif" alt="" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

In any case what will happen with this code is when a user rolls over a link (not shown in code), the visibility of the corresponding div will change. All of this renders and works correctly in FireFox, Opera, and Safari. In IE 7 and 6, it works correctly, but does not render correctly.

In IE 7, the images (all 687 x 243) seem to be indented 687 pixels.

In IE 6, there is a lot of trailing border in the links and that is pushing the images below the menu and will then probably have the same problem IE 7 is having.

Thoughts?

Edited to add that I solved the IE 7 problem by removing text-align: right; from the #top_main_content #rotating div. I still have the IE6 problem however.