CSS - Javascript Redraw Messes Style In Ie

problems with positions divs and images within them ...

when I have a positioned div, and I insert an image, or another div with image inside, it makes the div too high, and not sure how to get it straight.

Code:

	?>
           			<div id="cmp" style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace  ?>px; top: <?=(($startrow*$y_scale)+($cmp_y)*$y_scale)-$offy ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace ?>; height: <?=$y_scale+1 ?>; background-color: <? if( $cmp_row[ $j ] != null ) echo $cmp_row[ $j ]->type->getcolour( -1, $connect );  ?>; border: solid black 1px; z-index:<?=$i ?> " >
           				<div style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace  ?>px;  width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace-20 ?>; height: <?=$y_scale ?>;" align="left" width="20px" height="<?=$y_scale ?>px">
           					<? if( $cmp_row[ $j ] != null ) echo substr( rtrim( $cmp_row[ $j ]->getName() ), 0, $maxchars  ); ?>
           				</div>
           				<div style="position: absolute; left: <?=$cmp_right*$x_scale+$offx+$leftcolwidth-20  ?>px; width: <?=20 ?>; height: <?=$y_scale ?>; align: right" >
           					<img  src="images/<?=$icon ?>" alt=<?=$alt ?> border="0" <?=$mousey ?>>
           				</div>	
           			</div>
           		
           		<?

the code above has got a bit messy with trying to fix the problem...


Cheers
Adam

Hi guys,

This is another standard "why won't it work in IE"-post. I'm making a multi-column news-style site (<spam>first link in my signature</spam>), and IE screws up the widths. The layout is basically three .col's which are floated left, and a #menu on the right.

Here's the relevant css:

Code:

#menu
{
    float: left;
    margin-left: 0%;
    width: 20%;
    line-height: 120%;
    padding: 2%;
    font-size: larger;
}

.col
{
    float: left;
    width: 24%;
    font-size: 0.8em;
}

.col ul{ 
    list-style-type: none; 
    padding-left: 0;
}


.col .story{
    background: #F5F8ED;
    padding: 0 ;
    margin: 1%;
    border: 1px solid #71804D;
    color: #333;
    text-align: justify;
    
}

Here's some example html:

Code:

<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>
<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>
<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>

<div id="menu">
    <div id="menu_title">
        <h1> title </h1>
    </div>

    <ul id="navbox">
        <li> ... </li>
    </ul>

    ... etc

</div>        

The problem is that IE renders the .col's very narrowly, and has some major space vertically between them. This means that #menu gets pushed down below the .col's. Can anyone point me in the right direction to fix this width issue?

Thanks,
Simon

Hi

I recently moved a site "http://www.nikkilamann.com/index.php" and after moving it the CSS is all messed up (style.css)
The scroll frame box is not centred anymore and the scrollbar is supposed to be white in colour and there is some funny box next to "fashion" on navigation. Site is totally messed up after move.

Does anybody know what could cause this?

[edit] New question, see http://forums.devshed.com/css-help-...tml#post1377956 below for details. Thanks!

--------- old question ------------

Hi, I'm trying to get some checkboxes aligned in a form that i'm creating. I can get it to work perfectly in Firefox, but not in IE6.
In Firefox:

In IE6:

I don't care so much about the height/spacing issue as much as the left/right reversal. the relevant css(i think) is here Code:

#application p {text-indent: 0px;}

#application div.col1 {width: 50%; float: left;}

#application div.col2 {width: 50%; float: right;}

#application label {
  float: left;
  width: 70px;
  text-align: right;
  height: 2em; line-height: 2em;
}

#application .label_checkbox {width: 100%;}

#application .label_checkbox p{
  clear: both;
  float: none;
  position: relative;
}

#application .label_checkbox input {
  position: absolute;
  top: 1px;
  left: 1px;
}

#application .label_checkbox label {
  display: block;
  margin-left: 22px;
  text-align: left;
  width: 160px;
}

and relevant xhtml: Code:

<div class="label_checkbox">
  <div class="col1">
    <p><input type="checkbox" id="ch" value="Classroom Helper" name="roles" /><label for="ch">Classroom Helpers</label></p>
    <p><input type="checkbox" id="lt" value="Literacy Tutor" name="roles" /><label for="lt">Literacy Tutor</label></p>
    <p><input type="checkbox" id="ta" value="Technology Assistant" name="roles" /><label for="ta">Technology Assistant</label></p>
    <p><input type="checkbox" id="ce" value="Campus Enrichment" name="roles" /><label for="ce">Campus Enrichment</label></p>
    <p><input type="checkbox" id="ote" value="One-Time Events" name="roles" /><label for="ote">One-Time Events</label></p>
  </div>
  <div class="col2">
    <p><input type="checkbox" id="frn" value="Family Reading Night" name="roles" /><label for="frn">Family Reading Night</label></p>
    <p><input type="checkbox" id="rad" value="Read Aloud Day" name="roles" /><label for="rad">Read Aloud Day</label></p>
    <p><input type="checkbox" id="dd" value="Dictionary Day" name="roles" /><label for="dd">Dictionary Day</label></p>
    <p><input type="checkbox" id="gs" value="Guest Speaker" name="roles" /><label for="gs">Guest Speaker</label></p>
    <p><input type="checkbox" id="other" value="Other" name="roles" /><label for="other">Other</label></p>
  </div>  
</div>

you can see the page at http://oaklandheroes.org/beta/application.php. Thanks for the help!

Hi all,
with your great help, the pages looks now almost fine in both IE and FF.
But, the photogallery looks much more better with all the photos bordered, like on this screenshot from FireFox. Unfornutely, when you check it in IE, all the images are messed around in a totally upredictable way (screenshot from IE). It was the same using vertical-align, but it's not so essential.

So, is there please any solution to handle this?
And is there a way how to center floating <div> within his parent <div> ("Unfortunately, there is no easy way to center floated elements." - But is there any way)? The red bordered div is floating, including all the images put in <div>, which are floating too, I'd love center the red bordered <div> inside the green bordered one. To be specific, I don't insist on the red bordered div to be floating, I just looking for a way how to center all the images inside the green bordered <div>.

Here are CSS used: Fotogalerie.css, Web.css.

Webdesign isn't really easy thing to learn , if all would work how it's supposed to work, it'd wonderful, but IE makes it all 3times harder , I really start to not to like him (more than before )

Hey, I'm having a problem changing the background of a text input field to white. The problem seems to go away when I remove the javascript...I know next to nothing about javascript. Any ideas?

Code:

<label for="email">	
			<input size=30 id="email" name="iemailaddress" value="Enter your email address here" onFocus="functionEmpty(this.form)" onBlur="emptyFill(this.form)" onKeypress="subEnable(this.form)">
		</label>

Code:

input {background-color:white;}

Hi All,

How can i apply style to following table? Class attribute is not working. following is the code.

function links(){
var xmlDoc=new ActiveXObject("Microsoft.xmlDOM")
xmlDoc.async="false";
xmlDoc.load("ticker.xml") ;
xmlObj=xmlDoc.documentElement;
nodes=xmlDoc.documentElement.childNodes;
document.write("<table border=1 align=left >");
for( var count = 0; count<nodes.length; count++){
document.write("<tr>");
document.write("<td>");
document.write("<a href='" + (xmlObj.childNodes(count).getAttribute('URL')) + "'>" + (nodes.item(count).text) + "</a><br>");
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
Please guide me for the same.
Thanks in advance

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

Take a look <link removed... no longer valid>

If you have I.E. and Firefox available... notice the differences... Take a look at the source... I.E. appears to display this "more correctly"... it's certainly more visually appealling. I want the border to go all the way around the calendar in FF (it already does in I.E.), and in FF the first week is messed up (probably has something to do with no information within the divs, but why does it do that?

Bryan

<edit>I'd also like to fix the gap on the right side between the days and the calendar border, but just making it 15% for the last one doesn't work.</edit>

How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example

Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?)

on my site I have a list with the UL Class of threads.

I am not good with CSS at all I have this

Code:

#threads {
  padding:0;
  margin:0;
  } 
#threads li {
	list-style:none;
	border-bottom:1px dotted #ccc;
	display:block;
	padding:2px 0px 2px 13px;
	background:url(images/sub.png) no-repeat 0 0px;
	}

not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling.

http://demo.colorlabsproject.com/?theme=arthemia-premium

thank you for attempting

I did a web page for a company and it looks fine in ie7 where I tested it.

The problem is when viewed in IE6 its like it ignores the sizes I put in.

The box appears too big in IE6 and is the propr size in IE7.
Is there any way to fix it so it would look the same in IE6 as IE7?

I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>?

Code:

table.navigation tbody tr.odd {
	background: #252525;
	color: #fff;
	}
table.navigation tbody tr.odd td {
	background: #252525;
	color: #fff;
	}

Hello,

In the css below, why I can't set it on the same time?
Code:

    background: #FFF url(../images/main_bottom.gif) no-repeat  bottom ;
    background: #FFF url(../images/main_top.gif) no-repeat  top ;