|
CSS - Can Someone Test This Wbr Tag Code On Konqueror?
This works on Opera while still working on IE and Firefox. Does it work on Konqueror?
html4strict Code:
Original - html4strict Code <style type="text/css"> wbr { display: inline-block; width: 0; overflow: hidden; } .test { width: 150px; } </style> <div class="test">This<wbr />sentence<wbr />is<wbr />really<wbr />just<wbr />one<wbr />big<wbr />hillariously<wbr />long<wbr />word.</div> <style type="text/css"> Similar Tutorialsshades under konqueror? look at this page: http://planet.ubuntulinux.org/ there're shades under news titles... Hi all, Anyone know of any problems with CSS drop down menus a la suckerfish (www.alistapart.com) and Konqueror? Here's my CSS for this http://www.nzwebz.com/wikindx2 : Code: body {
background : url("paper.jpg");
font-family : sans-serif;
}
ul {
padding : 0;
margin : 0;
list-style : none;
}
li {
float : left;
position : relative;
}
li ul {
display : none;
position : absolute;
top : 1.1em;
left : 0;
border : 4px #CCCC99 groove;
background : #ffcc99;
width : 7em;
}
li > ul {
top : auto;
left : auto;
}
li:hover ul, li.over ul{
display : block;
}
A:visited, A:link, A:active {
text-decoration : none;
color : #666666;
background : transparent;
display : block;
width : 7em;
}
A:hover {
text-decoration : none;
background : #ff9900;
color : white;
display : block;
width : 7em;
}
.clear {
clear : both;
}
.titleTable {
width : 90%;
}
.menuTable {
margin : 0 0 0 5%;
}
.menuli {
color : #ff9900;
}
.mainTable {
border : #ff9900 3px groove;
width : 90%;
}
h1, h2, h3, h4 {
color : #ff9900;
}
With the javascript (which needs work I know), it works with IE (with javascript fix), Netscape, Firefox and Mozilla but the drop downs won't work with Konqueror. Javascript is turned on in Konqueror in case it's anything to do with that. I notice that even the suckerfish pretty example doesn't work in Konqueror (v3.1-12) Thanks. Could someone explain me how to get rid of the gap at the bottom of this page? Hi, I'm using a floated division for my menu; and using relative positioning to move this slightly to the left and up - you can see it here. It works in all browsers I've tried except Konqueror - the positioning simply has no effect . Also: the content of the main division (to the right) becomes completely distorted when scrolling - again: only when using Konqueror . Could this be due to the fact that they are floated divs? The code is valid HTML and CSS. Is Konqueror non-compliant with W3 Standards? Should I bother trying to accommodate it? Anyone have any ideas? I cannot seem to get the CSS drop down menu system to work in IE6 but it works in IE7. I tell the Css to use globalIE.css Code:
<!--[if IE]>QU
<link rel="stylesheet" href="<?=$base_url;?>/_src/globalIE.css"
type="text/css">
<![endif]-->
Here is the menu system: Code: menu5platinum[4]='<div id="menu"><ul><li><ul><li>'+
'<a href="./ChargeOffs.php" title="Creditor Actions">Creditor Actions</a>'+
'<ul><li><a href="./charge_offs.php" title="Charge Offs">Charge Offs</a></li>'+
'<li><a href="./collection_accts.php" title="Collections">Collections</a></li>'+
'<li><a href="./late_payments.php" title="Late Payments">Late Payments</a></li>'+
'<li><a href="./repossessions.php" title="Repossessions">Repossessions</a></li>'+
'<li><a href="./Foreclosure.php" title="Foreclosure">Foreclosure</a></li></ul>'+
'</li></ul></li></ul></div>';
(It rests inside of a javascript function) and here is the CSS: Code:
/**************** menu coding *****************/
#menu { width: 100%; background: #555555; border-style: none; font: normal 12px Verdana;}
#menu ul { list-style: none; margin-top: -7px; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; line-height: 18px; }
#menu a, #menu h2 { border-bottom: 1px solid #c0c0c0; font-family: helvetica, arial, verdana, sans-serif; display: block; }
/*#menu h2 { color: #fff; background: #000; }*/
#menu a { color: #f2f2f2; background: #555555; text-decoration: none;}
#menu a:hover { color: #f2f2f2; background: #8b8b8b; }
#menu li {position: relative;}
#menu ul ul ul { position: absolute; top: 0; left: 108.5%; width: 100%; border-left: 1px solid #c0c0c0; margin-top: 0; margin-bottom: 0; margin-left: 1px; margin-right: 0;}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Any help with this is greatly appreciated. Thanks. Hi all, The following CSS and HTML work fine in Mozilla, Netscape and Firefox. It can be viewed in action at: http://www.sirfragalot.com/wikindx2/ (choose the 'chocolate vanilla fudge sundae' from the Wikindx/preferences menu.) I have two questions: 1/ I'm aware that Konqueror does not support CSS drop-downs. It doesn't concern me as I've programmed a way around it. However, the menu items occasionally stack up vertically on the left side of the browser window: they're supposed to be horizontal. This stacking and subsequent un-stacking seems to be quite random. What's the fix? 2/ In IE, the drop-downs are rendered from the bottom right corner of the originating top menu item (they should be directly underneath). What is the fix? HTML CODE: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- begin header template (+ 3 lines up!) -->
<head>
<title>WIKINDX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="chocolate.css" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<!-- begin menue template -->
<table class="menuTable" border="0" cellspacing="0" cellpadding="0" align="left">
<tr class="" align="left" valign="top">
<td class="" align="right" valign="top">
<ul id="nav">
<li><a class="menuLi" href="index.php?action=frontNoMenu">Wikindx</a>
<ul>
<li><a class="menu" href="index.php">Home</a></li>
<li><a class="menu" href="index.php?action=preferencesDisplay">Preferences</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=fileNoMenu">File</a>
<ul>
<li><a class="menu" href="index.php?action=exportRtf">Export RTF</a></li>
<li><a class="menu" href="index.php?action=exportBibtex">Export BibTeX</a></li>
<li><a class="menu" href="index.php?action=showFiles">Show Files</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=editNoMenu">Edit</a>
<ul>
<li><a class="menu" href="index.php?action=editCreator">Creator</a></li>
<li><a class="menu" href="index.php?action=editJournal">Journal</a></li>
<li><a class="menu" href="index.php?action=editPublisher">Publisher</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=resourceNoMenu">Resources</a>
<ul>
<li><a class="menu" href="index.php?action=listDisplay">List</a></li>
<li><a class="menu" href="index.php?action=searchDisplay">Search</a></li>
<li><a class="menu" href="index.php?action=selectDisplay">Select</a></li>
<li><a class="menu" href="index.php?action=resourceNew">New</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=textNoMenu">Text</a>
<ul>
<li><a class="menu" href="index.php?action=allMusings">Musings</a></li>
<li><a class="menu" href="index.php?action=randomMusing">Random Musing</a></li>
<li><a class="menu" href="index.php?action=allParaphrases">Paraphrases</a></li>
<li><a class="menu" href="index.php?action=randomParaphrase">Random Paraphrase</a></li>
<li><a class="menu" href="index.php?action=allQuotes">Quotes</a></li>
<li><a class="menu" href="index.php?action=randomQuote">Random Quote</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=adminNoMenu">Admin</a>
<ul>
<li><a class="menu" href="index.php?action=superadminLogonDisplay">Logon</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=helpNoMenu">Help</a>
<ul>
<li><a class="menu" href="index.php?action=helpDisplay">Wikindx Help</a></li>
<li><a class="menu" href="index.php?action=aboutWikindx">About Wikindx</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<br />
<!-- end menu template -->
</body>
<!-- end footer template (+ 1 line down!) -->
</html>
CSS CODE: Code: body {
background : #74664a;
font-family : sans-serif;
font-size : 0.9em;
color : #f6eedf;
}
/* SuckerFish CSS drop down style */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 7em;
}
#nav li {
float: left;
width: 7em;
background : red;
}
#nav li ul {
position: absolute;
width: 7em;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* End Suckerfish Style */
/* Standard links such as top menu links */
A:visited, A:link, A:active {
text-decoration : none;
color : #74664a;
background : #efd197;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
A:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
/* .menu = submenu links */
A.menu:visited, A.menu:link, A.menu:active {
text-decoration : none;
color : #74664a;
display : block;
border-bottom : 1px solid #f6eedf;
width : 6em;
background : #efd197;
font-size : 0.9em;
text-align : left;
}
A.menu:hover {
text-decoration : none;
background : #f6eedf;
display : block;
color : #74664a;
border-bottom : 1px solid #f6eedf;
width : 6em;
font-size : 0.9em;
text-align : left;
}
/* normal links and paging links */
A.link:visited, A.link:link, A.link:active, A.page:visited, A.page:link, A.page.active {
text-decoration : none;
color : red;
background : transparent;
border : none;
}
A.link:hover, A.page:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* resource links for resource URLs */
A.rLink:visited, A.rLink:link, A.rLink:active {
text-decoration : none;
background : transparent;
color : #f6eedf;
border : none;
}
A.rLink:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* image links */
A.imgLink:visited, A.imgLink:link, A.imgLink:active {
text-decoration : none;
background : transparent;
border : none;
}
A.imgLink:hover {
text-decoration : none;
background : transparent;
border : none;
}
/*****
* .titleTable: the table containing the title bar
*****/
.titleTable {
width : 90%;
}
/*****
* .menuTable: the table containing the drop-down menus
*****/
.menuTable {
margin : 0 0 0 5%;
}
/*****
* .menuLi: text-color in list items of the drop-down menus
*****/
.menuLi {
color : black;
}
/*****
* .mainTable: the table containing the main content of WIKINDX
*****/
.mainTable {
border : none;
width : 90%;
padding : 0.2em;
clear : both;
}
/*****
* redefine HTML headings - see /core/html/MISC.php
*****/
h1, h2, h3, h4 {
color : #f6eedf;
margin : 0 0 1em 0;
}
/*****
* .footerFooter: footer information at end of script - part of a table
*****/
.footerTable {
font-size : 0.6em;
color : #f6eedf;
width : 90%;
}
/*****
* .error: <p>error messages</p>
*****/
.error {
background : red;
color : black;
}
/*****
* .success: <p>success messages</p>
*****/
.success {
background : #33ff00;
color : black;
}
/*****
* .small: small text
*****/
.small, .hint {
font-size : 0.8em;
}
/*****
* .hint: text hints given to provide further information usually on form input. Often used in conjunction
* with .small and usually the class of <span>....</span>
*****/
.hint {
color : #f6eedf;
}
/*****
* alternate background colours and font sizes for <td>resources</td> in a bibliographic list
*****/
.alternate1 {
/* background : #efd197; */
/* background : #f8efdf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
.alternate2 {
/* background : #ede5d8; */
/* background : #f6eedf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
/*****
* .highlight: highlight <span>search terms</span> in text
*****/
.highlight {
color : #583b04;
background : yellow;
}
/*****
* .required: highlighting for <span>required</span> form input elements (asterisk).
*****/
.required {
color : red;
}
I am curious how people go about testing their CSS code in all browsers? I am a mac user and don't have a PC sitting next to me. I am using browsershots.org .... but its awfully slow (I even paid for priority processing) Just curious how everyone checks their CSS code on a Mac? Because IE is the big problem causer.... Hi there. Please have a look here. Could you please report any prob you come into and the browser you're on? Check out the layout section. Thank you in advance :) I have a caption text in a span tag appear on an image rollover. I'm trying to make the caption text selectable and having a terrible time. Can anyone point me in the right direction? Thanks! Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testing</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
div#img a span {display: none;}
div#img a:hover span{display: block;
position:fixed; top: 300px; left: 350px; width: 125px;
padding: 5px; margin: 10px;
color: #AAA; background: black;
opacity: .5;
font: 10px Verdana, sans-serif; text-align: left;
}
-->
</style></head>
<body>
<div id="img"><a href="#"><img src="http://i43.tinypic.com/2irct0.jpg" width="500" height="392" border="0"/><span>here is the caption text!</span></a></div>
</body>
</html>
I've uploaded a test page re how do I get a content div to scroll under [apologies for new thread]. It renders fine in Camino-Shiira, Safari, iCab, Firefox, IE Mac 5.2x, but not too good on Opera 8.52 Mac [fuhgeddabout Netscape 4x]. 1) Can someone provide some feedback on how it renders in Windows IE/FF? 2) Is the CSS a reasonable structure to convert the other pages of my site to? The template would be a fixed sidebar, fixed clock header (different-pages different-heights) and relatively positioned content. Two of the javascript clocks and the table are running ahead of time in debug mode. The test page is [obsolete link deleted]; clicking w3c css validator at bottom shows .css file. Issues in Opera-Mac indicate all is not well: a) table is one to two pixels wider (cut-off by overflow: hidden) b) scrolling table div eventually "catches" and drags fixed header when it scrolls. c) anchor "top" doesn't work from the bottom link. In it I meld Tonico Strasser's brilliant "Flexible Layout" (http://www.webproducer.at/flexible-layout ) with Stu Nicholls' mega-cool "How to Use CSS to Solve min-width Problems in Internet Explorer" (http://www.webreference.com/programming/min-width/ ). From a geek perspective this is a pretty cool layout: fully flexible source ordered pure CSS three (or two or one) full column layout with headers and footers and no javascript. It should look pretty much the same on any modern browser and should scale up and down smoothly as the font sizes are changed by the user. I'm curious how it works on real world browsers. Does it jerk or flicker as it is loaded or the browser window is resized? Does it scale up and down smoothly as you change the font size? Are the contents of the side columns always visible as you play with the browser window and font size? Do the side columns maintain their size and the center column shrink as the browser window shrinks until a minimum center column size is reached? Does it do anything funky? I've already found some minor funkiness on older versions of modern browsers running on Macs, but nothing awful, and the funkiness is due to browser bugs about which I can't do anything (data table captions, for example, don't seem to be understood well by Opera 6 for Macs . . . but then this is a data table caption issue, not a layout issue . . .). How does this layout work for you? In addition to the feedback, let me know the browser and platform you are using (eg., Firefox 1.0.6 on Windows XP). I'm particularly interested in feedback from folks testing it over a modem. Thanks! Here's the link to my test page: http://www.econinformation.com/layout_test.htm -- RS ASP css database List menu. Tested in IE6, IE7 and Firefox OK. Check it out and respond to my blog if problems. Has single click editing of menu items, iframe masks over objects, SQL server and access databases supplied and ready to test. css List database Menu version 1.0.0 : being a new forum user I cannot add url links, so copy and paste blog address below rwstewart.blogspot.com Since it's in the news since a few days that the upcoming Internet Explorer 7 will not be passing the Acid Test meant to demonstrate browser support or lack thereof for CSS2, I thought I'd humor everyone and post results from a quick experiment on how the four main browsers on Windows platfrom performed. In order of success, reference image first: Click here to view screenshots in full size Note the "ERROR" texts in Opera and IE. Ironically, despite The Opera Challenge to Microsoft in the Acid2 ring, Opera performs sub-standard itself. How do i change img button to 3d on hover or mouseover using css. Please advise. thanks 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. 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 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;} 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? 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.. |
|||||||