CSS - [css] Weird Print Bug In Ie

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.

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;
}

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

The border around the fieldset in IE7 is messed up. The right border is shifted to the left several pixels. It looks fine in IE6. In FF the border isn't shifted but there is less padding on the right side of the fieldset than the left. I can't figure that one out either. If I zero out all the padding & borders the input/textareas push a few pixels out the right side of the fieldset. Looks fine in IE6.

So has anyone seen either of these issues and might know how to correct them?

Here is the page in question

Thanks!

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

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!

Hi, I'm trying to display text in a floating div in the middle of the page. The style is as follows:

Code:

.mainContentAreaBackground {
	position:absolute;
	z-index:11;
	top: 190px;
	left: 230px; 
	width:70%;
	height:72%;   
}

#mainContentArea{
	z-index:12;
	position:absolute;
	overflow:auto;
	overflow-x:hidden;
	width: 67%;
	height: 68%;
	top:205px;
	left:246px;
	text-align:left;
	font-family:Tahoma;
	font-size:10.0pt;
	visibility:visible;
}

There are two anomalies which I think might be bugs in IE's implementation of CSS, and I was hoping someone might be able to give me some advice as to how to get around them. The first problem is that, when going to highlight text in the main content area, all objects on the page are selected, rather than just the intended text. The second anomaly is that, when using the mouse wheel to scroll down in the mainContentArea div when there's overflow, the cursor needs to be hovering over text. If it's hovering over any place with a "hole" in it, such as the space between paragraphs, then it will not scroll. Everything works fine in Firefox.
You can see what I'm talking about he
http://www.cs.mcgill.ca/~jbeard4/lepdev

If anyone has any advice, please let me know.
Thanks!

-Jake

Hey, at my site: http://www.optimumnutrition.com/products in IE/6 I am having a problem with the last side box in the left column. You can see a gap between the link to conditions of use and the curved bottom of the box.

Anyone see where this is coming from?

Thanks,

Ryan

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

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?

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!

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?

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'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;
}