CSS - Weird Alignment In Ie That Only Appears Sometimes

I have a data table within my content div. It appears fine on my screen in several browsers, however, coworkers have a large (full screen) of white space where the table should be. They have to scroll down a full screen to get to the table.

I have everything on the site set up using CSS. The table contains the dates, times and municipalities for Trick or Treat events.

I have a vertical-align:top on the table.

Here is the CSS:
Code:

table#halloween {
    margin-left: 2px;
	text-align:center; margin-right:auto; width:100%;
	vertical-align:top;
	font-size:12px;
	padding: 3px;
	width:100%;
	border: solid #000000;
	}	
	
td.halloweencell {
	border-color: #000; 
	border-style: solid;
	}

Here is a sample of the HTML :
Code:

 <table width="100%"  id="halloween" summary="Table of municipalities, date of trick or treat and times for trick or treat">
                       <tr>
                         <th width="50%"  class="rowcoloryellow"><strong>MUNICIPALITY</strong></th>
                         <th width="20%"  class="rowcoloryellow"><strong>DATE</strong></th>
                         <th width="30%"  class="rowcoloryellow"><strong>HOURS</strong></th>
                       </tr>
                       <tr>
                         <td colspan="3">&nbsp;</td>
                       </tr>
                       <tr>
                         <td class="halloweencell" width="50%">City of Hartford </td>
                         <td class="halloweencell" width="20%">October 30th  </td>
                         <td class="halloweencell" width="30%">4:00 p.m. - 6:00 p.m.   </td>
                       </tr>
                       <tr>
                         <td class="rowcolororange">City of West Bend </td>
                      <td class="rowcolororange">October 30th </td>
                         <td class="rowcolororange">4:00 p.m.- 6:00 p.m. </td>
                       </tr>
                       <tr>
                        <td class="halloweencell">Town of Addison </td>
                         <td class="halloweencell">October 30th </td>
                         <td class="halloweencell">3:00 p.m. - 6:00 p.m. </td>
                       </tr>
                       <tr>
                         <td class="rowcolororange">Town of Barton </td>
                         <td class="rowcolororange">October 30th  </td>
                         <td class="rowcolororange">4:00 p.m. - 6:00 p.m.  </td>
                       </tr>
                       <tr>
                         <td class="halloweencell">Town of Erin </td>
                         <td class="halloweencell">No Set Schedule </td>
                         <td class="halloweencell">&nbsp;</td>
                       </tr>
</table>

It is located at: www.washingtoncountysheriffwi.org/halloween.php

Any suggestions?

Thanks!

Helen

Hello, I a horizontal navigation within <ul><li> tags. Here is the css for the navigation <ul><li> and the first button.

Code:

#nav li{
display:inline;
}


a#aboutrollover { 
background-image:url(images/nav/about_off.gif); 
background-repeat:no-repeat;
width:77px;
height:18px;
display:block;
}

a#aboutrollover span { display:none; }

a#aboutrollover:hover { 
background-image:url(images/nav/about_on.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
}
 

You'll notice that for the button, I have display set to "block." Well, if I set it as "inline" or don't put a display, the span text shows. But the block makes the <li>'s stack upon each other.

Here's the navigation code :: Code:

<ul id="nav" name="nav">
<li> <a onclick="updateWithAbout()" href="#" id="aboutrollover"><span>About Cats Meow</span></a> </li>

<li> <a onclick="updateWithGuest()" href="#" id="guestrollover"><span>Guest Pics</span></a> </li>

<li> <a onclick="updateWithStaff()" href="#" id="staffrollover"><span>Cats Staff</span></a> </li>

<li> <a href="#" id="webcamsrollover"><span>Cat's webcams</span></a> </li>

<li> <a onclick="updateWithParties()" href="#" id="partiesrollover"><span>Cat's Meow Parties</span></a> </li>

<li> <a onclick="updateWithContact()" href="#" id="contactrollover"><span>Contact Cats Meow</span></a> </li>
</ul>

I also tried display: run-in; and display:compact; instead of display:block;. But the first 2 options would make my navigation dissapear.

Here is the site:: http://www.catskaraoke.com/index2.php

Is there a simple solution to displaying the navigation horizontally? I know I can make it work, but it's a bit of excessive code for something that should be easy.

thanks

Hi,

I've a problem with a layout, I don't understand why div container appears smaller than input field contained.

PHP Code:
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css" >
      body {
        margin           : 10px;
        background-color : gray;
      }
      .container{
        background-color : orange;
        border           : 3px solid black;
        padding          : 40px;
      }
    </style>
  </head>
  <body >
    <div class="container">
      <input name="prova" value="Look to the right -----> -----> -----> -----> -----> " type="text" style="width:2000px;">
    </div>
  </body>
</html> 





ps. Verified with Firefox 2.0.0.4 and mozilla 1.7.13


Any hint?

Hi all,

I cannot figure why last two form inputs at the following website appears wrong near the end.

I also included a screenshot.

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

Hi,

I have some links in a <ul> list. I have set them to have a background image using CSS. When I rollover the links using IE6 the egg timer appears briefly. No such problem with FF or Opera.

Anyone come across this before?

Here's my CSS:

Code:

#section1 div ul{
padding:0;
margin:0;
}
#section1 div li{
list-style-type:none;
margin:15px 0 0 0;
}
#section1 div li a{
color:#fff;
text-decoration:none;
padding-right:20px;
background: transparent url(/newsite/images/square.gif) right center no-repeat;
display:block;
}

I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this?

A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on.

image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image.

I really appreciate your help.

The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that.

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
float:left;
width:89.091em;
list-style:none;
line-height:1;
background:#b6791e;
font:11px Verdana, sans-serif;
font-weight:bold;
padding:0;
margin:0 0 .5em 0;
}

#nav a {
display: block;
width: 11.1em;
w\idth: 10.1em;
color: #FFFFFF;
text-decoration: none;
padding: 0.75em 0.5em;
}

#nav a.daddy {

}

#nav li {
float: left;
padding: 0;
width: 11.1em;
position:relative;
}

#nav li ul {
position: absolute;
left: -999em;
height:auto;
width: 14.7em;
w\idth: 14.5em;
font-weight: bold;
margin: 0;
padding:0;
background:#FFFFFF;
color:#769841;
border: 0.1em solid #769841;
}

#nav li ul a:hover{
color:#ffff30;
background:#769841;
}

#nav li ul li a{
color:#769841;
}

#nav li li {
padding-right: 1em;
width: 14.5em;
w\idth:13.5em;
}

#nav li:hover ul {
left: auto;
}

#nav li a:hover, nav li.sfhover a:hover{
color:#FFFF30;
}

#nav li ul li a:hover {
color:#FFFF30;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
clear:both;
}

#nav li ul ul {
margin: -3.3em 0 0 5em;
}


#nav li:hover, #nav li.sfhover {
background: #769841;
}

#nav li a:hover, #nav li.sfhover a:hover{
color: #ffff30;
}

#nav li ul a{
color:#769841;
padding:.4em;
}

Hi all,

Been having a problem that's been driving me crazy lately. On my blog www.mytechnicalinterviewexperience.com, I'm getting a small dot that's appearing right between the top of the main post area and the right sidebar. If you see the text "subscribe" at the very top of the right side bar, the dot is up and to the left with respect to that. Anyways, the dot is probably hardly noticeable to visitors, but me being extremely anal, I'd like to try and get rid of it. I notice that it has something to do with my amazon associates recommendation widget which is further down the right side appear. It only appears after the recommendations widget finishes loading. Does anyone know how to fix this?
Thanks,

MyTechIntExp

Hey everyone,

I have an odd problem.

CSS Code:
Original - CSS Code ul#admin_menu li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }

  

 ul#admin_menu li.am_item{


     float:left;


     clear:none;


     display:inline;


     border:0;


     padding:0;


     margin:0;


     width:24%;


 } 

This works...

CSS Code:
Original - CSS Code li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }

  

 li.am_item{


     float:left;


     clear:none;


     display:inline;


     border:0;


     padding:0;


     margin:0;


     width:24%;


 } 

This doesn't work... I don't understand why.

What gave it away was the display:inline; The first one displays them inline, the second displays them block and they don't get their width.

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?...

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

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

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

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.