|
CSS - Firefox's Cell Padding Doesnt Work If Percentage
I have added a percentage padding to some cells of my website (I'm really obliged to use tables and cells for that part of my website, so please do not suggest replacing the cells to DIVs as a solution). For some odd reason, the percentage padding shows just fine with Opera or Internet Explorer, but does not work at all in Firefox. Here is my CSS (and in dark red bold, the percentage padding concerned):
Quote: html, body { margin: 0px; padding: 0px; background-color: #ffffff; font-family: verdana, tahoma, serif; font-size: 11px; color: #000000; } a:link, a:visited { text-decoration: none; color: #ff0000; } a:active, a:hover { text-decoration: underline; color: #ff0000; } form { margin: 0px; } img { border: 0px; } table { border-collapse: collapse; } #top { background: url(../images/top.jpg); height: 100px; } #bar { background: url(../images/bar.jpg); font-weight: bold; color: #ffffff; height: 26px; width: 100%; } #bar1 { position: absolute; top: 100px; left: 0px; background: url(../images/bar1.jpg); height: 26px; width: 4px; } #bar2 { position: absolute; top: 100px; right: 0px; background: url(../images/bar2.jpg); height: 26px; width: 4px; } .bar4 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; width: 200px; } .bar5 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; height: 18px; } a.nav:link, a.nav:visited { text-decoration: none; color: #ffffff; } a.nav:active, a.nav:hover { text-decoration: underline; color: #ffffff; } img.top { height: 100px; width: 395px; } td.bar1 { padding-left: 6%; } td.bar2 { padding-right: 6%; } td.bar3 { padding-left: 1.4%; } And here is the HTML (in bold again the place concerned): Quote: <?$page='';?><?include'body/head.txt';?> <div id="top"> <img src="images/top1.jpg" class="top" alt=""/></div><div id="bar1"></div><div id="bar2"></div> <table id="bar"> <tr> <td class="bar1"> <a href="index.php" class="nav">Index</a> | <a href="forums.php" class="nav">Forums</a> </td><td align="right" class="bar2"><form method="get" action="http://www.google.com/custom"> <table> <tr> <td><input type="hidden" name="domains" value="xander6669.com"/></td> <td><input type="radio" name="sitesearch" value="" checked="checked"/></td><td>Le Web</td> <td class="bar3"><input type="radio" name="sitesearch" value="xander6669.com"/></td><td>A Labrie.com</td> <td class="bar3"><input type="text" class="bar4" name="q" maxlength="200"/></td> <td class="bar3"><input type="submit" class="bar5" value="Rechercher"/></td> </tr> </table> </form></td> </tr> </table> </body></html> So, anyone knows what the problem is? If you want to view how this thing looks like in Opera/IE/Firefox, just go the http://xander6669.com/. Thanks for any help. Similar Tutorialshmm why would my padding show up in FF but not IE html Code: <div id="nav">
<ul>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
<li><a href="#">Nav 4</a></li>
<li><a href="#">Nav 5</a></li>
<li><a href="#">Nav 6</a></li>
<li><a href="#">Nav 7</a></li>
</ul>
</div>
css Code: #nav{
background-color:#999999;
width:1000px;
height:50px;
margin-left:auto;
margin-right:auto;
}
#nav ul{
margin:0px;
padding:0px;
}
#nav li{
display:inline;
padding:0px;
margin:0px;
}
#nav a{
background-color:#FF0000;
padding-bottom:20px;
padding-top:20px;
}
Hello folks, I have this page Code: (chep-net.com/main_nav) and on the left side of the table cell it always renders a small space. I tried cellpadding 0. Did I miss something? Sorry if this is a common problem. I tried a search but didn't find anything that seemed helpful. I've got "frame" (not a <frame>) around the content of my site and I need this frame to expand vertically if necessary, according to the content. I've done this by having a 1px high image, set to 100% height and an exact pixel width. The frame is a table, three cells wide, with the side images in the two outermost cells and the content in the central cell. It's the side images that cause a problem. What I've got works fine in Firefox but in IE6, the sides of the frame don't display, or the image displays but doesn't stretch (I can't tell 'cos the images are only 1px high). Here's the basic table layout: Code: <table id="frameTable" border="0"> <tr> <td> <img id="FrameLeftImg" src="resource/frameleft.png" /> </td> <td> <?php /*Add constructed page data*/ ?></td> <td> <img id="FrameRightImg" src="resource/frameright.png"/> </td> </tr> </table> And here's the CSS for the side images: Code:
#FrameLeftImg {
position: relative;
width: 26px;
height:100%;
}
#FrameRightImg {
position: relative;
width: 28px;
height:100%;
}
The table is contained in a div that is absolutely positioned by pixels but has no value specified for width and height. Anyone know what I'm doing wrong? 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. Hey gang, My suckerfish menu wonk work properly in ie5.5 and ie6 but works fine in all the others... the problem is that if i hover over main link that drop down menu will appear but then wont stay there when i hover the mouse over the submenu. i removed all the content from below the menu and suddenly it works, but my site needs content! Has anyone had this problem before??? #navi { width: auto; background: url(images/navi01.jpg) repeat-x top left; } #navi, #navi ul { /* all lists */ padding: 0px 0px 0px 26px; margin: 0; list-style: none; height: 29px; } #navi a { font-weight: bold; margin: 8px 0px 0px 0px; color: #ffffff; display: block; width: auto; padding: 0px; text-decoration: none; } #navi li { float: left; width: auto; padding: 0px 26px 0px 26px; } #navi li ul { position: absolute; width: 160px; left: -999em; padding: 7px 0px 0px 0px; margin: 0px 0px 0px -17px; } #navi li ul li { width: 160px; height: auto; padding: 0px 0px 0px 0px; border-top: 1px solid #ffffff; border-bottom: 1px solid #cfcfcf; border-left: 1px solid #ffffff; border-right: 1px solid #cfcfcf; overflow: visible; } #navi li ul a { background-color: #f2f2f2; color: #1989d1; padding: 3px 16px 4px 16px; margin: 0px; } #navi li.heading { border-top: 1px solid #7fa7bf; border-bottom: 1px solid #67889b; border-left: 1px solid #7fa7bf; border-right: 1px solid #67889b; } #navi a.heading { background-color: #799eb5; color: #ffffff; padding: 3px 16px 4px 16px; } #navi li:hover ul, #navi li.sfhover ul { /* lists nested under hovered list items */ left: auto; } <script type="text/javascript"> <!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("navi").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> <div id="border"> <div id="container"> <div id="content_left"> <div id="header"><div id="header01"></div></div> <ul id="navi"> <li> <div><a href="">About Us</a></div> <ul> <li><a href="">History</a></li> <li><a href="">Staff</a></li> <li><a href="">Employment</a></li> </ul> </li> <li> <div><a href="">Products and Services</a></div> <ul> <li class="heading"><a href="" class="heading">Support Services</a></li> <li><a href="">Customer Support</a></li> <li><a href="">Advanced Support</a></li> <li class="heading"><a href="" class="heading">Professional Services</a></li> <li><a href="">Engineering Services</a></li> <li><a href="">Project Managemant</a></li> <li><a href="">Software Development</a></li> <li><a href="">Consulting</a></li> <li class="heading"><a href="" class="heading">Solutions</a></li> <li><a href="">Voice over IP (VOIP)</a></li> <li><a href="">Information Lifecycle Management (ILM)</a></li> <li class="heading"><a href="" class="heading">Procurement Services</a></li> </ul> </li> <li><div><a href="">Contact Us</a></div></li> <li><div><a href="">Links</a></div></li> <li><div><a href="">News</a></div></li> </ul> <ul> doesnt work in IE properly? I have problem with IE7 and < code: html: <ul> <li><a href="A.html">A</a></li> <li><a href="B.html">B</a></li> <li><a href="C.html">C</a></li> </ul> If I open site with IE7 pages B.html and C.html works fine, whereas A.html loose its css for navigation (ul a:link etc..) any ideas? code for css: #containerNavigation { margin: 0; float: left; width: 100%; background: #990000; } #navigationHorizontal { zoom: 1; width: 750px; margin: auto; padding-right: 0; height: 35px; } #navigationHorizontal ul { float: right; padding: 0; margin: 0; list-style: none; width: 749px; } #navigationHorizontal li { padding-right: 0; margin: 0; display: inline; } #navigationHorizontal li a { float: left; color: white; text-decoration: none; text-align: center; background-color: #990000; line-height: 35px; margin: 0 0 0 0; padding: 0 25px 0 28px; font-size: 1.2em; } #navigationHorizontal li a:hover { color: #FFF; text-decoration: underline; } is text align restricted to div tags only? and/or block level elements? and if so, how could i get the program names (ICQ, MSN, Yahoo!) to text-align:left..... and the contact info to align right.... do i HAVE to use a float for this? http://defunctgames.com/contactinfo.htm i want to make a word Stretch across a givin width... when ever i set it to expanded, wider, or any of the others... nothing happens to the text.. does anyonw know how this works? ok so I have a menu done via CSS and initially I set up a left border on it so it shows up like this: | menu 1 | menu 2 | menu 3 Now with the help of JQuery I am trying to get rid of the | on the menu 1.. Jquery is applying the class to the correct a selector but the border is not being removed? if I change the css to "border: 1px solid black" it applies the border to the whole of menu 1 but the left border still stays WHITE? the css class is: .removeBorder { border:0; } the menu CSS is: Code:
ul.navigation-1 li a,
ul.navigation-1 li a:link,
ul.navigation-1 li a:visited
{ padding:4px 10px; display:block;text-decoration:none; border-left:1px solid #ffffff;color:#ffffff; width:100%; height:13px; }
If i remove the border-left attribute from here, the border goes away.. and via Jquery I am targetting the A.. so what is the problem? Just a FYI: html code: Code: <div id="left-menu"> <ul class="navigation-1"> <li><a class="removeBorder" href="">Products</a><ul class="navigation-2"><li><a href="">A-Z List</a></li><li><a href=""> Hey guys, When i apply a stylesheet to this page. http://jessup.oraclestudio.com.au/i...p?page=coporate the link on the left hand side 'Forensic Accounting' doesnt appear to work in IE but work fine with no style sheet. By not work i mean it gets styled but doesnt function as a link. any ideas ??? Code:
a:link {
color: #333333;
font-size: 11px;
}
a:hover {
color: #333333;
font-size: 11px;
}
a:visited {
color: #333333;
font-size: 11px;
}
i know ie sux but, i nearly fixed the columns height problem but there is still a problem ,, site : http://www.bekirhoca.com/index2.asp >> it looks nearly fine (instead of the image over the menu) when i add some content to the columns, height expands normally . But in firefox it doesn't seem normal because of the -- #wrapper {float:left} -- tag. When i remove it firefox acts normally but ie dont , when i add it reverse. So is there an hack to make firefox not to see that float? or i dont know where i did the mistake !!???!! and there is another problem ,, at 1280x1024 screen resolution the inner content expands, i want to fit it inside where it is between the right and the left cols. and and and why the right column isnt fit in ff as in ie?? you can check the site's top image 's right corner and see what i mean > http://www.bekirhoca.com/index2.asp ,, its a little bit longer than as seen in ie Firefox works, IE doesn't Help with CSS pls :-) Firefox: http://img144.imageshack.us/img144/...irefoxstone.jpg Internet Explorer: http://img5.imageshack.us/img5/3856/explorerstone.jpg Here is that part of css i believe is affecting it: Code:
div.module h3 {
margin: 0px 0px 15px 10px;
font-size: 1em;
color: #FFEFD5;
text-transform: uppercase;
}
div.module {
margin-bottom: 25px;
padding: 5;
float: left;
clear: both;
width: 100%;
background: url(../images/bottom.jpg) repeat-x bottom left;
}
div.module div {
padding: 0px;
background: url(../images/left.jpg) repeat-y top left;
}
div.module div div {
padding: 0px;
background: url(../images/top.jpg) repeat-x top left;
}
div.module div div div {
padding: 9px 9px 20px 9px;
background: url(../images/right.jpg) repeat-y top right;
}
div.module div div div div {
margin: 1;
padding: 3;
background: url(../images/parchtexture.jpg);
}
================== I have seen this code in some index files Some people put this in there index is this a code does this make your index.php use a different css file depending on the browser you use? Code:
<!--[if lte IE 6]>
<style type="text/css">
.clearfix { height: 1%;}
#ja-cssmenu li { float: left; clear: both; width: 100%; }
</style>
<![endif]-->
<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix { display: inline-block;}
</style>
<![endif]-->
I am trying to create some margin inside the "idag, poll and content" boxes but whatever I try I can not seem to get it working. The text keeps pushing against the edge of the boxes. This is the CSS: Code:
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 990px;
}
#header {
margin: 0 0 15px 0;
}
#idag {
float: left;
width: 510px;
margin-right: 5px;
background-color:#FFFFFF;
}
#poll {
float: right;
width: 130px;
background-color:#FFFFFF;
}
#content {
float: left;
width: 340px;
}
#footer {
clear: both;
}
.left {
width: 510px;
margin: 0 0 0 0;
}
.middle {
width: 340px;
margin: 0 0 0 0;
background-color:#FFFFFF;
}
.right {
width: 130px;
margin: 0 0 0 0;
}
body {background: url("../images/body.jpg") repeat;}
img {border: 0px;}
hr {background-color:#FFFFFF; width: 480px; color: #c0c0c0; background-color: #c0c0c0;}
a:link {color:#5fb61d; text-decoration: underline;}
a:visited {color:#5fb61d; text-decoration: underline;}
a:hover {color:#5fb61d; text-decoration: underline;}
a:active {color:#5fb61d; text-decoration: underline;}
This is the HTML: Code:
<html>
<head>
<title>Motstand</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include('includes/header.php'); ?>
<?php include('includes/links.php'); ?>
</div>
<div id="container">
<div id="idag">
<img src="images/idag.gif" /><br />
<p class="left">Dit is slechts een test om te zien hoe het allemaal werkt. Of <a href="link.php">links intern of extern</a> werken en hoe een zin wordt afgebroken indien hij het einde van de regel haalt.</p>
<hr>
<p class="left">See how the next topic appears</p>
</div>
<div id="content">
<img src="images/nyheter.gif" />
<p class="middle">Dit hier is een nieuwsbericht.</p>
<br />
<img src="images/tidigare.gif" />
<p class="middle">Dit hier is een nieuwsbericht.</p>
</div>
<div id="poll">
<img src="images/poll.gif" /><br />
<p class="right">Poll ingave.</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Hi there, Sorry for being silly and pathetic and crap at CSS, but I'm having an issue with a site I've been working on. Site URL is here, and the issue that I am having is as follows: I have a layer with a cloud as it's background. It's the one in the centre, called layer1 because I didn't bother renaming it. Because of the background being a cloud, the edges are curved, like a fluffy cloud would be. Obviously any text in this layer will overrun the edges of the cloud, and so I thought it would make sense to use padding to trim the text area down so it would all fit on the cloud. Now the problem that I am having is that while padding the left side works, padding the right side appears to have no effect :-( If anyone's got any hints or tips that might solve my proble, I'd be reeeeally grateful! Regards, Lawrence This is my CSS File: PHP Code: .linkbody { padding: 15px 15px 6px; color: white; font-family: Verdana; font-size: 10pt; width: 160px; background-color: #006EA1; } and this my html file: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<title> Schmid </title>
<link type="text/css" rel="stylesheet" href="css2.css">
</head>
<body>
<center>
<table class="linkbody" width="800">
<tr>
<td>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</td>
</tr>
</table>
</center>
</body>
</HTML>
In Firefox the padding works fine, but in the IE6 it doesn't work at all makes me angry thx for any help I'm wondering why does the padding doesn't work for the <p> tag... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p.pFrontPageTitle
{
margin: 0px;
padding: 200px 0xp 200px 0px;
color: #000000;
font-weight: bold;
font-family: verdana;
font-size: 12pt;
font-style: normal;
background-color: #FF0000;
}
</style>
</head>
<body>
<p class="pFrontPageTitle">What Our Customers Say .....</p>
</body>
</html>
(see attached) CSS Snippet Code: #contentBox{
float:right;
padding:0;
margin:17px 15px 0 0;
width:423px;
/* overflow:hidden; */
}
#content{
background:url(images/layout/content_bg.gif) top left;
margin:0;
padding:15px 15px 0 15px;
width:393px;
overflow:hidden;
}
* html #content {
width: 423px; /* for IE5 and IE6 in quirks mode */
w\idth: 393px; /* for IE6 in standards mode */
}
#contentTop{
background:url(images/layout/content_top.jpg) top left;
padding:0;
margin:0;
width:423px;
height:41px;
overflow:hidden;
}
#contentTop h3{
padding:15px 0 0 0;
margin:0;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
font-size:14px;
color:#036;
}
#contentBottom{
background:url(images/layout/content_bottom.gif) top left;
padding:0;
margin:0;
text-indent:-15000px;
width:423px;
height:28px;
overflow:hidden;
}
HTML Snippet Code: <div id="contentBox"> <div id="contentTop"><h3>What Is The Shalom Foundation?</h3></div> <div id="content"> <p>The Shalom Foundation is a non-profit 501(c) (3) organization dedicated to providing financial support for under-privileged children and their families in the United States, Central and South America.</p> <p> We are dedicated to providing basic educational opportunities, home construction and repair for families at risk, essential food and clothing needs and medical support and assistance for critical as well as basic healthcare. </p> <p>The Shalom Foundation seeks funding through personal donations, corporate contributions and special event fundraisers. Contributions to The Shalom Foundation are 100% tax deductible.</p> <p>If anyone has material possessions and sees his brother in need but has no pity on him, how can the love of God be in him? Dear children, let us not love with words or tongue but with actions and in truth. 1 John 3:17-18</p> </div> <div id="contentBottom"></div> </div> Now, why on earth are they different!?!? Thanks in advance! Hi, so basically I have a problem with padding in css. For example, when I use padding-left 15px then in IE it moves the specific stuff from left to right exactly 15 pixels but in FF it moves almost everything 15 pixels. I would post an example-image here but the forum wont let me cause I'm new so we'll just have to deal with the text. Any possible solution would be helpful so post here, I'm keepin' this link in my bookmarks. It seems that in Firefox, whenever I use the padding-left directive, it actually increases the size of the div by the amount I chose in padding-left. It doesn't do this in IE, all it does is pad the contents in, which is what I want. Is there any way to do this except for creating another div within that one that is padded-left... Thanks in advance... Hi I'm having a problem with padding <a> tags in firefox i have a div inside another div. I'm using the 2nd div as a button but it doesn't fit inside the containing div. The top and bottom stick out. Any clues? here is my code: Code: <html>
<head>
<style type="text/css">
.mybox {
border: 1px solid #000000;
}
.buttonbox{
/*padding: 5px;*/
}
.buttonbox a{
padding: 5px;
background-color: #33F4FF;
border: 1px solid #FF0000;
}
.buttonbox a:hover{
background-color: #EBF4FF;
}
</style>
</head>
<body>
<div class="mybox">
<div class="buttonbox"><a href="asdfasfd">buttonbox</a></div>
</div>
</body>
</html>
|
|||||||