|
CSS - Css Buttons Line Up Correctly In Ff, Safari But Not Ie
Hi -- I am viewing on FF, Safari, and IE 5.2 - all for Mac.
I have 3 buttons I am trying to line up and size and they look fine in FF and Safari at this point, but IE is showing them as all the same size (as opposed to being the length of the text plus padding) and is not right aligning them in the cell. I did add a table in this code just to see if I could get it to work, but it isn't anyway. If anyone can help me, I'd appreciate it. my button css: div.button{ float:right; } div.button a { display:block; position:relative; border-width:2px 0; border-color:#ccc; border-style:solid; color:#990033; text-decoration:none; margin:11px 4px; background-image: url(site_images/bgbutton.gif); background-repeat: repeat-x; background-position: left center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-weight:100; letter-spacing:0px; text-align:center; } div.button a span { display:block; position:relative; margin:0 -1px; border-width:0 2px; border-color:#aaa; border-style:solid; padding:4px 16px; } div.button a:hover { border-color:#A57C8A; color:#333; } div.button a:hover span { border-color:#A57C8A; } /*table added*/ #buttontable td { width:250px; font-family: Verdana,Sans-Serif,Arial; vertical-align: top; font-size: 12px; height: 16px; align: right; } the page code: <tr> <td colspan="2"><br /><br /> <div id="buttontable" align="right"> <table><tr><td> <P></P> <div class="button"> <p><a href="#"><span> Add To Bag</span></a></p> </div><br/><br/> <div class="button"> <a href="#"><span> CONTINUE SHOPPING </span></a> </div> <P> </P><br/> <div class="button"> <a href="#"><span>Add To Wish List</span></a> </div></td></tr></table> </td> </tr> any help you can give me as to how to get the same result in IE would be appreciated. I'd also appreciate knowing how it is looking on browsers on a pc. Thanks!! Similar TutorialsI tried to find this answer by doing a search, but maybe I'm asking the search engine wrong. I'm creating an online shopping environment for my cousin. It's mostly done, but...it isn't displaying right in Safari...and Netscape. But mostly I care about Safari. Here is the link: http://gregsgoods.com/seestore.php In IE7 is displays correctly. In Safari the second column or main section is displaying below the sidebar area. I'm not sure how to fix it. Here is the CSS code: Code: html {min-height: 100%;}
* {
margin: 0;
padding: 0;
}
a {
color: #005B9C;
}
a:hover {
color: #0B2444
}
img {
border: 0;
}
body {
background: #E2E7EF url(/gregsgoodbackground.gif) repeat-x left top;
color: #ccc;
font: normal 62.5% Tahoma,sans-serif;
}
p,ul {padding-bottom: 1.2em;}
li {list-style: none;}
h1 {
font: normal 1.8em Tahoma,sans-serif;
margin-bottom: 4px;
color: #005B9C;
margin: 0 0 7px 0;
}
h2 {
font: normal 1.3em Tahoma,sans-serif;
margin-bottom: 1px;
color: #005B9C;
margin: 0;
}
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}
.container {
position: absolute;
left:50px;
top:188px;
background-color: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 8px 8px;
width: 780px;
}
.top {
padding: 8px 8px 0;
}
.header {
position: absolute;
left:50px;
top:10px;
background-color: #fff;
font-size: 1.2em;
height: 173px;
margin: 0 auto;
padding: 8px 8px 5px;
width: 780px;
}
.header .left, .header .right {
background-color: #000033;
color: #fff;
color: #FFF;
height: 163px;
}
.header .left {
background: transparent url(/img/Top.jpg) top left repeat-x;
border: 1px solid #7795BD;
font: normal 2.8em "Trebuchet MS",sans-serif;
line-height: 163px;
width: 777px;
text-align: left;
}
.header .right div {
padding-left: 16px;
padding-top: 16px;
font: normal 1.6em "Trebuchet MS",sans-serif;
}
.navigation {
background: #D9E1E5 url(/img/nav.jpg);
border: 1px solid #7795BD;
height: 23px;
}
.navigation a {
background: transparent url(/img/nav.jpg) left top repeat-x;
border-right: 1px solid #7795BD;
color: #fff;
display: block;
float: left;
font-size: 12px;
font-family: Arial;
font-weight: bold;
line-height: 23px;
text-decoration: none;
padding: 0 18px;
}
.navigation a:hover {
background: transparent url(/img/nav.jpg) left bottom;
color: #f1f1f1;
}
.main {
border-top: 8px solid #FFF;
background: url(/img/bgmain.jpg) repeat-y;
}
.sidenav {
float: left;
margin: 5px;
width: 195px;
}
.sidenav h2 {
color: #333300;
font-size: 1em;
font-weight: bold;
line-height: 30px;
margin: 5;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
font-size: 1.1em;
color: #333300;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background-color: #ebebeb;
color: #654;
}
/* content */
.content {
float: right;
margin: 5px;
padding: 0 16px;
width: 536px;
}
.content {
color: #666;
font-size: 1.0em;
margin-bottom: 6px;
}
.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}
.footer {
background: url(/img/bluefooter.jpg) repeat-x;
color: #FFF;
font: bold 1em sans-serif;
line-height: 39px;
text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}
I have a site that I have created in WordPress using a pre-designed theme that I heavily customized. http://www.newlivingwaygreenville.org/blog/ The site looks great in Firefox 3.6, IE 7 and IE8 but one image on the home page will not align to the right in Safari 4.x. The image of the pastors floats to the left and directly over the Flash slideshow in Safari 4 while in the proper place in the others. The image is using inline styles to overcome the limitations of this particular WordPress theme. Code: style="position:absolute; border:0;margin-top: -4px;*margin-top:-10px;" Any ideas why this doesn't work right in Safari and what I can do to fix it? Thanks! ks 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%; } Hi I am working on a site where the front page will have multiple rows of 5 albums. each record is brought to the page via php. I have finally sussed the best method to display all results but have a problem with the position of the pay now buttons. http://www.dondolla.co.uk/DDPS shows the problem, the last 2 images have more varying lines of text, this caused the pay now buttons to sit at varying heights. the following is the code outputted by the script: Code:
<td background="images/content_03.jpg"><div align="center">
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td valign='top'><a href='mxt.php?mixid=7'><img src='miximage/carmix4cover.jpg' width='100' height='100' border='1'></a>
<br>
<div align='center'><font color='#A12407' size='1' face='Verdana, Arial, Helvetica, sans-serif'><strong>Dolla Cham<br>
Car Mix 4 - Culture</strong></font></div><br>
<FORM TARGET='paypal' ACTION='https://www.paypal.com/cgi-bin/webscr' METHOD='post'>
<INPUT NAME='cmd' TYPE='hidden' id='cmd' VALUE='_cart'>
<INPUT NAME='business' TYPE='hidden' id='business' VALUE='paypal@dondolla.co.uk'>
<input name='item_name' type='hidden' id='item_name' value='Car Mix 4 - Culture'>
<input name='amount' type='hidden' id='amount' value=''>
<input name='no_note' type='hidden' id='no_note' value='1'>
<INPUT TYPE='hidden' NAME='cn' VALUE='Special Instructions (optional'>
<INPUT NAME='currency_code' TYPE='hidden' id='currency_code' VALUE='GBP'>
<INPUT NAME='submit' TYPE='image' id='submit' SRC='images/addtocart.jpg' ALT='Add to Cart' BORDER='0' class='gallery'>
<INPUT NAME='add' TYPE='hidden' id='add' VALUE='1'>
</FORM>
</td>
<td valign='top'><a href='mxt.php?mixid=6'><img src='miximage/carmix3cover.jpg' width='100' height='100' border='1'></a>
<br>
<div align='center'><font color='#A12407' size='1' face='Verdana, Arial, Helvetica, sans-serif'><strong>Dolla Cham<br>
Car Mix 3 - Dancehall</strong></font></div><br>
<FORM TARGET='paypal' ACTION='https://www.paypal.com/cgi-bin/webscr' METHOD='post'>
<INPUT NAME='cmd' TYPE='hidden' id='cmd' VALUE='_cart'>
<INPUT NAME='business' TYPE='hidden' id='business' VALUE='paypal@dondolla.co.uk'>
<input name='item_name' type='hidden' id='item_name' value='Car Mix 3 - Dancehall'>
<input name='amount' type='hidden' id='amount' value=''>
<input name='no_note' type='hidden' id='no_note' value='1'>
<INPUT TYPE='hidden' NAME='cn' VALUE='Special Instructions (optional'>
<INPUT NAME='currency_code' TYPE='hidden' id='currency_code' VALUE='GBP'>
<INPUT NAME='submit' TYPE='image' id='submit' SRC='images/addtocart.jpg' ALT='Add to Cart' BORDER='0' class='gallery'>
<INPUT NAME='add' TYPE='hidden' id='add' VALUE='1'>
</FORM>
</td>
I have tried different ways of displaying this correctly under css but with no luck, and i cannot find the same problem posted elsewhere, any help? Cheers My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } 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... 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 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. 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>
<div id="page_footer"><img src="/site_images/pre_load/mhs_mini_logo.gif" width="41" height="23" alt="Millennium Hygiene Service Small Logo" align="right"></div> When I do this my image aligns to the right but it wont go all the way to the right edge of the div...it just sits 3 or 4 pixels from the right...help!! Hi guys, I finally re-jigged all my CSS somewhat along with my site laoy, i now have 3 columns, one of which displays under the other two :S any ideas on what i've done here? the page in question is: http://wakefieldfhs.co.uk:8180/uPhoto/signup.jsp Thanks Alright, I've taken it upon myself to port our guild website from 100% tables to mostly-css. However, once I was finished doing so; I had realized that a huge oversight was made. This oversight being Internet Explorer 6.0. The page displaying perfectly in IE7/Firefox. Site: www.measureoffaith.net Stylesheet: www.measureoffaith.net/style.css Don't worry, I haven't incorporate any PHP yet so WYSIWYG as far as coding goes. In the stylesheet, I seperated the forum CSS from the main site CSS. All subsequent pages are coded using the same CSS stylesheet. Any help would be greatly appreciated. Guidance as where to even start would also be amazing. It's easy to start from scratch for cross-browser functionality & backwards compatibility but at this point it seems overwhelming with all the bugs I have to fix as well. Thanks so much. index.html w/ stripped content: 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>
<title>
Measure of Faith on Aerie Peak
</title>
<SCRIPT>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rollover.js"></SCRIPT>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="banner">
</div>
<div id="container">
<div id="navigation">
<!-- Start of Navigation Bar (NavigationBar2) -->
<table id="NavigationBar2" border="0" cellspacing="0"
cellpadding="0" nof=
"NB_FYHPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_F YVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120"
width="140">
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton1) -->
<a href="#" onmouseover=
"F_roll('NavigationButton1',1)" onmouseout=
"F_roll('NavigationButton1',0)"><img id=
"NavigationButton1" name="NavigationButton1"
height="30" width="140" src=
"images/Home_Hbutton_on2.gif" onload=
"F_loadRollover(this,'images/Home_HRbutton_on2.gif',0)"
border="0" alt="Home" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton2) -->
<a href=
"/eqdkp/viewnews.php"
onmouseover="F_roll('NavigationButton2',1)"
onmouseout="F_roll('NavigationButton2',0)"><img id=
"NavigationButton2" name="NavigationButton2"
height="30" width="140" src=
"images/Raid_News_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Raid_News_NRbutton_on2.gif.bak',0)"
border="0" alt="Raid News" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton3) -->
<a href="charter.html" onmouseover=
"F_roll('NavigationButton3',1)" onmouseout=
"F_roll('NavigationButton3',0)"><img id=
"NavigationButton3" name="NavigationButton3"
height="30" width="140" src=
"images/Charter_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Charter_NRbutton_on2.gif.bak',0)"
border="0" alt="Charter" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton4) -->
<a href=
"roster.html"
onmouseover="F_roll('NavigationButton4',1)"
onmouseout="F_roll('NavigationButton4',0)"><img id=
"NavigationButton4" name="NavigationButton4"
height="30" width="140" src=
"images/Roster_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Roster_NRbutton_on2.gif.bak',0)"
border="0" alt="Roster" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton5) -->
<a href=
"/eqdkp/listmembers.php"
onmouseover="F_roll('NavigationButton5',1)"
onmouseout="F_roll('NavigationButton5',0)"><img id=
"NavigationButton5" name="NavigationButton5"
height="30" width="140" src=
"images/DKP_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/DKP_NRbutton_on2.gif.bak',0)"
border="0" alt="DKP" /></a>
</td>
</tr>
<tr valign="top" align="left">
<td class="nospaces" width="140" height="30">
<!-- Start of Navigation Button (NavigationButton6) -->
<a href="/phpBB2/index.php"
onmouseover="F_roll('NavigationButton6',1)"
onmouseout="F_roll('NavigationButton6',0)"><img id=
"NavigationButton6" name="NavigationButton6"
height="30" width="140" src=
"images/Forums_Nbutton_off2.gif" onload=
"F_loadRollover(this,'images/Forums_NRbutton_on2.gif.bak',0)"
border="0" alt="Forums" /></a>
</td>
</tr>
</table>
</div>
<div id="content">
<div class="newspost"><div class="wraptitle">
<p class="subtitle">- I... AM... UNLEASHED!</p>
<p class="thetitle">MAGTHERIDON DOWN</p></div>
<div class="newsdate">
28.04.2007 by <img src="images/icons/mar.png" />
</div>
<div class="newscontent">
Magtheridon proved to be no match to the professional
button clicking skills of MoF. Wiping a few times in
order to fine tune the button clicking, we emerged
with victorious with zero deaths and some bad loot.
</div>
<img src="images/news/magdown.jpg" summary="Magetheridon Down!" />
</div>
...clipped content...
</div><div style="clear: both;">
</div>
<div id="footer">
</div>
</body>
</html>
style.css: Code: html,body { height: 100%; }
body{
background: #000000 url('background-image.jpg') repeat-y;
margin: 0;
height: 100%;
}
.newspost{
width: 100%;
padding: 0;
text-align: center;
left: 50%;
}
.wraptitle{
float: left;
height: 79px;
}
p.subtitle{
font: bold 8pt/11pt trebuchet ms, tahoma;
color: #555555;
text-align: left;
border: 0;
padding-top: 35px;
margin: 0;
}
p.thetitle{
font: bold 11pt/11pt trebuchet ms, tahoma;
color: #000000;
text-align: left;
border: 0;
padding: 0;
margin: 0;
}
.newsdate{
font: 8pt/13pt trebuchet ms;
text-align: right;
float: right;
}
.newscontent{
font: 8pt/13pt tahoma;
text-align: justify;
width: 785px;
color: #555555;
clear: both;
background-color: #dedede;
border: thin solid #cdcdcd;
}
p.newsvideo{
font: 8pt/13pt tahoma;
width: 785px;
text-align: center;
border: 0;
padding: 0;
margin: 0;
}
a:link{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:visited{
text-decoration: none;
}
a:active{
text-decoration: none;
}
#banner{
background-image: url('header-one.jpg');
height: 200px;
width: 943px;
padding: 0;
}
h5.styling{
color: #555555;
font-family: trebuchet ms, tahoma;
border: 0;
padding: 8px;
margin: 0;
}
p.styling{
color: #555555;
font: 8pt/11pt trebuchet ms, tahoma;
font-size: 12px;
border: 0;
padding: 8px;
margin: 0;
text-align:justify;
}
td.styling{
font-color: #555555;
font: 8pt/11pt trebuchet ms, tahoma;
font-size: 12px;
border: 0;
padding: 0;
margin: 0;
text-align:justify;
}
html > body #navigation{
background-image: url('left-runner.jpg');
font-size: 0;
float: left;
width: 140px;
min-height: 100%;
padding: 0 0 0 4px;
line-height: 0;
border: 0;
margin: 0;
}
html > body #content{
background: #EDF2F5;
float: right;
width: 796px;
min-height: 100%;
padding: 0;
border: 0;
margin: 0;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.clearfix {
display:block;
}
* html .clearfix {
height:1px;
}
#container{
width: 940px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
#footer{
background-image: url('bottom-frame.jpg');
width: 943px;
height: 47px;
}
I'm brand new to CSS. I pieced together the following CSS style sheet: body { margin-top:5px; margin-bottom:5px; padding:0; background:#ccffff; } t{line-height:36px;} #wrap { position:50%; width:613px; margin:0 auto; background:#ffffff; margin-left:auto; margin-right:auto; align:center; } #sidebar { position:absolute; float:left; width:150px; border: 1px solid #000033; padding:15px; background:#ffffff; height:370px; z-index:1; } #main { float:right; width:390px; border: 1px solid #000033; overflow: auto; font-family: "Times New Roman", serif; font-size: 13px; padding-top:12px; padding-right:20px; padding-bottom:20px; padding-left:20px; background:#ffffff; background-repeat:no-repeat; background-position:75% 535px; background-image:url(smalljester.jpg); height:750px; z-index:2; } It works fine on most browsers, but not of course in IE/Win. I think there's something basic I'm not understanding about style sheets. The page is meant to be (and is on most browsers I've tried and on Macs) centered (the two boxes centered), the two boxes are meant to have white backgrounds with thin solid borders, and the boxes are meant to overlap perfectly (the right border of the left box should exactly overlap the left border of the right box). Right now in IE(8)/Win(XP) it's not centered, the two boxes are not connected (separated by white space on a light blue background), and the white background extends the full height of the #main box (where it's not meant to go below the bottom of the left column). Any help appreciated. 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 |
|||||||