CSS - Weird Css Floating Div Bug In Ie-6

Hey gang, quick question. I'm tring to make a "Thermometer" of sorts for my site, and instead of making lots of images in photoshop, I figured I could do it a little more dynamicly using divs and css. I was right, as Firefox displays my code perfectly, however, IE messes up the whole thing by keeping the allocated space for the one div in the place where its positioned in the code. Dumb thing. I figure it has something to do with the display property, but I'm not sure which to use. Any suggestions? Thanks!

PHP Code:
<div style="height: 500px; width: 100px; padding: 0px; margin: 0px; border: 0px black solid; background: url('meter_color.jpg');">
  <div style="position: relative; top: 0px; left: 0px; height: 125px; width: 100px; padding: 0px; margin: 0px; background: #FFFFFF; z-index: 1;"></div>
  <div style="position: relative; top: -125px; left: 0px; height: 500px; width: 100px; padding: 0px; margin: 0px; background: url('mask.gif'); z-index: 2;"></div>
</div> 



(images attached)

-Jim

Hello,
I have a free text search with auto suggestion that opens below the input box.
I finally managed to make it look good in all browsers, but I have one problem left in IE - when the auto suggestion div opens with the options and I press the down arrow to move down the list, there is a little jump.
You can see it by going to : bateries.websitebuildingsolutions.com in IE and enter "b1" in the search box, wait a second for the div to open and than press the down arrow to move down the list.

What can I do to fix this?

Thanks

I have a basic 2 column layout with a header and the columns reprezented by two floated divs but on IE I'm experiencing some weird behaviour with the menu. To be precise the menu's background and content is not showing up at pageload and I have to hover some of it's elements or resize the window, or bring another window above IE's window and then the hidden elements magically appear. Is this some common bug? And more important: is there a fix?

You can see my example at the following link -> http://www.link7.ro/misc/css-stuff/bug1/test.html

Thanks in advance.

So I have the following website: http://www.itmustbecollege.com/

and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size.

I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space!

I've got a body of text within a DIV tag. For some reason, if I roll my mouse over the text, the entire body of text changes color as if it were a link. I've double checked to see if there are any open HREF tags but there are none. Any ideas? Safari 1.3 on Mac OSX 10.3.9 if it matters. I've also tested on Netscape, Opera, Firefox and IE and all of these work fine.

here be the code:
Code:

.mainBody {
	color: #000;
	font-family: helvetica, arial, "sans serif";
	font-size: 12px;
	text-align: justify;
	padding-left: 35px;
	padding-right: 35px;
}

.mainBody:link, .mainBody:visited {
	color: #600;
	text-decoration: underline;
}

.mainBody:active, .mainBody:hover {
	color: #996600;
	text-decoration: none;
}

.pageLinks {
	color: black;
	font-family: helvetica, arial;
	font-size: 14px;
	text-align: center;
}

.pageLinks:link, .pageLinks:visited {
	color: #960;
	text-decoration: underline;
	font-size: 14px;
}

.pageLinks:active, .pageLinks:hover {
	color: #960;
	text-decoration: none;
	font-size: 14px;
}

Hi all !

I got this problem with my scrollbar.

as you can see on http://antwerpfashionagency.com/immo/ in the section AANBOD , my scrollbar works wonderfull.

Now when i do this in the section IK ZOEK , my scrollbar doesn't align well. in firefox i get a scrollbar from firefox itself .


Can someone tell me what the prob is??

Thx in advance !!!

B

I really need help here.

I'm using some php script to generate the pictures and titles as seen below:

img30.imageshack.us/i/capture1ar.jpg/ (can't post images or urls =/)

I styled it using CSS and the CSS portion turned out something like these:
PHP Code:
 div.related-posts {clear:both; text-align:center; margin:10px 0px 0px 0px; padding:0;}  
div.related-posts li{width:150px; float:left; margin-right:15px; padding:0;}  
div.related-posts img{clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;}  
div.related-posts a{display:inline-block; border:none; text-decoration:none;}  
div.related-posts li{font-size:12px;} 





This is somewhat how the thing is displayed:
PHP Code:
<li>                 
                 <//a href="article link" rel="bookmark">  

               
 


<img src="image" alt="Example post 3" />

                 </a> 
           
   
<li>                 
                 <//a href="article link" rel="bookmark">  

               
 


<img src="image" alt="Example post 3" />

                 </a> 





Weirdly though, only if the first image has a title that is two lines long, the image placement gets screwed up. If the first and last image does have two lines, everything seems right!

This is killing me!!! HELP. =/ I ain't a CSS coder or php genius, in fact i do not have much knowledge in this field and more likely a copy-paste-edit kind of person. So the css and and php code is copied and edited from someone else.

Any ideas to make sure everything is inline?

Hello,

I'm about to go absolutely crazy; I just can't seem to get a grasp on laying out a simple webpage with css. So I have this div container, #main, and in it I want two more div's left and right. I set the margin-top:20px on the left div and that works fine. Then I set the margin-top:20px on the right div and I get a 40px margin-top on the left and 20px margin-top on the right.

The frustrating thing is that dreamweaver displays it the way I want to but chrome, IE, and opera do not.


html4strict Code:
Original - html4strict 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=utf-8" /> <title>Untitled Document</title> <link href="global.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="banner"></div> <div id="nav"> </div> <!-- #main is a wrapper for the page content --> <div id="main"> <div id="maincontent">this is a test </div> <div id="sideright"></div> </div> </div> </body> </html>

  

 <!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=utf-8" />


 <title>Untitled Document</title>


 <link href="global.css" rel="stylesheet" type="text/css" />


 </head>


  


 <body>


  


 <div id="wrapper">


   <div id="banner"></div>


   <div id="nav">


     </div>


   <!-- #main is a wrapper for the page content -->


   <div id="main">


     <div id="maincontent">this is a test </div>


     <div id="sideright"></div>


   </div>


 </div>


  


 </body>


 </html> 

css Code:
Original - css Code @charset "utf-8"; /* CSS Document */ body { background-color:#063; margin: 0; padding: 0; text-align: center; } #wrapper { text-align: left; width: 860px; height: 600px; border: solid #000 3px; background-color:#693; margin-top: 5px; margin-right: auto; margin-left: auto; } #banner { width: 860px; height: 120px; background-image: url(images/banner860120.jpg); } #nav { width: 860px; height: 34px; background-color:#663; } #main { width: 860px; height: 446px; } #maincontent { margin-top: 20px; float: left; margin-left: 20px; background-color:#663; width: 500px; height: 380px; border: 4px double #FFF; color: #FFF; } #sideright { margin-top: 20px; margin-left: 540px; width: 300px; height: 380px; background-color: #663; }

  

  @charset "utf-8";


 /* CSS Document */


  


 body {


     background-color:#063;


     margin: 0;


     padding: 0;


     text-align: center;


 }


  


 #wrapper {


     text-align: left;


     width: 860px;


     height: 600px;


     border: solid #000 3px;


     background-color:#693;


     margin-top: 5px;


     margin-right: auto;


     margin-left: auto;


 }


  


  


 #banner {


     width: 860px;


     height: 120px;


     background-image: url(images/banner860120.jpg);


 }


  


 #nav {


     width: 860px;


     height: 34px;


     background-color:#663;  


 }


  


 #main {


     width: 860px;


     height: 446px;


 }


  


 #maincontent {


     margin-top: 20px;


     float: left;


     margin-left: 20px;


     background-color:#663;


     width: 500px;


     height: 380px;


     border: 4px double #FFF;


     color: #FFF;


 }


  


 #sideright {


     margin-top: 20px;


     margin-left: 540px;


     width: 300px;


     height: 380px;


     background-color: #663;


 } 

I know this code is likely sloppy, but apparently it passed the css validation . I would be very grateful if someone could help me out.

Hi Everyone,
Sorry for the (probably) dumb question, but I've been searching for answers and can't seem to figure this out. I am brand new, only using CSS because WYSIWYG and unnecessarily long HTML codes are infuriating and I was begged to try making a web page. Anyway, I guess I'm not as smart as I thought I was--when I put the following into my style sheet, I get the layout I want (because I copied it from a how-to site), but the color (which I put in) is only directly around the text, with white space on top, between the sections and on the bottom and sides. What I really want is some sort of textures thing that I found, but I figure that that will come once I can get a color to work (the same issue came up when I tried it). How do I make this work?

Again, I apologize for the inane question, but all the help sites I find are too simplistic, don't show all of this put together, or have big words that I don't understand. Care to be nice anyway and give me a hand?
Thanks!
~Tasha



body
{
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;}

#menu {
position: absolute;
left: 10px;
padding: 0px;
width: 250px;
background-color: blue}

#content {
margin-left: 260px;
padding: 0px;
margin-right: 15px;
background-color: blue}

I'm having a slight problem with the appearance of the border for the DIV below the navigation bar. Firefox runs the border through the entire width of the DIV, but IE stops the bottom border as soon as the last <LI> is reached.. Any ideas guys? Thanks in advance.

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

The related CSS is below:

Code:

#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

#sublinks{
float:left;
height:1.4em;
line-height:1.4em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}

#sublinks li{
float:left;
list-style-type:none;
white-space:nowrap;
border-right:1px solid #578bb8;
}

#sublinks li a{
display:block;
padding:0 5px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #sublinks a {width:1%;}

#sublinks .selected,#sublinks a:hover{
color:#000000;
text-decoration:none;
}

I am redesigning this site in a css layout, and I've had minimal problems so far, but IE:mac (of course) is doing some weird things.

Example One:

The header of the search box is stretching to the right, when the googleads box is floated right.

Eample Two:

The ul in the left side bar is placing the bullets outside of the wrapper and is aligned to the left side of the browser. The rollovers have also been slow in other browsers.

These are my two main issues. If there are any other suggestions as to how I could lay this out more efficiently, it would be much appreciated. Thanks!

Site

CSS

Hello,

On this page

http://www.soulcode.net/webdev/csstest/

I've got the wrapper set at a width of 700px
and then put in some old code with a banner div set at 100%

this made the banner extend another pixel or so... (in both FF and IE) WHY?

(Yep, the solution is to set everything to 100% but I'm trying to get beneath all these properties to fundamental understanding of CSS behavior).

All I am trying to do is pad some text so that it is aligned vertically, but whenever I pad the text, in Firefox, it forces the parent div up, instead of the text down, which makes no sense
Code:

body 		{ margin: 0px;
			  font-family: Verdana, Arial, Helvetica, sans-serif }
#logoimage	{ margin: 5px 0px 2px 5px }
#version	{ font-size: 10px;
			  font-weight: bold;
			  margin: 4px 5px;
			  text-align: center;
			  position: absolute;
			  top: 20px;
			  right: 15px }
#header		{ background-color: #D2E1FA;
			  height: 20px;
			  position: relative }
#navigation	{ font-size: 11px;
			  position: absolute;
			  top: 2px;
			  left: 20px }
#userinfo	{ background-color: #FFFFFF;
			  height: 13px;
			  width: 150px;
			  color: #000000;
			  font-size: 10px;
			  margin: 4px 5px;
			  text-align: center;
			  position: absolute;
			  top: 0px;
			  right: 150px }

Actual html is here...

Code:

		<img id="logoimage" src="/images/logosmall.gif">
		<div id="version">
			Beta Build 1000
		</div>
		<div id="header">
			<div id="navigation">
				Test&nbsp;&nbsp;&nbsp;
				My Account
			</div>
			<div id="userinfo">
				<b>Guest User</b> > Log In
			</div>
		</div>

It actually pushes the div almost until it overlaps the image above, which makes no sense...

How should I be applying the padding instead?

thanks in advance!

Hi there! Please have a look here. As you can see there's a scrolling box with a overflow:auto propriety set. All works well either in Firefox and Internet Explorer, but I had to use a hack to made it work with IE:

Code:

#content {
	position: relative;
	margin-left: auto;
	margin-right: auto; 
	padding-right: 25px;
	padding-left: 25px;
	font-family: Verdana,Arial,helvetica, sans-serif;
	font-size: 11px;
	text-align: justify;
	overflow: auto;
	width: 543px;
	height: 225px;
	background-image: url(img/centerblank.jpg);
	background-repeat: no-repeat;
	_background-attachment: fixed;
	}

FF doesn't read the _background-attachment so all works fine.. problem is, this way the css code is no w3c compliant. Any ideas?