|
CSS - Dhtml Related Css Problem In Ie6
I have a problem in IE when dynamically adding elements through the DOM, the problem is basically:
if i add a element(a div btw), with document.createElement and use setAttribute("class", "my_CSS_classname") to apply styling, the styling doesnt get applied when viewing it in IE6 (it works fine in firefox). Does IE force you to style dynamic elements though the .style proberty or wah? Similar Tutorials***SOLVED**** A mod can delete this if you like Hey, I got a webpage that looks like it should in both IE 6.0 and firefox 2.0. Now i went testing it in opera and it has a problem with some div positions. Here is how it looks in firefox and IE: Internet explorer:http://img442.imageshack.us/img442/8176/iexz2.jpg firefox:http://img361.imageshack.us/img361/5503/firefoxqc0.jpg And this is how it looks in Opera 9.10:http://img442.imageshack.us/img442/5125/operauw7.jpg The buttons signout, new contact and contact list are shifted to the low. I use this code on every page do display the header with the buttons ( the red part is the div with the buttons in it. Code:
<body>
<div class="containingTitles">
<div class="titleNavDiv">
<b>Hello, stefan.</b>
</div>
<div class="titleContentDiv">
<form action="search_contact.php" name="search" id="search" method="get">
<div style="float: left; width: 35%; margin: 0%; padding: 0%;">
<input type="text" style="width: 50%" name="sq" value="" id="sq">
<input type="submit" name="s" value="Search" id="s">
</div>
</form>
<form name="new_contact" id="new_contact" method="get" action="new_contact.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="nc" value="New Contact" id="nc">
</div>
</form>
<form name="contact_list" id="contact_list" method="get" action="contact_list.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%;">
<input type="submit" name="cl" value="Contact List" id="cl">
</div>
</form>
<form name="logout" id="logout" method="get" action="logout.php">
<div style="float: left; width: 20%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="lo" id="lo" value="Sign out">
</div>
</form>
</div>
</div>
<div class="navigationDiv">
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username1</a></div>
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username2</a></div>
<div class="selectedContact"><a href="contact_info.php?contact_id=102">Username3</a></div>
etc.
</div>
<div class="contentDiv">
----- contents of the page -----
</div>
</div>
And belowis the css code i use to float the divs into position. And here you can see the division of the pages and which class belongs to which div: http://img353.imageshack.us/img353/1503/layoutai3.jpg css Code: Original - css Code body{ margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; background: url(background.jpg) 22% 0; } .containingTitles{ float: left; width: 100%; margin: 0%; padding: 0%; background-color: #4D3D4D; color: white; overflow: hidden; } .titleNavDiv{ float: left; width: 20%; margin: 0%; padding-left: 2%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .titleContentDiv{ float: left; width: 77%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .navigationDiv{ float: left; width: 22%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #FFFFFF; background-color: #4D3D4D; } .contentDiv{ float: left; width: 76%; margin: 0; padding-left: 2%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #000000; background-color: #BFACBF; }
hope you can tell me why this happens. Thanks in advance. right now i have a page that has an iFrame and three tabs, when you click on each tab, it loads a different page into the iFrame. this is done as the data on the rest of the page is randomly generated via PHP.... so i cant have a refresh on the entire page... is there a way to hide all three sections of info the tab calls up in a "display:none" div? and then bring it up upon the tab being clicked? thanks. I'm running into a problem with an interface that I'm developing. Basically it's a collapsible treeview using DHTML and the display property to 'open' and 'close' tables. I need to have several of these tables side by side but without overflowing horizontally so that the user has to scroll horizontally. The best way I've found was to float the elements so that any overflowing tables would be wrapped. Example: [] [] [] [] [] [] [] [] [] [] [] [] However, a problem arised when I 'open' and 'closed' the tables repeatedly (three times or more). The other tables started to wrap immediately after the first table (the one I was opening and closing). So that all the tables lined up in a single column eventually and not flowing as they should've been. Example: [] [] [] [] [] Upon refreshing the page, everything flows as it should. Please let me know if I'm unclear in my description. i want to be able to have a site that has a table with some info, and a button next to it.. when the button is clicked on, a CSS pop-over opens and allows the person to type text, and submit... i can deal with the submit and php and such... i just need to know how to make the DHTML/CSS work for me. I have a website were the dhtml menu is driven from a seperate file. I have applied a style sheet to my page. The only problem is the style sheet is applied to my dhtml menu which i dont want. Any suggestions greatly appreciated. hi there! well i have been working on how xoops cms ( http://www.xoops.org ) and sothink dhtml menu (Sothink Dhtml Menu ) can be made to work, i have been successful to some extent. the issue When i use the sothink dhtml menu on mywebsite: my Website the submenu width is all over the place. ok here is what i got so far 1) my website: http://ayubians.com/thesite/index.php with default theme, of sev_zero style css file : Sev_zero Style.css 2) Scroll down mywebsite and on left side you will see a block called themes. Change the theme to 7dana-jane a new look website will appear: with working DHTML menu style css is: 7dana-Jane Style.css I want to use this menu with : sev_zero theme kindly tell me which what changes do i need to bring in my sev_zero theme to make the dhtml menu work! Regards billyvision P.S::: If you intend to try this on your own xoops website: please put the following codes: in head of ur theme html document add: Code: <script type="text/javascript" language="JavaScript1.2" src="http://www.ayubians.com/tasveer/stm31.js"></script> where as in body of ur theme html add: Code: <script type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu0283",430,"http://www.ayubians.com/tasveer","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0],this);
stm_bp("p0",[0,4,0,0,2,3,0,7,100,"",-2,"",-2,50,0,0,"#999999","#FFFFF7","",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Menu Item 2","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFF7",0,"#B5BED6",0,"","",3,3,1,1,"#FFFFF7","#000000","#000000","#000000","8pt Verdana","8pt Verdana",0,0]);
stm_aix("p0i1","p0i0",[0,"Menu Item 3","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7]);
stm_bpx("p1","p0",[1,4]);
stm_aix("p1i0","p0i0",[]);
stm_aix("p1i1","p0i0",[0,"Menu Item 1"]);
stm_aix("p1i2","p0i1",[]);
stm_bpx("p2","p0",[1,2,0,0,2,3,0,0]);
stm_aix("p2i0","p1i1",[]);
stm_aix("p2i1","p0i0",[]);
stm_aix("p2i2","p0i0",[0,"Menu Item 4"]);
stm_aix("p2i3","p0i0",[0,"Menu Item 3"]);
stm_ep();
stm_aix("p1i3","p2i2",[]);
stm_ep();
stm_aix("p0i2","p1i1",[]);
stm_aix("p0i3","p2i2",[]);
stm_aix("p0i4","p0i1",[0,"Menu Item 5"]);
stm_bpx("p3","p1",[]);
stm_aix("p3i0","p0i0",[]);
stm_ai("p3i1",[6,1,"#000000","",-1,-1,0]);
stm_aix("p3i2","p0i1",[0,"Menu Item 1"]);
stm_bpx("p4","p2",[]);
stm_aix("p4i0","p0i0",[]);
stm_aix("p4i1","p0i0",[0,"Menu Item 1","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#fffff7",0,"#66ffcc",0,"","",3,3,2,5,"#00cc33 #0099ff #00ff99 #00ccff","#00ff99 #00ccff #00cc33 #0099ff"]);
stm_aix("p4i2","p3i1",[]);
stm_aix("p4i3","p2i3",[]);
stm_ep();
stm_ep();
stm_ep();
stm_em();
//-->
</script>
Other resources: Sev-Zero theme http://www.xoops.org/modules/library/viewcat.php?list=S&start=10 7dana-Jane theme: http://www.7dana.com/download/pafiledb.php?action=file&id=33 Your help in this regard will be highly appreciated billyvision I have a problem with a tooltip i'm trying to make look decent in both browsers, IE and firefox. it looks beautiful in firefox the way i have it. but in IE it stick the image way above the tooltip and the padding is a bit funky. Code: <img src="eq2icons/"<?=$icon?>" class="itemicon" width="42" height="42"><table class="ttb" width="350" cellspacing="0" cellpadding="0"><tr bgcolor='#FFDE2E'><td colspan=2><span class=quality><?=$itemname?></span></td></tr><tr><td width=88%><?=$text1?></td><td width=12%></td></tr><tr><td colspan=2><?=$text2?></td></tr><tr><td colspan=2><?=$text3?></td></tr><tr><td colspan=2><?=$text4?></td></tr><tr><td colspan=2><?=$text5?></td></tr><tr><td colspan=2><?=$text6?></td></tr><tr><td colspan=2><?=$text7?></td></tr><tr><td colspan=2><?=$text8?></td></tr><tr><td colspan=2><?=$text9?></td></tr><tr><td colspan=2><?=$text10?></td></tr></table> CSS: Code:
span.quality { color: #000000; font-weight: bold; padding: 2px;}
span.quality1 { color: #FFCC00; font-weight: bold;}
span.quality2 { color: #21E626; font-weight: bold;}
table.ttb {
background-color: #282828;
color: #FFFFFF;
margin: 0px;
padding: 1px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
font-size: 11px;
}
table.ttb a:link { color: #8888FF; }
table.ttb a:visited { color: #7777EE; }
table.ttb tr {
padding: 3px;
}
table.ttb h6 {
font-size: 10px;
}
.itemicon{
float: right;
padding: 2px;
margin-top: 12px;
}
Here the site in question. (yes, i'm sorry i do require a signup to view the data to track and eliminate scrapers/data miners. Free signup though) http://www.eq2archives.com The tooltip is currently shown if you go to "quests by zone" then choose a zone and choose a quest with an item reward. ill post a few shots in IE and Mozilla thanks in advance =) I'm trying to build a window script. To start with I'm just trying to finalize the HTML needed for the window. You'll find my attempt below. The first one is before adding close and resize elements. It seems an ok starting point. The 2nd one shows my attempt to add the close & resize elements. The difficulty is in making them line up with the right hand side of the window and making the top one not take up an extra line. The problem is that I don't want to specify the size of the 'window' div because I want it to expand to fit the content. Because there is no width set any attempt to align right ends up aligning with the right hand side of the browser window. Anyone got some ideas as to how I deal with this? Am I approaching it wrong? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Document</title>
<style type="text/css">
html, body
{
margin: 0px;
}
.window
{
background: gray;
position: absolute;
border: 1px solid black;
top: 20px;
left: 20px;
}
.ex2
{
left: 300px;
}
.topBar
{
position: relative;
color: white;
margin: 2px;
}
.ex2 .topBar
{
background: none;
}
.closeButton
{
width: 16px;
height: 16px;
background: red;
}
.window .content
{
width: 200px;
height: 200px;
background: white;
overflow: auto;
}
.bottomBar
{
position: relative;
}
.ex2 .bottomBar
{
background: none;
}
.resizeHandle
{
background-color: green;
height: 16px;
width: 20px;
}
</style>
</head>
<body>
<div class='window'>
<div class='topBar'>
Title
</div>
<div class='content'>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
<div class='bottomBar'> </div>
</div>
<div class='window ex2'>
<div class='topBar'>
Title <div class='closeButton'> </div>
</div>
<div class='content'>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
<div class='bottomBar'><div class='resizeHandle'> </div></div>
</div>
</body>
</html>
Hi, I spend many hours on the net to fix this problem, hope you can help me. I made a site with 3 frames; header, menu and main. In the menu I made a table (width and height 100%), with rows with one cell each. In each cell is a link. With some links I want to choose between more pages. So I found a nice dhtml menu, witch looks like http://dhtml-menu.com/examples/dhtml-menu-ex2.html. Everything works fine, ecxept the position of the submenus. Here is some HTML: <table><tr><td> <a href="#" target="#" onMouseOver="hideAll(); showLayer('layer1'); stopTime();" onMouseOut="startTime();">Name</a> </td></tr></talbe> ... <div id='layer1'> <a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name</a><br> <a href="#" target="#" onMouseOver="stopTime();" onMouseOut="startTime();">Name2</a><br> </div> And here is some CSS: #layer1, #layer2, #layer3, #layer4 { position: absolute; z-index : 90; visibility : hidden; width : 150pt; left: 10pt } #layer1 { top : 0pt } Questions: 1 is it possible to position the submenu exactly next (or under or above)to the corresponding main menu item, I think it should be with relative positioning. 2 since I use frames and the menu takes the left frame, is it possible to position this submenu on the right side of the main menu item, i.e. on top of the main frame, or in the main frame. 3 I read a lot about this and many people say that a page like this should be made using tables (or CSS-P?), instead of frames. If I have to or want to change it, does that mean that I have to write a table structure in every page and when I want to change a menu item, I have tot change that in every page? Hope some can help me! Thanks to the forum I've worked out a prior issue but 2 remain in regards to the secondary navigation bar. 1. Width - If I use a value of 25% for the pages with 4 sub-links (i.e. "The Music" main) it spans the full width of the right column but in IE6 it pushes the box below it down abot 10px. In OP7, NS6, NS7 & Mozilla1.7 it displays properly. 2. a:hover - I can't seem to figure how to make the hover effect respond to mousing over all parts of the box. It only activates when hovering over the text portion. Works properly in the main-nav but not for the sub-nav (note - this is also ONLY IE related). Really not important unless it is an easy fix. I have tested this site in IE6, NS6.2, NS7.1, OP7.5, Moz1.7. I know v4 browsers are a lost cause but if you could confirm success/failure in others I would appreciate it. Regards, Golem2 I have a gap between my <td> data. HTML Code: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="11" height="31"><img src="/images/header_left.jpg" width="11" height="31" border="0" alt="" /></td> <td class="header" height="31"><? echo $query_data[3]; ?> <? echo $query_data[0]; ?></td> <td width="16" height="31"><img src="/images/header_right.jpg" width="16" height="31" border="0" alt="" /></td> </tr> <tr> <td class="smaller" colspan="2"><b><? echo $query_data[1]; ?></b><br /> <? echo nl2br($query_data[2]); ?><br /> and so on... CSS Code:
.header {
background-image: url(http://www.mysite.com/images/header_fill.jpg);
background-repeat: repeat-x;
}
This displays nicely in Firefox et al. But IE sucks so... Any suggestions? Please and thanks. this is my site i am converting to semantics (starting with the topleft VIPs Area login). i have some questions regarding some of my unique/weird cases: for stats like " * Games Played: 119 * Votes Casted: 64 * Comments Added: 56", i have grouped sets of them into <p>aragraphs, but instead of using line breaks (which is bad, apparently), i am trying to use <ul>s, just removing the bullet image and the indent. well, the indent is not going away. by making the margin-left:0em, does nothing, the padding-left does except it becomes out of line :S so it looks like Code: <p>
<ul class='nobullet'>
<li>Games Played: <b><?php echo $user['totalgames']; ?></b></li>
<li>Votes Casted: <b><?php echo $user['totalratings']; ?></b></li>
<li>Comments Added: <b><?php echo $user['totalcomments']; ?></b></li>
</ul>
</p>
should i be using <ul>s or something else to avoid the <br />? (i will have more questions, but this is a start) thanks a ton in advance! I have a basic layout that I'm working on right now (a gif is attached), but I can't figure out the best way to code it. I know the corners have to be gif images. That's easy enough. What I'm wondering, is whether the top and side sections can be div's with corresponding borders or if I'm going to have to use images all around the center div. I'd really like to use as little bitmap imagery as possible just to get used to working conservatively instead of just laying everything out with images. I'm still new to CSS layouts, and I've seen some good tutorials, but not much related to escaping the blocky look traditionally associated with them. I know a list apart has a good article on rounded corners, but it didn't seem to apply here. Thanks for your time I am using wordpress for my blog/site. I am using Freshnews theme from woothemes as the theme for the blog. Here is the link: demo.woothemes.com/freshnews The font is not that good and it is way too small and the spacing is bad (too congested). How do I change the fonts, size, spacing (line and paragraph) throughout the blog. I know I would have to change it somewhere in the stylesheet. But where exactly and how? And what are the ways to get this done? Should I install a font somewhere? Should I use webfonts (like google webfonts)? What is the advantage in using this? or what are the other ways? I was just wondering if any knew any good books on CSS (especially how it pertains to webdesign). One good example is Eric Meyer on CSS. Thanks so much! Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hi, i have a problem with a layout of a website in IE7 when i open the website first the layout is broken, when i resize the window the layout is how it should be, anyone come accross this before? |
|||||||