|
CSS - Text Is Hiding In The Right : Firefox
in my site text is appearing correctly in IE but it is hiding in the right site. the site is in N E P A L I language and english. Just below the poll in the site i could not arrange the table the content of table is also hidden in right side. I've tried by reducing the width of the table in the content but could not succeed. the url is janapukar . com.
Please suggest. Similar Tutorialshi in Internet Explorer, this style works fine and when i print it prints the div and hides it on screen. however, in firefox, it does not hide the div on screen. can anyone help with this? many thanks Code: <style media="print">
.noPrint { display:none;}
.Hidden { display:inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
</style>
<style media="screen">
.Hidden { display:none;}
</style>
<div class="Hidden">Just an example of text in a div.<br /><br />Thank you</div>
</p>
<p><input type="button" value="Print this page" onclick="printpage()" /></p>
Is there a way to hide part of my css from Firefox but show up in IE? Hi, I have a problem with a menu. I use joomla 1.5 and I create a sprite CSS menu as follow: Code:
ul.menu-central {
width: 970px;
display:inline;
}
ul.menu-central li {
display:inline;
}
ul.menu-central li a {
display: block; float:left; margin-left:5px; height: 80px;
background-image: url((URL address blocked: See forum rules)); text-indent: -9999px;
}
ul.menu-central .item67 a {
width: 150px; background-position: -10px -9px;
}
ul.menu-central .item72 a {
width: 150px; background-position: -170px -9px;
}
ul.menu-central .item97 a {
width: 150px; background-position: -330px -9px;
}
ul.menu-central .item79 a {
width: 150px; background-position: -490px -9px;
}
ul.menu-central .item98 a {
width: 150px; background-position: -650px -9px;
}
ul.menu-central .item99 a {
width: 150px; background-position: -810px -9px;
}
a { outline: none; }
In IE the bullets of the list are hidden, instead in Firefox are visible. I try to put: list-style:none and list-style-type: none in the css code, but nothing has happened. Someone could you know how can I hide the bullets also in Firefox? Thank you I have a problem... I have text in a div class "schedule" which is dragged in dynamically. Basically all the headers are in span tags with the style "font-weight:bold" on them. I want to hide all the non-bold text, ie all the text in the div class .schedule that doesn't have a <span> tag around it. Any ideas? I have recently seen an article from 2005 stating that using CSS to hide text could lead to flagging from Google and other Search Engines as Spam sites. My question is, if hidden text is used for certain elements of the page such as branding a logo as an h1 tag, will my site be penalized? I don't want to risk being blacklisted from Google, but If all I have is an image header anyways, would it hurt to use a CSS text indentation to hide the h1 text? I notice that several of the designs on CSS Zen Garden use this techinique for header images, yet the page has a google page rank of 9. Any knowledgeable advice or references to recent articles would be very helpful including personal experience. Thanks in advance! Hi all, Simple issue - got a form with textboxes whose screen width will be less than the max width (for design and spacing purposes). However, I'd like the print stylesheet to make the entire contents of the textbox visible when they print. A year or two ago, setting input{width: auto;} in the print stylesheet worked fine, but it seems the newer browsers (IE 6+. latest FF) do not support this method. Any thoughts on how to do this? Thanks, AJ What I'm trying to do is create a menu for an AJAX function in which my content will slide. I don't know need help with the AJAX portion. Where I'm having my trouble is that I want to display four items at a time and then hide the other content to the right of this. When someone would click the button it would slide to left and display the next four elements. I have my four elements and have set a width for them. I am floating these elements left to get them to line up next to each other and I'm using overflow:hidden to hide the content you don't set. What I'm doing wrong is with the width portion. Code: #rightnav {
margin-top:14px;
background-image:url(../images/loader.gif);
background-position:center center;
background-repeat:no-repeat;
width:282px;
overflow:hidden;
}
#rightnav hr {
color:white;
background-color:white;
height:1px;
border:none;
width: 250px;
margin: 7px auto ;
}
#rightnav, #wslist, #rslist, #wtlist {
height:306px;
float:left;
}
#wslist {
background-color:#336699;
}
.list {
width:282px;
float:left;
}
HTML as follows:
<div id="rightnav">
<div id="rightbox">
<div id="wslist">
<div id="video">
Word on the Street: <span id="linkIntro">[ <a id="introVid" href="#">Play intro video</a> ]</span>
</div>
<hr />
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Why is my family so screwed up?</p>
<p id="vidSub">What to do when families fight</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This my second Title</p>
<p id="vidSub">A video on titles</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">This is my third title</p>
<p id="vidSub">Yay for subtitles, esp ESL</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">Four titles are great though</p>
<p id="vidSub">I am full of English SDH</p>
</div><div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="list">
<div id="icon"><img src="images/cam.png" /></div>
<div id="vidText">
<p id="vidTitle">I am the outcast of the group</p>
<p id="vidSub">Mah.. nobody loves me</p>
</div>
<div class="clearfix"><!--cleared--></div>
<hr />
</div>
<div class="clearfix"><!--clear--></div>
</div>
</div>
</div>
What I've noticed if I don't put the width property in the div floats to the left as desired. But when I put the width property in and use overflow it just knocks it down below it. Any suggestions? Hi, Please, help me how can I have flexible box with background color in css that will expand according to the contents. Following is the test code that I have used, it is working in IE but in firefox contents come out of the box. I am looking for the cross browser fix for this:- The CSS File I am using contains the following:- div#content{margin-left:190px;margin-top:5px;} div.box { width: auto; min-width: 40px; border: 2px solid #781351; padding: 3px; background: #d7b9c9; white-space: nowrap } following is my html file:- <html> <head> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <title>TEST PAGE</title> </head> <body> <div id="content"> <div class="box"> <H1>Sam</H1> <H1>Sam</H1><H1>Sam</H1><H1>Sam</H1><H1>Sam</H1> <p>The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology </p> </div> </div> </body> </html> I know one fix is overflow:auto; property of css but this brings scroll bar in firefox which i don't want. Kindly, help as soon as possible. Thanks, sameer. Please look at this page - http://www.tmhdesign2.com/home-payment-calculator.asp Why can I not justify the paragraph of text on this page for Firefox??? I have a website created with absolute positioning. So when someone increases the font of the text on the page (with the view menu for the browser), some of my text may run outside of the images that they are placed over. I had this problem with IE as well as firefox, but set all of the text with font-size in my CSS file. Now IE works perfectly, but in firefox, the size of the text can still be increased, thus, making the text expand outside of the images. How can I prevent this in firefox? Second question... is there a way to set the size of the actual bullets themselves to a set size so they dont increase/decrease? I'm referring to the bullets, and not the text beside the bullets... I may go with images for the bullets, but was trying to prevent that. Any help would be appreciated. Thanks. I have an extremely weird problem with the formatting on my web player on a website I am creating. Its not the player, but I can't seem to figure out whats going on precisionstudiollc(dotcom)/index_mub(dot)html . In Mozilla the text in the web player works renders fine, in ie 7, the text gets cut off or doesn't render correctly...Any ideas? On the mouseover of text in one table/cell, I'm looking to change the background color of a cell in a different table. The code below works in Chrome & IE 8 but not Firefox (3.6.2) I tried it with javascript also. 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>Untitled Document</title>
<style type="text/css">
.hlt {
background-color: yellow;
color: black;
}
#testtag {
color: #666;
position: absolute;
top: 44px;
left: 0px;
text-align: center;
}
#maintag {
color: #000;
position: absolute;
top: 100px;
left: 0px;
background-color:#CC6
}
</style>
<script type="text/javascript">
function mouse_event(obj, newClass) {
obj.className = newClass;
}
</script>
</head>
<body>
<div id="maintag">
<table width="900" height="37" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" id="cellone"> </td>
<td width="150" id="celltwo"> </td>
<td width="150" id="celltre"> </td>
<td width="150" id="cellfour"> </td>
<td width="150" id="cellfive"> </td>
<td width="150" id="cellsix"> </td>
</tr>
</table>
</div>
<div id="testtag">
<table width="900" height="37" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150"><a href="#" onmouseover="cellone.className = 'hlt';" onmouseout="cellone.className = '';">Data 1.1</a></td>
<td width="150"><a href="#" onmouseover="celltwo.className = 'hlt';" onmouseout="celltwo.className = '';">Data 1.2</td>
<td width="150"><a href="#" onmouseover="mouse_event(celltre, 'hlt');" onmouseout="mouse_event(celltre, '');">Data 1.3</td>
<td width="150"><a href="#" onmouseover="cellfour.className = 'hlt';" onmouseout="cellfour.className = '';">Data 2.1</td>
<td width="150"><a href="#" onmouseover="cellfive.className = 'hlt';" onmouseout="cellfive.className = '';">Data 2.2</td>
<td width="150"><a href="#" onmouseover="cellsix.className = 'hlt';" onmouseout="cellsix.className = '';">Data 2.3</td>
</tr>
</table>
</div>
</body>
</html>
Hello. The address text on the following page doesn't line up. The address/phone/fax for each location should be side by side. Firefox 3 works fine. IE6 the "Westwood Location" text moves down below. What am I missing?' http://nessphysiotherapy.com/contact.php Thanks I'm a little new to the use of css for layouts and had a few little problems on the way. The major problem I haven't been able to solve can be seen in the following 2 pictures. From what I have read before IE misinterrupts the box idea a bit so it might be the fact that IE is just showing it up wrong giving me false hope. IE - URL Netscape - URL I want to have the div have a minimum height as I state in the stylesheet, and then the div will stretch to the height of the text if that is higher than the minimum height. The code I have comes out the way I wish it to in IE but in Netscape and Firefox, the background color stays to the div height given, but the text overflows. I have tried playing with the overflow options but this did not seem to work. I have a feeling it is just a simple solution but I may be far off with the way it is designed with the blocks and inline, etc. I looked at a few examples and tutorials on the web and this is what I have come up with. The actual website of this has lots more content but I am trying to not make it too complicated and then I will apply it to the site. Any help would be greatly appreciated. URL is URL Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<p>logo</p>
</div>
<div id="headerPic">
<p>headerpic</p>
</div>
</div>
<div id="menu">
menu
</div>
<div id="middle">
<div id="contentPic">
<p>d</p>
</div>
<div id="content">
<p>
overflowing text is here
</p>
</div>
</div>
<div id="footer">
<div id="footerLeft">
<p>left footer</p>
</div>
<div id="footerCenter">
<p>center footer</p>
</div>
<div id="footerRight">
<p>right footer</p>
</div>
</div>
</div>
</body>
</html>
********************************************* Code:
#wrapper {
background-color: #000000;
width: 750px;
text-align: left;
margin: auto;
}
body {
background-color: #CCCCCC;
margin: 0px;
text-align:center;
}
#header {
background-color: #FFFF00;
display: block;
height: 100px;
}
#menu{
background-color: #00FF00;
display: block;
width: 750px;
height: 50px;
}
#middle{
background-color: #CC0099;
display: block;
height: 320px;
}
#footer {
background-color: #6699CC;
display: block;
height: 30px;
}
#logo{
display: inline;
width: 200px;
height: 100px;
float: left;
}
#headerPic {
display: inline;
width: 550px;
height: 100px;
float: left;
}
#contentPic {
display: inline;
width: 200px;
height: 320px;
float: left;
}
#content {
display: inline;
width: 550px;
height: 320px;
float: left;
}
#footerLeft {
display: inline;
width: 100px;
float: left;
}
#footerCenter {
display: inline;
width: 450px;
float: left;
}
#footerRight {
display: inline;
width: 200px;
float: left;
}
Sounds simple... but I can't find an answer. I've a simple table row with a css background image. In the row I've my text links and two images that are links. While in firefox everything lines up nice and straight... in intercrash exploder it's all over the place, the images are almost subtext and the text is almost text top.. Any advice? The page can be seen at addcolour (co uk extension) CSS in a folder css the file name is addcolour Many thanks d I'm trying to go through examples out there and get a handle on stretching background images with an opacity text box overlaying the image. I have it working in IE7, IE6, and Firefox 2.0.0.16 with one weird little thing. In Firefox only, if I have the page designated as the home page or I hit refresh, the background image doesn't appear - just a completely white page. If I have it as a link or highlight the url itself and hit enter, the background appears. Any ideas? It's pretty hideous - it's a test, but here's the url: http://www.mahec.net/default3.aspx Here's the code: Code: <%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; color: #fff;}
a { color: #fff; }
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {
position:relative;
width:90%;
padding:25px 25px 25px 25px;
z-index:1;
background-color:#ffffff;
color:#000000;
opacity:0.6;
filter: alpha(opacity=60);
}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="http://flounder2.mahec.net/images/rhodo.jpg" alt="my 2 cats" id="bg" />
<div id="content">
<h1>Faking a Stretched Background Image</h1>
<h2>Across the Whole Page</h2>
<p><a href="/od/css3/f/blfaqbgsize.htm">Learn how to stretch a background image.</a></p>
<p>paragraph text</p>
</div>
</form>
</body>
</html>
hi, im trying to get a long text to wrap in a div with a given width PHP Code: <div style=" width: 100px; word-wrap: break-word; "> aaweofajw;eofija;weoifja;weoifja;woeifja;woeifja;wieofj </div> however, the closest thing i found is "word-wrap: break-word;" which only works in IE. is there anyway i can get it to work in netscape or firefox? thanks! justin I do relatively simple websites and I did a simple one for a client of mine and have a problem selecting text in a column. The website is, jeffwalterssafety.com I can't seem to even touch the text. It acts like an "image" when looking at it in Firefox/Chrome but I can select it in IE 7. Be gentle in the site's criticism... Also let me know if it's necessary to have my CSS file here. Thanks Everyone, I'm having an issue with the first DIV intensive site I am doing: IE will not recognize links or allow me to highlight text, or fill in forms in the left side of DIVs that I have on a site I am developing: httP://www.ephire.com/mack If you try and click the "more" link up top, or goto the "contact" link, no joy in IE, but Firefox works just fine: Here is the code I think is the culprit: Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale); And here is the whole page. I'm seriously stumped...I tried going through and deleting things line by line and jacking with settings, and the only thing that allowed anything to work was messing with the section of code above. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MACK Insurance</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>
* html #wrapper {
background: url(images/body_t.gif) 24px 0px no-repeat;
backgro\und: none;
}
* html #ie {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_t.png');
height: 39px;
width: 434px;
position: absolute;
margin-left: 24px;
}
* html #body {
background: url(images/body_bg.gif);
backgro\und: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);
}
.footerie {
display: block;
disp\lay: none;
}
.footer {
display: none;
disp\lay: block;
}
</style>
<![endif]-->
</head>
<body>
<center><table><tr><td> <div id="ie"></div>
<div id="wrapper">
<h1><a href="/"><img src="images/logo.jpg" width="200" height="30" alt="logo" /></a></h1>
<div id="body">
<div class="inner">
<div id="content"><div>
<font face="Arial" size="2"><b>Health, Life, Disability</b></font>
<br>Designed Benefits Associates is dedicated to finding the best health care program to suit the needs of a family or individual. <br><br>Our specialty is paired programs that protect not one, or two, but multiple areas of life. <a href="index_01.html"><img src="images/btn_more.gif" width="52" height="6" alt="more" /></a>
</div></div><!-- end content -->
<div id="page_title">
<img src="images/title_main_page.gif" width="47" height="200" alt="main page" />
</div><!-- end page_title -->
<div id="news"><div><div>
<font face="Arial" size="1"><b>Things to Consider</b></font>
<img src="images/picture_3.jpg" width="96" height="56" alt="picture 3" />
<p>04-20-2006</p>
<p>As your insurance broker, we daily search for the best priced health plans with the optimum benefits, so you can spend time doing what's important.<br><br><br></p>
</div></div></div><!-- end news -->
<div class="clear"></div>
</div><!-- end .inner -->
<div id="footer">
<img src="images/footer.gif" width="435" height="196" alt="footer" class="footer" />
</div><!-- end footer -->
</div><!-- end body -->
<div id="paper">
<div class="inner">
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Health</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a>
<br><br>
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Life</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a>
<br><br>
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Disability</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_4.jpg" width="130" height="74" alt="picture 4" /></a>
<p>A single plan can add peace of mind, all three together can insure stability.</p>
<center><font face="Arial" size="1"><a href="contact.html"><b>Contact</b></a> - <a href="index.html"><b>Home</b></a> - <a href="testimony.html"><b>Testimony</a></font></center>
</div><!-- end .inner -->
</div><!-- end paper -->
</div><!-- end wrapper -->
<div style="clear:both;position:relative;display:block;margin-top:530px;" >
</div></td></tr></table></center>
<center><br><table><tr><td> <br><br><br><center>Powered by <a href="http://www.ephire.com">ephire</a></center></td></tr></table>
</body>
</html>
Any help is appreciated~ I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) |
|||||||