|
CSS - Div And Style Problems.
Layout: http://65.26.50.204/ec/index.php
CSS: http://65.26.50.204/ec/stylesheet3.css What It Should Look Like: http://65.26.50.204/elementalconceptslayout9.jpg My last thread wasnt going to get a response it was too messy. Im having problems, I completely coded the layout to the best of my ability, I read up, searched on google for help, and this is what I came up with, I dont see why it wont work perfectly and flawlessly. Problems in Firefox - Please help any if you can, im begging. 1) The Spacer Line is supposed to be about 15px lower, right below the roundness in the navigation. 2) The navigations header and footer images have about a 6px margin below them, causing the text to be positioned low, and the background to expand longer, making it look like crap. 3) Theres a space between the body and footer div's. Things I Just Cant Get It To Do - Please help any, I'm getting so pissed off, I'm about 2 seconds from going back to tables permanently! 1) The background to expand 100%. 2) No font-color attribute valid anywhere? Its invalid in the code, and invalid in the css... so how do I change the font color... thats F'd up! Problems in IE - Not as important, I will fix later. 1) Almost all Firefox Errors 2) The spacer bar and navigation bar are about 20px apart. --- Please no posts to articles or anything, I have read everything, ive looked at sites source to see how they did it, and ive read tutorials on how to code layouts using divs [thats how I figured out the floating menu]. --- Thank you, it would be greatly greatly greatly appreciated if you can even help 1 thing. Similar Tutorialstake a look at www.bosszine.be, looks fine isn't it sidebar no problems at all both in IE and FF now take a look at http://www.syntra-ab.be/template.aspx, again no problem both in IE and FF but is that so? try to capture the sidebar images from IE it won't work don't take notice at the flash infobox, that's a work in a progress furthermore take a look at http://www.syntra-ab.be/helpdesk/ and notice there's suddenly a big problem in IE (much smaller boxes on the sidebar) there's clearly a rendering problem in IE with my background images in the css how can I make this work properly? any suggestions? I need a solution urgently, the new website is due this thursday and I already spent the whole day trying to find the problem and now I've found it to fix it :-) any suggestions are greatly appreciated On this page: http://www.prioritypie.f2s.com/tremaer/_location/location.htm I have a rollover menu (courtesy of Bon Rouge's tutorial) that nicely runs in a line when viewed in FF, but in IE it reverts to a vertical list. Is there a way to stop this? And why doesn't the background for the containing div show up in FF when it does in IE? I had hoped a glass of red wine would help.... 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! I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
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?) 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? 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 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 ;
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;
}
hi friends, i have a table with two columns.I have a designed td in stylesheet but it is not take effect.In the normal design view,style is effected but when runtime the changes will not take effect. And also if apply css "class" for td it wont accept instead it accept only property which are given in in style property i.e <td style="bgcolor:blue......"> My CSS is... Code:
.left_column
{
background-color:#d29b28;
width:2000px;
}
.content
{
background-color:#cccccc;
vertical-align:top;
padding-top:10px;
padding-left:10px;
line-height:5pt;
font-family:Tahoma;
}
.caption
{
background-color:Black;
color:White;
}
div.content
{
background-color:Lime;
float:left;
text-align:left;
font-size:20px;
line-height:3px;
font-family: Arial, Helvetica, sans-serif,Tahoma;
}
and my Source Code is...(Which is not take effect) Code:
<td class="left_column">
..............................................
</td>
<td class="content">
<div class="content"><%# Server.HtmlEncode(Eval("question").ToString())%></div>
</td>
If i give the above code <tr> is divided into two <td> with equal width. This code only take effect... Code:
<td width="200" style="background-color:#d29b28;border-style:solid; border-right-color:Black; border-width:1px; min-height:250px;">
...........................
</td>
<td class="content">
<div class="content">
<%#Server.HtmlEncode(Eval("question").ToString())%>
</div>
</td>
what can i do for that...I'm designing in Master Page.. hi, i have this style for a div hover effect, but how cani stop my other links having this efect? i want 2 different link styles. Code: <style type="text/css">
a:link
{
text-decoration:none;
color:#000000;
background:#B1DB9D;
width: 200px;
display:block;
}
a:active
{
text-decoration:none;
color:#000000;
background: #A2D389;
width: 200px;
display:block;
}
a:visited
{
text-decoration:none;
color:#000000;
background:#B1DB9D;
width: 200px;
display:block;
}
a:hover
{
text-decoration:none;
color:#000000;
width: 200px;
background: #A2D389;
display:block;
}
</style>
Any ideas? I know how to use the class etc but i can't get he link part right. Thanks heya! sorry if this is a real stupid quiestion/in the wrong area, im a bit new to css and this forum! Im wondering if there is any way to have a border only apply for part of a box... ie only the first/last 50% or 250px of the top and bottom borders. Hope this makes sence. Any help appriciated, even if it is to say it cant be done. I need some help. I'm starting out with php and i'm already stressing out. Here's the challenge: I have to make a page that contains 3 radio buttons the radio buttons control which color font you'll like to display on that page the page must reference itself (no outside css stylesheet) I must use the switch function to switch the stylesheet. So far, this is what I have. Can someone help me figure out what I'm doing wrong? Thank you. Dan --------------clipping starts here--------------------- <html> <head> <title></title> <body style="font-family:Arial, Helvetica, sans-serif; color: green;"> </table> <tr> <td> <form name="stylecolor" method=POST" action asgn_2j.php"> Green <input type="radio" name="style" value="a"> Blue <input type="radio" name="style" value="b"> Red <input type="radio" name="style" value="c"> <INPUT TYPE=HIDDEN NAME=stylecolor VALUE=true> <INPUT TYPE=submit NAME="SUBMIT" VALUE="Submit"> $stylecolor=$HTTP_POST_VARS['stylecolor']; switch($stylecolor) { case 'a' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: green;">)' ; case 'b' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: blue;">)' ; case 'c' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: red;">)' ; default: echo 'you didn't choose' ; break; } </form> </td> </tr> </table> </body> </html> So for an example: if I have this in the html: Code: <div id="box" style="width:100px;">123</div> and this is the CSS Code: #box{width: 200px;}
What is the outcome? Will it always use the css or always use the style element? Or does it depend? Is it possible to set up a section of a page to not have the sylings the rest of the page has? e.g. a div? I have a page which has a linked CSS sheet for the template. I also have the content running from a CMS. I want the content from the CMS (from MySQL to not have any of the pages syles enforced onto it. Is this possible? #null { ????? } <div id="null"> CMS CONTENT HERE </div> Could someone please help me work this one out, been at it from last night and still can't figure it out? I have 2 styles, button and tips. I have 5 buttons total and the first 4 are fine as is opening a linked page. I need help to make the last one which uses the tips style to open a mouse-over message to also be displayed with the same button style. Thanks a bunch, the forum won't let me post the text so here is a link to it. lastborns.tripod.com notice difference between first two txt fields and the third one. first two have only background color changed, but in IE they have become bigger, in Moziila/Netscape their border is chaged.. I would like to have background color changed, but size, color and border width stay same, like in third textfield.. please use following code for refference: Code:
<html>
<head>
<style>
.boxA { background-color:#CCCCCC; }
.boxB { background-color:#999999; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="text1" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br>
<input type="text" id="text2" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br>
<input type="text" id="text3">
<br><br>
<script>
function makeLight(obj){
obj.className="boxA";
}
function makeDark(obj){
obj.className="boxB";
}
</script>
</body>
</html>
Hi there, I have a list which I want to display the sub items without any left spacing.. so they are listed directly beneath the parent item. It works fine in IE, but not in FF or Opera. This is what I have: Code:
<ul id="treemenu1" class="treeview" style=" padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 10px; padding-left: 0px;" >
<li style="list-style: none;">
<img src="images/arrow.gif" border="0" >
<a class="nav_main" href="#"><strong>Parent Item</strong></a>
</li>
<ul style="list-style: none;">
<li style="border-bottom: 1px dashed #444444; padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 0px; "><a class="nav_sub" href="page"><img src="images/arrow.gif" border="0" >Sub Item</a></li>
etc...
I have tried use margin-left: 0px but that still doesn't work. Any ideas what I'm doing wrong? Hi, I have a style for <a> like the following Code:
a.navselect:hover,a.navselect:link,a.navselect:visited { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; text-align: center }
Then i use it as Code: <a class="navselect" href="https://swww.go.trade.com/NASApp/MarketTabCtx/MarketTabServlet">Markets</a> but if i have 20 links i have write my class 20 times like above. Can i put a <div> statement around all my links and some how define <a> for my div so that all <a> with in that div get that style |
|||||||