|
CSS - Css Vertical Text Does Not Work In Mozilla??
i was looking for way how to display vertical text with css and found a solution:
#vertical { writing-mode: tb-rl; filter: flipH flipV; } <div id="vertical">display vertical text</div> however, this works fine with IE 6.0, but is comletely ignored with Mozilla 1.4! is it that Mozilla just doesn't support this or is there a way how to work it around(write it in a way both IE and Mozilla could understand it)? i'll aprecciate your help very much.. Similar TutorialsHi: After entering data into a database from a form (HTML) using php, I now have to retrieve the data, place it in a form style and print. Everything works fine when I do the print except for one thing. Description of Problem: When I print using IE 6.0, all vertical and horizontal lines which separate data from each other (cells) print. When I do the print in Mozilla, only the horizontal lines appear. How can I fix this, or, what makes it do this in Mozilla and not in IE? There is one thing I'm not doing, I'm not using CSS to format the form. Could this fix the problem? Any suggestions will be greatly appreciated! Thanks! I have a vertical menu on the left-hand side of my website, everything appears correctly when the page is first loaded but when I click on a menu item the entire div appears to shift to the left (10px). If I refresh the page it also appears correctly, so it is only when I have clicked on a menu item. I do know that there are plenty of problems with IE, but the menu does appear and function correctly in both IE and Opera. I am only having the problem with Mozilla. I am thinking that it may be something to do with the link visited properties but am not sure what. I have validated the css via the W3C website but there were no errors reported. The css segment is as follows: #subnavcontainer { position: absolute; left: 10px; top: 0px; margin-top:0px; padding-top: 0px; height: 700px; width: 160px; background: url("../images/bg_vert.gif") no-repeat; } #subnavcontainer ul { list-style-type: none; color: #000; margin-top: 0px; margin-left: 0px; padding-left: 0px; padding-top: 0px; font-family: Arial, Helvetica, sans-serif; display: block; width: 200px; background-color: #D7D7D7; } #subnavcontainer li { padding-left: 0px; margin-top: 1px; } #subnavcontainer ul li { margin: 0 0 1px 0; padding-left: 0px; } #subnavcontainer ul a { display: block; padding: 0px 2px 2px 5px; width: 160px; color: #000; background-color: #F0EFEE; text-decoration: none; border-left: 4px solid #B09292; } #subnavcontainer ul a:hover { color: #000; background-color: #fff; text-decoration: none; border-left: 4px solid #FF0000; } The html segment is as follows: <div id="subnavcontainer"> <ul> <li> <a href="../content/company/se_company_overview.htm" target="mainFrame">Overview</a> </li> <li> <a href="../content/company/se_company_location.htm" target="mainFrame">Location</a> </li> <li> <a href="../content/company/se_company_contact.htm" target="mainFrame">Contact</a> </li> </ul> </div> Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. Hi all i am using the CSS display property to show/hide selected text on a webpage. The user clicks on a link which then shows hidden text and then clicks on another link to hide the text. This works fine in IE but not in Mozilla. does anyone know what i can do to make it work in Mozilla ? atttached is a zip file of my webpage/code thanx chris hello, don't mozilla (or netscape, both the latest versions) support scroller created in CSS ?? The below code works fine in Internet Explorer but in Mozilla there is no scroller shown. .... Code: <div style="width:100%; height:430; overflow-y:auto; overflow-x:auto; border:1px dashed black; text-align:justify; background-color:white;"> // contents ... </div> Comments on alternative solutions to above code...??..anybody? Hey, I have created a site but here is the 1 problem. My CSS doesnt work in firefox. But the site looks perfect in ie; does anyone know why this could happen. Thanks. I use font-family: etc...... color and bgcolor. Thanks. I got this WP style, and I edited it quite a bit. Code: #menu {
clear: right;
float: left;
position: relative;
padding:0 10px 0 10px;
margin:0 0 0 34px;
width: 160px;
/* border-left: 1px solid #bbaf95;
border-right: 1px solid #bbaf95; */
background: #fff rl(wp-images/bg.png) repeat-y 100% 0;
}
The problem being is that the image border does not reach the where the css borders were, and it does not stretch 100% to the bottom either. Even more, it takes three seconds to load from where it use to take less than one. Check it out: http://randomized.us Thanks in advance. Hi, I am having a strange issue with my new site code . I am experimenting with a new look and decided to go with all css, no tables look. I have a div where the enteries go. I entered some random text to see how it looks. To my surprise in Mozilla 1.7.10 the text overflows from the entry div into the other one while it works fine in Internet Explorer ( the post box expands automatically to fit all the text). Second the in the commentsarea div, why is the "comments(1) floating in the middle of the entry box instead of the bottm right ? here is the code in question 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=iso-8859-1" />
<meta name="author" content="Kashif Khan" />
<style type = "text/css" media="screen">
body
{
background-color:#A2C257;
color: #333;
padding:0;
margin:0;
font: 90% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
#page
{
text-align: left;
margin: 20px auto;
padding: 0px;
width: 800px;
background-color:#A2C257;
}
#header
{
height:105px;
margin-bottom: -1px;
background: url("url13.jpg") no-repeat top center;
}
.entry
{
border: 1px solid #FF4500;
background-color:white;
height:200px;
margin:15px 0px;
padding: 15px 20px 20px 20px;
}
#menuarea
{
padding:0px;
margin:0px;
font:90% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:center;
}
#menuarea #navbar
{
text-align:center;
padding-bottom:5px;
padding-top:5px;
padding-left:0px;
margin-top:0px;
margin-left:0px;
background-color:#white;
color:white;
line-height: 18px;
margin: auto;
width:100%;
}
#navbar
{
font:80% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:right;
margin: 0px 0px;
}
#navbar a
{
color:white;
}
#navbar li
{
display:inline;
padding: 5px 0px 5px 0px;
}
#navbar li a
{
padding: 5px 10px 5px 10px;
color: white;
text-decoration:none;
border-right: 1px solid #fff;
}
.center
{
text-align:center;
}
p img
{
padding: 0;
max-width: 100%;
}
a
{
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
a img
{
border:none;
}
.commentsarea
{
font:80% Verdana, Times New Roman, Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:right;
margin:0px 0px ;
}
</style>
</head>
<body>
<div id = "page">
<div id = "header">
</div>
<div id="menuarea">
<ul id="navbar">
<li><a href="">Root</a></li>
<li><a href="archive.php">Archive</a></li>
<li><a href="search.php">Search</a></li>
<li><a href="mailme.php">Email Me</a></li>
<li><a href="http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://kashif.f2o.org/xml.gif" align="middle" border="0"/></a></li>
<li><a href="http://my.msn.com/addtomymsn.armx?id=rss&ut=http://feeds.feedburner.com/kashiflocalhost/root&tt=CENTRALDIRECTORY&ru=http://rss.msn.com'"><img src="http://sc.msn.com/c/rss/rss_mymsn.gif" alt="" style="border:0"/></a></li>
<li><a href="http://www.bloglines.com/sub/http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://www.bloglines.com/images/sub_modern6.gif" border="0" alt="Subscribe with Bloglines" /></a></li>
<li ><a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/kashiflocalhost/root"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" width="91" height="17" border="0" align="middle" alt="Add to My Yahoo!"></a></li>
</ul>
</div>
<div class = "entry">
Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.Ack comment spam, not as bad as some sites but still undesireable ...... maybe another project for the summer lol
Update: Made a couple of changes in the code , and hopefully this should keep the comment spamming at bay.
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go. 2
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.3
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.4
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.5
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.6
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
<div class = "entry">
This where the enteries will go.7
<p class = "commentsarea">
<a href = "comment.php">Comments (1)</a>
</p>
</div>
</div>
</body>
</html>
Thanks I have some text in a div tag, but Mozilla aligns it to the bottom, where as IE alignns it to the top. Code: <div id="bottom" class="bottom" align="center">
<p>Site active since 18 November 2003. This page last modified on: 1 March 2006<br> Webmaster:
<a href='mailto:info@biodiversity.org.na'>info@biodiversity.org.na</a>. Site design, layout and coding by John Irish.</p>
</div>
How can I get them to vertically align them same? Thanks. -Sean Hi, I've seen a number of posts and web pages about this but so far have NOT found a method that conforms to the w3.orgs css standard. There seems to be a lot of interest in this and l wondered whether anyone has found a work around that is compatible on more browsers than I.E? what is the tag for writing vertical in CSS? Ok...I am dabbling with CSS and I was wondering if there was anyway to specify your text to run bottom to top instead of left to right in a table cell. Anyone know if it can be done? I'm trying to get vertical text in a menu ie h o m e - l i n k - And so on how can this be done thanks Hi guys, I'm still a beginner at CSS and I have run into a problem... In my footer, I want all the text to be aligned vertically and horizontally in the middle. eg. ------------------div-------------------- ............. text text text text text ------------------div-------------------- Can you please show me what text I would need to put in the #footer? My footer is 900px wide and 120px high. I am adding more than one line of text. If there's any more info u need from me to solve this problem then please ask. Any help will be great. Thank you very much hi. i'm trying to have some text in a div, but also i want the text align to the bottom of the div. something like. but i don't know how... have a look at http://www.desorden.net/prueba.html any ideas? thanks in advance I have what I think is an easy question for you guys. I have an absolute positioned element and I gave it a height of 100px. I want to know how to make it so that any text that I enter goes to the bottom of this element. By default, the text appears at the top left. I tried vertical-align with all of its values, but none of them worked. The only way I could get it to appear the way I wanted was to use line-height. Using line-height I am able to get the text where I want it, but it doesn't seem like this is the way it should be done. Is there a way in which you don't have to specify a specific line-height value to get the where you want and it make it so all text appears at the bottom instead of the top? Here is what it looks like, and the CSS is below. Thanks. Code:
<html><head><title>test</title>
<style type="text/css">
body {
background-color: white;
}
#top {
position: absolute;
left: 20%;
right: 20%;
top: 2.5%;
height: 100px;
color: white;
background-color: rgb(20%,20%,20%);
border: 2px solid red;
line-height: 180px;
}
</style>
<body>
<div id="top">
this is a test
</div>
</body>
</html>
How do you go about vertically aligning text in a <div> tag that is 200px in height? How exactly can i vertically align text in css, i can't seem to find an easy way to do it, i basically want my text to be in the middle of a divs height, so much easier in tables heh. Tried padding but that then adds to the height, making it pointless for this use |
|||||||