|
CSS - I'm Not Sure What The Problem Is, Maybe <div> Or Js Related
***SOLVED****
A mod can delete this if you like Similar TutorialsI 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? 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. 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 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! 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? 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. Hello all, Apologies to be asking for help on my first post, but I've scoured the internet looking for what is probably a quick fix but without the terminology I'm losing hours - time to ask for help! my site is englas.pl and in forefox it's fine. In ie8 it seems to be fine as well, the problem is with ie 6&7. The CSS validates according to the w3c site. (Sorry, can't add urls as i'm a new user) ie6&7 'cuts' off the bottom section of text where the container meets menu-bottom-bkg. At least this is what is visibly the case when you look at the webpage. The custom div look like this: #container { background: #FFF url(../images/bkg_container.png) repeat-y; min-height: 100%; width: 1190px; margin: 0 auto; padding: 0 14px 0 14px; } #header { background: url(../images/bkg_header.png); height: 127px; width: 1160px; margin: 0; padding: 15px 0 0 30px; } #menu-top-bkg { background: url(../images/bkg_menu_top.png) no-repeat left top; height: 128px; width: 1190px; margin: 0 0 -128px 0; } #wrapper { overflow: auto; background: url(../images/bkg_menu.png) repeat-y left; min-height: 500px; width: 1190px; margin: 0; padding: 0; } #menu { float: left; background: none; min-height: 370px; width: 159px; margin: 0; padding: 110px 0 0 0; } #content { float: right; background: url(../images/bkg_content.png) no-repeat right top; min-height: 400px; width: 763px; margin: 0 0 0 25px; padding: 15px 243px 10px 0; } #menu-bottom-bkg { background: url(../images/bkg_menu_bottom.png) no-repeat; height: 141px; width: 1190px; margin: -111px 0 0 0; } #footer { background: url(../images/bkg_footer.png); height: 100px; width: 1190px; margin: 0; padding: 16px 0 0 0; } I've gone through the html and i can't find any evidence of it being this, so i'm hoping that the css work above doesn't comply with something in the ie6&7 coding spec. I've read the guidelines to posting, so I've edited the post as much as possible to be helper friendly! Many thanks to all, doodlebug Hi all...I am simply trying to create a header (colored bar). Every thing is fine, even in IE 8 but when it comes to IE 6, the bar does not appears. The code is simple CSS code is Code: #css
{
position:absolute;
top:0px;
height:30px;
right:0%;
left:0%;
background-color:#805670;
border-style:solid;
border-width:thin;
border-color:#805670;
padding-top:12px;
}
and I have just added this line in my .php page Code: <div id="mybio"></div> What can be the problem?? 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? Need to know how the pull down menu and a browse button could take a style like http://www.discovertravel.no/ i tried to make it but it did not work on firefox... so can anyone help me to make this style coz it appears well in firefox. So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem. I have tried so many hacks. And now I am at a loss of ideas,time and mind. the site is woodbuiltright com / index-alpha1 php It seems the "E-Page" Div does not expand to contain everything. I have tried clearing divs but I must be missing something. Thanks Ok i want more than one div on the same line.... but this code isnt working. My divs are formatted to look like tables... just so you know. Code:
<center>
<div class="top">
<div class="header">
Header, Yo!
</div>
</div>
<div class="bg">
<div class="left">
<div class="header2">
Yo, Fool! Title!
</div>
</div>
<div class="main">
<div class="header2">
MAIN TITLE HERE
</div>
</div>
<div class="right">
<div class="header2">
Yo, Fool! Title!
</div>
</div>
</center>
hello ! can someone tell me what i have wrong in CSS i can see it in FF okay, but IE makes me worry : http://www.autobazar.eu/sk/wallpapers2.php thanx for your reply I have created a nav bar with css using the widely distributed '<ul>' coding. The problem I am having I think is with the anchor tags. The look of the nav bar is fine but depending on the float position the anchor tag immediately next to it won't follow the css. Here is the css.. body { margin:0; padding:0; } div.container { text-align:center; } div.center { margin-top:20px; margin-left:auto; margin-right:auto; width:800; text-align:left; } div.left { float:left; width:100; height:500; background-color:#007700; } div.right { float:right; width:130; height:500; background-color:#e8e8e8; font-size:10pt; } div.header { clear:both; width:40%; } div.footer { clear:both; margin:0; width:100%; } ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a.topmenu { float:right; width:5em; height:2em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } a.topmenu:hover { background-color:#005500; color:#e8e8e8; } a.topmenu:visited { float:right; width:5em; text-decoration:none; color:#005500; background-color:#e8e8e8; padding:0.2em 0.6em; border-right:1px solid #005500; } li { display:inline; } a.leftmenu { color:#ffffff; text-decoration:none; } a.leftmenu:hover { color:black; } a.leftmenu:visited { color:#ffffff; text-decoration:none; } and here is the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="newstyle.css"/> </head> <body> <div class='container'> <div class='center'> <img src="fdat_logo_short.jpg" width=250 /> <ul> <li><a class='topmenu' href="contact.php">Contact Us</a></li> <li><a class='topmenu' href="about.php">About Us</a></li> <li><a class='topmenu' href="services.php">Services</a></li> <li><a class='topmenu' href="news.php">News</a></li> <li><a class='topmenu' href="home.php">Home</a></li> </ul> </div> </div> </body> </html> Hello all. I've just started learning to code because I recently started a business and needed a website. I'm having a few issues. I'm using the 960 Grid System plus a scroller found at queness.com I can't post links here apparently, or I'd show you what I'm using. The page renders fine in Firefox (Mac & PC) Safari (Mac & PC) IE 8 and Chrome. IE 6 is screwed beyond understanding. IE 7 Pushes me off the screen and links don't work. And Opera squeezes my text together. I have screen shots if necessary. Here is a link to the site in question: ohmyyoga.com I inserted a redirect script for IE 6-7. So you'll be redirected to my old site if you try the regular URL from either of those browsers. For the purposes of this, I've copied the site W/O the redirect. The link is test2.ohmyyoga.com The site validates CSS and XHTML. I'm sure it's something super simple. I'm just brand new to all of this. Any help would be appreciated. Cheers |
|||||||