|
CSS - Right Border Disappears!
The right hand border for some of my table cells (Class "item_body") disappears, but they have almost identical coding to the cells the work properly. My CSS that pertains to the borders:
Code:
td.item_body {background-color: #e7e7e7; border-left: 1px solid #c6c6c6; border-right: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6; margin: 5px 5px 5px 5px}
And the code for the table with the cell that doesn't work: Code: <table cellspacing='0' cellpadding='0' border='0' valign='middle' width='100%'> <tr height='22px'> <td class='item_title' width='100%'><p class='title'> Search Roster </p></td> </tr> <tr> <td class='item_body' width='100%'><p class='item_body'> Use this form to search for any Bronco Virtual Airlines pilot. You may use as many or as little fields as you would like. For best results, try to enter all the information you know. <form action="index.php" method='get'> <input type='hidden' name='page' value='roster' /> <input type='hidden' name='act' value='shw' /> <table cellspacing='0' cellpadding='2' border='0' width='100%'> <tr><td width=50%><p class='item_body'>Full Name:</p></td> <td><p class='item_body'><input type='input' name="name" /></p></td></tr> <tr><td><p class='item_body'>Pilot ID</p></td> <td><p class='item_body'><input type='input' name="pilotid" /></p></td></tr> <tr><td><p class='item_body'>Pilot Base:</p></td> <td><p class='item_body'><select name="base"> <option selected='selected' value='' />Any Base <option value='kboi' />KBOI <option value='kgtf' />KGTF <option value='ksea' />KSEA <option value='kslc' />KSLC </select></p></td></tr> </table><br /><p class='item_body_center'><input type='hidden' name='orderby' value='last' /><input type='submit' value="Search"></form> </p></td> </tr> </table> Similar TutorialsI'm sure this is something stupid and simple I've overlooked.. So I am hoping that someone here can see what I am missing here.. I am FINALLY in the home stretch for this site, and I cannot for the life of me figure this out.. This only happens on the gallery pages.. The side border disappears when viewing the site in IE7 but ONLY under the Vista OS.. (At home I have IE7 and WinXP and the gallery pages display just fine..) http://clients.overthehillweb . com/hairisle/index.php?main_page=page&id=2&chapter=0 What the is different with IE7 and Vista? Screenshot of what's happening: http://i25.tinypic . com/2gtq4jr.png Perhaps a better question is this.. It appears that my method for applying that border to the center content and dropdown nav menu is not working well under IE7 with Vista (and for some folks XP and IE7). Is there a better way to apply this border to the center content and the nav menu that WILL work with IE7?? ok i have links on the side, i have applied border-bottom:0.1em solid black properties so they look like they are underlined. Now it all works but sometimes when i scroll the page down and then up, SOME of the link's border have disappeared, i can fix this by moving my mouse of the links and the border appear but i was wondering is it to do with CSS/html? the only other thing could be my Screen/monitor's refresh rate Hi, the background of the top navigation (it's a drop down menu) disappears when I make the google custom search box float left. I need it to float left because I want it to be on the same line as the top navigation menu. The id of the div that should show the bg is #topNavContainer. Page: http://hopewwamericorps.org/index.php Style: PHP Code: #topNavContainer { background: #000000 url(../images/topNavBg.gif) repeat-x scroll; } #topNav { height: 40px; width: 760px; margin: 0px auto; text-align: left; padding: 0px 0px 0px 100px; color: #bcd5df; float:left; } #siteSearch { padding-top: 10px; width: 300px; float: left; display: block; } HTML: PHP Code: <div id="topNavContainer"> <div id="topNav"> <ul class="sf-menu"> -**REMOVED FOR POST**- </ul> </div> <div id="siteSearch"> <form action="http://hopewwamericorps.org/page.php?Page=Search_Results"> <input type="hidden" name="cx" value="018067663729731490355:_3djw8ivavo" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="Page" value="Search_Results" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> </div> </div> Thank you for your help! Please ask me to clarify if needed, thanks. I am having a problem.. The site am working on looks great in FF but in IE breaks when you click on a the link to view a larger picture and then mouse off the link. The padding on the bottom of the body (#main) disappears. i have a Javascript that switches the image out for another one. i am not sure if this is the problem. can someone please take a look i have been racking my brain on this for days. http://www.avallo.com/test/fatcatweb/phototest.shtml (Problem occurs when thumbnail is clicked and then moused off in IE 5.5 and IE 6) i have a border on the #main div so you can see what i am talking about. * Update * it isnt the javascript. here is the css and html. Code:
#main {
border:#333 dotted 1px;
float:right;
display:inline;
position:relative;
width: 610px;
padding-bottom:30px;
background:url(images/body-top.gif) no-repeat;
}
#mainbody {
margin: 30px 20px 20px 15px;
}
a.thumb {
float:left;
margin: 0 5px 5px 0;
padding: 2px;
border: #fff 2px solid;
}
a.thumb:hover {border: #895FA5 2px solid;}
<div id="mainbody">
<h1>Photo Portfolio</h1>
<p>Fat Cat Art Studio is proud to provide our clients with images of their business, area, or workers. This portfolio is a SMALL representation of recent photos.</p>
<div class="photos">
<h2>The Shore Photos</h2>
<div class="floatR" id="change1"><img src="images/photos/photo-01.jpg" alt="Enlargment" width="350" height="245" border="0" /></div>
<p>Taking a stroll on the shore leads to inspiration and some unique perspectives.</p>
<a class="thumb" href="javascript:change('change1','photo-01',350,245)"><img src="images/photos/photo-01x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
<a class="thumb" href="javascript:change('change1','photo-02',350,263)"><img src="images/photos/photo-02x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
<a class="thumb" href="javascript:change('change1','photo-03',350,264)"><img src="images/photos/photo-03x.jpg" alt="Thumb" width="75" height="75" border="0" /></a>
</div>
</div>
thanks, weston Ok i have a problem with css in IE7(figures!)... Dont know if i need a hack for it or i just suck at css but when i load my page in firefox everything is perfect but when i load it in IE7 there is nothing! I figured out it is because of im using a clear and if i dont use the clear it shows up but of course it doesnt look right. html4strict Code: Original - html4strict Code <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="main"> <div id="header"> <div class="logo"> <img src="images/Logo beta2.jpg" alt="Logo" /> </div> <div class="top-section"> </div> <div class="top-border"> </div> </div> </div> </div> </body> </html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> CSS: css Code: Original - css Code @charset "utf-8"; #container { height: auto; width: auto; padding: 10px; visibility: visible; overflow: auto; } * html #container { height: 1%; } #main { position: relative; } #header { height: auto; width: auto; position: relative; } .top-border { height: 10px; width: 900px; position: relative; background-image: url(css-images/t-border.jpg); background-repeat: no-repeat; clear: left; } .logo { float: left; position: relative; } .top-section { float: left; height: 120px; width: 600px; position: relative; } @charset "utf-8"; I have a basic div: Code: <div id="box1"></div> The CSS for the div: Code: #box1 {
position: relative;
width: 75%;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 100px;
background-color: #FFFFFF;
*background: none;
z-index: 1;
left: 50px;
top: 50px;
background-image: url(images/1px_trans75percent.png);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1px_trans75percent.png', sizingMethod=scale, enabled=true);
background-repeat: repeat;
border: 1px solid #FFFFFF;
}
The transparent background flashes and disappears when the page is loaded in IE6. Any ideas on how to get it to appear and stay appeared would be much appreciated... thanks! Im doing a project Located Here *** not work safe *** 96.0.176.55/login.php Please look at the css and html If you hover over with the mouse on the top navigation were you see Gallery you will notice there is a drop down menu with three separate choices or images... The problem is when you move the mouse down to the second or third image the dropdown disappears. Can someone please help? Thanks I have a wrapper div with a height of 600px and a width of 900px Inside it there are 2 divs The first is floated left with the below style Code:
#left{
height : 100%;
width : 600px;
overflow:hidden;
float : left;
}
The second one is not floated, so that it can occupy the rest of the space and the style is Code:
#right{
height : 100%;
overflow : auto;
margin-left : 600px;
}
The above design is meant to create a 2 column layout with a fixed height. The html I used is Code:
<div class="wrapper">
<div id="left">
<img id="main-image" src="/some/image"/>
</div>
<div id="right"></div>
<br clear="left"/>
</div>
The thing is that Opera (v 10.01) and Safari (v. 4.0.3) do not display the right div. When I remove the overflow:auto, however they do. I cannot figure out why. Any help appreciated Thanks Ok, 'guys' I've hit a snag. I'm trying to redesign my website and am using blueprint css framework for the first time in my life. I've tested the layout in FF3.6, Google Chrome v8.0, Safari for Windows v5.03, IE8, and IE8 in compatibility mode [to emulate IE7]. It works great in ALL browsers I tested except emulated IE7. In this mode, the menu completely disappears except for a separate div that holds the left nav image. I have validated the html and my customized css file and have gotten rid of all errors found...but, still cannot get the nav menu to show up in emulated IE7 mode. So, I'm hoping Kravvitz or some other CSS god will come to my rescue. the short link to my dev page is http://drw65.servehttp.com/ this is a url redirect link that will redirect to my personal webspace from my ISP. thanks for reading. Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
Originally it worked in IE, but nothing else, now we've gotten it to work in FF, Safari, Opera, et. al., but the page wrapper background disappears in MSIE 7. http://www.splatteredink.com/realms/ CSS: Code: #overall {
background: #ababab url(../images/wrapper_bg.png)100% 0 repeat-y;
width: 100%;
min-height: 335px;
float: right;
}
any ideas? The background is fixed in a wrapper div using background-attachment: fixed. When I place a fixed footer div in the wrapper using position: fixed, the background disappears. If I place the footer outside the wrapper, it appears outside and disconnected from the rest of the content. How do I fix the footer at the bottom without losing the background? Help, please! In IE6, the vertical scrollbar disappears if the browser window is opened vertically past the <div id="text intro"> section (if the bottom of the browser window is within or above this section, the scroll bar is present). The scrollbar is present as normal in FF and Safari. So this is apparently an IE issue. I've tried a couple of fixes to seemingly related bugs, such as adding the line "display:inline;" to both of my floating elements. I also tried the Holly Hack fix of adding "height:1%" to my relatively positioned element, "body". The scrollbar behavior remains the same. The following are my .php and .css files. Any ideas on this would be much appreciated... thanks. PHP 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" /> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <title>Title</title> <body> <div id="container"> <div id="address">Address</strong></div> <div id="banner">Banner<div id="logo"></div> <div id="redseethru" class="redseethru"></div> <div class="redseethru" id="links"></div> <div id="link1">Link</div> <div id="link2">Link</div> <div id="link3">Link</div> <div id="link4">Link</div> <div id="link5">Link</div> </div> <div id="breadcrumbs">Script </div> <div id="red_title">Products</div> <div id="title">Kayaks</div> <div id="body"> <div id="text_intro">Text</div> <p>ipsum lorem</p> <p>ipsum lorem</p> <p>ipsum lorem</p> <p>ipsum lorem</p> </div> <div class="redseethru" id="footer"></div> <div id="copyright">Copyright</div> <div id="silver">Design</div> </div> </body> </html> CSS: PHP Code: /* CSS Document */ #container { position:absolute; width:750px; left:50%; margin-left:-350px; } #address { position:absolute; width:615px; height:12px; z-index:10; left: 165px; top: 0px; font-family: Arial; font-size: 11px; color: #FFFFFF; padding-top: 1px; padding-bottom: 1px; } #banner { position:absolute; width:750px; height:125px; z-index:1; left: 0px; top: 50px; background-image: url(http://www.sportingrage.com/js/banner_images.js); border: 2px solid #CF1C0D; } #logo { position:absolute; width:285px; height:150px; z-index:2; left: -40px; top: -49px; visibility: visible; background-image: url(http://www.sportingrage.com/images/TSR_white_SML.png); } img, #logo { behavior: url(http://www.sportingrage.com/iepngfix.htc); } body { background-color: #000033; } .redseethru { position:absolute; width:150px; height:100px; z-index:3; left: 602px; top: 0px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://www.sportingrage.com/images/redseethru.png'); } .redseethru[class] { background-image: url(http://www.sportingrage.com/images/redseethru.png); } #red_title { position:absolute; width:145px; height:25px; z-index:10; left: 598px; top: 120px; text-align: right; font-family: Arial; font-size: 24px; font-weight: bold; color: #FFFFFF; } #links { position:absolute; width:750px; height:25px; z-index:5; left: 0px; top: 100px; border-top: 1px solid #CF1C0D; } #link1 { position:absolute; width:74px; height:15px; z-index:10; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left:2px; text-align: center; border-right: 1px solid #CF1C0D; top:100px; } #link2 { position:absolute; width:74px; height:15px; z-index:10; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left: 87px; text-align: center; border-right: 1px solid #CF1C0D; top:100px; } #link3 { position:absolute; width:74px; height:15px; z-index:10; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left: 172px; text-align: center; border-right: 1px solid #CF1C0D; top:100px; } #link4 { position:absolute; width:74px; height:15px; z-index:10; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left: 258px; text-align: center; border-right: 1px solid #CF1C0D; top:100px; } #link5 { position:absolute; width:74px; height:15px; z-index:10; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left: 342px; text-align: center; border-right: 1px solid #CF1C0D; top:100px; } /*White Links*/ a.white:link { font-family: Arial; color: #ffffff; text-decoration: none; } a.white:visited { font-family: Arial; color: #ffffff; text-decoration: none; } a.white:hover { font-family: Arial; color: #ffffff; text-decoration: underline; } #breadcrumbs { position:absolute; width:730px; height:20px; z-index:1; font-family: Arial; font-size: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 5px; padding-top: 10px; left: 0px; top:179px; background-color: #FFFFFF; border-right-width: 2px; border-left-width: 2px; border-right-style: solid; border-left-style: solid; border-right-color: #FF0000; border-left-color: #FF0000; text-indent: 7px; } a.breadcrumbs:link { color:#000033; text-decoration:underline; font-weight: normal; font-family: Arial; font-size: 10px; } a.breadcrumbs:visited { color:#000033; text-decoration:underline; font-weight: normal; font-family: Arial; font-size: 10px; } a.breadcrumbs:hover { color:#000033; text-decoration:underline; font-weight: normal; font-family: Arial; font-size: 10px; } #title { position:absolute; width:740px; height:20px; z-index:1; font-family: Arial; font-size: 20px; padding-right: 5px; padding-left: 5px; padding-top: 10px; left: 0px; color: #000033; font-weight: bold; text-align: left; padding-bottom: 5px; top: 214px; background-color: #FFFFFF; text-indent: 10px; border-right-width: 2px; border-left-width: 2px; border-right-style: solid; border-left-style: solid; border-right-color: #FF0000; border-left-color: #FF0000; } #body { position:relative; width:730px; height:1%; z-index:6; left: 0px; top: 249px; background-color: #FFFFFF; border-top: 2px none #CF1C0D; border-right: 2px solid #CF1C0D; border-bottom: 2px solid #CF1C0D; border-left: 2px solid #CF1C0D; padding: 10px; } #text_intro { position:relative; width:650px; height:50px; z-index:10; font-family: Arial; font-size: 12px; padding-right: 40px; padding-left: 40px; padding-top: 10px; left: 10px; color: #000033; text-align: left; padding-bottom: 5px; top: 10px; } #footer { position:relative; width:750px; height:20px; z-index:4; left: 0px; top: 249px; border-top: 2px none #CF1C0D; border-right: 2px solid #CF1C0D; border-bottom: 2px solid #CF1C0D; border-left: 2px solid #CF1C0D; padding-top: 5px; } #copyright { position:relative; float:left; top:249px; width:200px; height:25px; z-index:17; font-family: Arial; font-size: 11px; color: #FFFFFF; display:inline; } #silver { position:relative; float:right; width:200px; height:25px; z-index:7; top: 249px; font-family: Arial; font-size: 11px; color: #FFFFFF; display:inline; } Hi Guys, Thanks to some incredible pointing me in the right direction yesterday, i have finally got to my 3-col layout that I want. The only issue is now my news box will let content role behind it, but really i want it to push down as with the footer bar! Can anyone point me in the right direction please? Stylesheet below and output at www.generating-sets.com/index.new2.php PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(bgs.gif); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: Times, "Times New Roman", serif; } #wrap { background-image:url(bg.gif); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} #header { background-image:url(label2.gif); background-position:right; background-repeat:no-repeat; background-color: #000066; border-bottom: 2px #ffffff solid; color: #ffffff; margin:0; padding:0; height:80px; } p {margin:5px; padding:0;} h1 { position:relative; line-height:80px; margin:0; padding-left:20px; } #left { float:left; width:150px; color: #ffffff; text-align:center; background-color: #000066; } #main { position:relative; margin-left:200px; } #right { float:right; width:10px; text-align:center; color: #ffffff; background-color: #000066; } #content { padding:5px; margin-right:200px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000066; border-top: 2px #ffffff solid; margin:0; padding:0; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 1%; text-align: center; height:150px; background-color: #000066; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -190px; border: 2px #ffffff solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } There must be a reason why it works like it does, but i don't know!! Charlie ont his page : http://www.sahasraadhipura.org/News/news.html viewing it with internet explorer the text disappears and then reappears when scrolling, refreshing the page does not help. Anyone know whats going on ? Using mozilla it works fine. Sorry forgot to say this problem started whein i added some<hr> horisontal rulers When I am floating two containers or images my background color disappears. Why is that and what should I do instead? Here is what I am doing: <div class="contentWrapper"> <div class="content"> <div class="leftContent"> <img src="" alt="" /> </div> <!-- end leftContent --> <div class="rightContent"> <img src="" alt="" /> </div> <!-- end rightContent --> </div> <!-- end content --> </div> <!-- end contentWrapper --> Now the css: .contentWrapper { margin: 0; padding: 0; width: 100%; } .content { margin: 0 auto; padding: 0; width: 960px; background: #ccc; } .leftContent { margin: 0; padding: 0; width: 450px; float: left; } .leftContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } .rightContent { margin: 0; padding: 0; width: 450px; float: right; } .rightContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } Thanks! drlinklove.com/drew/index4.html Some of the navigation items have drop-down menus. It seems that sometimes the drop-down menu disappears before the user has a chance to click one of the options. Anyone have a guess to how I can make it more stable? I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Im writing a combination navigation bar and contextual layout box model for a large dynamically generated site. The contextual layout is so that i can set a variable in the appropriate markup and then have the correct collumns display. I have two problems. #1. When I mouse over the menus and try to go down my menus they dissapear. If I take out the layout styling they work properly in both IE and Firefox. #2. Anyway to get the menus to appear above form elements? I would appreciate any help.... my code... Quote: /* default layout.php */ body { color: #000; background-color: #fff; margin: 0; } p, h1, h2, h3, h4 { margin: 0; padding: 1em; } h2, h3, h4 { color: #cc0000; } #layoutlogic-abc, #layoutlogic-ab, #layoutlogic-a { background-color: #fff; margin: 0 -1px; width: 100%; border:1px solid black; } #footer { color: #000; position: relative; z-index: 13; width: 100%; } #footer a { color: black; } #layoutlogic-abc .page { background-color: #fff; width: auto; border-right: 150px solid #eee; border-left: 200px solid #eee; } #layoutlogic-ab .page { background-color: #fff; width: auto; border-left: 200px solid #eee; } #layoutlogic-a .page { background-color: #fff; width: auto; } .section { margin: 0; width: 100%; } .col-a, .col-b, .col-c { position: relative; float: left; padding: 2.5em; } .col-a a, .col-b a, .col-c a{ color: blue; } .col-a { margin-right: 1px; } .col-b { margin: 0 -3px 0 -2px; } .col-c { margin-left: 1px; } #layoutlogic-abc .col-a, #layoutlogic-ab .col-a { margin-left: -200px; z-index: 10; width: 200px; padding-top: 1em; } #layoutlogic-abc .col-b, #layoutlogic-ab .col-b { z-index: 20; width: 100%; padding-top: 1em; border: 1px solid black; } #layoutlogic-abc .col-c { color: #fff; margin-right: -150px; z-index: 10; width: 150px; padding-top: 1em; } #layoutlogic-a .col-b, #layoutlogic-ab .col-c, #layoutlogic-a .col-c { display: none; } .floatright { float: right; margin: 1em 1em 0 2em; } .floatleft { float: left; margin: .8em 0 .8em 1.6em; } .clear { clear: both; } .page > .section { border-bottom: 1px solid transparent; } .garamond {font-family: garamond;} ."Times New Roman" {font-family: "Times New Roman";} .verdana {font-family: verdana;} .arial {font-family: arial;} ."Times New Roman" {font-family: "Times New Roman";} and my markup: PHP Code: <body> <div align="center"><h1><img src="/images/banner.gif" alt="UCWDC Banner" /></h1></div> <div id="nav"> <ul class="level1"> <li><a href="/home/"><?= $menu1 ?></a></li> <li class="submenu"><a href="/my_ucwdc/"><?= $menu2 ?></a> <ul class="level2"> <li><a href="/my_ucwdc/my_account.php"><?= $menu2array[0] ?></a></li> <li class="submenu"><a href="/my_ucwdc/online_community.php"><?= $menu2array[1] ?></a> <ul class="level3"> <li><a href="/my_ucwdc/forum.php"><?= $submenu2array[0] ?></a></li> <li><a href="/my_ucwdc/marketplace.php"><?= $submenu2array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $submenu2array[2] ?></a></li> </ul></li> <li><a href="/my_ucwdc/membership.php"><?php echo ($menu2array[2])?></a></li> <li><a href="/my_ucwdc/history.php"><?= $menu2array[3] ?></a></li> <li><a href="/contacts/officers.php"><?= $menu2array[4] ?></a></li> <li><a href="/contacts/regional_rep.php"><?= $menu2array[5] ?></a></li> <li><a href="/contacts/members_dir.php"><?= $menu2array[6] ?></a></li> <li><a href="/events/results.php"><?php echo($menu2array[7])?></a></li> </ul></li> <li class="submenu"><a href="/events/"><?= $menu3 ?></a> <ul class="level2"> <li><a href="/events/events_by_date.php"><?= $menu3array[1] ?></a></li> <li><a href="/events/event_reviews.php"><?= $menu3array[2] ?></a></li> <li><a href="/events/results.php"><?= $menu3array[0] ?></a></li> <li><a href="/events/register.php"><?= $menu3array[3] ?></a></li> </ul></li> <li class="submenu"><a href="/competition/"><?= $menu4 ?></a> <ul class="level2"> <li class="submenu"><a href="/rules/"><?= $menu4array[0] ?></a> <ul class="level3"> <li><a href="/rules/couples.php">Couples</a></li> <li><a href="/rules/line.php">Line Dance</a></li> <li><a href="/rules/pro_am.php">Pro-Am</a></li> <li><a href="/rules/team.php">Team</a></li> </ul></li> <li class="submenu"><a href="/dances/"><?= $menu4array[1] ?></a> <ul class="level3"> <li><a href="/dances/triple_2.php"><?= $dancesarray[0] ?></a></li> <li><a href="/dances/polka.php"><?= $dancesarray[1] ?></a></li> <li><a href="/dances/night_club.php"><?= $dancesarray[2] ?></a></li> <li><a href="/dances/cha_cah.php"><?= $dancesarray[3] ?></a></li> <li><a href="/dances/waltz.php"><?= $dancesarray[4] ?></a></li> <li><a href="/dances/2_step.php"><?= $dancesarray[5] ?></a></li> <li><a href="/dances/east_coast_swing.php"><?= $dancesarray[6] ?></a></li> <li><a href="/dances/west_coast_swing.php"><?= $dancesarray[7] ?></a></li> </ul></li> <li class="submenu"><a href="/music/"><?= $menu4array[2] ?></a> <ul class="level3"> <li><a href="/music/release_dates.php"><?= $musicarray[0] ?></a></li> <li><a href="/music/music_news"><?= $musicarray[3] ?></a></li> <li><a href="/music/dj_forum"><?= $musicarray[2] ?></a></li> <li><a href="/music/music_match.php"><?= $musicarray[1] ?></a></li> </ul></li> </ul></li> <li class="submenu"><a href="/worlds/"><?= $menu5?></a> <ul class="level2"> <li><a href="/worlds/worlds_register.php"><?= $menu5array[0] ?></a></li> <li><a href="/worlds/worlds_swing.php"><?= $menu5array[1] ?></a></li> <li><a href="/worlds/worlds_workshops.php"><?= $menu5array[2] ?></a></li> <li><a href="/worlds/worlds_schedule.php"><?= $menu5array[3] ?></a></li> <li><a href="/worlds/worlds_line.php"><?= $menu5array[4] ?></a></li> <li><a href="/worlds/worlds_competitors.php"><?= $menu5array[5] ?></a></li> <li><a href="/worlds/worlds_hotels.php"><?= $menu5array[6] ?></a></li> <li><a href="/worlds/worlds_sponsor.php"><?= $menu5array[7] ?></a></li> <li><a href="/worlds/worlds_contacts.php"><?= $menu5array[8] ?></a></li> <li><a href="/wolrds/worlds_updates.php"><?= $menu5array[9] ?></a></li> </ul></li> <li class="submenu"><a href="/judge/"><?= $menu6?></a> <ul class="level2"> <li><a href="/judge/about_judge.php"><?= $menu6array[0] ?></a></li> <li><a href="/contacts/judge_pool.php"><?= $menu6array[1] ?></a></li> <li><a href="/judge/judge_curriculum.php"><?= $menu6array[2] ?></a></li> </ul></li> <li class="submenu"><a href="/classes/"><?= $menu8 ?></a> <ul class="level2"> <li><a href="/classes/zip_code_match.php"><?= $menu8array[0] ?></a></li> <li><a href="/classes/classes_events.php"><?= $menu8array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $menu8array[2] ?></a></li> <li><a href="/classes/classes_judging.php"><?= $menu8array[3] ?></a></li> </ul></li> <li class="submenu"><a href="/contacts/"><?= $menu9 ?></a> <ul class="level2"> <li><a href="/contacts/officers.php"><?= $menu9array[0] ?></a></li> <li><a href="/contacts/regional_rep.php"><?= $menu9array[1] ?></a></li> <li><a href="/contacts/teachers_dir.php"><?= $menu9array[2] ?></a></li> <li><a href="/contacts/judge_pool.php"><?= $menu9array[3] ?></a></li> <li><a href="/contacts/members_dir.php"><?= $menu9array[4] ?></a></li> <li><a href="/contacts/webmaster.php"><?= $menu9array[5] ?></a></li> </ul></li> </ul> </div> <div id="layoutlogic-abc"> <div class="page"> <div class="section"> <div class="col-a"> <fieldset><legend>Login:</legend> <table width="100%" border="0"> <tr> <td align="right">Username:</td><td align="center"><input type="text" size="10" /></td> </tr> <tr> <td align="right">Password:</td><td align="center"><input type="password" size="10" /></td> </tr> <tr> <td colspan="2" align="center"><a href="#">Forgot Password?</a></td> </tr> <tr> <td colspan="2" align="center"><a href="new-member.html">Not a Member yet?</a></td> </tr> </table> </fieldset> <div align="center"><input type="submit" value="Login"></div> <hr /> <p>left Content </p> <hr /> </div> <div class="col-b"> <div class="floatright"><img src="header2.jpg"></div> <p >Content</p> </div> <div class="col-c"> <p>Content</p> </div> <div class="clear"></div> </div> </div> <div id="footer"><h3>Footer</h3><p>Site Design and Maintenence by <a href="#">WestonWebWorks.com</a>.</p></div> </div> </body> </html> Thanks |
|||||||