CSS - Ie Is Weird... (div Issue)

omg I am going to fall from the window with this stupid language lol...

Until yesterday, I was designing properly my site, using css and linking it in my php properly andddddddd..........

today I noticed a weird result. When I change something in css, I can see no result in the site. Even if I delete code from css, the site seems to be cached! I use Mozilla, I tried to clean cache, the css is properly linked... whats going on now

Have anyone else faced a similar problem?...

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!

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

if you check out this website you'll immediately understand what the problem is about.

The script I wrote, pulls pictures out of a database and displays them. I have a print feature (click the link that says: Ik wil de klassenlijst van **** afprinten).

With Css I check wether or not a picture can be displayed on this page or if it has to be forced onto another page, when printed.

Code:

<style type="text/css" media="print"> 

	table {
		page-break-befo  auto;
	}
</style>

When you check the webpage, you'll notice this row gives problems in IE.
When I print the page from Internet Explorer: this row shows on the page, but not the picture that goes along with it.
When I print the page from Mozilla: this row does not show on the page, neither the picture that goes along with it. as it should be

Can someone help me? It is very important that the pagebreak is automagically forced when printed, because I can't guess the format on which people will print.

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

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

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.

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!

Hey everyone,

I made a site and it seems to have creeping text. On position is everything it says creeping text is caused by a left border and a bottom padding on nested block elements. If I try to highlight the creeping text(ng. or g.) it will highlight the word I think it's creeping form just above where it says wiring. I don't know how to fix it. If anyone has any sugestions that would be great. I can post more code if needed. The header is a div within an inner warper div which is within a wraper div. I need the extra divs to centre the page within the browser.



Code:
CSS

#header{                                                                                                            
        float:left;                                                                                                 
        clear:none;                                                                                                 
        width:800px;                                                                                                
        height:160px;                                                                                               
        border-bottom:1px solid #323132;                                                                            
}                                                                                                                   
#header a{                                                                                                          
        float:left;                                                                                                 
        clear:none;                                                                                                 
}                                                                                                                   
#header img{                                                                                                        
        float:left;                                                                                                 
        clear:none;                                                                                                 
        border:0;                                                                                                   
        border-right:1px solid #323132;                                                                             
}                                                                                                                   
#header-right{                                                                                                      
        width:583px;                                                                                                
        overflow:hidden;                                                                                            
        float:left;                                                                                                 
        clear:none;                                                                                                 
}                                                                                                                   
#header-right img{                                                                                                  
        border:0;                                                                                                   
        border-bottom:1px solid #323132;                                                                            
}                                                                                                                   
                                                                                                                    
#slogan{                                                                                                            
        vertial-align:middle;                                                                                       
        float:left;                                                                                                 
        clear:none;                                                                                                 
        font-size:15px;
        padding-left:2em;                                                                                           
        font-stretch:wider;                                                                                         
        width:583px;                                                                                                
        padding:0;                                                                                                  
        height:20px;                                                                                                
        margin:11px 0 11px 2em;                                                                                     
}                                                                                                                   
#slogan span{                                                                                                       
        float:left;                                                                                                 
        clear:none;                                                                                                 
        font-variant:small-caps;                                                                                    
        font-size:normal;                                                                                           
        font-weight:bold;                                                                                           
        color:#e6242c;                                                                                              
        font-stretch:normal;                                                                                        
}

PHP Code:
<?php                                                                                                               
        if($page) { $topImg = "images/tops/$page-top.jpg"; }                                                        
        else { $topImg = "images/tops/index-top.jpg"; }                                                             
?>                                                                                                                  
<div id="header"><!-- width="800px" height="160" border="0" cellpadding="0" cellspacing="0"-->                      
        <!--<a href="/">-->                                                                                         
                <img  src="images/logo.gif" alt="Moorhouse Media Tech logo.">                                       
        <!--</a>-->                                                                                                 
        <!-- SPACER IMAGE                                                                                           
                <img id="toptagline" src="images/top-tagline.gif" width="1" height="160" alt="Moorhouse: The new sta
ndard in home wiring."></td>                                                                                        
        -->                                                                                                         
        <div id="header-right">                                                                                     
                <img id="top-img" src="<?php echo $topImg . "\" alt=\"" . $page; ?> of Moorhouse.(Decorative Image)"
>                                                                                                                   
                <!--<img id="tagline" src="images/top-tagline-05.gif" alt="Moorhouse: The new standard in home wirin
g.">-->                                                                                                             
                <p id="slogan" style=""><span>MOORHOUSE</span>: The new standard in home wiring.</p>                
        </div>                                                                                                      
</div>




Unfortunately no matter what I do all the ports scanners I've used say that my port 80 is in stealth mode(no response to and SYN packets) so I can't show you a live version of my site. Attached is a screen shot.

[edit]
I fixed the g. but the ng. still exists. The g. was caused by the commented out image in the PHP code just above the slogan <p> element.

I fixed them all, it was caused by the comments. I forget what the fix for that was but I just removed the unnecessary comments.

So, I have my CSS, works wonderfully (well, as expected) in FF2. Unfortunately, IE7, Safari 3, and Opera 9 all seem to ignore the whole stylesheet.

UNLESS!

Any one of the properties in the sheet is declared !important. Then, it applies the entire sheet the way I expect.

What gives?

The way I understand (understood?) specificity, the !important flag should only effect the specific line it's applied to, not the entire sheet. Right?

I'm really confused. The stylesheet is included last, so all else being equal, should cascade properly and override the other sheets.

Any ideas? I'm just going to use the !important for now, but I really don't like that.

MPEDrummer

Hey everyone,

I am trying to do a rollover CSS image. Though, with this image it doesn't want to align on the bottom of the table that it will be in. Why is this? I have no clue; so I decided to come here! With the smart people!

Here is the website page that I am trying to do it on:
http://www.automationfoodtech.com/test.html

Here is the desire look (these are the buttons, but client wants to be able to change them himself and without me adding buttons):
http://www.automationfoodtech.com/

Here is the CSS for both (the test page is at the bottom)
http://www.automationfoodtech.com/style.css

Remember we are working on the horizontal navigation.

Hello.

I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters.
My css:
Code:

p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}

h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}

h3 {
	padding:0px;
	margin:0px;
	color:#006699;
	color:#006699;
}

html,body {
	padding:0px;
	margin:0px;
	background-image:url(main-bg.gif);
    font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	
}

#container { 
	 margin: 0 auto;
	 width: 922px;
}
#header {
	 
	 width: 922px;
	 float: left;
	 height: 130px;
	 margin: 10px 0px 5px 0px;
}
#leftcolumn { 
	 border-left: 1px solid #ccc;
	 border-right: 1px solid #ccc;
	 border-bottom: 1px solid #ccc;
	 background-image:url(col_gradient.jpg);
	 margin: 0px 5px 5px 0px;
	 padding: 10px;
	 height: 900px;
	 width: 195px;
	 float: left;
}

#welcome {
	text-align:center;
	padding:5px;
	background:#EAEAEA;
	color:#006699;
}

#latest_tuts {
color:#006699;
}

#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}

#who_online h3 {
border-bottom:1px dotted #ccc;
}

#search {
	position:absolute;
	margin-top:0px;
	margin-left:0px;
}

#newsletter {
position:absolute;
	margin-top:0px;
	margin-left:0px;
}

#welcome a:link {
	color:#0066CC;
}


#content { 
	 color: #333;
	 margin: 0px 5px 5px 0px;
	 padding: 10px;
	 width: 456px;
	 display: inline;
	 float:left;
	 background-image:url(content_gradient.jpg);
}

#content a:link, a:visited {
	color:#0066CC;
}

#rightcolumn { 
	 color: #333;
	 border-left: 1px solid #ccc;
	 border-right: 1px solid #ccc;
	 border-bottom: 1px solid #ccc;
	 background-image:url(col_gradient.jpg);
	 margin: 0px 0px 5px 0px;
	 padding: 10px;
	 height: 900px;
	 width: 196px;
	 float: left;
}
#footer { 
	 text-align:center;
	 width: 900px;
	 clear: both;
	 color: #878787;
	 border: 1px solid #ccc;
	 margin: 0px 0px 10px 0px;
	 padding: 10px;
	 height:35px;
	 font-size:12px;
	 background-image:url(footer_gradient.jpg);
}


#footer a:link {
	color:#0066CC;
	text-decoration:none;
}

#footer a:visited {
color:#0066CC;
text-decoration:none;
}

#footer a:hover {
	color:#006699;
}


	
#menu3 {
	width: 200px;
	border:1px solid #BCD2E6;
	border-style: solid solid none solid;
	}
	
#menu3 li a {
  	height: 24px;
	text-decoration: none;
	}	
	
#menu3 li a:link, #menu3 li a:visited {
	color: #8BADCF;
	display: block;
	background:  url(menu3.gif);
	padding: 8px 0 0 10px;
	}
	
#menu3 li a:hover {
	color: #627EB7;
	background:  url(menu3.gif) 0 -32px;
	padding: 8px 0 0 10px;
	}
	
#menu3 li {
	list-style:none;
}

	
	#menu3 ul {
	padding-top:0px;
	margin-top:0px;
	padding-left:0px;
	margin-left:0px;
	margin-bottom:0px;
}

#description {
font-size:10px;
color:#006699;
}

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.