|
CSS - Css Browser/menu Problem - Help Required
Hi 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 Similar Tutorialshi, 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!! Hi, I recently started migrating from a table layout to a css based one. I've probably made the classic mistake of using IE to develop only to find it looks awful in other browsers e.g. firefox. Being relativity new to CSS I've looked at various websites and if I understand the issue correctly some browsers like firefox adhere strictly to the CSS standard whereas IE doesn't. My question is would I be better developing separate CSS files for each browser type and use a script to determine which one? If anyone can point me at a resource that points out the differences between IE CSS standards and other browsers I'll be internally grateful. Regards Paul 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. 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 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 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! 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 :| 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> 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. 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. 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- 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. 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 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 My web page use some CSS syntax to control the color of hyperlinks, they are listed as below: Code:
.row1 {
background: #e7f6fe;
/*background: #e1f4ff;*/
}
.row1 td{
padding: 4px;
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
font-family: "Arial", "Helvetica", "sans-serif";
}
.row1 a:visited {
color: blue;
text-decoration: none;
}
-------------- My problem is, whatever the version of IE or other browsers, some users encountered the situation that when they clicked the hyperlink, the link becomes blue, but after closing the browser and restart IE again, some users will see the link color STILL IN BLUE, while some will see the link AS A NEW LINK WITH BLACK color again. My boss asks for the reason of this difference, in addition, he wants all users will see the link as new link again after they restart the IE. ------------- In my point of view, I think we can't set anything using program, javascript or css, it SHOULD BE DEPENDED on browser setting. Can anyone provide me some answers about this questions? Thx. hey all i have a prob....when the browser window is maximised it is fine...however...when i make it a bit smaller the content div shoots off halfway down the page Go Here To See What I Mean the css can be found here any ideas...cus im stumped thanks very much RF 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.. Is it possible to pickup a browser worm by visiting a .php webpage? The symptoms are that when I view htm pages from either of the 2 websites I work on - or I visit Microsoft website - the print is all tiny and screwed up. This happens whether I view the htm files on the web or located on any computer in my home/office network. If I view the same files from any other browser/computer - they are perfectly OK. So it's just this browser on this computer - which incidentally views any other website or file perfectly. The page I am suspicious of is http://www.w6dek.com/w6dek10.php. This link was sent to me as a location to do a link exchange. I was suspicious because the email had an attachment - one of those ATTxxxxx.txt types - so I suspected a virus and didn't open it. However, I checked out the http://www.w6dek.com homepage URL and it seemed like a legit site, so I was curious about that page and visited it thinking that just arriving at a php page would not activate anything. But then I got the problem. I've scanned with Norton 2005 with latest updates and got nothing, and I'm right up-to-date with windows security updates too. But I've still got this weird problem. I've also deleted all cached files and cookies etc.. Any ideas! I know there's a really good group in Switzerland that are all over this stuff, but I can't remember the address. Has anyone got a resource? Or an idea? |
|||||||