|
CSS - Change Css Style For Compatibility
Hi guys...
Would u mind to see this site I'm working ... http://diario.coldfusion-vpm.com It is being done in Mambo (www.mamboserver.com) And i would like to know why it sees OK in Firefox but it sees bad in IE, specially left & middle colum, they see overlapped, very strange CSS file: http://diario.coldfusion-vpm.com/templates/maiputotal/css/template_css.css thanks a lot in advance Similar TutorialsI am working on a pop out menu on warrenhomes . The image displays properly in firefox and IE8, but the menu leaves are cut off in IE7 (or IE8 compatibility mode). pushing the list-style-position:inside; line isn't really helping either. Can someone tell me why ie7 is displaying list-style-image differently and possibly how I can correct this issue? 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! On the title of my gallery one of the words has moved to the second row. There is obvious room before the text hits the search box so I'm hoping to have all the text on the same row. This is what I've found for the gallery title CSS: #gallerytitle { padding: 10px 10px 10px 20px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; background: #F8F8F8; height:30px; border-bottom: 1px solid #CCC; What would I change there (if that is indeed the part that needs to be changed) to get the desired effect? Here is the site where you can see the gallery title issue. EDIT: I guess I can't link to my site. Hmm. It's kind of hard to describe what my problem is. I appreciate any help i have a link which has some parenthesis within the anchor tags, now what i was wondering was whether i could change the style (colour to be exact) of the parenthesis without adding extra tags into the html. Thanks for any assisstance eg: Order By (DESC) to become Order By ( DESC ) Hey all, I am having a little trouble with some stylesheet/javascript. I am trying to change the style on mouse over of another element. I have a DL with one DT & and one DD. I would like to be able to change the style of the DD on mouse over the entire DL. I'd like to change the class 'background' to 'backgroundOver'. The code: Code:
<dl>
<dt>
<p>Text</p>
</dt>
<dd class="background">
<p>Text</p>
</dd>
</dl>
Any help with this would be much appreciated. Cheers in advance. i have a main page with an iframe.. my iframe contain most of my data.. there are 4 types of css for the user to choose.. i have create 4 css.. 1.css, 2.css, 3.css and 4.css... when they user clicks on the first link, the iframe will load 1.css.. if the user clicks on the 2nd link, the iframe will load 2.css.. what shld i do to attain that? I have an unordered list that I'm making into a navigation menu. It's all working except for the first item in the list. I don't think I've missed anything but let me post the code and get a 2nd opinion. Thanks in advance for the help: Code:
@charset "utf-8";
/* CSS Document */
#wrapper
{
width: 700px;
position: absolute;
top: 50px;
left: 150px;
margin: 0px 0px 0px 100px;
}
body
{
background-image: url(images/bg1.png);
background-repeat: repeat;
margin:0 0 0 0;
}
#banner
{
height: 125px;
width: auto;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
}
#content
{
width: 400px;
position: static;
background-color: #e8caa6;
font-size: 18px;
margin: 0px 318px 0px 0px; /* 318px right 125px for centered */
padding: 10px 5px 10px 5px;
border-style:solid;
border-color:#000;
border-width:10px;
}
#movietable
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer
{
padding: 0px 0px 0px 0px;
margin: 0px 50px 10px 50px;
text-align: center;
font-size: 14px;
}
#footer a
{
text-decoration: none;
color:#333;
font-weight:500;
}
#footer a:link
{
text-decoration:none;
}
#footer a:hover
{
text-decoration:none;
background:#d9d3c6;
}
#footer a:visit
{
text-decoration:none;
}
#nav ul
{
list-style: none;
width: 700px;
position: relative;
}
#nav span
{
display:inline;
}
#nav
{
height: 40px;
background-color: #8D5C22;
}
#nav li
{
float: left;
margin: 0 0.15em;
}
#nav li a
{
height: 40px;
line-height: 40px;
float: left;
width: 167px;
display: block;
/*border: 0.1em solid #dcdce9;*/
text-align: center;
}
a.home:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.home:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.restaurants:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.servicearea:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:link{ color: #FFF; text-decoration:none; font-size: 2.0em; font-weight: bold; }
a.contact:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
Html Code:
<body>
<div id="wrapper">
<div id="banner">
<!-- blah -->
</div>
<div id="nav">
<ul id="navblock">
<li id="nav1"><a href="index.html" class="home"><span>Home</span></a></li>
<li id="nav2"><a href="rest.html" class="restaurants"><span>Restaurants</span></a></li>
<li id="nav3"><a href="area.html" class="servicearea"><span>Coverage</span></a></li>
<li id="nav4"><a href="contact.html" class="contact"><span>Contact</span></a></li>
</ul>
</div><!-- End Nav -->
You can check the site live here . Hi all, I need to link to a stylesheet and have it apply to the page instead of just opening the css. if thats a bit difficult to understand, lets say for example, for site accessibility, you would have links to 3 types of stylesheets to make the text bigger or smaller... how do you link to the css files without them actually opening the css file? thanks in advance Matty I have a header.inc file and a footer.inc file that is called to each new file that I create. The header.inc file holds all the javascripts as well as calls the css, etc. It also begins the body and the footer.inc file closes the body. In other words in each new file that I create I have a php statement calling the header, and at the bottom of the file another statement that calls the footer. So each new file is really only part of the body as the title and head are found in the header.inc file. What I would like to do is be able to change the background color of the body of a new file if I choose to do so. But obviously because each new file is only part of the body I cannot put a css style in the new file. Is there any way of writing a php statement that I can place in a new file that would allow me to change the background-color of let's say #faunabody for that particular page??. Hope this is clear...thanks alot on my site i have a few drop down boxes, ive used css to change the textboxes and submit buttons, but is there a way to change the arrows/buttons on a drop down list? I have been trying various methods to change the color of the scrollbar of an object in my HTML page. However it remains at gray. The HTML code is as follows: <OBJECT NAME="foo" CLASSID="qeroeure" STYLE="scrollbar-base-color:red" CODEBASE="blah" WIDTH="700" HEIGHT="500" BORDER="3">"Cannot load image control." </OBJECT> This does not change the scrollbar color to red. What do I do to change the scrollbar color Hey all, i can't find out anywhere if i can use css to change the style of html menus and buttons...Id just like the menu to look a little different, ie different button and different colour background and text..etc any ideas or help would be appreciated thanks RF 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 A friend told me that css websites are sometimes displayed wrong with some browsers; the tables are out of place etc. Is this true? are there any issues with certain sites? Is css the best way to design an html site now a days? Sorry im a newbie in this, Im going to start learning soon. Thanks !!! I have always encountered problems trying to get my sites to work in IE6, mainly because it renders the margins as 2x the "right value". However I am curious: How does deliciousdays.com work perfectly in IE6 without using if IE6 conditional tag? I am making a site and this would be very useful. I try not to use the if IE6 conditional tag hack if possible. I just finished a layout using CSS and I'm aware that browsers 4.0 and earlier (or is it 3.0 and earlier?) won't be able to display it right. However, I also know that the browsers that do support CSS don't all display it the exact same way. I tested my layout using Internet Explorer 6 and Mozilla 1.6. I had to make a few changes to get Mozilla to display it close to what I intended. My question: which other browsers and versions should I test it on? Okay I have this website www.deminyx.com and It looks decent in Google Chrome but stupid in IE my #content div is in a different place, can anyone help me clean up my code. I validated the HTML and CSS with the w3c validator too! UGHH lol! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Deminyx| Web Solutions</title><link rel="stylesheet" href="index.css" type="text/css"> </head><body> <div id="header"><a href="index.html"> Deminyx</a></div> <div id="side"> <table> <tbody> <tr> <td><a href="service.html">The Service</a></td> </tr> <tr> <td><a href="cost.html">The Cost</a></td> </tr> <tr> <td><a href="ease.html">The Ease</a></td> </tr> </tbody> </table> </div> <div id="content">This is my content, I wont waste your time.</div> </body></html> and the CSS Code:
body {
background-color:#666;
}
#header {
background-color:#399;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:7em;
border-style:solid;
border-width:2px;
}
a:hover {
font-family:Arial,Helvetica,sans-serif;
background-color:#399;
}
a {
text-decoration:none;
color:#000;
font-size:1em;
line-height:1em;
}
table {
border:solid #000;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
line-height:2.2em;
width:20%;
font-size:1.5em;
margin-top:12px;
padding:2px 2px 2px 19px;
}
#content {
position:relative;
float:right;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
width:78%;
font-size:1.2em;
margin-top:-160px;
border-style:solid;
padding:4px 4px 4px 8px;
}
I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! I do a lot of we development work for an intranet site. All users are on IE. Occasionally, I'll develop a page that looks fine in my browser (IE 8.0.6001) but not in others (8.0.7600). I have to set mine to compatibility mode to see what others see. I thought the compatibility mode was meant to display a web page the way it would in an older browser. Is it possible that I have something installed on my machine that makes my browser render pages differently? I know this is vague, but I am just wondering if anyone has ideas on where to look. I have been working a rounded content box approach. The layout rendered beautifully in Firefox, yet IE threw a wrench into my layout. The approach has to be re-thought and aligned for compatibility with IE. The HTML and CSS code validates on the server. The situation may relate to the Box Model Hack, but I have little familiarity with the various workarounds and hack techniques. My questions relate to improving my current approach and incorporating any hacks if necessary. The layout no longer renders properly in Firefox since adding the width property to the following classes. div.ArticleHeader div.ArticleHeader div div.ArticleFooter div.ArticleFooter div My round content approach began from the following article: http://www.redmelon.net/tstme/4corners/ My idea involved an approach, which could incorporate numerous content box graphics; just like using tables. The content box could be square with one corner angle or rounded corner; outlined, embossed, etc. The redmelon approach uses a div wrapper containing the divs for the top, content, and bottom. My approach removed this div wrapper, which may be the first indicator. Let me simplify my questions. Would you recommend adding a wrapper around the content box beside the ID (navigation) wrapper? What Box Model hack would you recommend for my layout? How does the width property affect my content boxes? If I comment out the width, the layout renders in Firefox; IE still fails to render it. The #navigation container has a fix width; yet the #maincontent container has a min-width and max-width. Tricky! Why does the graphic, in div.ArticleFooter, extend the full width of #Navigation container? The class has a margin of 20px. The parent container also has a margin of 20 px? IE renders the whole layout as a mess. Once these content boxes address the box model, then I could continue addressing other IE issues like the fieldset, pre, and floats. Some people have mentioned other approaches, but I prefer fixing this approach before move on to a better method. It helps me to learn the idiosyncrasies behind CSS and browser implementation. In addition, it helps me when aligning the other CSS style with IE. Please give suggestions and lead me in the right direction. http://neville.f2o.org/Template_Sample.html |
|||||||