|
CSS - Tiny (missing) Text In Ie Not In Firefox
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?
Similar TutorialsIssue resolved using forum search. Thanks for having such great resources - I just had to search for a while. I am having a css issue with IE 6 showing a gap in mambo template however this does not appear in Firefox and the site looks perfect viewing in Firefox.. Over at http://www.stlaware.com and look at the weather box on the left side of the site if your using IE you will see a white gap I would say maybe 200ish pixel width on the right side of the weather box which I don't want any spaces or padding around the box but padding: 0px or margin: 0px doesn't seem to fix it. If you have both browser compare it in IE and Firefox and you'll see what I mean .. also on the right of the site is a random image and it also have the gap on each side of the image which is not seen in Firefox either Any way to correct this gap and make it disappear in IE? I am sorta a newbie in css but I am fast learner Here the part of index.php html table where the weather resides in .. Quote: <tr> <td width="112" height="34"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_43.png" width="118" height="34" hspace="0" vspace="0" border="0"></td> <td width="100%" background="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_27.png"> </td> <td width="10" align="right"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_30.png" width="7" height="34"></td> </tr> <tr align="left"> <td height="15" colspan="3" class="mainWindow"><?php mosLoadModules ( 'left' ); ?></td> </tr> and the right side table where random image reside in Quote: <tr> <td width="112" height="34"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_43.png" width="118" height="34" hspace="0" vspace="0" border="0"></td> <td width="100%" background="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_27.png"></td> <td width="10" align="right"><img src="<?php echo $mosConfig_live_site;?>/templates/stlaware/images/stlaware_30.png" width="7" height="34"></td> </tr> <tr align="left" valign="top"> <td height="15" colspan="3" class="mainWindow"><?php mosLoadModules ( 'right' ); ?></td> </tr> And partial of my css sheet Quote: /* Body */ BODY { margin: 0px 0px 0px 0px; background-color : #FFFFFF ; color : #465675; scrollbar-3dlight-color: #FFFFFF; scrollbar-base-color: #CCE1E3; scrollbar-darkshadow-color: #356C82; scrollbar-face-color: #CCE1E3; scrollbar-highlight-color: #CCE1E3; scrollbar-shadow-color: #CCE1E3; scrollbar-track-color: #CACEDB; scrollbar-arrow-color: #CCE1E3; padding: 0px; text-align: center; } .headertable { border-bottom: 1px solid #003366; } td.mainWindow { border-bottom: 1px solid #666666; border-right: 1px solid #666666; border-left: 1px solid #666666; } } td,tr,p,div { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #333333; } Any suggestion tips help assistance with this will be greatly apprecated .. the 'left' loadmodule where the weather is loaded into and the 'right' loadmodule is where the random image is loaded into Thank you Bill Guys, In IE, when I hover over a folder menu, the text in its sub-menu is missing. The entire navbar works fine in both Firefox and Chrome. Any suggestions? HTML PART: Quote: <!-- Start of Navbar header --> <div id="header"> <div id="lgo"><a href="index.html"><strong>RIVER rafting</strong></a></div> <ul class="menu"> <li><a href="index.htm" id="m1" class="act">home</a></li> <li><a href="locations.htm" id="m2">Locations</a> <ul id="me2"> <li><a href="locations.htm">Hiranandani</a></li> </ul> </li> <li><a href="corporateevents.htm" id="m3">Corporate Events</a> <ul id="me3"> <li><a href="corporateevents.htm#activities">Activities</a></li> <li><a href="corporate-events/locations.htm">Outbound Locations</a></li> <li><a href="corporate-events/goals.htm">Goals</a></li> </ul></li> <!-- <li><a href="index-3.html" id="m4">news</a></li> --> <li><a href="equipmentsales.htm" id="m5">Equipment Sales</a> <ul id="me5"> <li><a href="equipment-sales/markers.htm">Paintball</a></li> <li><a href="equipment-sales/atvs.htm">ATVs</a></li> <li><a href="equipment-sales/zorbing.htm">Zorbing</a></li> </ul> </li> <li><a href="aboutus.htm" id="m6">About Us</a> <ul id="me6"> <li><a href="about-us/contactus.htm">Contact Us</a></li> <li><a href="aboutus.htm">About Headrush</a></li> <li><a href="about-us/media.htm">Media</a></li> <li><a href="about-us/corporateclients.htm">Corporate Clients</a></li> </ul></li> </ul> </div> <!-- End of Navbar --> The CSS IS: Code:
ul.menu {
position:absolute;
top:135px;
left:0;
width:327px;
height:300px;
}
ul.menu li:hover > ul {
visibility: visible;
}
ul.menu ul {
visibility: hidden;
position: absolute;
width: 80%;
height:80%;
top: 1px;
}
ul.menu ul li {
float: none;
background-position: 0px 46px;
font-size:0.4em;
line-height:31px;
padding:0 0 0 15px;
}
ul.menu ul li a:hover {
text-decoration:underline;
}
ul.menu li {
width:100%;
overflow:hidden;
height:50px;
}
ul.menu li a {
display:block;
font-size:4.0em;
line-height:57px;
text-transform:uppercase;
text-decoration:none;
letter-spacing:0px;
background:url(images/menu_bg.png) no-repeat top left;
color:#000;
padding:0 0 0 25px;
height:53px;
margin:-3px 0 0 0;
}
a#m1 {
width:327px;
background-position: 0 -103px;
}
ul#me1 {
top: 1px;
left: 40%;
}
a#m2 {
width:327px;
background-position: 0 -86px;
}
ul#me2 {
top: 45px;
left: 55%;
width:150px;
}
a#m3 {
width:327px;
background-position: 0 -6px;
}
ul#me3 {
left: 85%;
top: 13px;
width:180px;
}
a#m4 {
width:327px;
background-position: 0 -46px;
}
a#m5 {
width:327px;
background-position: 0 -6px;
}
ul#me5 {
left: 80%;
top: 50px;
width:130px;
}
a#m6 {
width:327px;
background-position: 0 -163px;
}
ul#me6 {
left: 55%;
top: 45px;
width:180px;
}
a:hover#m1, a.act#m1 {
width:327px;
background-position: -327px -103px;
}
a:hover#m2, a.act#m2 {
width:327px;
background-position: -327px -86px;
}
a:hover#m3, a.act#m3 {
width:327px;
background-position: -327px -6px;
}
a:hover#m4, a.act#m4 {
width:327px;
background-position: -327px -46px;
}
a:hover#m5, a.act#m5{
width:327px;
background-position: -327px -6px;
}
a:hover#m6, a.act#m6{
width:327px;
background-position: -327px -163px;
}
Thanks Hi there, While this menu works in IE and FF, there's still a little problem with it working perfectly in FF. Basically, it's when you want to mouse over and get the second dropdown option...it only shows part of the button. I'm almost positive this has to do with it not "escaping" the container I have set for the whole design, as the menu option stops right at the border/width of the parent container. For instance, if you go here (with FireFox), and then select from the right side menu: Homes for Sale > Fort Collins, CO > Homestead You'll notice that it only says "Homest" when you want to view the second dropdown option. I need it to show the whole name. I tried setting the z-index higher for these particular classes, but no dice. Is there something I'm missing? Here's the code: Code:
/* Sidebar / Menu */
#sidebar {
float: left;
top: 16px;
left: 2px;
display: block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
letter-spacing: 1px;
text-align:right;
z-index: 3;
}
#sidebar ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 4;
}
#sidebar li {
display: block;
float: left;
min-height: 20px;
position: relative;
text-align: left;
padding: 5px 20px 4px 16px;
margin: 0px 0px 0px 0px;
}
#sidebar h2 {
font-size: 1.2em;
padding: 0;
margin: 0;
}
#sidebar li ul {
width: 150px;
height: auto;
top: 100%;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 3px;
}
#sidebar li.LargeMenu ul {
width: 200px;
height: auto;
top: 100%;
left: 0px;
}
#sidebar li ul li {
text-align: left;
width: 118px;
height: auto;
min-height: auto;
display: block;
}
#sidebar li.LargeMenu ul li {
text-align: left;
width: 198px;
height: auto;
min-height: auto;
display: block;
}
#sidebar a {
text-decoration: none;
letter-spacing: 1px;
}
#sidebar li li ul {
top: 0;
left: 0;
}
#sidebar li li:hover ul {
left: 150px;
}
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
position: absolute;
display:none;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}
#sidebar #PhpWebcontent {
display:none;
}
/* define the consecutive colors */
#sidebar {
color: #FFFFFF;
}
#sidebar ul{
-moz-opacity: 1; /* for mozilla */
opacity: 1; /* for safari */
khtml-opacity: 1/* for konquerer and older safari */
}
#feeds li {
background: url(images/feed.png) top left no-repeat;
padding-left: 18px;
}
#sidebar h2 {
color: #FFFFFF;
}
#sidebar a {
color: #ffffff;
letter-spacing: 1px;
}
#sidebar ul li:hover {
background: #333333;
z-index: 900;
}
#sidebar ul li ul {
}
#sidebar ul li ul li {
background: #333333;
}
#sidebar ul li ul li:hover {
background: #666666;
}
#sidebar ul li ul ul li{
background: #666666;
}
#sidebar ul li ul ul li:hover {
background: #999999;
}
/* End Sidebar / Menu */
Thanks in advance. 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. 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. 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. 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??? 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;
}
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>
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>
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 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 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 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.) Hi there...First post in this forum cause Firefox (and mozilla / netscape) are driving me mad! Please consider the following code: Code: <html>
<head>
<style type="text/css">
@media print {
p {font-size:11px;text-align:justify;}
table {width:100%;}
}
</style>
</head>
<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie, tortor id tempor fringilla, ante massa consequat dui, eget fermentum ante dolor sed felis. Curabitur mollis, velit sit amet lobortis pulvinar, mi lorem condimentum metus, cursus malesuada lectus leo in purus. Suspendisse vehicula, nisl ac varius iaculis, purus felis sodales lorem, in porttitor massa risus a odio. Cras urna felis, sagittis bibendum, ultrices vel, accumsan ac, pede. Maecenas felis nisl, rhoncus non, imperdiet in, tincidunt vitae, ante. Vestibulum cursus, elit non rutrum eleifend, arcu ligula bibendum velit, eget pharetra dui ipsum et tortor. Praesent lectus felis, consectetuer a, varius fringilla, elementum quis, diam. Morbi posuere sem eget odio. Pellentesque imperdiet tellus eget augue. Aliquam et tortor et libero nonummy tristique. Sed feugiat pellentesque sem. In hac habitasse platea dictumst. Vivamus a ipsum eu odio fringilla scelerisque. Ut et neque. Sed fermentum neque nec pede. Morbi enim erat, tempor nec, porttitor eu, tempus ut, nunc. Pellentesque lacinia dapibus urna. Curabitur leo tortor, cursus quis, semper quis, luctus ac, quam. Phasellus sit amet nisl. Nullam molestie nonummy lorem. Etiam consectetuer, ante in lacinia molestie, tellus nisl tincidunt dui, in commodo lectus elit ut elit. In ornare fermentum ante. Nullam felis. Maecenas tempor, lectus vel dignissim tincidunt, metus erat feugiat odio, eu dapibus mauris orci vitae enim. Etiam quis quam vitae risus aliquam iaculis. Ut nunc nulla, hendrerit ut, auctor id, ullamcorper a, risus. Integer fringilla, erat eu interdum imperdiet, lorem purus fermentum wisi, at mattis lectus nisl sit amet ante. Cras dolor. Nunc elementum quam at ligula. Maecenas ut mi ornare neque suscipit vulputate. Praesent ornare. Pellentesque nonummy posuere massa. Morbi sed risus et purus eleifend pulvinar. Proin suscipit ultricies enim. Morbi luctus. Nam quis sem. Quisque mattis. In laoreet velit eu nunc.
</p>
</td>
</tr>
</table>
</body>
</html>
This is basically a reconstruction of an existing problem of a far more complex design...in any case, if you try to print->Preview from Opera or IE 5+ everything is sweet...However, Firefox (and the other Gecko browsers) will not properly justify the text when previewing. More precisiely: Firefox will wrap text over 12px correctly yet for small text, the p block will not wrap properly and some text will be cropped. I'm not fussy about justification but even when I removed it I would get the same problem. I'm sure there's a perfectly logical solution to this problem. Maybe the width:100% gets inherited by the td and p but that should not affect the layout...Despite my various experiements of chaging the width and the wrapping properties, I could not solve this. I'm still learning the intricasies of block elements in CSS2 so I would definitely appreciate any help! Thanks in advance, Angelos Hello, I want to make a shadow effect for my content panel. To do this I made 4 div inside a wrapper. The main content, the shadow top right, the shadow right and the shadow footer. In the code below I just used simple colors. The problem is that the div which should be on the right side is missing. What can be wrong? 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>Untitled Document</title>
<style type="text/css">
<!--
.main {
width: 400px;
}
.main .content {
background-color: #CCCCCC;
width:390px;
float:left;
}
.main .topcorner {
background-color: #006666;
margin: 0px;
padding: 0px;
float: left;
height: 10px;
width: 10px;
}
.main .right {
background-color: #FF9933;
margin: 0px;
padding: 0px;
float: left;
width: 10px;
}
.main .bottom {
background-color: #99FFCC;
clear: both;
height: 10px;
width: 400px;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="content">Main content<br>with shadow border</div>
<div class="topcorner"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
I know this should probably be turend into pure css but for now I'm stuck with tables i have the following table structure Code: <table class="subitemtable"> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItemOn"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> </table> using the following css styles Code:
.subItemTable{
width:100%;
border-collapse: collapse;
margin:0px;
padding:0px;
}
.subItem{
margin:0px;
border-bottom: 1px solid #0E59AE;
border-right: 1px solid #0E59AE;
background-color:#e8e8e8;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItem a{
font-size: 9.5pt;
color: #666666;
}
.subItem a:link,.subItem a:visited{
text-decoration:none;
}
.subItem a:hover{
text-decoration:underline;
}
.subItemOn{
margin:0px;
border-right: 1px solid #fff;
border-bottom: 1px solid #0E59AE;
background-color:#ffffff;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItemOn a{
font-size: 9.5pt;
color: #666666;
}
.subItemOn a:link,.subItemOn a:visited{
text-decoration:none;
}
.subItemOn a:hover{
text-decoration:underline;
}
my problem is after the first cell the bottom right most pixel of the border is just missing. This happens in firefox and IE ..The attached picture should show what I'm talking about. Thanks for your help |
|||||||