|
CSS - Layout Doenst Display Correctly In Ie
http://24.166.186.237/_elementalcon...themes/default/
thats where it is, in FireFox it looks fine [although there is a bug if the contents smaller than the navigation, the navigation floats over the bottom border] and I would prefer the navigations height 100%. the problem in IE is obvious, the content div aligns itself under the bottom of the leftcolumn div. the site should be up 24/7 unless my wireless dies overnight or something, in which case it will work later. Please help thanks for reading. Oh yeah one more problem in all browsers Ive tried, the layout itself isnt positioning where I want it to, it's going all the way right, if not farther so theres a horizontal scroll bar . I cant figure out how to center it. I heard a paragraph text-align: center; containing the main div works in some browsers... Similar TutorialsHi I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac. I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac. This is a link to the page: http://www.independentliving.co.uk/index1.shtml And this is the relevant bit of the stylesheet: div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px; margin-bottom: 10px; font-size: 0.8em; } #header .welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } #header .slogan { text-align: left; width: 700px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; width: 700px padding-left: 20px; padding-right: 20px; color: #003366; } If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working! Thanks Frances When using the following code, the "Design" preview does not display correctly within Dreamweaver MX 2004, but it does display correctly in all browsers. Does anyone know if this a problem with Dreamweaver or my CSS code. Update:- removing "position:absolute" from #infoPanel fixes the design preview problem, but this isn't really a solution, as I need to position absolutely. The only problem I've got is the design preview in Dreamweaver. I am happy with the final browser output, but the layout is awful within Dreamweaver. Thanks Matthew 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>Welcome</title>
<style type="text/css">
<!--
#infoPanel{
position:absolute;
width:760px;
height:100px;
border-style:solid;
border-width:1px;
}
#infoPanelDetails{
margin: 10px;
position:absolute;
width:480px;
}
#infoPanelLink{
margin:10px;
position:absolute;
width:240px;
left:480px;
text-align:right;
}
-->
</style>
</head>
<body>
<div id="infoPanel">
<div id="infoPanelDetails">
<p>Some detailed text here.</p>
</div>
<div id="infoPanelLink">
<p><a href="http://www.wherever.com" >www.wherever.com</a></p>
</div>
</div>
</body>
</html>
Hello all, I am having trouble getting my site menu to display properly in chrome and safari. In chrome and safari the menu link are raised higher up in comparison to firefox and IE. Here is my site: Well I guess I can not link my site, but hopefully someone can still help me. Here is my code: Quote: /* Tabs ==================== */ #homepagetabs { border-bottom: none; margin-bottom: 10px; padding-left:170px; height:51px; background:transparent url } #homepagetabs li { display: inline; list-style-type: none; margin-top: 14px; border: none; border-bottom: none; float: center; line-height: 14px; margin-right: 8px; text-decoration: none; cursor: pointer; color:#fff; background: none; font-weight:bold; font-size:12px; } #homepagetabs li.currenttab { margin-top: 14px; background: none; border: none; border-bottom: none; font-weight:bold; color:#fff; font-size:12px; text-decoration:underline; } #options_69 th { font-size: 100%; } An important part of my design is the background image. I have tried many different things but cannot seem to solve this. I have two options: Option 1: One placing the image in a tag within the body. Results where pretty good except in IE 6 the content is displayed under the image. You can see the effect of option 1 on this portion of the site: http://woodysfireworks.nl/w/index.html example Code:
/*option1 background image*/
img.bg {
background-color:#000;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
overflow:hidden;
/* Set up positioning */
position: fixed;
z-index:0;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
Option2: I placed the image in the style sheet and then included a class and id in the tag. Here the images get blown up in all version of IE. example Code:
/*option 2 background image*/
#start{ background:url(images2/426.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";}
I would really appreciate some insight. I am pulling my hair out. Thanks I have spent my entire day trying to figure out why my three columns will not behave. I have even taken all my code just get one div to show and I can not see what I am doing wrong. It renders right in css master but not in my browser. Not even one div will show and I have tried everything. Right now I'm just trying to get #left to show, and I have taken all the code out of my xhtml just to see if I missed something. The layout will be a header and footer which will be fixed and the content will move when needed. In the container div which lies under the fixed header will have three columns: #left, #right and #mainbody. I haven't even placed the footer yet. Here is the css code: Code:
div {}
body, html {
font-size: 100%;
margin: 0px;
padding: 0px;
text-align: center;
line-height: 100%;}
#header-wrap {
background-image: url(images/banner-bg.jpg);
position: fixed;
width: 100%;
height: 185px;
z-index: 2;}
#container {
margin-left: auto;
margin-right: auto;
width: 940px;
text-align: left;
background-image: url(images/container-bg.jpg);
min-height: 540px;
background-repeat: no-repeat;
}
#logo {
position: fixed;
left: 10px;
background-image: url(images/logo.jpg);
width: 438px;
height: 112px;
z-index: 3;
top: 29px;}
#left {
width: 460px;
background-color: #000000;
position: relative;
top: 200px;
margin-left: auto;
margin-right: auto;
z-index: 5
}
#mainbody {}
#Right {}
p {
margin-left: 25px;
margin-right: 25px;
font-size: .875em;
font-family: Trebuchet, Verdana, Georgia, sans-serif, "Times New Roman";
margin-bottom: 25px;}
a:link {}
a:visited {}
a:hover {}
a:active {}
Here is the xhtml markup: 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=utf-8">
<title>Comedian Lonnie Bruhn</title>
<link rel="stylesheet" type="text/css" href="main.css" /> </head>
<body>
<div id="header-wrap">
</div><!--Header Wrap ends here-->
<div id="logo"></div>
<div id="container">
<div id="left"></div>
</div><!--container ends here-->
</body>
</html>
If anyone can see what I am doing wrong, I would appreciate it. It is very frustrating. Thanks LB I've converted my site to a css layout http://www.mrhodges.net and it woks well for the browsers I've checked except ie5 for mac. On this browser it drops the center column below the two floated side columns. Now I know that the browser is no longer supported and all that but wouldn't you know... I work for a school board where almost all of the machines are macs and they are running os9 and you guessed it mac ie5. So of the miniscule number of people running this browser I'm smack dab in the middle of most of them. Consequently I need to figure out how to get my page to display properly as I'd like to use the template to put together the schools's web site. What is the best solution for this problem? I'd rather not have to write two sets of pages and redirect using javascript. Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? I can hardly believe my eyes. Maybe I'm doing something wrong... I have a div with 5px borders and 5px padding on each side. My php does a browser detect, and pulls the appropriate css file. In the IE stylesheet, I have the div's width set to 820px (800px + 5px + 5px +5px + 5px = 820px) as described as part of the Tan Box Hack (which wasn't working right for some reason). In the Mozilla stylesheet, I have the width set to 800px, because, well, that's how wide it's supposed to be. Now, when I open IE6 and Firefox, and send them both to the page, IE renders the box somewhat larger than the box in FF. What's even stranger is, when I set the width in the IE stylesheet to 800px, it renders correctly, matching the width rendered by FF. Any thoughts on this? I can post my code if you really wanna see it, but I figured you'd all understand what I'm trying to describe... Surprise, surprise. I'm using a very simple example of a tabbed interface. Each tab is its own div with a border and a bgcolor. As you will see, IE is displaying the tabs such that they hang 1px over their background container while FF displays as expected. I'm thinking it has something to do with the float but can't seem to figure it out. Any ideas? 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.hdr {
background-color: #ccc;
}
.tab {
padding: 0px 5px;
background-color: #666;
border: 1px solid #000;
border-bottom: none;
color: #fff;
float: left;
}
.tab.active {
background-color: #fff;
color: #000;
margin: 0px 3px 0px 3px;
}
</style>
</head>
<body>
<div class="hdr">
<div class="tab active">tab 1</div>
<div class="tab">tab 2</div>
<br style="clear: both" />
</div>
</body>
</html>
Hello Gang! First off, thank you for taking your time to help a noob. Here is my problem: With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section). Can anyone spot why the pages render 2 different ways? LINK 1 LINK 2 Thank you for your time. hello all, my site is at waxmuseumplus dot ie css file is on the top level called layout.css I've put my site up and it works fine except that sometimes when you go to another page and comeback to the homepage the swf files don't position correctly. The real bizarre thing is that if you reload the page (maybe not on the first try but maybe the second try) it appears fine again. there are 6 swf files at the bottom right corner of the blue boxes across the page. They create the page curl animation at the bottom right. 9 out of 10 times they all load in position correctly but sometimes they don't. They appear further down the page. I think the fix is in the "a" link which i've wrapped around the div pagecurl and div textabove. I had this original set to 100% height. But i have now given it a 150px height. This doesn't fix anything though? The problem is that it is intermittent. Of course it looks fine my FF3 and when i test on others but when the client checks she sees errors. Please help I'm tearing my hair out and the site is already live! Can anyone tell me why the navigation does not align with the logo on the left? I would like the bottom of each element to be along the same line. I can't figure out what is pushing it up. Thanks Hi There, Here is my HTML, and below is my css, it displays as i wanted in IE, but obviosly Mozilla is the corrct browser to use, so what am i missing here? This is the link you can reference, http://cies.loadedtech.com.au/Default.aspx?tabid=547 If you look at it in IE it is fine, but Mozilla has this margin at the top...PLEASE HELP. HTML: Code: <body> <div id="mainSiteHold"> <div id="contentLeft"><p> </p></div> <div id="contentMid"><p> </p></div> <div id="contentRight"><p> </p></div> </div> </body> CSS: Code:
body { margin:0px; padding:0px; background-color:#ffffff; }
#mainSiteHold { position:relative; width:934px; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:1em; text-align:left; }
#contentLeft { float:left; position:relative; top:0px; width:180px; background-color: red; }
#contentMid { float:left; position:relative; top:0px; width:709px; background-color: blue; }
#contentRight { float:left; position:relative; top:0px;width:45px; background-color: green; }
Thanks I uploaded the page I am working on to http://sulley.dm.ucf.edu/~ebuccianti/wtf/. I want that text at the top of the page to begin a certain number of pixels down from the top of the div, so I tried to set padding-top to that number of pixels, but for some reason Firefox is extending the bottom of the div by that number of pixels as well. I have done this before and I have never had this problem. What the hell am I doing wrong this time?? Download the page he http://sulley.dm.ucf.edu/~ebuccianti/wtf/index.php Download the stylesheet he http://sulley.dm.ucf.edu/~ebuccianti/wtf/style.css Please help! I have a backround coded in the Div I have set up for my navigation...when I call an image in (button image) into the foreground of my Div, the background moves up so only part of it is viewable. This is my html: Code: <div style="position:static;"><img src="images/hdr_regular.jpg" height="29" width="320" border="0" align="left" alt=""/></div> <div style="position:static; background-image:url(images/nav_bg.jpg); background-repeat:repeat-x;"><img src="images/nav_logout_btn_grey.jpg" height="42" width="87" border="0" /></div> This is my css: Code: body, #wrapper
{ width: auto; min-width: 0px; min-height:100%; font-family:Arial,Helvetica,sans-serif; margin: 0; padding:0; overflow:hidden;
}
#wrapper_hdr {position:static; width:auto; min-width:0px; min-height:100%;
}
#wrapper_navigation { position:static; width:auto; min-width:0px; height:42px; background-image:url(../images/nav_bg.jpg); background-repeat:repeat-x;
}
#wrapper_content { position:static;width:auto; min-width:0px; background-image:url(../images/bg.jpg); background-repeat:repeat-x; padding:8px; padding-bottom:100px;
}
#wrapper_ftr { width:auto; min-width:0px; white-space:100%; height:80px; background-color: #F4F4F4; padding:2px; bottom:0; left:0;
}
any help would be greatly appreciated. Thanks! I was reading through some articles here about dropdowns and have found that the Son of Suckerfish menus were a good bet. When it rolls over it displays it correctly in IE by putting the dropdown under the link, but in Firefox it puts it smack over the top of it so you cannot read the original link. It worked in both browsers untill I added the main links to what they in the code below to include the pics. I had to put them in divs to align the text next to the icon correctly (verticle mid align next to img?? I jsut set a top margin to push it - is this best?). Heres a link to show you: http://skyyfinancial.com/demo/menutest2.php I put it all together and my list looks like this: Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div>
<ul id="nav">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Hard Money Loan General </div></a>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Real Estate Leasing General </div></a>
<ul>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Lease to Own</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Apartment</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Commercial</div></a></li>
</ul>
</li>
</ul>
</div></td>
</tr>
<tr>
<td><div>
<ul id="nav2">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Home Loans General</div></a>
<ul>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Purchase</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Refinance</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Construction</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Second Mortgage</div></a></li>
</ul>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Broker Application</div></a>
</li>
<!-- etc. -->
</ul>
</div></td>
</tr>
<tr>
<td><div>
<ul id="nav3">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Commercial Lending General </div></a>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Financial Analysis</div></a>
</li>
<!-- etc. -->
</ul>
</div></td>
</tr>
</table>
As of right now it works as it should and I only have the one serious issue with it overlapping. Any help on the rest of my questions would be great as well. Other questions I had: Because I had to split them up, I had create a new id for each in IE or it wouldnt work. Only the first one would work. I renamed them and duplicated the code over to the new names ( so theres 3x as much code). I think this could be a javascript issue, but I am not positive. I put my css and javascript at the bottom of this post. I can make a new thread in javascript forum if someone can tell me if that is the problem. ( I looked at it and it seems maybe it needs some type of loop? Not positive ) Lastly, in order to list the lists under eachother, i had split them up into a div per row inside of a table. Otherwise they would just continue across the page. Anyway better of doing this? css: Code:
#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px; color:#636363;
font-weight:bold;
}
#menu a {
display: block;
width: 275px;
}
#menu li {
float: left;
width: 275px;
}
#menu li ul {
background-color:#FFFFFF;
position: absolute;
width: 200px;
left: -999em;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
Javascript Code:
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Thanks for the help |
|||||||