|
CSS - Firefox Menu Display Problem
Alrite,
I have a dropdown menu that is fully CSS driven. The menu works fine except that the dropdown links dont work in Firefox. Once clicked the menu goes to the main heading link for the dropdown menu, instead of the dropdowns item link. However if u right click on the link and say open in new window/tab it works fine. I have attached the files. Thanks a lot Nick Similar TutorialsHi, In Firefox an odd behaviour occurs when changing the selection in a selectbox. Changing the value in the selectbox makes the footer to disappear. CTRL+F or refresh lets the footer appear again. This behaviour doesnt occur in IE6. Anyone familiar with this behaviour of Firefox and has a solution? The page can be found at: http://users.castel.nl/~kampm01/test/select.html with regards, Marc I've been trying to scrap togther a website and I have buttons that when you rollover them a menu appears for it. It looks fine in IE but when i display it in mozilla it all goes to hell. Here is the link: http://bingweb.binghamton.edu/~theta/nu05/new/code1.html Thanks for the help -Stooge Here's a 1st for me. Got a problem in Firefox NOT in IE Sometimes my floated div displays under div next to it, instead of beside it. If I refresh, then it always will display correctly next to it. Realized this was a much bigger problem when I tested in Firefox on another computer and half the pages did it first time they loaded. Within my div container I have my div menu floated left with a width of 20%, then my div maincontent also floats left with a width of 78%. (I've verified there is 5-10px extra space. So the two are not stretching the entire width) Tried floating the #maincontent right, but then my footer completely screwed up and couldn't fix. Not sure what kinda change I might need to make. Any insights? Anyone else encounter this in Firefox? Thanks, James Hi, I have just redesigned http://www.harvardbarcourse.com using HTML/CSS and am having two very important Firefox compatibility problems. 1. The links on the left side of the page and in the page body are not clickable. I have no idea why and have tried everything to rearrange divs to no avail. My code looks valid and I'm not sure what Firefox is doing (it works in IE). 2. Not as important: the whole layout is left-aligned in Firefox (instead of centered like in IE). I used Dan Cederholm's tip for CSS certering (http://www.simplebits.com) but it seems not to have worked. Any ideas why? Any ideas you have would be greatly appreciated. Thanks! Kristopher hey, i have a page that includes several flash files.. since its a translation company i have made a page in Russian but the upper flash menu refuses to appear in firefox but displays in internet explorer.. other flash files appear.. and i don't know if its related but in order to make the Russian appear correctly i had to save the php page as utf-8 with no BOM... appreciate any help since i am clueless as to this weird problem here is the page address : bit.ly/4SqdNw sorry new in the forums could not link it but copy and pase Hola, I'm trying to add a menu I got from CSSplay to my site. It's displaying dot in the upper right of each li space in FF, but it's fine in IE. The original file is fine, of course, Anyone ever had this problem? brizfoto dot com slash test Hi can anyone see a problem with this code, it sits absolutly perfectly in internet explorer, but the menu jus doesn't sit correctly in firefox any help appreciated cheers boyindie here is my css Code: ul#navlist
{
width: 230px;
padding: 0px;
height:200px;
border-right: 1px solid #808080;
border-top: 0px;
margin: 0px;
font: bold 25px verdana,helvetica,arial,sans-serif;
background: #3300cc;
}
ul#navlist li
{
width: 230px;
list-style: none;
margin: 0px;
border-left:1px solid black;
border-top: 1px solid black;
}
ul#navlist li a
{
display: block;
width: 230px;
padding: 4px 8px 4px 8px;
border: 1px;
border-left: 20px solid #330099;
background: #CCFFCC;
text-decoration: none;
text-align: right;
}
ul#navlist li a:link { color: #666677; }
div#navcontainer li a:visited { color: #666677; }
ul#navlist li a:hover{
border-color:#CCFFCC;
color:black;
background: #330099;}
Code:
body{
background-color:#C0C0C0;
color:Black ;
font:oblique 17px verdana,arial,sans-serif,impact;
}
h1{
color:Black ;
font:oblique 50px verdana,arial,sans-serif,impact;
}
div#content
{
width:770px;
background-color:white;
border-width:medium;
border-color:blue;
border-style:solid;
margin-left: 270px;
margin-right:190px;
padding-right:9px;
margin-top:0;
}
div#content h2
{
font: oblique 25px verdana;
color: black;
font-weight: normal;
}
div#content p
{
color:black;
margin: 0;
font:oblique 50% verdana,helvetica,arial,sans-serif,times-new-roman,impact;
;
}
div#content { line-height: 150%; }
#cleardiv
{
clear: both;
height: 1em;
}
div#footer ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
div#footer li
{
display: inline;
margin-right: 1em;
}
div#leftframe
{
left: 9px;
top: 130px;
height: 590px;
width:220px;
background-color:#3300cc;
}
div#topframe{
width: 1186px;
height: 120px;
background-color:#3300CC;
}
div#pageName{
background-color:#3300cc;
height: 11px;
width:60px ;
margin-left: 1000px;
margin-top:-90px
}
div#headImage{
width: 659px;
height:115px;
border-width:medium;
border-color:black;
border-style:solid;
background-color:white;
}
and my html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FTP Computing Limited</title>
<link rel="stylesheet" type="text/css" href="css/main.css" title="style1">
<link rel="stylesheet" type="text/css" href="css/menu.css" >
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<!--TOP FRAME CODE-->
<div id="topframe" >
<div id="headimage" style="" ><img src="header.jpg" alt="head banner" style="width: 494px; height: 120px" /> </div>
<div id = "pageName"><h1>home</h1>
</div>
</div>
<!--TOP FRAME CODE-->
<!-- LEFT FRAME CODE-->
<div id="leftframe" style="width: 266px" >
<div id="navcontainer"><br/><br/>
<!--Navigation menu code-->
<ul id="navlist" style="height: 263px" >
<li><a href="/index.htm" style="width: 230px">Home</a></li>
<li><a href="/background.htm" style="width: 230px">Background</a></li>
<li><a href="/develop.htm" style="width: 230px">Development</a></li>
<li><a href="/clients.htm" style="width: 230px">Clients</a></li>
<li><a href="/clients.htm" style="width: 230px; height: 28px;" id="A1" onclick="return A1_onclick()">CV</a></li>
<li><a href="/contact.htm" style="width: 230px">Contact Us</a></li>
</ul>
</div>
</div>
<div id="content" style="margin-top:-555 ">
<h1>WELCOME</h1>
<h2>this is the home of FTP Computing Limited</h2>
<br/><br/><br/><br/><br/>
</div>
<!-- LEFT FRAME CODE-->
<!--MAIN BODY OF PAGE-->
<!--MAIN BODY OF PAGE-->
</body>
</html>
Hello, I have a problem to display a List/Menu in IE. It cut off the text in the drop down list when I set the WIDTH of the drop down box shorter than the text. It works fine in FireFox. Here is the picture I captured to demonstrate what I'm talking about. Sorry the forum don't allow me to post url, please copy the link and paste it in your browser linklighthouse.com/dropdown_ie.html How do I fix this problem in IE? Please help! Thanks HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox. So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative. URL But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this. URL I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help! Advance thanks for those who read this! Hopefully someone can help me out with this! EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean. CSS CODE: Code: * {
margin:0;
padding:0;
}
#nav {
list-style:none;
position:relative;
}
#nav li {
float:left;
text-align:center;
}
#nav a {
display:block;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
background:#254563;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:0px;
}
#nav ul {
position:absolute;
left:-999em;
list-style:none;
padding:0 0 0;
width: 500px;
}
#nav ul li {
width: auto;
margin: 3px 3px 0 0px;
}
#nav ul a {
font-size: 12px;
height: auto;
padding: 5px 10px;
background: #dfeec9;
border-radius: 8px;
-moz-border-radius: 8px;
width: auto;
}
#nav li:active ul, #nav li:hover ul {
height: 30px;
left: 10px;
position: relative;
padding: 0px 3px 5px 3px;
background: none;
width: 500px;
}
.navi01 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 33px;
height: 44px;
text-decoration: none;
background: url(images/navi_01.png);
}
.navi02 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 133px;
height: 44px;
text-decoration: none;
background: url(images/navi_02.png);
}
.navi03 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 86px;
height: 44px;
text-decoration: none;
background: url(images/navi_03.png);
}
.navi04 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 83px;
height: 44px;
text-decoration: none;
background: url(images/navi_04.png);
}
.navi05 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 92px;
height: 44px;
text-decoration: none;
background: url(images/navi_05.png);
}
.navi06 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 82px;
height: 44px;
text-decoration: none;
background: url(images/navi_06.png);
}
.navi07 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 30px;
height: 44px;
text-decoration: none;
background: url(images/navi_07.png);
}
HTML NAV CODE: Code: <ul id="nav"> <li><span class="navi01"> </span></li> <li><a href="originalart/gallery.php"><span class="navi02"> </span></a> <ul> <li><a href="originalart/gallery.php">Original Art</a></li> <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> <li><a href="commissions/gallery_commissions.php">Commissions</a></li> <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> </ul> </li> <li><a href=""><span class="navi03"> </span></a> <ul> <li><a href="info.php">Info</a></li> <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> </ul> </li> <li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04"> </span></a></li> <li><a href="http://blog.luisarafidi.com/"><span class="navi05"> </span></a> <ul> <li><a href="#">Old Artwork</a></li> <li><a href="#">More</a></li> </ul> </li> <li><a href=""><span class="navi06"> </span></a></li> <li><span class="navi07"> </span></li> </ul> Hello ppl, I have a problem about 6 div's which are displayed inline. Everything is OK in Opera and IE but in firefox everything is wrong .. all the divs are almoust in the same place , one over another here is the link http://www.immo-land.ro/test/div-inline.html and below is the code which I wrote for every DIV Code: <div style="border: 1px solid #c5732a; width: 164px; height: 150px; padding: 95 0 0 0; margin: 3px 3px 3px 3px; display: inline; background-image: url(../images/immo-land-apartamente-garsoniere.jpg); background-repeat: no-repeat"> <a href="http://localhost/immoland/vanzare-apartamente.php" style="background: #C5732A; width: 100%;">Apartamente</a> <br> Text here </div> any ideea why is all that mess in firefox ? 10x in advance See ya all Hi, I'm having a problem with FF & scrollbar when I center my page. When the page is smaller then the window, the scrollbar in FF is complete hiden, not disabled like in IE. Let's say I have two pages, page1 don't need scrolling and page2 does. So, when I jump from page1 (no scrolling) to page2 (scrolling) my page will shift to the left when the scrollbar apears. Is there a way to always display the scrollbar like in IE --- display but disable, when need it enable. Thank you! Hi guys, Please help. Im very confused as to why setting display:inline in my CSS is giving me grief with text "breaking out" of the list element in FireFox???. If I give the li element a background colour clearly I can see that the text is outside the boundaries of the li element. However, if I used display:block and float:left the li item ecompasses the text just fine. My CSS is below. Thankyou in advance Code:
#navcontainer {
margin-left: 30px;
}
#navlist{
list-style: none;
padding: 0;
margin: 0;
}
#navlist li {
display: inline;
border-right: 1px solid #000;
padding: 0 0.4em 0 0.4em;
margin: 0 0.4em 0 -0.4em;
}
/*Win IE browsers - hide from Mac IE\*/
* html #navlist li
{
display: block;
float: left;
}
#navlist li a{
font-family: Garamond, "Garamond-Normal", Georgia, "Times New Roman", Times, serif;
font-size: 200%; /* set the font size for p, scaled from the body declaration */
text-decoration:none;
}
#navlist a:link, #navlist a:visited{
color: #666;
} /* unvisited link */
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
color: #000;
}
Sorry for the "general" title but I don't know what is causing my problems, so it is hard to be specific... I am working on a web application for my summer research project, but I am not very knowledgeable in CSS. For the most part I am able to solve my problems except for the following: Issue 1: Profile Display Issue 1 CSS file The copyright at the bottom. Firefox displays correctly. Explorer displays too much white space above the copyright text. Issue 2 *IMPORTANT*: Profile Display (with missing fields) Issue 2 CSS file The text in the SME Profile does not display correctly when some of the fields are left blank (Issue 1 link shows a full profile). I'm trying to avoid using tables as it would cause some major setbacks in my work. FYI, the pages are dynamically generated so links will not work. Any suggestions? Hello.. I've been working on this site for my Daughter using Wordpress, I've mashed about the CSS, Modding a template for the desired look for the site. I've tied validating it and it brings up a couple of strange comments about the </body> and </html> closing tags, I presume this is why IE7 is having problems displaying the page. Firefox doesn't seem to have an issue at all. I was hoping somebody could take a look at the source with a fresh set of eyes and let me know what is wrong, I've spent hours working on this and can't see it for the life of me. I'm sure it's something simple, I know I had an issue one time where a <P> tag wasn't closed and stopped the whole site being displayed... thanks. blog.mirana[dot]co[dot]uk Hello, I use the following css code to define the style of some tables. However in Firefox it shows it how i want it, but in IE it doesnt display the borders. (not around the rows of the table). Code: table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
}
.darkRow td{
background-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow td{
background-color: #BFACBF;
color: #4D3D4D;
padding-left: 4px;
}
I create the tables something like this: Code: <table class="listings"> <tr class="darkRow"><td>bla</td></tr> <tr class="lightRow"><td>bla</td></tr> </table> Why does it display so much different in those 2 browsers? My special font displays correctly in all browsers except the new firefox. It even worked in the older firefox before the new update. I am not sure why this is happening or how to fix it. Here is the code in the html page: Code: <head>
<style type="text/css">
@font-face {
font-family: English;
font-weight: normal;
src: url(fonts/English_.ttf);
}
</style>
</head>
<div class="content">
<h1> Beckin Designs</h1>
Here is the CSS rules in my external CSS sheet: Code: .content h1 {
font-family: "English", sans-serif;
font-size: 52px;
font-style: normal;
/* [disabled]text-transform: uppercase; */
color: #F7F7F7;
text-decoration: none;
width: 930px;
text-align: center;
margin: -10px 0 5px 0;
padding: 0;
}
Thanks! I've been working some more on a new layout for one of my websites this weekend. However, I'm having trouble getting the layout to display the same in all browsers. Everything is looking exactly how I hoped in Firefox, but when the same page is viewed in Internet Explorer, some things appear rather differently. Sample Page: http://www.mybb-emods.com/new/index.htm CSS File: http://www.mybb-emods.com/new/stylesheet.css Firstly, the background of the navigation bar at the top of the page should remain grey at all times apart from when a link is hovered, in which case it changes to blue. This is happening in both browsers, but in Internet explorer, only part of the background is changing as opposed to all of it. It's easier to show this than to explain, so I've posted two screenshots below to demonstrate. The first screenshot shows the navigation bar in Firefox, the second shows the same bar in Internet Explorer. I'm assuming this is probably something to do with the padding values I have assigned, but I have been unable to find a working solution for all browsers. Also, I'm having a problem with the left margin of my main page content. The margins down the left side of the main page should all be 20px from the left hand border, and this shows correctly again in Firefox. However, in Internet Explorer, the left margin of the navigation bar appears correctly, but the content beneath it appears to have a much larger margin and as such the layout appears incorrectly. If anyone has any idea how to fix these problems then I would very much appreciate the advice. Thanks. Hi, can anybody help me stretch green buttons for Firefox just like they appear in IE? I'd greatly appreciate the help. Please see the attached html. Is there any way to display a style seperately for Firefox than for any other browser? Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it. I hate css http://www.mgan.net/work/10-06-04/layout1.html There is the link, I have my styles in the header section of the html file. |
|||||||