|
CSS - Ie 6 Doesn't Respect Padding ??
I built an image gallery with a 1px border and 5px padding around the thumbnails. Looks fine in Safari and IE5 for the Mac. But IE 6 ignores the padding completely.
<img src="'.$thumb_path.$row->thumb.'" style="margin-bottom:5px;padding:5px;border:1px solid #cccccc;" > Any ideas are appeciated !! Similar TutorialsThis 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>
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 I've taken out a snippet of the code thats not working and put it into a page here, both validate (sorry I didn't make them links as I'm a new user and it won't allow me to): ucair.cs.uiuc.edu/pdovyda2/test.html ucair.cs.uiuc.edu/pdovyda2/test.html Basically there should be 8px of padding on the table with class 'innerbox', and it works fine in FF but in IE it ignores the padding completely. I can't seem to figure out what the issue is, it seems like it should work just fine, any ideas? Thanks! Hi, I have a problem that seems like it's on the edge of solveability but I haven't hit on it yet. I have a page that's layed out like this: http://i55.photobucket.com/albums/g129/alexmarsz/CSSProblem1a.jpg And most of the time it's fine. There's an image in BackgroundDiv with a javascript function that resizes the image to fit the screen, and then three divs are absolute within it, with BottomDiv then relative below. The problem is that ColumnLeft has a variable length. Sometimes it gets long and busts out of BackgroundDiv. Which would be fine if BottomDiv would politely push down like it does when BackgroundDiv expands. But it doesn't. Instead, ColumnLeft overlaps, as seen he http://i55.photobucket.com/albums/g129/alexmarsz/CSSProblem1b.jpg If you want to see it in action, here is a mock-up: http://www.simunomics.com/Mockup-NewLayout.php If your screen is wide it may not bust out, but narrow your browser down to ~1000px or imagine the LeftColumn being longer and you'll see what I mean. The Divs are structured in the HTML like this: Code:
<div id="BackgroundDiv" onload="resizeImage('BkgImage');" style="min-height:840px">
<div id="TwoColumnInfoBox" align="center">
</div>
<div id="ColumnLeft" class="FactoryBox">
</div>
<div id="ColumnRight" class="FactoryBox">
</div>
<img onload="resizeImage('BkgImage');" id="BkgImage1" src="Images/FactoryForm.JPG" width="100%" />
</div>
<div id="BottomDiv">
</div>
And the css looks like this: Code:
#BackgroundDiv {
color: #FFFFFF;
margin-left: 210px;
margin-top: 10px;
padding: 10px;
}
#TwoColumnInfoBox{
position:absolute;
margin-top:20px;
right:70px;
margin-left:auto;
z-index:50;
background-image:url(Images/InfoBackground.GIF);
color:#000000;
height:150px;
width:250px;
}
#ColumnLeft{
position:absolute;
margin-left:5%;
margin-top:50px;
z-index:30;
}
#ColumnRight{
position:absolute;
right:5%;
margin-top:200px;
z-index:28;
}
.FactoryBox{
color:#FFFFFF;
width:300px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#BottomDiv {
color: #FFFFFF;
margin-left: 210px;
margin-top: 10px;
padding: 10px;
}
Just to address some considered but unfeasible options (so far as I know), if I float ColumnLeft I can't position it over the image, so it has to be absolute. And if I use the image as a background attribute, I can't dynamically resize it. (Not until CSS 3 anyway.) Again, I feel like this is close but not-quite-there, like there should be some sort of wrapper I can make to get BottomDiv to respect the proper distance. Thanks in advance for any suggestions. Hi to all I am pasting here the code where i have problem [ 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" /> <title>Untitled Document</title> <style type="text/css"> .mainUL { float: left; list-style: none; line-height: 1; font-weight: bold; padding:0; font-size:12px; margin:0; text-align:center; vertical-align:middle; border:2px solid #000000; border-bottom:none; /*border-left:none;*/ border-top:none; /*margin-left:63px;*/ border:1px solid red; width:294px; height:150px; margin-top:40px; margin-left:300px; } .mailULLI { background:#FFFF99; float: left; width: 12em; color:#000000; padding:5px 0 5px 0; border:2px solid #000000; border-left:none; border-bottom:none; text-align:center; margin:0; border:1px solid blue; height:15px; } .innerUL { width:100px; height:30px; border:1px solid red; display:none; margin-top:-52px; } </style> <script language="javascript"> function showpopup(id) { var id=document.getElementById(id); id.style.display='block'; } function hidepopup(id) { var id=document.getElementById(id); id.style.display='none'; } </script> </head> <body> <ul class="mainUL"> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a> <ul id="popup" class="innerUL"> </ul> </li> </ul> </body> </html> [/code] Currently when i mouseover the "click here 1" a popup open above it its fine I want when i mouse over the "click here 2 " pop up should open above it same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell thanks in advance Hi to all I am pasting here the code where i have problem <!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" /> <title>Untitled Document</title> <style type="text/css"> .mainUL { float: left; list-style: none; line-height: 1; font-weight: bold; padding:0; font-size:12px; margin:0; text-align:center; vertical-align:middle; border:2px solid #000000; border-bottom:none; /*border-left:none;*/ border-top:none; /*margin-left:63px;*/ border:1px solid red; width:294px; height:150px; margin-top:40px; margin-left:300px; } .mailULLI { background:#FFFF99; float: left; width: 12em; color:#000000; padding:5px 0 5px 0; border:2px solid #000000; border-left:none; border-bottom:none; text-align:center; margin:0; border:1px solid blue; height:15px; } .innerUL { width:100px; height:30px; border:1px solid red; display:none; margin-top:-52px; } </style> <script language="javascript"> function showpopup(id) { var id=document.getElementById(id); id.style.display='block'; } function hidepopup(id) { var id=document.getElementById(id); id.style.display='none'; } </script> </head> <body> <ul class="mainUL"> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a> <ul id="popup" class="innerUL"> </ul> </li> </ul> </body> </html> Currently when i mouseover the "click here 1" a popup open above it its fine I want when i mouse over the "click here 2 " pop up should open above it same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell thanks in advance Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict 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"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? Exactly that question. I got this menu from a website. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px;
text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px
solid #fff;}
#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px
center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#888;}
#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but
terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species
within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>
Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag. Code: #showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}
I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code. Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having... Right now, there is nothing about padding located in css file. And I was told I should add a bit because my page is a headache to read. I was told: "Basically you want to add more white space between the vertical line and the text" How would I go about doing this? The site Im talking about is: www.ohiocichlids.com I don't know exactly what to call what's going on, but i'm asuming that there is a padding issue with my menu. I have a ul that contains my menu list. The CSS and xhtml are as follows: Code: /* Menu */
li {
border: 1px solid #000000;
border-bottom: 0px none;
display: inline;
line-height: 14px;
margin: 0px;
margin-left: 1px;
margin-right: 1px;
padding: 0px;
padding-left: 3px;
padding-right: 3px;
}
ul#menu {
background-image: url(img/menu.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
list-style-position: inside;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
background-position: left bottom;
vertical-align: text-bottom;
}
/* End Menu */
<ul id="menu"><li>Menu 1</li><li>Items 2</li>
<li>Will 3</li><li>Go 4</li><li>Here 5</li></ul>
(the menu is on one line, thanks to IE's whitespace issue, i broke it here for easier readablity.) the problem is: i have it nestled on top of a div, and for some reason the ul has a 1px bit of padding on the bottom. I have searched the forum and may have missed some one posting a resolution for this, but i tried every one ov the voice-family/carrage return fixes i've seen, but none work. to see what i'm talking about if my words are il formed (as they often are) click here. to view the CSS click here. Hey everyone, I am working on a new template: http://4xp.net/temp.html The colors are there just so I can see the divs, so don't worry. If you look at the page in IE, it looks fine, with some padding between the green and orange div, and to the right of the orange div. When you look at it in Firefox, there is a bunch of white padding to the top and bottom of both the orange and green divs, and I can't seem to get it to go away. The weird thing is, if I add a 1px border to the orange div, the green div aligns to the top, and the orange background expands to fill in the white area above and below the orange div. Does anyone know how to remove this padding? Thanks! Hi there, I have 2 main divs.. one which holds a small ammount of content on the right hand side.. like a 'related links' box which is located at the top right of the page. The other div holds the content. It wraps around the top right div, but there is no padding to the right of the content area, so the text goes right the way up to the right hand div. How can I add some padding to the right of this area? I have added padding, but it adds it to the text where it wraps below the top right div. This is the code I am using: PHP Code: #related_links{ width: 165px; height: 237px; background-image: url('images/related_bg.jpg'); background-repeat: no-repeat; float:right; padding-right: 10px; } #related_inside{ padding: 10px; } #content{ padding-right: 10px; } #content_inside{ padding: 10px; } PHP Code: <div id="related_links"><div id="related_inside">right hand text</div></div> <div id="content"> <div id="content_inside" >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div></div> I am noticing that padding changes the width/height of an object. For example, if I have a div element with a width of 100% and padding at 10px, it will actually cause the horizontal scrollbar on the browser to appear because it takes the 100% width into account, plus 20px for the padding on the left and right side. I thought padding was suppose to push elements inward. ??? Any help will be greatly appriciated. Around this dropdown image? http://199.134.225.62/NW_PORTAL/sliding_menu/sliding_menu.cfm I have padding and margins all set to 0... Hello, Can anyone explain me why the texts in the following example are not in the same (relative) position? It looks like that in the first container, the margin is actually more than I specified (10px)... I don't get it... :S Thanks, diodorus Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
#container{
margin: 0px;
padding: 0px;
width: 1000px;
background: #ccc;
}
.block {
background: #0ff;
float: left;
height: 100%;
margin: 10px;
text-align: left;
width: 230px;
}
.block2 {
background: #0ff;
float: left;
height: 100%;
padding: 10px;
text-align: left;
width: 230px;
}
</style>
</head>
<body>
<p>First:<p>
<div id="container">
<div class="block">aaa</div>
<div class="block">bbb</div>
<div class="block">ccc</div>
<div class="block">ddd</div>
</div>
<p>Second:<p>
<div id="container">
<div class="block2">aaa</div>
<div class="block2">bbb</div>
<div class="block2">ccc</div>
<div class="block2">ddd</div>
</div>
</body>
</html>
For some reason in FF, even though I have the most nested element set to 0px for the right padding, padding is showing up in FF. ** removed ** That white line should be flush against the text of the menu items, like you'll see it is in IE. Looking at Firebug, there's no other styles being applied to this item that would cause it to do what it does. Interestingly enough, if I change the padding using Firebug to anything else, then change it back to 0, it moves the padding back to 0. Here's the HTML: Code: <div id="navBar"> <ul> <li><a href="http://www.radiantsuntherapies.com" id="navBarSelected">Home</a></li> <li><a href="about.php">About Us</a></li> <li><a href="services.php">Services</a></li> <li><a href="practioners.php">Practioners</a></li> <li><a href="appointments.php">Appointments</a></li> <li><a href="shop.php">Shop</a></li> <li><a href="bms.php">Body Mind Spirit</a></li> <li><a href="blog/" id="navBarLast">Blog</a></li> </ul> </div> And here's the CSS: Code: #navBar{
background:url(../images/navBarBackground.png) repeat-x top left;
float:left;
height:43px;
overflow:hidden;
width:910px
}
#navBar ul{
font-family:garamond;
font-size:14px;
text-transform:uppercase
}
#navBar ul li {
display:block;
float:left;
}
#navBar ul li a:first-letter {
font-size:16px
}
#navBar ul li a{
color:#e4ad43;
text-decoration:none;
display:block;
border-right:1px solid white;
padding:11px 0 18px 14px; /* overflow vertical to work w/ all browser no matter how text is rendered. hidden by parent layers */
}
#navBarLast{
background-image:none !important
}
#navBarLeft{
background:url(../images/navBarLeft.png) no-repeat top left;
float:left;
height:43px;
width:5px;
}
#navBarRight{
background:url(../images/navBarRight.png) no-repeat top right;
float:left;
height:43px;
width:5px
}
#navBarSelected{
color:#ffffff !important
}
Thanks! |
|||||||