|
HTML - Firefox: Menu Appearing Behind Site Content
http://www.immc.ca/index.php?option=...d=24&Itemid=47
When you scroll over the drop down menu items, they appear behind the canada map flash piece. On other pages of the site, the menu appears correctly, in front of the site content. This is only happening in Firefox. Similar TutorialsHi, My textbox does not show flashing cursor in Firefox but cursors are properly displayed in Ie. Googled found a bug in firefox (textbox + ucrser). Not able to find the workarround. Please help. Thanks with regards Not sure where to put this.. Is it possible to include off-site content [Content from other websites] into your own page and style it accustomed to your page? For Example: If Website A has a table of data, could I somehow grab that data and include it in my site, but then have it altered according to my CSS to look how i want? Hi, My client needs an html website. It has to be easy to edit the text later on his own when the site is done. How would you suggest I build it? (I am familiar with dreamweaver for html) It will also have some flash content. (flash content need not to be editable, only stable so it doesn't change position from page to page. menu will be in flash) Is joomla any good for my client? how should I do it? Thanks a lot for your advice, js. My web site looks the way it's suppost to in IE, but not in FireFox. Could someone take a look with fresh eyes and let me know what needs to be fixed. I am using an external Style Sheet. Wrathchid Productions Code: /** Tempalte 20 **/
body {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 10px;
text-align: center;
}
html, body, #wrapper, h1, #nav, #nav li {
margin: 0;
padding: 0;
list-style: none;
}
th, td {
font-size: 10px;
}
img { border: 0; }
#wrapper {
margin: auto;
text-align: left;
width: 750px;
position: relative;
}
h1, h2, h3 {
font-size: 10px;
}
h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0 0 0 0;
padding: 0;
}
h3 {
margin: 4px 0 0 0;
padding: 0 0 0 0;
}
p {
margin: 1em 0;
padding: 0;
}
.block {
display: block;
}
.clear {
clear: both;
height: 1px;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
line-height: 1px;
}
.left {
float: left;
margin: 1px 8px 0px 0px;
}
.right {
float: right;
margin: 1px 0px 0px 8px;
}
.softright {
text-align: right;
}
.readmore {
text-align: right;
padding-right: 1em;
}
/* ***** */
body {
background: #4A4A4A;
color: #fff;
padding-bottom: 30px;
}
a {
color: #ADADAC;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #fff;
}
.divider {
clear: both;
}
.divider hr {
display: none;
}
#wrapper {
width: 684px;
background: #5A5959 url(images/body_bg.gif) repeat-y;
border-bottom: 1px solid #898888;
}
/* header */
#header {
background: url(images/header_bg.jpg) repeat-x;
position: relative;
margin-right: 1px;
height: 256px;
}
#header h1 {
position: absolute;
top: 24px; left: 0px;
}
#header a {
color: #EADD13;
}
#header a:hover {
color: #FFF;
}
#header #girl {
position: absolute;
top: 0px; left: 300px;
width: px;
background: url(images/header_cap.gif) top right no-repeat;
}
#header form {
position: absolute;
top: 224px; left: 10px;
margin: 0;
padding: 0;
color: #B3B1B1;
font-style: italic;
}
#header form .text {
background: #7B7B7B;
color: #FDFB30;
width: 122px;
border-top: 1px solid #1C1C1C;
border-right: 1px solid #979797;
border-bottom: 1px solid #B3B3B3;
border-left: 1px solid #3F3F3F;
}
#header form .submit {
background: #5A5959;
color: #FDFB30;
border: none;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 3px;
}
* html #header form .submit {
padding: 0 3px;
padd\ing: 3px;
}
#header #signup {
position: absolute;
top: 218px; right: 0px;
width: 20em;
padding: 13px 20px 0 0;
text-align: right;
background: url(images/header_divider.gif) top right no-repeat;
}
/* nav */
#nav {
position: absolute;
top: 98px; left: 41px;
width: 171px; height: 88px;
}
#nav li {
background: url(images/arrow.gif) left center no-repeat;
width: 183px; height: 16px;
margin-bottom: 2px;
padding-left: 18px;
float: left;
}
* html #nav li {
width: 210px;
w\idth: 183px;
}
#nav a {
display: block;
width: 100%;
padding-top: 2px;
font-weight: normal;
}
#nav a:hover {
color: #fff;
}
/* body */
#body {
margin: 0px 10px 10px 10px;
background: #313131 url(images/divider_v.gif) 417px 0px repeat-y;
}
#body h2 {
font-weight: normal;
color: #FDFB30;
line-height: 21px;
margin: 0 -4px 0 -4px;
background: url(images/title_bg.gif) repeat-x;
}
#body h2 span {
display: block;
background: url(images/title_bullet.gif) top left no-repeat;
}
#body h2 span span {
padding-left:41px;
padding-bottom: 6px;
background: url(images/title_cap.gif) top right no-repeat;
}
#body #left {
float: left;
width: 417px;
}
* html #body #left .left {
margin-top: 12px;
}
#body #left .divider {
margin: 0 6px 15px 6px;
border-bottom: 1px solid #464646;
height: 10px;
}
#body #right {
float: right;
width: 236px;
}
#body #right p {
margin-top: 0.5em;
}
#body #right .divider {
background: url(images/divider_h.gif) repeat-x;
height: 9px;
}
#body .i {
padding: 0px 15px 15px 15px;
line-height: 1.3;
}
#body .j {
padding: 0px 10px 5px 5px;
}
#body .k {
padding: 0px 8px;
}
* html #right .readmore {
margin-bottom: 0;
}
/* right */
#outside {
margin-top: 6px;
margin-left: 10px;
position: relative;
}
ul.central li, ul.central {
text-align: center;
list-style: none;
padding: 0 0 2px 0;
margin: 0;
}
#right .k p {
margin-bottom: 0.2em;
}
#right a {
color: #F4CC0F;
font-weight: normal;
}
#right a:hover {
color: #fff;
}
/* footer */
#footer {
margin-top: 15px;
text-align: center;
}
#footer, #footer a {
font-weight: normal;
color: #F4CC0F;
}
#footer a {
text-decoration: underline;
}
#footer a:hover {
color: #fff;
}
Why is it that this site looks good in most browsers but not Firefox? 'div id=search' and 'div id=mainnav' are not inline with the rest of the site (they are 10px to low). You could add HTML Code: div#search, div#mainnav { margin-top: -10px; }
to a Firefox only CSS file or something. I don't think no-one else could do what I just (or a better job for that matter). I just thought I would tell you guys. Hi friends, I have just "finished" creating http://www.ambertower.co.uk which seems to be up and running just fine in internet explorer. However, when I test the site in firefox it is all going very wrong. Can someone please have a look at the site's HTML for me and let me know where I am going wrong. Thanks very much for your help!! Code: <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<style>
<!--
/* Style Definitions */
div.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
li.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
p.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
ol
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
ul
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
@page
{mso-hyphenate:auto;}
--></style>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Announcements</title>
</head>
<body border="0" width="100%" height="912" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" bgcolor="#0000FF">
<tr>
<td colspan="3" height="184">
<table border="0" width="85%" cellpadding="0" height="665" cellspacing="0">
<tr>
<td height="144" width="98%" colspan="3" align="center" bgcolor="#0000FF">
<img border="0" src="images/BannerGMSN.jpg" width="100%" height="144"></td>
</tr>
<tr>
<td height="36" colspan="3" align="center" bordercolor="#FFFFFF">
<p align="center">
<font face="arial" color="#FFFFFF" size="4">
<b><a href="index.htm" style="text-decoration: none">Home</a>
<a href="Announcements.htm" style="text-decoration: none">
Announcements</a>
<a href="Athletics&Activities.htm" style="text-decoration: none">
Athletics & Activities</a>
<a href="GMSN_Information.htm" style="text-decoration: none">
GMSN Information</a>
<a href="https://www.geneva304.org/departments/curriculum_instruction/frameworksformiddleschool.asp" style="text-decoration: none">
Curriculum</a></b> </font></td>
</tr>
<tr>
<td width="16%" bgcolor="#FFFFFF" align="left" bordercolor="#FFFFFF" valign="top">
<!--[if pub]><xml>
<b:ColorScheme type="OplSccm" oty="92" oh="279">
<b:Rgecp type="OplEcp" priv="214">
<b:OplEcp type="OplEcp" priv="411">
</b:OplEcp></b:Rgecp></b:ColorScheme><![if pub11]><xml>
<b:Page type="OplPd" oty="67" oh="265">
<b:PtlvOrigin type="OplPt" priv="511">
<b:Xl>22860000</b:Xl>
<b:Yl>22860000</b:Yl>
</b:PtlvOrigin>
<b:Oid priv="605">(`@`````````</b:Oid>
<b:OhoplWebPageProps priv="90E">266</b:OhoplWebPageProps>
<b:OhpdMaster priv="D0D">263</b:OhpdMaster>
<b:PgtType priv="1004">5</b:PgtType>
<b:PtlvOriginEx type="OplPt" priv="1111">
<b:Xl>110185200</b:Xl>
<b:Yl>110185200</b:Yl>
</b:PtlvOriginEx>
</b:Page>
</xml><style><!--
/* Style Definitions */
div.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
li.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
p.MsoNormal
{mso-style-parent:"";
margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
}
ol
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
ul
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
@page
{mso-hyphenate:auto;}
--></style> <![if pub11]><img border="0" src="images/viking.jpg" width="116" height="142"><br>
<font color="#FFFFFF" face="Arial">
<span style="font-weight: 700; background-color: #FFFFFF">
</span>
</font><br>
</td>
<td width="56%" bgcolor="#FFFFFF" align="left" bordercolor="#FFFFFF" rowspan="2" valign="top">
<p style="margin-top: 0; margin-bottom: 0"><br>
<span style="font-weight: 700">
<font face="Arial" color="#0000FF" size="6">Announcements</font></span></td>
<td width="28%" bgcolor="#FFFFFF" align="center" bordercolor="#FFFFFF" rowspan="2" valign="top">
<p> </td>
</tr>
<tr>
<td width="16%" bgcolor="#FFFFFF" align="left" bordercolor="#FFFFFF" valign="top" height="348">
<div style="position: absolute; top: 591px; left: 41px; width: 104px; height: 101px; z-index: 1">
<p style="line-height: 150%; margin-top: 6px; margin-bottom: 6px"> <a href="http://www.geneva304.org/">
<img border="0" src="images/Announ1.jpg" width="104" height="101"></a></div>
</td>
</tr>
</table>
</body>
</html>
Alright. Hpefully you all will be able to give me a helping hand. My site is located at http://www.eternalhogwarts.com If you have an older version of I.E look at it. It looks fine. However when you view it with Firefox and IE 7.0 it looks really strange and I really don't know what to do. Please help!!! Hi everybody, For some reason, my site sucks in IE but it's good in FireFox. When I view it in IE, the tables are all out of wack, and it doesn't look right, but it looks fine in firefox. The site is http://74.53.110.194/~redstar5/ thanks for your help, treadstar When I start adding the content to my website, it pops up on top of the menu and the logo in the top of the page? Do you know what I can do to get it under the menu? Here is my HTML and CSS Code HTML Code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset-UTF-8" /> <title>Andersen Undercover Records</title> <link rel="stylesheet" type="text/css" href="page.css" /> </head> <body> <ul id="nav"> <TABLE BORDER=0 BORDERCOLOR=black width="700"> <TR><td> <li><a href="#">HOME</a></li></td> <td><li><a href="#">ARTISTS</a></li></td> <td><li><a href="#">MUSIC</a></li></td> <td><li><a href="#">NEWS</a></li></td> <td><li><a href="#">VIDEOS</a></li></td> <td><li><a href="#">PHOTOS</a></li></td> <td><li><a href="#">ABOUT</a></li></td> <td><li><a href="#">CONTACT</a></li></td> </tr> </ul> <div id="content"> </body> </html> CSS CODE Code: * {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(images/background.png) repeat-x top
}
li {
font-size: 1.2em;
}
p {
font-size: 1.0em;
line-height: 1.4em;
margin-bottom: 0.8em;
}
ul#nav {
height: 290px; width: 894px;
margin: 0 auto;
background: url(images/logo.png) no-repeat;
list-style: none;
}
ul#nav li a {
display: block;
margin-top: 298px;
float: left;
width: 50px;
margin-left: 52px;
color: grey;
font-weight: bold;
text-decoration: none;
padding-top: 2px;
}
ul#nav li a:hover, ul#nav li a:active {
color: white;
div#content {
padding-bottom: 50px;
float:left;
}
div#footer {
background: url(images/)
color: white;
padding: 10px 0 10px 0;
text-transform: uppercase;
border-top: 0px solid black;
text-align: center;
}
This is my site: http://theodyssey.in/thedeck/gallery.html How come, when i open it in IE 6+ the whole layout is fine. But when I try and view the site in Firefox, the whole content of the page is shifted down? I don't know what is going on. Any help appreciated in advance, Thanks, Akshay I don't understand why this is rendering differently. It looks perfect in Firefox but when I switch to IE it is all screwed up. http://www.rosamondgroup.com XHTML: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta> <title>Rosamond Appraisal Group </title> <link href="style.css" rel="stylesheet" type="text/css"></link> </head> <body> <div id="logo"> <span class="style1"> <img src="images/raplogo.png" alt=""></img> </span> </div> <div id="complete"> <div id="main"> <div id="header"> <span class="style1"> About Us</span> </div> <div> <img src="images/content-box_04-215.jpg" alt=""></img> </div> <div id="content"> Jimmy Rosamond<br/> Louisiana State Certified General<br/> Real Estate Appraiser #G0655<br/> JimmyR@RosamondGroup.com</div> <div> <img src="images/content-box_07-215.jpg" alt=""></img> </div> </div> <div id="main2"> <div id="header2"> <span class="style1"> Contact Information</span> </div> <div> <img src="images/content-box_04.jpg" alt=""></img> </div> <div id="content2"> 434 Glendale Drive<br/> Metairie, La 70001<br/> (504) 831-7903<br/> (504) 831-8938 (FAX) </div> <div> <img src="images/content-box_07.jpg" alt=""></img></div> </div> </div> <div id="valid"> <a href="http://validator.w3.org/check?uri=referer"><img class="img" src="images/valid-xhtml10.png" alt="" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img class="img" src="images/vcss.png" alt="" /></a> </div> </body> </html> CSS: Quote: /* CSS Document */ #logo { margin-left:10%; margin-right:10%; margin-top:10%; text-align:center; } #complete { margin-top:5%; margin-left:10%; margin-right:10%; } #main { width:215px; border:1px solid #000000; float:left; margin-left:20%; } #header { width:215px; height:22px; background-image:url(images/content-box_02.jpg); background-repeat:repeat-x; } #content { height:80px; background-image:url(images/content-box_05-215.jpg); background-repeat:repeat-y; font-size:11px; } .style1 { font-family:"Century Gothic"; font-size:12px; color:#FFFFFF; background-color:inherit; } #main2 { width:200px; border:1px solid #000000; float:right; margin-right:20%; } #header2 { width:200px; height:22px; background-image:url(images/content-box_02.jpg); background-repeat:repeat-x; } #content2 { height:80px; background-image:url(images/content-box_05.jpg); background-repeat:repeat-y; font-size:11px; } #valid { position:absolute; left:80%; top:92%; } .img { border:0px; } I've also included screenshots of both renders. Firefox: http://flickr.com/photos/boryenka/2559461808/ IE: http://flickr.com/photos/boryenka/2558636987/ I've just used adobe browser lab to look at my website in windows browsers and it looks awful and I have no idea why. All my floats seem to have collapsed. Can anyone point me as to what I may have done wrong? Here is my website Google chrome, IE 7 and 8, and i think Opera all load the images fine. but Firefox (latest version) just does not load all of them. I refresh the page and it loads the ones that did not load before but still has some unloaded. Can some one please explain to me or help me on this? i have been pulling my hair out Thanks for help people, photos should be below. The first one is the Firefox one. Also here is a link to the page: http://www.dubbest.com/index%20MAIN.htm http://www.ptacnik.com/index102.html When previewing through Dreamweaver in ANY of these 3 browsers it looks fine. (from my local drive) But once online it only loads in Firefox. Is there something fishy with the frames perhaps? missing an XML doc on my end? I can't figure out what is causing this. Any help would be very much appreciated. http://www.ptacnik.com/nav1.html is the top frame and the list below are the frames loaded under nav1. http://ptacnik.com/about101.html http://ptacnik.com/design.html http://ptacnik.com/illustration.html in html, aside from using a table with 1 row and 2 cells..... what is the best way of designing a page where we have a menu system/navbar on the left, and the main content on the right of it? I'm having trouble with my menu. the content displays properly when the menu drop-down boxes are not activated, but shifts to accomodate the boxes when they are activated (by rollover). I want the menu boxes to drop down OVER the content, not shift it out of the way. How do I accomplish this? Here is the page: http://antiqueatlantic.com/oceaniana...togallery.html Hi, I ran a code validation on my site (www.improvizations.com), it came back with 11 errors. Many of them look like this: Line 9, Column 31: there is no attribute "leftmargin". <body topmargin="0" leftmargin="0" marginwidth="0" rightmargin ="0" marginheight and this: Line 15, Column 43: required attribute "alt" not specified. <div id="logo"><img src="images\logo.gif" /></div> How do I fix this? Also, my site looks fine in IE but awful in Firefox. What's going on? Any help would be greatly appriciated. I'm a newbie with all of this. Thanks!! On my website I am trying to make a drop down menu change a script below it. If you go to http://www.breezybucks.com/article/newtemplate and click on "Custom Order Prizes" on the left you should see a drop down menu and an amazon flash file below it. I want it to be so that when you change from "Video Games" to "Electronics", it will load another flash file (from an already made amazon script). Here is my script right now... Quote: <select NAME="amazon"> <option>Video Games</option> <option>Electronics</option> <option>Books</option> </select> <Amazon Flash Script> <2nd Amazon Flash Script> Any idea how to do this? I have a horizontal bar image that has been sliced so it is an iframe. The iframe's source is links.htm (as the horizontal bar is a link bar) so that I can change my site's main links if I have to. Anyways, the problem is this, my link bar looks perfect in firefox but as soon as I view the site in explorer the text doesn't fit in the iframe and there are arrows as if you have to scroll down to view the text. Here is an image of what I mean: Let me know if I should add information. |
|||||||