|
CSS - Use Javascript To Patch Css Code
I had a situation the other day. A new version of Firefox is soon to be released, and its float model is slightly different from the current version (1.5 vs. 1.0.7). I have drop capitals on one of my web pages, powered by the float property, and the page's CSS code was written with Firefox 1.0.7 in mind. When I viewed my page using 1.5rc3, I was startled to discover that the letter appeared to be much higher than expected. If I changed the code for fx 1.5, it would then be too low in 1.0.7 and take up too many lines. CSS hacks were out; browser-specific Firefox patches are virtually nonexistent, let alone version-specific hacks, which is what I needed. So what was I to do?
I finally settled on JavaScript conditional code. Here's a sample: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Example of how JS conditional CSS patching works</title> <style type="text/css"> body { font: small/1.3em Georgia,serif; } p { width: 300px; margin: auto; } p::first-letter { font-size: 310%; float: left; padding: 0 1px 0 0; line-height: .767em; } </style> <script type="text/javascript"> //<![CDATA[ var a=window.navigator.userAgent; if(a.indexOf("Gecko")+1) { document.writeln('<style type="text/css">'); document.writeln('p::first-letter {'); var n=a.indexOf("Firefox"); if((n+1)&&a.substring(a.indexOf("/",n)+1)>="1.5") document.writeln(' margin: .06em 0 0\n}\n</style>'); else document.writeln(' margin: -.167em 0\n}\n</style>'); } //]]> </script> </head> <body> <p>The first letter of this paragraph should be set in a larger font and even at the bottom with the baseline on the second line. It should also be even at the top with the ascenders in the first line. This example ought to display exactly the same on Firefox 1.5 as it does on Firefox 1.0 and other Mozilla based browsers, such as Netscape.</p> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> First, I isolatated browsers that identify "Gecko" in the UserAgent String. No patching will take place if "Gecko" is not present. Secondly, I searced for the name "Firefox" and a version number of 1.5 or greater. Then I just wrote a custom style sheet into the document. I hope you find this patching method useful. Edit: removed "please stick this thread" request. Sorry to presume. Similar TutorialsHi, First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/ Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty. I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla Could you look at the code and tell me whats wrong? http://serve5.net/xcage/nav/ http://serve5.net/xcage/nav/styles/xcage.css http://serve5.net/xcage/nav/scripts/sfhover.js Thanks. Hi, did not know if to post this in css, html or javascript forum Anyway, I have done a slideshow wich uses css, javascript and mootools. Works like a charm, however if I turn javascript off I have the small images and url of the large images all over the content of the page, awful. noscript does not work, If I add a noscript, I get the noscript text, but also all images and url all over the page. I did found a way adding a css rule inside the noscript tag, however that dont validate, you cant put css there, and I want the site to validate. So how should I do it? Been trying many ways and none works. The images are displayed in the html like this: Code: <div id="dg-image-gallery" class="dg-image-gallery">
<div class="dg-image-gallery-image">
<img class="dg-image-gallery-thumb" alt="Images properties for rent in Marbella." src="nuevas/casa_blanca_4_house_pool-2.jpg">
<span class="dg-image-gallery-caption">The house and heated pool</span>
<span class="dg-image-gallery-large-image-path">nuevas/casa_blanca_4_house_pool.jpg</span>
And the javascript in the html page is like this:
<script type="text/javascript">
var gallery = new DG.ImageGallery({
el : 'dg-image-gallery',
autoplay : {
pause : 2
}
});
</script>
Thanks in advance, Helen hi... what does this css code mean.. body table table table table#plv table td{color:#fff} ? and how would the html code look like? is this for tables with no class tags attach to it.. For some reason, the following code displays perfect in firefox, but its atrocious in IE. Im doing this for a client, so i need it to display correct in all browsers...can anyone pinpoint what i am doing wrong? here is the code: Code: css
*
{
margin: 0px;
padding: 0px;
}
html
{
width: 100%;
height: 100%;
}
body
{
height: 100%;
width: 100%;
background-color: /*#E0F8F7 */#989B9F;
margin: 0px;
padding: 0px;
}
#login_box
{
background: url( '../images/login2.png' ) no-repeat center center;
position: fixed;
width: 319px;
height: 417px;
top: 50%;
left: 50%;
margin-top: -209px;
margin-left: -160px;
}
#input_div
{
position: fixed;
width: 103px;
height: 38px;
margin-top: 230px;
margin-left: 55px;
}
#lock
{
border: none;
position: fixed;
background: url( '../images/lock.png' ) no-repeat;
width: 10px;
height: 13px;
margin-top: 287px;
margin-left: 270px;
}
#forgot
{
position: fixed;
margin-top: 362px;
margin-left: 50px;
}
#login_box h1
{
color: #EDF2F7;
font-size: 10px;
text-align: left;
font-family: arial, sans-serif;
}
.input
{
width: 200px;
font-size: 12px;
text-align: left;
font-family: arial, sans-serif;
border: solid 1px #85b1de;
background: url( '../images/gr.png' ) repeat-x #EDF2F7;
background-position: top;
padding: 4px;
}
input[type="text"]:focus, input[type="password"]:focus
{
border: solid 1px #31677B;
}
#login_box p
{
font-weight: bold;
color: #478FAB;
font-size: 12px;
text-align: left;
font-family: arial, sans-serif;
}
#button_div
{
position: fixed;
width: 103px;
height: 38px;
margin-top: 360px;
margin-left: 190px;
}
.button
{
border: none;
width: 103px;
height: 38px;
text-indent: -1000em;
cursor: pointer;
background: url( '../images/login_button.png' ) no-repeat center center;
}
in Internet Explorer: Incorrect in Firefox, Opera, Chrome... ( Any code compliant browser ) Correct ....Any help please? I am trying to make this header menu go horizontal but I can't get it to do anything but be vertical. You can see what is happening by visiting SodShopWichita.co m The green buttons. Anyones help would be greatly appreciate as I have spent hours trying to figure it out. I'm new to CSS. Here is the code: /******************************** Main Navigation ****** * Global topmenu navigation, degrades gracefully to css * if Javascript is disabled. Else applies fade effect. */ #navcontainer { height:50px; float: right; width:1014px; position:relative } /* Menu Body */ ul#navigation { height:35px; list-style:none; float:left; padding:0px 1px 0px 0px; margin:0px 0px 0px 10px; float: left; } /* Float LI Elements - horizontal display */ ul#specialnav li { float:left; display: block; } /************ SPECIAL NAV ************************/ #specialnav { height:50px; width:185px; position:relative; } /* Link - common attributes */ #specialnav a { background:url('specialnav.png') no-repeat scroll top left; display:block; height:35px; width:185px; position:relative; z-index:10; line-height:2.5em; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; color:#fff; font-size:14px; text-align:center; text-decoration:none; padding-left: 0px; padding-right: 0px; } /* Specify width and background position attributes */ #specialnav li.isactive a { background:url('specialnav.png') no-repeat scroll 0 -105px; bottom left repeat-x display:block; height:35px; width:185px; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* Link (on hover) - common attributes */ #specialnav li.highlight a:hover { background:url('specialnav.png') no-repeat scroll 0 -35px; display:block; height:35px; width:185px; line-height:2.5em; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* Link - common attributes */ #specialnav li.highlight a:active, #specialnav li.highlight a:focus, #specialnav li a:active, #specialnav li a:focus { background:url('specialnav.png') no-repeat scroll 0 -70px; display:block; height:35px; width:185px; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* fade effects start here */ /* Span (on hover) - common attributes */ #specialnav a span.animate { background:url('specialnav.png') no-repeat scroll 0 -35px; display:block; position:absolute; line-height:2.5em; top:0; left:0; height:100%; width:100%; z-index:10; cursorointer; } /* Shift background position on hover */ ul#navigation li a span { background-position:0px -35px; } /* Shift background position on hover for the class: "isactive" */ ul#navigation li.isactive a span { background-position:0px -35px; } span.trans {display:none;} i am trying to put a semi-transparent bg on an iframe and some cells of a table. i've been given lots of advice, none working so far. and i know its possible. is there anyway sum1 could try this or even edit my code? but mostly what im looking for is also where to put things in codes. please and thank u!! what would happen if i assigned an iframe to "itself" w/ a colored background, and then put in a CSS declaration w/ opacity? how do i input filters? how do i input tablelayout(like CSS or HTML)? where do i insert tags for the scrollbar, which also has not worked for me? Code:
<style type="text/css">
<!--
@import url("semitransparent.css");
@import url("chromafilter.css");
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style3 {font-size: 12px}
BODY{ scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#CCCCCC; scrollbar-base-color:#993300;
scrollbar-darkshadow-color:#660000; scrollbar-face-color:#990000; scrollbar-highlight-color:#CC0000; scrollbar-shadow-color:#666666; }
-->
</STYLE>
</head>
<body>
<map name="booster" id="booster">
<area shape="rect" coords="126,87,249,107" href="boosterclub.htm" target="iframe2" onMouseOver="filter:glow(color=#FFFF99,strength="5");">
<area shape="poly" coords="75,49" href="#">
<area shape="rect" coords="345,82,499,108" href="Danceprogram.htm" target="iframe2">
<area shape="rect" coords="588,87,711,106" href="dancecamp.htm" target="iframe2">
<area shape="rect" coords="783,84,971,107" href="fly.htm" target="iframe2">
<area shape="rect" coords="131,42,209,77" href="index2.htm" target="iframe2">
</map>
<table width="1134" height="717" border="0" cellspacing="10">
<tr>
<th height="174" colspan="2" scope="row"><img src="logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
</tr>
<tr>
<th width="235" height="37" scope="row" bordercolor="#FFE4E0" border="1">About us </th>
<td width="865" rowspan="3"><iframe frameborder="1" name="iframe2" src="index2.htm" allowtransparency="30" width="750" height="432" scrolling="yes"></iframe></td>
</tr>
<tr>
<th height="211" scope="row"> </th>
</tr>
<tr>
<th height="175" scope="row"><table width="235" height="173" border="1" bordercolor="#FFA2A2" bgcolor="#FFE2CB" id="pink">
<tr>
<th width="198" height="18" scope="row">New Events!!! </th>
</tr>
<tr>
<th height="128" scope="row"><p>1- We are having a competition this weekend in Portland, OR. Wish our tap girls good luck
</p></th>
</tr>
</table></th>
</tr>
<tr>
<th height="32" scope="row"> </th>
<td align="center"><b>Designer:</b> Melody Shinyama <b>Date Published:</b> January 25, 2006
<br><b>Host:</b><a href="http://www.freewebs.com/"> www.freewebs.com</a><br>
<b>Last Updated:</b> January 25, 2006
</td>
</tr>
</table>
<p><br>
<br>
</p>
</body>
</html>
this is also an attached code. btw i am working w/ dreamweaver. Code:
<style type="text/css">
tbody {background-color:#FF6971;
width: 300px;
margin: 0 50px;
border: 2px;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
#transbox {
width: 300px;
margin: 0 50px;
background-color: #CF0000;
border: 2px solid;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
#bg {
width: 400px;
height: 300px;
background: url(redbg.jpg);
background-repeat: repeat;
border: 0;
}
#transbox div {
font-weight: bold;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
position: relative;
visibility: hidden;
}
</style>
this is the last one Code:
table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000;
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color:
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}
Hi guys I've a website, pure css, tableless It looks good in Firefox, Opera, etc. etc. It looks VERY bad in IE Look: Firefox http://img465.imageshack.us/img465/4333/shot14jr.png Internet "Explorer" http://img378.imageshack.us/img378/8224/shot22cv.png Website files for download here... http://rapidshare.de/files/11673865/website.zip.html Does any1 know how to fix css or web to look good in IE also ? Thanks a lot in advance Greetings everyone! I'm quite new for css positioning, less than 2 weeks, but I can tell you I feel like a young man entering puberty again just knowing I'll have myself free from tables very soon. My question is an easy one. I would like to know if isnt it more correct to leave some styles outside the css file when we are using it particularly only one time. Lets say Ill use 2 distinguished boxes in the "contact" session, then would it be ok to just use "<div style="etc">content</div>" instead of building it inside the css? Thanks in advance! - Dehumanizer I often see css code with "greater than" sign like this: html>body #centercontent { margin-left: 201px; margin-right:201px; } what does this mean? What is the difference with body #centercontent { margin-left: 201px; margin-right:201px; } Thanks for the enlightment. Please look at this page: http://validator.w3.org/check?uri=w...=Inline&group=0 As you can see all the script codes are in need of helping to pass. I am trying to clean this page up and the rest but need advice to how to do so. For example, it is telling me not to use the & sign in the script but I am afraid to replace it with the & or & . What should I do here or how can I fix these errors? Should I be using a different Doc type or something? Thanks!!! Greetings, I don't know how is this possible. Please, take a look at these 2 pages: Correct: http://83.208.191.102/bio/Sources/M...t.modified.html Screwed: http://83.208.191.102/bio/Sources/M...modified02.html It's no browser-specific problem, it does the same in both IE and FF .I must be missing something really basic, but I can't see any difference Hi: I'm new to HTML so you would imagine what was my dilemma when I was asked to use CSS on my forms. Can someone add the CSS code to the following code along with some tips on how to make it more pleasing? If you look at it now its dull, dull, dull. <FORM METHOD="POST" ACTION="login.php"> <TABLE border="7" CELLPADDING="3" CELLSPACING="10" BORDERCOLOR=BLACK> <tr><th colspan=2><FONT size="5"><B><center>MAIN LOGIN FORM</B></FONT></th></tr> <TR><TD><B>USERNAME:</B></TD><TD><input type="Text" name="username"></TD></TR> <TR><TD><B>PASSWORD:</B></TD><TD><input type="password" name="secret"></TD><TD> <input type="submit" name="submit" value="LOGIN"></TD><TR> </form> </TABLE> Also thanks in advance. I am building a new navigation menu which works fine as you can see below: http://www.hotlinkhosting.com/test/menu.php However, the following version does not: http://www.hotlinkhosting.com/test/menu.php?. The difference between the two is that the first one doesn't have a doctype set. The second version has a xhtml doctype. All my documents are written in xhtml so it must be done. I see that the problem occurs with my resizing of the <h1> and <h2> tags with css. After resizing the space the heading tags normaly take up is still their. Feel free to take a look at the source code and I hope you can help. Btw, I know the nav menu doesn't look right in ie, but that isn't my fault now is it? I can't help it ie can't read code correctly. Anyways After I get the menu working with "real" browsers I'll fix the ie errors. Have some problem with my css. Would appreciate some comments on how to do this: Here is the code: with explanation of what's not working: It's a small "complete" htm file..... Code:
<html>
<head>
<style>
.outer {
display: block;
background-color: #bbb;
border: 0;
padding: 0;
text-align: center;
font-family: Arial,sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: normal;
}
.outer a {
display: block;
color: #000;
text-decoration: none;
font-weight: normal;
}
.outer a:hover {
text-decoration: underline; color: #fff;
}
.outer a:hover .text-top {
text-decoration: none; color: #000;
}
</style>
</head>
<body style="background-color:#888;">
<br><br> Why is the top text underlined with a white line when hover and text itself is black?<br>
I want it to work like this:<br>
When I hover over any area inside the outer div then I want<br>
Bottom text: white and underlined<br>
Top text: no change<br><br>
NN 7.2: Same problem as above<br>
FF 1.04: same problem as above<br>
Opera 8: same problem as above<br>
In opera 8 there is also some small underline below image: How do I get rid of that?<br><br>
IE 6: Works as it should<br><br><br>
<center>
<table border=0 cellpadding=0 cellspacing=0 width=300px>
<tr>
<td>
<div class="outer">
<a href="#">
<div class="text-top">
<br>Top text<br><br>
</div>
<div class="text-img">
<img src="snake.jpg" height="100px" width="100px" alt="" border="0">
</div>
<div class="text-bot">
<br>Bottom text<br><br>
</div>
</a>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>
Hello. I'm interested in creating areas within my web page similar to the attachment, that show formatted code. I can handle most of it - using specific font(s), a green left-border, perhaps some banding for alternate rows, etc. But is it possible to create automatic numbering without having to insert separate 'li' elements for each row? Would I have to entity reference lots of characters within the code? Indenting might be troublesome? Perhaps there is some site that already makes this css publicly available? Andy. Can anyone help me to transform this table in css code ? <table width="1000" border="1" bordercolor="#FFCCFF"> <tr> <th width="500"> <img src="111.jpg" </th> <th width="500"> <center> <font face="Tahoma" size="60" color="#330033"> 111 </font> </center> </th> </tr> </table> Sorry....wrong info here....been up too long. I'll regroup and repost this with hthe correct info. I'm a bit new to the CSS scene, but I do know my fair share of it. Unfortunately, I've run into a huge problem: Our menu bar takes up a lot of code that we DON'T want to have to repeat on EVERY page. So, my question is: Is there any code/way we can retrieve data from another source file and have it pulled into our original code? Like an img src=, only with a file. Thanks in advanced! |
|||||||