|
CSS - Google Ad Not Appearing???
example, look in middle of page (blank space)
it is supposed to be in the middle, but instead there is a blank space. no, the ad is not new, over 3 months old. i changed something and forget what (a while ago), now i just noticed this. heres the code: php Code: Original - php Code $i = 0; $gamesperpage = 50; $adplaced = false; // display game boxes $a = 2; foreach ($games as $game) { display_gamebox('float='.$a.'&display=rating', $game); if($a == 2) $a = 1; else $a++; if(!$adplaced && $i >= count($games)/2 && $a == 2) { echo ' <div class="clearboth clearafter aligncenter"> <script type="text/javascript"> <!--google_ad_client = "pub-5687621631516277"; /* 468x60, created 3/18/08 */ google_ad_slot = "1797650152"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>'; $adplaced = true; } $i++; } // end of foreach game echo " <div class='clearboth'><hr></div> "; $i = 0; Similar TutorialsThanks for taking the time to read my question. I have a <div id="theheader"> area at the top of my page. Below that I have another <div id="contentbox"> area to which I have applied a negative margin. It displays perfectly in Fire Fox (as you would expect) but in IE the <div id="contentbox"> with the negative margin slips behind the top <div id="theheader">. How can I get the page to display in both browsers the way FF does.? Thanks, Brad CSS Code: @charset "iso-8859-1";
body {
background-color: #435371;
margin: 0px;
}
#theheader {
width: 100%;
height: 150px;
background-color: #FFF3D5;
}
#navbox {
width: 12%;
height: 300px;
float: left;
background-color: #435371;
color: white;
line-height: 20px;
text-align: right;
padding-right: 8px;
padding-top: 10px;
margin-right: 40px;
}
#mainbox {
width: 100%;
float: left;
color: white;
background-color: #435371;
}
#contentbox {
width: 70%;
float: left;
background-color: white;
color: black;
margin-top: -125px;
border-style: solid;
border-width: 5px;
border-color: white;
}
#contentheaderbox {
background-color: #435371;
height: 40px;
padding: 3px;
color: white;
font-weight: bold;
font-size: 40px;
}
ul.nav {
list-style-type: none;
}
a.mainnav:link {
color: white;
text-decoration: none;
}
a.mainnav:visited {
color: aqua;
text-decoration: none;
}
a.mainnav:hover {
color: #FFFFCC;
text-decoration: underline;
}
a.mainnav:active {
color: green;
font-weight: bold;
text-decoration: none;
}
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Lyndon and April Berg Construction and Finishing</title> <meta name="description" content="Welcome to Berg Construction and Finishing. This site has information about the company, type of work they do, and examples of past projects."> <meta name="keywords" content="residential, construction, interior, finishing, cement, concrete, framing, finished carpentry, national association of home builders, home, house, driveway, stamp, drywall, taping, cabinet, Winnipeg, Landmark, Manitoba, Canada"> <meta name="Revisit-After" content="7 Days" /> <meta name="Robots" content="index, follow" /> <link href="LABCSS.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="theheader">Sampson and Son</div> <div id="mainbox"> <div id="navbox"> <a class="mainnav" href="LAB.html">Framing<a><br /> <a class="mainnav" href="LAB.html">Cement<a><br /> <a class="mainnav" href="LAB.html">Drywall<a><br /> <a class="mainnav" href="LAB.html">Finished Carpentry<a><br /> <a class="mainnav" href="LAB.html">Brick and Tile<a><br /> <a class="mainnav" href="LAB.html">Taping<a><br /> </div> <div id="contentbox"> <div id="contentheaderbox">Home</div> <ol> <li>pictures of past jobs</li> <li>company credo</li> <li>company logo</li> <li>contact information</li> <li>are you a part of any associations?</li> <li>links to association sites (reciprocal)</li> <li>types of work Lyndon does</li> <li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li> <li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li> <li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li> <li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li> <li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li> </ol> </div> </div> </body> </html> I'm playing around with web development after quite a lengthy break. I wrote the home page out by hand and had attempted to validate, fixed the errors and repeated until it validated at w3.org. When I copied the code from the first page and removed the right side of the table ( it was 3 columns on the main page but I only wanted 2 columns for the "template page" ). When viewing the template page in IE the table is off center ( all the way to the left ) and the links have unwarranted line spaces between them. I can understand removing a column might affect the alignment of a table ( or at least, this is not what I'm worried about so much ) but the alterations to the navigation pane are baffling. Specifically, because the nav pane is inserted by the same php script on both the working, and dysfunctional page. The css is also the same as they are coded to pull from the specified url copy and pasted from one doc to the other as opposed to mistakenly using a css in a different directory than the working one. The working page is: Code: <html> <head> <title> Under Construction </title> <link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <table class="main"> <tr class="header"> <th class="left"><div id="img"></div></th> <th class="center"><h1 class="MainHeading">Brendan Walton</h1></th> <th class="right"> </th> </tr> <tr class="body"> <td> <div id="navMenu"> <ul class="navlist"> <li> <div class="navhead" onclick='IsOpen(0)'>Literature</div> <ul class="navlist" id="sm0" style="display:block;"> <li><a href="" class="navlink">Guides</a></li> <li><a href="" class="navlink">Web Reference</a></li> <li><a href="" class="navlink">Desktop Reference</a></li> <li><a href="" class="navlink">External Reference</a></li> </ul> </li> <li> <div class="navhead" onclick='IsOpen(1)'>Fun and Random</div> <ul class="navlist" id="sm1" style="display:none;"> <li><a href="" class="navlink">Videos</a></li> <li><a href="" class="navlink">Images</a></li> <li><a href="" class="navlink">Music</a></li> <li><a href="" class="navlink">Random Page</a></li> </ul> </li> <li> <div class="navhead" onclick="IsOpen(2)">Code Base</div> <ul class="navlist" id="sm2" style="display:none;"> <li><a href="code_base_sample2.html" class="navlink">Java</a></li> <li><a href="code_base_sample2.html" class="navlink">C++</a></li> <li><a href="code_base_sample2.html" class="navlink">PHP</a></li> <li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li> </ul> </li> <li><div class="navhead" onclick="IsOpen(3)">General</div> <ul class="navlist" id="sm3" style="display:none;"> <li><a href="" class="navlink">About Us</a></li> <li><a href="" class="navlink">Don't Like the Look?</a></li> <li><a href="" class="navlink">Community</a></li> <li><a href="" class="navlink">Site Map</a></li> </ul> </li> </ul> </div> <div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div> <script type="text/javascript" src="javascript/menuwork.js"></script> </td> <td> <h4 class="heading">Coming Soon!!</h4> <hr class="pagebreak" /> <p class="cblock"> This website will eventually have content, for now, just enjoy the pretty colors and the fancy, interactive menu to the left...</p> <h4 class="heading">Update: April 6, 2010</h4> <hr class="pagebreak" /> <p class="cblock"> I have changed the navigation to the left to reflect the content the site will eventually house. Additionally I have begun styling how the codebase will eventually display it's information. To see a sample of the code output simply click any of the codebase links to the left.</p> <p class="cblock"> On a personal note, it has recently come to my attention that Dom's birthday was actually the second of April, not the fourth. I apologize for the tardy wishes. </p> <h4 class="heading">Update: April 4, 2010</h4> <hr class="pagebreak" /> <p class="cblock"> Still working on the style for the website, It's coming along, albeit slowly... Also, even though you're never going to see this, Happy birthday Dom 8-)</p> </td> <td><img src="images/Brendan.jpg" alt="Brendan" id="portrait" /> <hr style="width:150px;" /> <p class="iblock"> "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." - Martin Golding"</p> <hr style="width:150px;" /> <a href="aboutus.php"> About Us </a> </td> </tr> <tr > <td> </td> <td> <!-- footer removed for containing urls --> </td> <td> </td> </tr> </table> </body> </html> The dysfunctional page is: Code: <!-- XHTML 1.1 --> <!-- Document Start --> <html> <!-- Head --> <head> <!-- Title --> <title> </title> <!-- Style Sheet --> <link rel="stylesheet" type="text/css" href="css/pcss.css" id="css" /> <!-- Charset UTF-8 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- PHP Includes --> </head> <!-- End Includes --> <!-- Body --> <body> <!-- Main Table --> <table class="main"> <!-- First Row - Header --> <tr class="header"> <!-- Start Banner --> <th class="left"><div id="img"></div></th> <th class="center"><h1 class="MainHeading">Brendan Walton</h1></th> <!-- End Banner --> </tr> <!-- End First Row --> <!-- Second Row - Content --> <tr class="body"> <td> <div id="navMenu"> <ul class="navlist"> <li> <div class="navhead" onclick='IsOpen(0)'>Literature</div> <ul class="navlist" id="sm0" style="display:block;"> <li><a href="" class="navlink">Guides</a></li> <li><a href="" class="navlink">Web Reference</a></li> <li><a href="" class="navlink">Desktop Reference</a></li> <li><a href="" class="navlink">External Reference</a></li> </ul> </li> <li> <div class="navhead" onclick='IsOpen(1)'>Fun and Random</div> <ul class="navlist" id="sm1" style="display:none;"> <li><a href="" class="navlink">Videos</a></li> <li><a href="" class="navlink">Images</a></li> <li><a href="" class="navlink">Music</a></li> <li><a href="" class="navlink">Random Page</a></li> </ul> </li> <li> <div class="navhead" onclick="IsOpen(2)">Code Base</div> <ul class="navlist" id="sm2" style="display:none;"> <li><a href="code_base_sample2.html" class="navlink">Java</a></li> <li><a href="code_base_sample2.html" class="navlink">C++</a></li> <li><a href="code_base_sample2.html" class="navlink">PHP</a></li> <li><a href="code_base_sample2.html" class="navlink">JavaScript</a></li> </ul> </li> <li><div class="navhead" onclick="IsOpen(3)">General</div> <ul class="navlist" id="sm3" style="display:none;"> <li><a href="" class="navlink">About Us</a></li> <li><a href="" class="navlink">Don't Like the Look?</a></li> <li><a href="" class="navlink">Community</a></li> <li><a href="" class="navlink">Site Map</a></li> </ul> </li> </ul> </div> <div class="navhead" style="height:150px;"><img src="images/stats.jpg" alt="TempStats" /></div> <script type="text/javascript" src="javascript/menuwork.js"></script> </td> <td> </td> </tr> <!-- End Second Row --> <!-- Third Row - Footer --> <tr> <td> </td> <td> <!-- footer removed for containing urls --> </td> </tr> <!-- End Third Row --> </table> <!-- End Table --> </body> <!-- End Body --> </html> <!-- End Doc --> The css is: Code:
body
{
color:#333333;
background-color:#FFFFFF;
margin:0px;
padding:0px;
}
hr.pagebreak
{
width:450px;
color:#550072;
}
.subHeading
{
color:#8A00B8;
font-size:18px;
}
ul.navlist
{
display:inline;
list-style-type:none;
margin:0px;
padding:0px;
}
a.navlink:link
{
color:#FFFFFF;
background-color:#550072;
display:block;
text-align:right;
text-decoration:none;
font-weight:bold;
margin:0px;
padding-right:2px;
}
a.navlink:visited
{
color:#FFFFFF;
background-color:#550072;
display:block;
text-align:right;
text-decoration:none;
font-weight:bold;
margin:0px;
padding-right:2px;
}
a.navlink:hover
{
color:#FFFFFF;
background-color:#8A00B8;
text-decoration:none;
margin:0px;
padding-right:2px;
}
tr
{
vertical-align:top;
}
table
{
margin-left:auto;
margin-right:auto;
margin-bottom:0;
margin-top:0;
}
table.main
{
background-color:#FFFFFF;
}
th.left
{
width:150px;
}
th.center
{
width:500px;
}
th.right
{
width:150px;
}
a.navhead:link
{
display:block;
text-decoration:none;
text-align:left;
color:#550072;
font-weight:bold;
border-style:groove;
margin:0px;
padding:0px;
}
a.navhead:visited
{
display:block;
text-decoration:none;
text-align:left;
color:#550072;
font-weight:bold;
border-style:groove;
margin:0px;
padding:0px;
}
div.navhead
{
display:block;
text-decoration:none;
text-align:left;
color:#550072;
font-weight:bold;
border-style:groove;
margin:0px;
padding:0px;
}
h4.heading
{
display:block;
margin:0px;
padding-right:30px;
color:#550072;
text-indent:15px;
text-align:right;
font-size:24px;
}
img
{
display:block;
margin:0;
padding:0;
}
p.cblock
{
display:block;
text-indent:15px;
padding-left:10px;
width:475px;
}
p.fblock
{
display:block;
text-indent:15px;
padding-left:10px;
width:475px;
text-align:center;
}
.footer
{
text-align:center;
}
#navMenu
{
height:300px;
}
h1.MainHeading
{
font-size:50px;
color:#550072;
text-align:left;
}
#img
{
background-image:url("../images/purple-150x150-clear.jpg");
background-repeat:no-repeat;
height:150px;
width:150px;
}
img.cssscriptimg
{
display:inline;
}
#portrait
{
width:150px;
}
p.iblock
{
display:block;
text-indent:15px;
padding-left:10px;
width:150px;
}
The navigation script is below: PHP Code: <?php // This is a simple script to insert the navigation pane into every page function echoNav () { // color changer //echo "<img class=\"cssscriptimg\" src=\"images/purple.jpg\" alt=\"purple\" onclick=\"LoadCss(\"purple\")\" />"; //echo "<img class=\"cssscriptimg\" src=\"images/red.jpg\" alt=\"red\" onclick=\"LoadCss(\"red\")\ />"; //echo "<img class=\"cssscriptimg\" src=\"images/green.jpg\" alt=\"green\" onclick=\"LoadCss(\"green\")\" />"; // navMenu devision echo "<div id=\"navMenu\">\n"; // Section List echo "<ul class=\"navlist\">\n"; // First section echo "<li>\n"; echo "<div class=\"navhead\" onclick='IsOpen(0)'>Literature</div>\n"; // First link list echo "<ul class=\"navlist\" id=\"sm0\" style=\"display:block;\">\n"; echo "<li><a href=\"\" class=\"navlink\">Guides</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Web Reference</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Desktop Reference</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">External Reference</a></li>\n"; echo "</ul>\n"; // End first section echo "</li>\n"; // Second Section echo "<li>\n"; echo "<div class=\"navhead\" onclick='IsOpen(1)'>Fun and Random</div>\n"; echo "<ul class=\"navlist\" id=\"sm1\" style=\"display:none;\">\n"; echo "<li><a href=\"\" class=\"navlink\">Videos</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Images</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Music</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Random Page</a></li>\n"; echo "</ul>\n"; echo "</li>\n"; // End Second Section // Third Section echo "<li>\n"; echo "<div class=\"navhead\" onclick=\"IsOpen(2)\">Code Base</div>\n"; echo "<ul class=\"navlist\" id=\"sm2\" style=\"display:none;\">\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">Java</a></li>\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">C++</a></li>\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">PHP</a></li>\n"; echo "<li><a href=\"code_base_sample2.html\" class=\"navlink\">JavaScript</a></li>\n"; echo "</ul>\n"; echo "</li>\n"; // End Third Section // Fourth Section echo "<li>"; echo "<div class=\"navhead\" onclick=\"IsOpen(3)\">General</div>\n"; echo "<ul class=\"navlist\" id=\"sm3\" style=\"display:none;\">\n"; echo "<li><a href=\"\" class=\"navlink\">About Us</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Don't Like the Look?</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Community</a></li>\n"; echo "<li><a href=\"\" class=\"navlink\">Site Map</a></li>\n"; echo "</ul>\n"; echo "</li>\n"; // End Fourth Section // End Section List echo "</ul>\n"; // End navMenu echo "</div>\n"; // Stats echo "<div class=\"navhead\" style=\"height:150px;\"><img src=\"images/stats.jpg\" alt=\"TempStats\" /></div>\n"; // Scripts echo "<script type=\"text/javascript\" src=\"javascript/menuwork.js\"></script>\n"; // echo "<script type=\"text/javascript\" src=\"javascript/LoadCss.js\"></script>\n"; } ?> Note: I apologize for only pasting the HTML, this is the HTML as seen by IE after scripts have been run. I would have put links but I am a new user and that appears to be restricted. Removed direct URL access to the javascripts, images, and doctypes, as a result of being a new user as well, in the actual source they are accessed by a URL to ensure that it is compatible no matter which directory the functions are called within. That being said, the javascript was never a problem, even with the display issue, the javascript functioned as expected. Any help would be very appreciated 8-) Hello, for some reason my CSS XHTML web site shows an Iframe in the body of the body. here's the link:http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php I've fiddled with the widths and container widths with no luck. Can anyone tell me why this is happening? thanks -Sean As always IE woes... Anyway I have a design that I'm currently reworking into a css/div positioned site. I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about. The HTML is: Code:
<div id="container">
<div id="top"></div>
<div id="brands">
....stuff here....
</div>
<div id="slides"></div> <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
<div id="vert_nav">
....stuff here....
</div>
</div>
CSS Code:
/* CSS Document */
html, body {
background: #000000;
padding: 0px;
margin: 0px;
color: #FFFFFF;
}
#container {
width: 760px;
padding: 0px;
margin: 0px;
}
#top {
width: 760px;
height: 239px;
background: url(../images/top.jpg) top left no-repeat;
}
#brands {
width: 760px;
height: 31px;
}
#slides {
width: 667px;
height: 350px;
float: left;
background: url(../images/slides.jpg) top left no-repeat;
T}
#vert_nav {
width: 93px;
height: 350px;
float: right;
}
should.jpg is how the page is supposed to look. shouldnt.jpg is how it is appearing in IE. I have a div called #Nav and inside it I have created a horizontal list. The issue is unless I set the height of the Nav div to like 40px the text shows up below the div OR the entire Div gets shifted down. Its like there is a margin or padding somewhere by default that i have not unset. Code:
<div id="header">
<div id="wrapper">
<div id="navcol1"></div>
<div id="navcol2">Insert List with Links </div>
</div>
</div>
<div id="nav">
<center>
<ul class="nav">
<li class="nav"><a href="#home" class="nav">XRPpro</a></li>
<li class="nav"><a href="#home" class="nav">X-Ray Equipment</a></li>
<li class="nav"><a href="#home" class="nav">QuickSOAP Touchnotes</a></li>
<li class="nav"><a href="#home" class="nav">Online Courses</a></li>
<li class="nav"><a href="#home" class="nav">Chiro Marketing</a></li>
<li class="nav"><a href="#home" class="nav">Bohnology</a></li>
</ul>
</center>
</div>
Code:
#header {
width:100%;
height:160px;
background-image:url(Images/header_background.jpg);
margin-bottom:0px;
}
#nav {
width:100%;
background-color:#343434;
}
ul.nav {
list-style-type: none;
}
li.nav {
display: inline;
margin-right:15px;
font:"Century Gothic", Verdana, Geneva, sans-serif;
font-size:12px;
}
Here is my code: Code:
body {
background-color: yellow;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px; font-family: sans-serif;
}
None of the attributes such as background color, margins, border, padding are showing up when I test it out. Can someone help me? Hi, I want to make some text "appear" when hovering over a different set of text: e.g. The "Hover here" text is always apparent on the page. If you hover your mouse over it the "Text to appear" text...appears! Hover here - Text to appear How can I do this? Thanks, Ian Hi there, I have reached the end of my ability to figure out fixes for my problem. I can see it must be something obvious that is creating my inconsistency across browsers, but I can't seem to figure it out. In IE all the items appear correctly but it is pushed over really far to the right and creates a scroll bar. It appears as I would like in Firefox. I would really appreciate some suggestions so I can get my cross-browser learning further along! my site: http://www.kohlrbaby.com/vcc/portfolio/portfolio.htm my css: body { margin: 0px 0px 30px 0px; padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #000000; background-color: #999999; text-align: center; } a { text-decoration: none; color: #43709e; outline: none; font-size: 12px; } a:visited { color: #990000; } a:active { color: #43709e; } a:hover { color: #e7d77e; text-decoration: underline; } a.nav { text-decoration: none; color: #000000; outline: none; font-size: 12px; } a.nav:visited { color: #0000000; } a.nav:active { color: #000000; } a.nav:hover { color: #990000; text-decoration: underline; } p { font-size: 12px; line-height: 22px; margin-top: 0px; margin-bottom: 0px; color: #000000; text-align: left; } .navText{ text-align: left; voice-family: "\"}\""; voice-family:inherit; width: 93px; } #title{ margin-top: 0px; margin-bottom: 0px; margin-right: 0px; margin-left:0px; position: absolute; } #navBox{ background-color: #CCCCCC; border-right: 1px dashed #000000; border-top: 1px dashed #000000; border-bottom: 1px dashed #000000; border-left: 1px dashed #000000; margin-top: -380px; margin-bottom: 0px; margin-right: 5px; margin-left:0px; position: relative; float: right; clear: right; padding: 10px 10px 10px 10px } #rightBox { border-right: 2px solid #666666; width:650px; height: 510px; border-top: 2px solid #666666; border-bottom: 2px solid #666666; border-left: 2px solid #666666; margin-top:60px; margin-bottom: 0px; margin-right: 0px; margin-left:200px; background: #ffffff; position: absolute; } #subTitle{ margin-top: 5px; margin-bottom: 0px; margin-right: 0px; margin-left:5px; float: left; clear: left; position: relative; } #drawing{ margin-top:0px; margin-bottom: 0px; margin-right: 0px; margin-left:0px; position: relative; } .mainPic { margin-top: 117px; margin-bottom: 0px; margin-right: 0px; margin-left: 150px; position:absolute; float: left; clear: left; } #smallPic { margin-top: -455px; margin-bottom: 0px; margin-right:-150px; margin-left: 0px; position:relative; } img.pic{ border-right: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; } Many, many thanks!!! Hi again, I have an issue which is only appearing in FF. I am trying to create a footer, but it is appearing under my header and inside my content area, instead of at the bottom. I think it may be something to do with the margins. This is the code for the footer: PHP Code: #footer_wrapper{ width: 780px; height: 21px; margin: 0 auto; background-image: url('img/footer_bg.png'); background-repeat:repeat-x;} #footer_left{ float:left; padding-left: 10px;} #footer_right{ float: right; padding-right: 10px;} Any ideas? Hi, I have a drop down menu which is appearing under some flash. I have given my flash a div wrapper with a z-index of 1 and give the embed a wmode of transparent. I have given my <ul> and <li>'s a z-index of 1000, but still it appears under the flash in Chrome and IE, Any ideas? Thanks I'm very new to doing my own custom CSS, so please bear with me. I have a feeling I am missing something obvious... A space of about 22px height is appearing below my nav bar, which itself is 22px high, but is otherwise working fine. I can't figure out what code is causing the space to appear where I don't want it (just under the #page-nav and just above the #page-content). I'm not sure how to link to my test site, as the forum does not allow new members to link to urls... I can put it in a code tag, but I don't want to 'cheat' the rules... Let me know if that's okay... (the html and css is too long to post here) (P.S. Many, many, MANY thanks to anyone who can help me figure out this puzzle!) Hello, if you visit http://tombraiders.net/katie/alison/index2.html you'll see the site I'm working on. (User: letme Pass: in) I want to put a background image within the container that all the body copy resides. I've tried editing the CSS file, located at http://www.tombraiders.net/katie/al...tyle_screen.css under "container3" however nothing ever appears. The image I'm trying to link right now is located under the img folder at the path img/image.jpg -- it's just a test image I want to use for now to see if I can get one working at all. Any help would be great! Not sure why it's not showing up. Thanks Hi all, I'm adding drop down menus to my company's site and have it working as I'd like in Firefox and Safari but the drop downs do not appear at all on IE7/Win. I've tried a lot of different things to fix it but I think I am missing some fundamental understanding here so it's all been shots in the dark. Any tips would be greatly appreciated! Thanks in advance. P.S. I realize the CSS might be a bit confusing at first glance - what it achieves is essentially just changing the positioning of the background image when hovered over to reveal the "hover state" of a particular menu choice. The menu in question is the horizontal bar near the top (MBA Programs, Faculty & Research, etc.) URL: http://rady.ucsd.edu/index-dev.html Relevant HTML: Code: <ul id="nav-main" class="home"> <li id="mba"><a href="/mba/">MBA Programs</a> <ul> <li class="first-item"><a href="/mba/fulltime/">Full-Time MBA</a></li> <li><a href="/mba/flex/">FlexMBA</a></li> <li><a href="/mba/admissions/">Admissions</a></li> <li><a href="/mba/careers/">MBA Career Connections</a></li> <li><a href="/mba/profiles/">Student & Alumni Profiles</a></li> <li><a href="/mba/organizations/">Student Organizations</a></li> <li><a href="/mba/seminars/">Professional Seminars</a></li> <li><a href="/mba/mentors/">Executive Mentors</a></li> <li class="last-item"><a href="/mba/speakers/">Executive Speakers</a></li> </ul> </li> <li id="faculty"><a href="/faculty/">Faculty & Research</a> <ul> <li class="first-item"><a href="/faculty/directory/">Faculty Directory</a></li> <li><a href="/faculty/research/">Research Areas</a></li> <li><a href="/faculty/seminars/">Research Seminars</a></li> <li><a href="/faculty/recruiting/">Faculty Recruiting</a></li> <li class="last-item"><a href="faculty/postdoctoral/">Postdoctoral Research</a></li> </ul> </li> <li id="exec"><a href="/exec/">Executive Development</a> <ul> <li class="first-item"><a href="/exec/custom/">Custom Programs</a></li> <li><a href="/exec/open/">Open Enrollment Programs</a></li> <li><a href="/exec/learn/">Learning Consortium</a></li> <li><a href="/exec/leadership/">Leadership Assessment</a></li> <li><a href="/exec/align/">Align Executive Series</a></li> <li class="last-item"><a href="/exec/faq/">Frequently Asked Questions</a></li> </ul> </li> <li id="corporate"><a href="/corporate/">Corporate Connections</a></li> <li id="news"><a href="/news/">News & Events</a> <ul> <li class="first-item"><a href="/news/releases/">News Releases</a></li> <li><a href="/news/media-coverage/">Media Coverage</a></li> <li><a href="/news/faculty-experts/">Faculty Experts</a></li> <li class="last-item"><a href="/news/newsletter/">Newsletter</a></li> </ul> </li> <li id="invest"><a href="/invest/">Invest in Rady</a> <ul> <li class="first-item"><a href="/invest/edge/">Corporate EDGE</a></li> <li><a href="/invest/venture-fund/">Dean's Venture Fund</a></li> <li><a href="/invest/fellowships/">Endowed Fellowships</a></li> <li class="last-item"><a href="/invest/chairs/">Endowed Chairs</a></li> </ul> </li> <li id="alumni"><a href="http://alumni.rady.ucsd.edu">Alumni Relations</a></li> <li id="undergrad"><a href="/undergrad/">Undergraduate</a> <ul> <li class="first-item"><a href="/undergrad/courses/">Courses</a></li> <li class="last-item"><a href="/undergrad/course-readers/">Course Readers</a></li> </ul> </li> <li id="about"><a href="/about/">About</a> <ul> <li class="first-item"><a href="/about/welcome/">Welcome</a></li> <li><a href="/about/staff/">Our Staff</a></li> <li><a href="/about/campus/">Our Campus</a></li> <li><a href="/about/sandiego/">Life in San Diego</a></li> <li><a href="/about/dean/">About the Dean</a></li> <li><a href="/about/athena/">Athena</a></li> <li class="last-item"><a href="/about/beyster/">Beyster Institute</a></li> </ul> </li> </ul> Relevant CSS: Code: #nav-main { width: 903px; clear: both; list-style: none; padding: 0 0 2em 0; float: left; position: relative; }
#nav-main.home { padding-bottom: 0; }
#nav-main li { float: left; padding: 0; margin: 0; text-indent: -9000px;}
#nav-main li ul { position: absolute; list-style: none; }
#nav-main li ul li { display: none; text-indent: 0px; }
#nav-main li ul li a { font-size: 11px; line-height: 1.1; height: 20px; padding-left: 9px; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; }
#nav-main li:hover ul li { display: block; }
#nav-main ul li a { padding-left: 0px; padding-right: 12px; }
#nav-main li ul li.first-item a { padding-top: 10px; }
#nav-main li ul li.last-item a { padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; }
#nav-main li ul a, #nav-main li ul a:hover { width: 150px; background: #fafafa; }
#mba ul li a, #mba ul li a:hover { width: 155px; }
#faculty ul li a, #faculty ul li a:hover { position: relative; left: 2px; width: 137px; }
#exec ul li a, #exec ul li a:hover { position: relative; left: 4px; width: 172px; }
#corporate ul li a, #corporate ul li a:hover { position: relative; left: 2px; width: 200px; }
#news ul li a, #news ul li a:hover { position: relative; left: 3px; width: 117px; }
#invest ul li a, #invest ul li a:hover { position: relative; left: 2px; width: 139px; }
#undergrad ul li a, #undergrad ul li a:hover { position: relative; left: -1px; width: 117px; }
#about ul li a, #about ul li a:hover { position: relative; left: -73px; width: 107px; text-align: right; }
#mba a, #faculty a, #exec a, #corporate a, #news a, #invest a, #alumni a, #undergrad a, #about a { display: block; height: 34px; background: url(../images/nav.gif) no-repeat 0 0; }
#mba a { width: 105px; }
#mba a:hover, #mba.current a { background-position: 0px -34px; }
#faculty a { width: 127px; background-position: -105px 0; }
#faculty a:hover, #faculty.current a { background-position: -105px -34px; }
#exec a { width: 152px; background-position: -232px 0; }
#exec a:hover, #exec.current a { background-position: -232px -34px; }
#corporate a { width: 150px; background-position: -384px 0; }
#corporate a:hover, #corporate.current a { background-position: -384px -34px; }
#news a { width: 107px; background-position: -534px 0; }
#news a:hover, #news.current a { background-position: -534px -34px; }
#invest a { width: 59px; background-position: -641px 0; }
#invest a:hover, #invest.current a { background-position: -641px -34px; }
#alumni a { width: 64px; background-position: -700px 0; }
#alumni a:hover, #alumni.current a { background-position: -700px -34px; }
#undergrad a { width: 82px; background-position: -764px 0; }
#undergrad a:hover, #undergrad.current a { background-position: -764px -34px; }
#about a { width: 57px; background-position: -846px 0; }
#about a:hover, #about.current a {background-position: -846px -34px; }
Hey there \o/ Just joined the communitty :P seems like a really great place well, here's the thing... I'm currently finishing a website for my cousin and I'm having some problems with a dropdown menu. Since I am a CSS newby I'm using a horizontal dropdown menu I found on the Internet. Until some time ago it was working perfectly but then made some changes on the site design, before there was only one "box" now I'm using 3 (one for the header and menu, one for the user area and one for the content). When I changed the header, the submenus which are higher than the header div height (105 px) get cut. What can I do to make the entire submenus appear? Code: .tabelasd {
position: relative;
height: 105px;
overflow: hidden;
background: #222222 url(http://allinstreet.com/templates/imagens/backsd.gif) repeat;
}
Here's the website: http://www.allinstreet.com Here's the CSS file I'm using: http://www.allinstreet.com/templates/style.css Didn't make any changes on the js code so probably that's not the problem. Thanks in advance I must be missing the obvious? I have created an image that I want to tile vertically in the body of my document. So I have created a style for body in a linked css file with the following: body { background-image:url(image/background.gif); background-repeat: repeat-y; } In Design view in Dreamweaver, the image has the desired effect and tiles no problems, however when I go to preview it in the browser, the image does not appear. I have checked that the path of the image is correct in relation to the index.html page. Everything is saved on the desktop just now because I am experimenting with the technique, so in desktop I have the index.html and the image file (with the background.gif) in it. Oh and the css file is on the desktop too. I have also tried embeddeding the style rule in the head of the index.html and it still wont work. Would someone put me out of my misery please dmlocke Great forum been looking around but haven't seen anything that answers my question. I have a menu in wordpress witha drop down sub menu. The menu has a colored bar over the links that changes colors when a link is hovered or on the current page. Problem is this. The sub menu I want to be clean, but it is showing the bar over the link when one of those pages is current. Here is the html for the sub menu: Code: <ul class="sub-menu"> <li id="menu-item-539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-539"><a href="http://gellyfish.com/led/portfolio/living-rooms-family-rooms/">living rooms + family rooms</a></li> <li id="menu-item-536" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-536"><a href="http://gellyfish.com/led/portfolio/kitchens-dining-rooms/">kitchens + dining rooms</a></li> <li id="menu-item-538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-538"><a href="http://gellyfish.com/led/portfolio/bedrooms/">bedrooms</a></li> <li id="menu-item-537" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-537"><a href="http://gellyfish.com/led/portfolio/bathrooms/">bathrooms</a></li> <li id="menu-item-535" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-535"><a href="http://gellyfish.com/led/portfolio/before-after/">before & after</a></li> <li id="menu-item-542" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-542"><a href="http://gellyfish.com/led/portfolio/commerical/">commerical</a></li> </ul> Here is the CSS that I cant get to stop placing the bar on it.... Code: #access .current_page_item > a,
#access .current_page_ancestor > a {
color:#963300;
background-image:url("images/redbar.jpg");
background-position:top center;
background-repeat:repeat-x;
}
Here is the code I am trying to figure out how to stop the bar... Code: #acess ul ul li.current-menu-item a{ background-image:none;}
I do want the red bar on the top menu, just not on the sub menu. I messed with this a million ways and dont seem to be able to get rid of the bar on top.. Any help is greatly appreciated. My javascript pop-up menu is appearing behind my divs. Any idea how to fix this? http://absolute-design.net/websites/GISD/test2.html Thanks! Hi guys. This is my first post and I'm relatively new to CSS so I apologize if my post reeks of newcomer! I'm currently setting up my site with an external stylesheet. Everything has been coming along fine until I decided to setup a menu with css rollover image links. For some reason I simply cannot get the image to appear whatsoever. Everything else is working (such as position and size (I have temporarily given it a border for locational purposes)) within the code but the image just does not appear. I have looked this up for some time now and cannot come to a resolution. I have tried altering the code, changing paths, etc. etc. But I can't get it. Would really appreciate some help. Here is the rollover portion of my css: Code: #rollhome
{
display:block;
float:left;
margin: 0 auto;
width:122px;
height:50px;
text-decoration: none;
background-image:url("images/topmenu_home.png") no-repeat 0 0;
border:#000000 solid 2px;
text-indent:-99999px;
z-index:20;
}
#rollhome:link, #rollhome:visited
{
background-position: 0;
}
#rollhome:hover
{
background-position: 0 -50px;
}
And here is the rollover portion of my html: Code: <div id="rollovers"> <a id="rollhome" href="#"title="rollhome">Home</a>< /div> Any help would be most appreciated! Hi Folks, I really have spent days trying to fix this problem. http://test.fluid-rock.com/ I have some nested divs that use background images and colours to create the 3 column effect. In IE [of course] there's a problem. You can see it in the page above. White bands appearing on the right and flashing different heights on resize. I now have a border [red] around the wrapper div, because I've discovered that a border helps to tlessen the damage. Without it - the white rectangle/void stretches all the way accross blanking/truncating the text in the middle column too! It's completely weird. Before I post hundreds of lines of code I thought I'd let you just see the page, perhaps the problem looks familiar? Thanks so much, John The problem: a link appears in the color i have set in IE, but in other (probably the default one) color in FireFox the explanation of the situation: attachment 1 that's how it looks in FireFox attachment 2 that's how it looks in IE, and the way it should look! cause that's the color i have set in the css file here is the code from the css file Code: A {
color: #D9E0EF;
text-decoration: underline;
}
A:HOVER {
color: #D9E0EF;
text-decoration: none;
}
here is the code around the link from the screenshots Code: <p align="center"><b><font size="7"><a href="index.php?p=join/index">JOIN</a></font></b></p> where may be the problem which doesn't allow to FireFox to see that there is set color for the links? |
|||||||