|
CSS - Table Menu Browser Problem...
hi,
In my site, I'm trying to make the menu in a table. The table has many images, which only some are links. I did it so that hovering over a link cell, changes the image in the cell (and actually all of the link images are from one file, which everytime I show a different part of him). Now, everything seems to be working fine in Firefox and IE7, however, naturally IE6 doesn't work. Actually only the first cell, "Home", works, and the others don't. Any idea how can I fix it? here is the html for the menu: <div id="menu"> <table width="679" border="0" cellpadding="0" cellspacing="4"> <tr> <td class="link" id="nav_home"><a href="../home/index.htm" title="home">home</a></td> <td background="../../images/1.jpg"> </td> <td background="../../images/2.jpg"> </td> <td class="link" id="nav_about"><a href="../about/main.htm" title="about">about us</a></td> <td background="../../images/3.jpg"> </td> <td background="../../images/4.jpg"> </td> <td background="../../images/5.jpg"> </td> <td class="link" id="nav_recruit"><a href="../recruit/" title="recruit">recruit</a></td> <td background="../../images/6.jpg"> </td> </tr> <tr> <td background="../../images/7.jpg"> </td> <td background="../../images/8.jpg"> </td> <td class="link" id="nav_company"><a href="../company/outline.htm" title="company">company</a></td> <td background="../../images/9.jpg"> </td> <td background="../../images/10.jpg"> </td> <td class="link" id="nav_clients"><a href="../clients/clients.htm" title="clients">clients</a></td> <td background="../../images/11.jpg"> </td> <td background="../../images/12.jpg"> </td> <td class="link" id="nav_contacts"><a href="../contacts/contacts.htm" title="contacts">contacts</a></td> </tr> </table> </div> and here is the css: /* Regular menu items */ #nav_company {background: transparent url(../images/menu.jpg) 0 0 no-repeat;} #nav_about {background: transparent url(../images/menu.jpg) -71px 0 no-repeat;} #nav_clients {background: transparent url(../images/menu.jpg) -142px 0 no-repeat;} #nav_recruit {background: transparent url(../images/menu.jpg) -213px 0 no-repeat;} #nav_contacts {background: transparent url(../images/menu.jpg) -284px 0 no-repeat;} #nav_home {background: transparent url(../images/menu.jpg) -355px 0 no-repeat;} /* Hovered menu items */ #nav_company a:hover {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;} #nav_about a:hover {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;} #nav_clients a:hover {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;} #nav_recruit a:hover {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;} #nav_contacts a:hover {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;} #nav_home a:hover {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;} /* Active menu items */ body#company #nav_company {background: transparent url(../images/menu.jpg) 0 -62px no-repeat;} body#about #nav_about {background: transparent url(../images/menu.jpg) -71px -62px no-repeat;} body#clients #nav_clients {background: transparent url(../images/menu.jpg) -142px -62px no-repeat;} body#recruit #nav_recruit {background: transparent url(../images/menu.jpg) -213px -62px no-repeat;} body#contacts #nav_contacts {background: transparent url(../images/menu.jpg) -284px -62px no-repeat;} body#home #nav_home {background: transparent url(../images/menu.jpg) -355px -62px no-repeat;} I really need help... Thanks a lot!! Similar TutorialsHi all I'm just wondering if anyone can help me with a few corrections I need to make on a site I'm developing ? I've recently developed a site on Mac OS X and been viewing it using Firefox whilst working on it, the site should look like this : http://www.timetraveltours.net/firefox.jpg However when viewed in Safari I have found that there is a problem with the menu bar as seen here : http://www.timetraveltours.net/safari.jpg To add to that I have noticed that there is also a problem at the bottom of the page, as seen here : http://www.timetraveltours.net/explorer.jpg I'm guessing that I just have to change some of the positioning or something in the CSS but don't really want to it without some help/advice first incase I mess the whole thing up. The CSS code can be found here http://www.timetraveltours.net/base.css Other style sheets are : http://www.timetraveltours.net/ie5mac.css http://www.timetraveltours.net/ie5win.css http://www.timetraveltours.net/netscape.css http://www.timetraveltours.net/screen.css http://www.timetraveltours.net/style.css (if needed) I'm also wondering if these problems appear in 3 different browsers on a Mac what problems there are when viewed with various browsers on Windows and would very much appreciate anyone to beta test the site for me on the Windows platform. I hope that I have explained myself cleary and given the correct information ? Many thanks in advance The site can be found at : http://www.timetraveltours.net I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. Hello, this is my first in a hope to find the solution to a long standing problem i am having and doing google had not helped me for this. ** I am a novice in css **. I have tried many drop down css menus (with back ground image), but none is compatible with ie6, ie7, ie8, and firefox. Please let me know the best available *free* menu. Thanks, foka Hi I have been trying to get a cross browser Dropdown css menu to work on my site. I have got it working in Firefox and IE7. The problem is in IE6. The way the author set this up is there are two .css files, one is specific for IE6 and is called in a different manner, like this : Code: <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="css/dropdown_ie.css" /> <![endif]--> I dont think this is working for me. It is strange because the page that I get the files from has a demo of the menu and I tested it in FF, IE7, and IE6 and it worked. When I put it on my page it works everywhere but IE6. Am I calling the .css wrong? Here is my menu code: Code:
<div class="menu">
<ul>
<li><a class="hide" href="index.php">HOME</a>
<!--[if lte IE 6]>
<a href="index.php">HOME
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="company.php">COMPANY</a>
<!--[if lte IE 6]>
<a href="company.php">COMPANY
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="contact.php">CONTACT</a>
<!--[if lte IE 6]>
<a href="contact.php">CONTACT
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="consulting/consulting.php">CONSULTING</a>
<!--[if lte IE 6]>
<a href="consulting/consulting.php">CONSULTING
<table><tr><td>
<![endif]-->
<ul>
<li><a href="consulting/confined_space.php" title="Confined Spage Consulting">Confined Space</a></li>
<li><a href="consulting/emergency_planning.php" title="Emergency Planning Consulting">Emergency Planning</a></li>
<li><a href="consulting/regulatory_compliance.php" title="Regulatory Compliance Consulting">Reg. Compliance</a></li>
<li><a href="consulting/development.php" title="Program and Procedure Development Consulting">Procedure Dev.</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="training/training.php">TRAINING</a>
<!--[if lte IE 6]>
<a href="training/training.php">TRAINING
<table><tr><td>
<![endif]-->
<ul>
<li><a href="training/open.php" title="Open Schedule Training">Open Course</a></li>
<li><a href="training/rescue.php" title="Confined Space Training">Confined Space</a></li>
<li><a href="training/spill_response.php" title="Spill Response Training">Spill Response</a></li>
<li><a href="training/hazmat.php" title="Hazardous Materials Training">HazMat. Response</a></li>
<li><a href="training/im.php" title="Incident Management Training">Incident Management</a></li>
<li><a href="training/extinguisher.php" title="Fire Extinguisher Training">Fire Extinguisher</a></li>
<li><a href="training/cpr.php" title="First Aid and CPR Training">First Aid & CPR</a></li>
<li><a href="training/whmis.php" title="Workplace Hazardous Materials Information System">WHMIS</a></li>
<li><a href="training/dangerous_goods.php" title="Dangerous Goods Training">Dangerous Goods</a></li>
<li><a href="training/high_angle.php" title="High Angle Rescue Training">High Angle Rescue</a></li>
<li><a href="training/waste_management.php" title="Waste Management Training">Waste Management</a></li>
<li><a href="training/fall.php" title="Fall Protection Training">Fall Protection</a></li>
<li><a href="training/lockout.php" title="Lockout Training">Lockout</a></li>
<li><a href="training/air.php" title="Air Monitoring Training">Air Monitoring</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="response.php">RESPONSE</a>
<!--[if lte IE 6]>
<a href="response.php">RESPONSE
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="media/media.php">MEDIA</a>
<!--[if lte IE 6]>
<a href="media/media.php">MEDIA
<table><tr><td>
<![endif]-->
<ul>
<li><a href="media/news.php" title="Industry Related News">News Releases</a></li>
<li><a href="media/photos/photos.php" title="Standard Response Services in action">Photo's</a></li>
<li><a href="media/links.php" title="Helpfull Links">Links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
Menu I am using from the authors site.: http://www.cssplay.co.uk/menus/dd_valid.html Thanks for looking For my website at btccaction.co.uk I have chosen a CSS menu at the top as the ideal solution. However I'm having some problems positioning it so that the menu is in the same position in both Firefox and Internet explorer, and on various screen sizes. Does anyone have any tips for me here regarding positioning elements such as this so that they appear in the same position no matter what the operating system variables? For reference I'm using the code from he http://www.cssplay.co.uk/menus/ultimate.html Any help kindly appreciated. Andy I'm using The Man in Blue's "footerStickAlt" code to ensure a footer sticks at the bottom of the page even with *short* content. No problem there til I resize my browser window. When the browser window shortened and I scroll down, the footer has jumped up and is concealing part of the menu. Yikes. Pages where the content is longer than the menu are fine, so I haven't uploaded them. It's only when content is shorter than the menu that this issue arises ~ which is the exact issue it's supposed to be tackling! Flaw/s in the code? I've already tried ripping out the horizontal min-widths and it seems there's no conflict there. From what I can make out, it's just a matter between the menu and the footer.... altho, when the browser is shortened in the way I've described the actual footer moves higher than it should be. Still, can't believe it's blueman at fault here. Must be something I've missed or tagged wrong. Or maybe it just doesn't work with this kind of menu? For reference, Blue Man's original code is he http://themaninblue.com/writing/perspective/2005/08/29/ Am just hoping the clever folk here will have some advice. I've burnt the whole day on this to no avail :| hi im using a CSS drop down menu, when my browser is refreshed it becomes disabled/stopsworking. im using IE browser. i got the css drop down list script from the web. can someone help me please! Can it be done with just CSS? I have a table of data where the text in the data cells wraps and fills the td cell with several lines of text. This is OK when the browser window is a "normal" size, but if someone is viewing with a widescreen monitor I would like the table to get wider and make the cell contents not wrap the text. Or if they are viewing with a small monitor I want it to wrap even more (table would get smaller). Can this be done with CSS, or do I need to do something with javascript? Hiya, im trying to place a blog inside a table and also have a picture above the table and some links. In Mac Firefox and Camino it works perfectly. but in IE or Safari it just doesn't want to work. Please help Thanks guys Hello All, I am completely new to CSS but I really want to learn how to use it. I am making a website but the website displays differently on Explorer and on Mozilla, Explorer is 9 and Mozilla is 6.0.2. I dont know why this happens it shifts the entire site to the left in IE whereas in Mozilla it displays ok. Code: body {
background:#cfcfcf;
font-family: Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
line-height: 24px;
}
div#site_wrapper {
float:left;
margin:0px;
padding:0px;
width:100%;
}
hr.dist0 {
clear: both;
height: .1em;
margin: 0px;
padding: 0px;
visibility: hidden;
}
div#top_menu {
float:right;
margin: 1em auto;
width:100%;
height:90px;
}
div#top_menu a {
color: #660000;
}
div#page_wrapper {
float: left;
width: 100%;
background: url(../i/page_pack_wellness_style.png) repeat-y 0px 0px;
}
div#page {
margin: 1em auto;
width: 911px;
}
div#page_top {
float: left;
width: 100%;
height: 20px;
background: url(../i/page-top.png) no-repeat 0px 0px;
}
div#site_header {
float:left;
padding: 10px 10px 20px 20px;
}
I am also trying to find on the internet a good resource for beginners to learn css. Any help would be greatly appreciated. Hey, I got this simple code. In mozila firefox it looks good but in explorer appears a white area. that's not suppose to be there. please help me fix it! <html> <head> <style type="text/css"> body{ margin:0; padding:0; } div.header{ width:774px; border:1px solid; border-bottom:none; } div.main{ width:774px; border-left:1px solid; border-right:1px solid; } div.footer{ width:774px; border:1px solid; border-top:none; } </style> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <div class="header"><img src="images/bovenbalk3.gif" width="774"></div> <div class="main"></div> <div class="footer"><img src="images/onder.gif" width="774"></div> <body> </body> </html> Hi, I designing a webpage and realized that different browsers such as IE, Opera and FF interpret CSS differently. In order to ensure most of the browsers display the page in the same way, what should I do? Thank you. Okay, my layout is css, and the problem is with my footer, and bottom links. In mozilla, they look the way i want them to, but for IE, they are positioned too low, and the bottom links are unreadable. Take a look - www.funny-guys.com The Code: #bottomlinks { margin:0px 0px 20px 0px; padding:0px; font-size:10px; color:#999999; text-align:center; div#footer { margin: 0px 0px 12px 0px; font-size:60%; text-align:center; padding:0; } Thanks Hi all. I've designed http://www.battlefieldninjas.com in just about pure HTML. I've also linked it to an external CSS file http://www.battlefieldninjas.com/mystyle.css . The purpose is to align the text to the left edge of the graphics instead of the left edge of the website. So far the formatting works perfectly in Internet Explorer (I've used the latest edition, not the 7 beta to view), but when using FireFox. it places the text all the way to the left. Also, FireFox doesn't dispaly the cursors that I've used with this website as well, where Internet Explorer does. Have I formatted something wrong? Any help is appreciated. I have recently changed my web site from being totally formatted using tables to being CSS based. I am not an expert at CSS so I have probably got some pretty bad code, so I cower somewhat in asking for help. Please don't be upset with me. I have a problem with my web site displaying on IE 5.2 on a Mac OS X (10.3.6). I have no assess to this but a user has sent me a screen capture, and it doesn't seem to even be recognising the CSS. It displays okay on IE6 for Windows. My web site is at: http://www.elviscostello.info/ Your help would be greatly appreciated. Thanks a lot, JohnE I have some css problems displaying in Netscape & Mozilla Firebird browsers with a site I've built. The top menu and dropdowns aren't displaying correctly. There are also some spacing and alignment problems in the main body area and right column section. It seems to set up an invalid CSS style, but I'm not sure how to correct this for these browsers. I've made several attempts to no avail. I want to keep it working in IE. I've looked at some css hacks, but can't get it working with my style sheet and correct the Mozilla browser problem. Here is the link to the site: http://www.delfuegocompanies.com Any help is appreciated. Thank you. Regards, -D- http://www.testers.info/webdesign/viva/aktuelles/ Both boxes in the centre are placed inside a table cell and are positioned via a <div> Tag using "position:relative": Code: .parent {
left: auto;
top: auto;
position: relative;
}
basically everything works fine but when you're using Internet Explorer and resize the page vertically (horizontally works fine) the boxes behave like they're positioned static. What declarations do I need to write in my style sheet to make the boxes stay in their table cell? P.S.: I already searched the web for about 2 hours on this topic. I'm new to CSS layouts, and being a relic who was always happy using tables, it's causing me some headaches! My latest conundrum involves trying to align a row of text to the bottom of an otherwise empty div. Here is my attempt, using colors for illustration only. (This is of course only a simplified version of my design, so while the "outer" DIV might look superfluous it has to be there. In my real design it is wider and contains three DIVs side by side - "box3" being just one of them.) Code: <html>
<head>
<style type="text/css">
#outer {
position: absolute;
float: left;
width: 228px;
height: 196px;
margin-top: 0px;
}
#box3 {
float:left;
width:228px;
height:196px;
background-color: green;
text-align:right;
display: table;
#position: relative;
overflow: hidden;
font-weight:bold;
}
</style>
</head>
<body>
<div id="outer">
<div id="box3">
<div style=" #position: absolute; #top: 50%;display: table-cell; ">
<div style=" #position: relative; #top: -50%; background-color: yellow;">
<p style="bottom:0;right:0;position:absolute; background-color: red;">
some <i>text goes here</i>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
It looks fine in Firefox and Chrome, even if I don't quite understand why the text is elevated slightly from the bottom - that's okay. But in Internet Explorer, the text is nearer the top, and squashed to the right-hand side so that it's forced to wrap onto multiple lines. The forum won't let me post an image so see if you can decipher this URL: ht tp :// i49 .tiny pic. com /j8znti.png Can anyone help me adjust the code so that it displays in IE the same way as in Firefox and Chrome? I'd really like to understand why it's so different and how to prevent a similar problem in future. Many thanks! the site seems to work perfectly in IE. it gets garbled in netscape. i know its something to do with the box conventions and the way the browsers interpret margin/border/padding etc.. heres the link to my site http://ccc.1asphost.com/pacemakerproject/final%20website%20folder/index.htm is there an easy way to resolve this problem.. |
|||||||